<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ガラポン抽選システム</title>
    <link rel="stylesheet" href="asset/styles.css">
</head>
<body>
    <input type="file" id="file-input" accept=".json" style="display: none;"/> <!-- JSONファイル選択用 -->
    <div id="load-prizes-button">景品を読み込む</div>
    <div id="start-text" class="disabled">抽選を開始する</div>
    <img id="garapon" src="asset/spinner.png" alt="ガラポン画像" style="display: none;">
    <img id="daiza" src="asset/daiza.png" alt="ダイザ" style="display: none;"> <!-- 追加 -->
    <div id="overlay"></div>
    <div id="prize-count">残数: 0</div>
    <div id="end-screen"></div>
    <div id="prizes"></div>
    <div id="result"></div>
    <div class="custom-cursor" id="customCursor"></div>
    <div id="no-selection-message">選択されていません</div>

    <audio id="spinSound" src="asset/spin.wav"></audio>
    <audio id="prizeSound" src="asset/prize.wav"></audio>

    <div id="red-ball"></div>

    <script>
        const garapon = document.getElementById('garapon');
        const daiza = document.getElementById('daiza'); // daizaの要素を取得
        const startText = document.getElementById('start-text');
        const overlay = document.getElementById('overlay');
        const resultDiv = document.getElementById('result');
        const customCursor = document.getElementById('customCursor');
        const prizeCountDisplay = document.getElementById('prize-count');
        const endScreen = document.getElementById('end-screen');
        const noSelectionMessage = document.getElementById('no-selection-message');
        const loadPrizesButton = document.getElementById('load-prizes-button');
        const spinSound = new Audio('asset/spin.wav');
        const prizeSound = new Audio('asset/prize.wav');
        const redBall = document.getElementById('red-ball');
        const colors = ['red', 'blue', 'black', 'green', 'pink', 'orange'];
        const changeBallColor = () => {
            const randomIndex = Math.floor(Math.random() * colors.length);
            redBall.style.backgroundColor = colors[randomIndex];
        };

        let prizes = [];
        let cursorVisible = false;
        let isPrizeDisplayed = false;
        let spaceKeyEnabled = false;
        let displayDuration = 6000;
        let congratsMessageEnabled = true; // congratsの初期値をtrueとする

        const loadPrizes = (jsonData) => {
            prizes = [];
            displayDuration = jsonData.displayDuration || 6000;
            congratsMessageEnabled = jsonData.congrats !== undefined ? jsonData.congrats : true; // congratsを取得

            jsonData.prizes.forEach(prize => {
                for (let i = 0; i < prize.quantity; i++) {
                    prizes.push(prize.name);
                }
            });
            updatePrizeCount();
            startText.classList.remove('disabled');
            loadPrizesButton.style.display = 'none';
        };

        loadPrizesButton.addEventListener('click', () => {
            document.getElementById('file-input').click();
        });

        document.getElementById('file-input').addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (!file) {
                startText.classList.add('disabled');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const jsonData = JSON.parse(e.target.result);
                loadPrizes(jsonData);
                startText.classList.remove('disabled');
            };
            reader.readAsText(file);
        });

        const updatePrizeCount = () => {
            prizeCountDisplay.textContent = `残数: ${prizes.length}`;
        };

        const animateRedBall = () => {
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;

            const startX = screenWidth / 1.6;
            const startY = screenHeight / 3.0;

            let posX = startX;
            let posY = startY;

            const animationSpeed = 4;
            const speedX = 5 * animationSpeed;
            const gravity = 2.0 * animationSpeed;
            let velocityY = -7 * animationSpeed;

            const animate = () => {
                posX += speedX;
                posY += velocityY;
                velocityY += gravity;

                if (posY < startY) {
                    posY = startY;
                    velocityY = 0;
                }

                redBall.style.left = posX + 'px';
                redBall.style.top = posY + 'px';

                if (posY < screenHeight - 20) {
                    requestAnimationFrame(animate);
                } else {
                    posY = screenHeight - 20;
                    redBall.style.top = posY + 'px';
                }
            };

            animate();
        };

        const rotateGarapon = () => {
            if (garapon.classList.contains('spinning')) return;
            garapon.classList.add('spinning');
            spinSound.currentTime = 0;
            spinSound.play();

            setTimeout(() => {
                redBall.style.display = 'block';
                redBall.style.left = `${garapon.offsetLeft + garapon.offsetWidth / 2}px`;
                redBall.style.top = `${garapon.offsetTop + garapon.offsetHeight / 2}px`;
                animateRedBall();
            }, (spinSound.duration * 1000) - 1100);

            spinSound.onended = () => {
                drawPrize();
                garapon.classList.remove('spinning');
                redBall.style.display = 'none';
            };
        };

        const drawPrize = () => {
            if (prizes.length === 0) return;
            const randomIndex = Math.floor(Math.random() * prizes.length);
            const winningPrize = prizes[randomIndex];
            garapon.style.display = 'none';
            overlay.style.display = 'none';
            document.body.style.backgroundImage = "url('asset/win.png')";
            prizeSound.currentTime = 0;
            prizeSound.play();

            // congratsMessageEnabledの値に基づいてメッセージを表示
            if (congratsMessageEnabled) {
                resultDiv.innerHTML = `おめでとうございます！<br> ${winningPrize} <br>が当選しました！`;
            } else {
                resultDiv.innerHTML = `${winningPrize} <br>が当選しました！`;
            }

            resultDiv.style.display = 'block';
            isPrizeDisplayed = true;

            resultDiv.style.animation = 'none';
            resultDiv.offsetHeight; // 再計算
            resultDiv.style.animation = 'scaleUp 0.5s ease forwards';

            prizes.splice(randomIndex, 1);
            updatePrizeCount();

            // 赤玉の色をランダムに変更
            changeBallColor();

            // daizaを非表示にする
            daiza.style.display = 'none';

            if (prizes.length === 0) {
                setTimeout(endGame, displayDuration);
            } else {
                setTimeout(() => {
                    garapon.style.display = 'block';
                    overlay.style.display = 'block';
                    resultDiv.style.display = 'none';
                    document.body.style.backgroundImage = "url('asset/spinner_bg.png')";
                    daiza.style.display = 'block'; // 背景が表示される際にdaizaを表示
                    isPrizeDisplayed = false;
                }, displayDuration);
            }
        };

        const endGame = () => {
            resultDiv.style.display = 'none';
            endScreen.style.display = 'block';
            garapon.style.display = 'none';
            overlay.style.display = 'none';
            daiza.style.display = 'none'; // ゲーム終了時にdaizaを非表示
        };

        loadPrizesButton.style.display = 'block';

        startText.addEventListener('click', () => {
            if (startText.classList.contains('disabled')) return;
            startText.style.display = 'none';
            garapon.style.display = 'block';
            overlay.style.display = 'block';
            document.body.style.backgroundImage = "url('asset/spinner_bg.png')";
            daiza.style.display = 'block'; // ゲーム開始時にdaizaを表示
            spaceKeyEnabled = true;
        });

        overlay.addEventListener('click', rotateGarapon);

        document.addEventListener('keydown', (event) => {
            if (event.code === 'Space' && !isPrizeDisplayed && spaceKeyEnabled) {
                event.preventDefault();
                rotateGarapon();
            }
        });

        document.addEventListener('mousemove', (event) => {
            if (!cursorVisible) {
                customCursor.style.display = 'block';
                cursorVisible = true;
            }
            customCursor.style.left = `${event.pageX - 10}px`;
            customCursor.style.top = `${event.pageY - 10}px`;
        });
    </script>
</body>
</html>