merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정

build/resources/main/static/sopmall/mobile/js/bnft/rougame/Rougame.js

@@ -0,0 +1,201 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const RouletteGame = {
+        canvas: document.getElementById('rouletteCanvas'),
+        ctx: null,
+        colors: ['#FDBE01', '#ffffff', '#FDBE01', '#ffffff', '#FDBE01', '#ffffff', '#FDBE01', '#ffffff'],
+        angle: 0,
+        segmentAngle: 2 * Math.PI / segments.length,
+        diameterPercentage: 0.76,
+        canvasCenterX: 0,
+        canvasCenterY: 0,
+        radius: 0,
+        isSpinning: false,
+
+        init() {
+            this.ctx = this.canvas.getContext('2d');
+            this.canvasCenterX = this.canvas.width / 2;
+            this.canvasCenterY = this.canvas.height / 2;
+            this.radius = (Math.min(this.canvas.width, this.canvas.height) * this.diameterPercentage) / 2;
+
+            this.addEventListeners();
+            this.drawRoulette();
+            this.loadImages();
+        },
+
+        addEventListeners() {
+            const spinButton = document.getElementById('spinButton');
+            spinButton.addEventListener('click', this.spinRoulette.bind(this));
+
+            const closeButton = document.querySelector('.microModal__btn');
+            closeButton.addEventListener('click', () => MicroModal.close('resultPopup'));
+        },
+
+        drawRoulette() {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            let angle = this.angle;
+
+            segments.forEach((seg, index) => {
+                this.drawSegment(seg, index, angle);
+                angle += this.segmentAngle;
+            });
+
+            this.drawArrow();
+        },
+
+        drawSegment(seg, index, angle) {
+            this.ctx.beginPath();
+            this.ctx.fillStyle = this.colors[index % this.colors.length];
+            this.ctx.moveTo(this.canvasCenterX, this.canvasCenterY);
+            this.ctx.arc(this.canvasCenterX, this.canvasCenterY, this.radius, angle, angle + this.segmentAngle);
+            this.ctx.lineTo(this.canvasCenterX, this.canvasCenterY);
+            this.ctx.fill();
+
+            this.ctx.save();
+            this.ctx.translate(this.canvasCenterX, this.canvasCenterY);
+            this.ctx.rotate(angle + this.segmentAngle / 2);
+            this.ctx.textAlign = 'right';
+            this.ctx.fillStyle = '#000000';
+            this.ctx.font = 'bold 20px "GmarketSans"';
+            this.ctx.fillText(seg.label, this.radius - 20, 10);
+            this.ctx.restore();
+        },
+
+        drawArrow() {
+            this.ctx.fillStyle = 'transparent';
+            this.ctx.beginPath();
+            this.ctx.moveTo(this.canvasCenterX, this.canvasCenterY - this.radius - 15);
+            this.ctx.lineTo(this.canvasCenterX - 10, this.canvasCenterY - this.radius + 5);
+            this.ctx.lineTo(this.canvasCenterX + 10, this.canvasCenterY - this.radius + 5);
+            this.ctx.closePath();
+            this.ctx.fill();
+        },
+
+        spinRoulette() {
+            if (this.isSpinning) return;
+
+            const remainingChancesElement = document.querySelector('.rouletteCnt b');
+            const remainingChances = parseInt(remainingChancesElement.textContent, 10);
+
+            if (isNaN(remainingChances) || remainingChances <= 0) {
+                alert('남은 횟수가 없습니다.');
+                return;
+            }
+
+            this.isSpinning = true;
+
+            $.ajax({
+                url: '/sopmal/bnft/playRougame',
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    "mbrInnb": 87626,
+                    "bnfDvCd": "040",
+                    "bnfInnb": bnfInnb,
+                    "mbrDvCd": "GC"
+                }),
+                success: (response) => {
+                    const result = JSON.parse(response.resBody.result);
+                    const targetRank = result.rank;
+                    const targetIndex = segments.findIndex(segment => segment.rank === targetRank);
+
+                    if (targetIndex !== -1) {
+                        this.startSpin(targetIndex);
+                        this.updateRemainingChances();
+                    }
+                },
+                error: (xhr, status, error) => {
+                    console.error("AJAX request failed:", error);
+                    this.isSpinning = false;
+                    alert('룰렛 회전 중 오류가 발생했습니다. 다시 시도해주세요.');
+                }
+            });
+        },
+
+        startSpin(targetIndex) {
+            const segmentsCount = segments.length;
+            const segmentAngleDeg = 360 / segmentsCount;
+            const targetAngleDeg = targetIndex * segmentAngleDeg + segmentAngleDeg / 2 - 90;
+            const initialAngle = this.angle % (2 * Math.PI);
+            const finalAngle = (targetAngleDeg * Math.PI / 180) + 2 * Math.PI * 5;
+
+            const spinAngleStart = Math.random() * 10 + 10;
+            let spinTime = 0;
+            const spinTimeTotal = Math.random() * 3 + 4 * 1000;
+
+            const rotateWheel = () => {
+                spinTime += 30;
+                if (spinTime >= spinTimeTotal) {
+                    this.stopRotateWheel();
+                    return;
+                }
+                const spinAngle = this.easeOut(spinTime, 0, finalAngle - initialAngle, spinTimeTotal);
+                this.angle = initialAngle + spinAngle;
+                this.drawRoulette();
+                requestAnimationFrame(rotateWheel);
+            };
+
+            rotateWheel();
+        },
+
+        stopRotateWheel() {
+            const degrees = this.angle * 180 / Math.PI + 90;
+            const arcd = 360 / segments.length;
+            const index = Math.floor((360 - degrees % 360) / arcd);
+            document.getElementById('resultText').textContent = segments[index].label;
+            MicroModal.show('resultPopup');
+            this.isSpinning = false;
+        },
+
+        easeOut(t, b, c, d) {
+            const ts = (t /= d) * t;
+            const tc = ts * t;
+            return b + c * (tc + -3 * ts + 3 * t);
+        },
+
+        updateRemainingChances() {
+            const remainingChancesElement = document.querySelector('.rouletteCnt b');
+            if (remainingChancesElement) {
+                let remainingChances = parseInt(remainingChancesElement.textContent, 10);
+                if (!isNaN(remainingChances) && remainingChances > 0) {
+                    remainingChancesElement.textContent = remainingChances - 1;
+                }
+            }
+        },
+
+        loadImages() {
+            const representativeImage = document.querySelector('.rouletteImg img');
+            if (representativeImage) {
+                this.loadImage('representative', screenInfo.representativeImagePath, $(representativeImage));
+            }
+        },
+
+        loadImage(imageType, imagePath, $img) {
+            if (!imagePath) {
+                console.warn(`Image path for ${imageType} is not available`);
+                return;
+            }
+
+            if ($img.length) {
+                $.ajax({
+                    url: '/sopmal/bnft/image',
+                    method: 'GET',
+                    data: { path: imagePath },
+                    xhrFields: { responseType: 'blob' },
+                    success: function(data) {
+                        const imageUrl = URL.createObjectURL(data);
+                        $img.attr('src', imageUrl);
+                        console.log(`${imageType} image loaded successfully`);
+                    },
+                    error: function() {
+                        console.error(`Failed to load ${imageType} image`);
+                        $img.attr('src', '/path/to/fallback-image.jpg');
+                    }
+                });
+            } else {
+                console.warn(`Image element not found for ${imageType}`);
+            }
+        }
+    };
+
+    RouletteGame.init();
+});