前端代码

js/main.js

@@ -0,0 +1,187 @@
+$(function () {
+    $.ajax({
+        url: "http://192.168.1.192:8085/dogs/pet",
+        type: "GET",
+        success: function (dogs) {
+            const $slider = $('#sliderContainer');
+            const slideWidth = 270;
+            const centerOffset = 1;
+
+            
+            preloadImages(dogs.map(d => d.image), () => {
+                // $('#sliderContainer').html(dogs.map(createSlideHTML).join(''));
+                const slidesHTML = generateCarouselHTML(dogs);
+                $slider.html(slidesHTML);
+
+
+                // const totalSlides = slides.length;
+                // $slider.html(slidesHTML);
+                const totalSlides = dogs.length + 2;
+
+                let currentIndex = 1;
+
+                animateTo(currentIndex);
+
+                $('.right-btn').on('click', function () {
+                    if ($slider.is(':animated')) return;
+                
+                    currentIndex++;
+                    animateTo(currentIndex);
+                
+                    if (currentIndex === totalSlides - 1) {
+                        // animateTo(currentIndex);
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                currentIndex = 1;
+                                jumpTo(currentIndex);
+                            });
+                        });
+                    }
+                    
+                });
+                
+
+                $('.left-btn').on('click', function () {
+                    if ($slider.is(':animated')) return;
+                
+                    currentIndex--;
+                    animateTo(currentIndex);
+                
+
+
+                    if (currentIndex === 0) {
+                        // animateTo(currentIndex);
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                currentIndex = totalSlides - 2;
+                                jumpTo(currentIndex);
+                            });
+                        });
+                    }
+                    
+                });
+                
+            });
+
+            
+            $('#uploadBtn').on('click', function () {
+                const fileInput = $('#fileInput')[0];
+                const file = fileInput.files[0];
+                if (!file) {
+                    $('#uploadResult').html('ファイルを選択してください');
+                    return;
+                }
+
+                const formData = new FormData();
+                formData.append('file', file);
+
+                $.ajax({
+                    url: 'http://localhost:8080/upload',
+                    type: 'POST',
+                    data: formData,
+                    processData: false,
+                    contentType: false,
+                    success: function () {
+                        $('#uploadResult').html('成功！');
+                    },
+                    error: function () {
+                        $('#uploadResult').html('やり直してください！');
+                    }
+                });
+            });
+
+
+            $('#downloadBtn').on('click', function () {
+                const fileUrl = 'http://localhost:8080/download-image';
+                const a = document.createElement('a');
+                a.href = fileUrl;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+            });
+            
+            
+            
+            
+
+            
+            function preloadImages(urls, callback) {
+                let loaded = 0;
+                urls.forEach(src => {
+                    const img = new Image();
+                    img.onload = () => {
+                        loaded++;
+                        if (loaded === urls.length) callback();
+                    };
+                    img.src = src;
+                });
+            }
+
+            function createSlideHTML(dog) {
+                return `
+                    <div class="slide">
+                        <div class="card flip-card">
+                            <div class="flip-inner">
+                                <div class="flip-front">
+                                    <img src="${dog.image}" alt="${dog.name}" />
+                                </div>
+                                <div class="flip-back d-flex flex-column justify-content-center align-items-center text-white p-3">
+                                    <h4>${dog.name}</h4>
+                                    <p class="text-center">${dog.description}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
+
+            function generateCarouselHTML(dogList) {
+                
+                if (!dogList || dogList.length === 0) return '';
+
+                const redundantList = [
+                    dogList[dogList.length - 1],
+                    ...dogList,
+                    dogList[0]
+                ];
+
+                return redundantList.map(createSlideHTML).join('');
+            }
+
+
+
+
+            function animateTo(index) {
+                const offset = slideWidth * (index - centerOffset);
+                $slider.css({
+                    transform: `translateX(-${offset}px)`,
+                    transition: 'transform 0.5s ease'
+                });
+                updateScale(index);
+            }
+
+            function jumpTo(index) {
+                const offset = slideWidth * (index - centerOffset);
+                $slider.css({
+                    transition: 'none',
+                    transform: `translateX(-${offset}px)`
+                });
+                updateScale(index);
+            }
+
+            function updateScale(centerIndex) {
+                $('#sliderContainer .slide .card').each(function (i) {
+                    const scale = i === centerIndex ? 1.1 : 1;
+                    $(this).css({
+                        transform: `scale(${scale})`,
+                        transition: 'transform 0.5s ease'
+                    });
+                });
+            }
+
+        },
+        error: function () {
+            console.error("犬データの取得に失敗しました。");
+        }
+    });
+});