MathGame.js

window.addEventListener("load", () => {
    let startBtn = document.querySelector("#start-btn");
    let nameInput = document.querySelector("#name-input");
    let passwordInput = document.querySelector("#password-input");

    let difficultySelect = document.querySelector("#difficulty-select");

    let gameScreen = document.querySelector("#game-screen");
    let startScreen = document.querySelector("#start-screen");
    let wheelScreen = document.querySelector("#wheel-screen");

    let num1El = document.querySelector("#num1");
    let operatorEl = document.querySelector("#operator");
    let resultEl = document.querySelector("#result");
    let dropZone = document.querySelector("#drop-zone");
    let optionsBox = document.querySelector("#options");
    let feedback = document.querySelector("#feedback");
    let playerNameSpan = document.querySelector("#player-name");
    let scoreSpan = document.querySelector("#score");
    let timerSpan = document.querySelector("#timer");
    let confettiBox = document.querySelector("#confetti-container");
    let wheelBtn = document.querySelector("#wheel-btn");
    let spinBtn = document.querySelector("#spin-btn");
    let wheel = document.querySelector("#wheel");
    let idLabel = document.querySelector("#id-label");
    let idInput = document.querySelector("#id-input");
    let registerBtn = document.querySelector("#register-btn");
    let arrUsers = [];
    let prizes = [
        { text: "+2 נקודות", action: () => { updateScore(2); } },
        { text: "+15 שניות", action: () => { seconds -= 15; } },
        { text: "פתרון אוטומטי", action: () => { autoCorrect = true; } }
    ];


    function startGame(name) {
        playerNameSpan.textContent = name;
        startScreen.classList.remove("active");
        gameScreen.classList.add("active");
        score = 0;
        seconds = 0;
        scoreSpan.textContent = score;
        timerSpan.textContent = "00:00";
        autoCorrect = false;
        wheelUsed = false;

        difficultySelect.style.display = "inline-block";
        startTimer();
        generateQuestion(difficultySelect.value);
    }


    startBtn.addEventListener("click", (event) => {

        let name = nameInput.value;
        let password = passwordInput.value;
        if (name == "" || password == "") {
            alert("חסרים שם או סיסמא!");
            return;
        }
        arrUsers = JSON.parse(localStorage.getItem("users")) || [];
        let flag = false;
        for (let i = 0; i < arrUsers.length; i++) {
            if (arrUsers[i].password == password && arrUsers[i].name == name)
                flag = true;
        }

        if (flag) {
            playerNameSpan.textContent = name;
            startScreen.classList.remove("active");
            gameScreen.classList.add("active");
            startTimer();
            generateQuestion(difficultySelect.value);
            score = 0;
            seconds = 0;
            timerSpan.textContent = "00:00";
            autoCorrect = false;
            wheelUsed = false;
        }
        else {
            idLabel.style.display = "block";
            idInput.style.display = "block";
            registerBtn.style.display = "block";
            startBtn.style.display = "none";
        }
    });

    registerBtn.addEventListener("click", () => {
        let name = nameInput.value;
        let password = passwordInput.value;
        let id = idInput.value;

        if (!name || !password || !id) {
            alert("אנא מלא את כל השדות כולל תעודת זהות");
            return;
        }
        let user = ({
            name: name,
            password: password,
            id: id
        });
        arrUsers.push(user);
        localStorage.setItem('users', JSON.stringify(arrUsers));
        localStorage.setItem("currentUser", JSON.stringify(user));
        alert("נרשמת בהצלחה! בהצלחה במשחק");
        idLabel.style.display = "none";
        idInput.style.display = "none";
        registerBtn.style.display = "none";
        startGame(name);

    });


    function startTimer() {
        timerInterval = setInterval(() => {
            seconds++;

            if (seconds >= 120) {
                clearInterval(timerInterval);
                feedback.textContent = "⏰ הזמן נגמר!";
                optionsBox.innerHTML = "";
                return;
            }

            let min = Math.floor(seconds / 60);
            let sec = seconds % 60;

            let minText = "";
            minText = "0" + min;

            let secText = "";
            if (sec < 10) {
                secText = "0" + sec;
            } else {
                secText = sec;
            }

            timerSpan.textContent = minText + ":" + secText;
        }, 1000);
    }

    function updateScore(points) {
        score += points;
        scoreSpan.textContent = score;
        if (score >= 5 && !wheelUsed) {
            wheelBtn.style.display = "block";
        }
    }

    function generateQuestion(level) {
        dropZone.textContent = "?";
        feedback.textContent = "";
        autoCorrect = false;

        let num1;
        let num2;
        let op;

        op = "+";

        if (level == "easy") {
            let randomNum = Math.random();
            if (randomNum < 0.5) {
                op = "+";
            } else {
                op = "-";
            }
        } else if (level == "medium") {
            let randomNum = Math.random();
            if (randomNum < 0.5) {
                op = "*";
            } else {
                op = "/";
            }
        } else if (level == "hard") {
            let ops = ["+", "-", "*", "/"];
            let randomIndex = getRandom(0, 3);
            op = ops[randomIndex];
        }

        switch (op) {
            case "+":
                num1 = getRandom(1, 20);
                correctAnswer = getRandom(1, 20);
                resultEl.textContent = num1 + correctAnswer;
                break;

            case "-":
                num1 = getRandom(1, 20);
                correctAnswer = getRandom(0, num1);
                resultEl.textContent = num1 - correctAnswer;
                break;

            case "*":
                num1 = getRandom(1, 12);
                correctAnswer = getRandom(1, 12);
                resultEl.textContent = num1 * correctAnswer;
                break;

            case "/":
                correctAnswer = getRandom(1, 12);
                let tempResult = getRandom(1, 12);
                num1 = correctAnswer * tempResult;
                resultEl.textContent = tempResult;
                break;
        }

        num1El.textContent = num1;
        operatorEl.textContent = op;

        createOptions(correctAnswer);
    }

    dropZone.addEventListener("drop", (event) => {
        event.preventDefault();
        let value = event.dataTransfer.getData("text");
        if (dropZone.textContent != "?")
            return;
        dropZone.textContent = value;

        if (parseInt(value) == correctAnswer || autoCorrect) {
            feedback.textContent = "✅ תשובה נכונה!";
            updateScore(1);
            showConfetti();
        }
        else {
            feedback.textContent = "❌תשובה שגויה";
        }

        setTimeout(() => {
            generateQuestion(difficultySelect.value);
            dropZone.textContent = "?";
            feedback.textContent = "";
        }, 1500);
    });
    function createOptions(answer) {
        optionsBox.innerHTML = "";
        let options = [answer];

        while (options.length < 3) {
            let fake = null;
            let x;

            while (fake == null || options.indexOf(fake) != -1) {
                x = getRandom(1, 5);

                if (Math.random() < 0.5) {
                    fake = answer + x;
                } else {
                    fake = answer - x;
                }
                if (fake < 1) {
                    fake = answer + x;
                }
            }
            options.push(fake);
        }
        options.sort(() => 0.5 - Math.random());

        for (let i = 0; i < options.length; i++) {
            let opt = document.createElement("div");
            opt.className = "option";
            opt.textContent = options[i];
            opt.setAttribute("draggable", true);
            opt.addEventListener("dragstart", (event) => {
                event.dataTransfer.setData("text", event.target.textContent);
            });
            optionsBox.appendChild(opt);
        }
    }


    dropZone.addEventListener("dragover", (event) => {
        event.preventDefault();
        dropZone.classList.add("dragover");
    });

    dropZone.addEventListener("dragleave", (event) => {
        dropZone.classList.remove("dragover");
    });

    dropZone.addEventListener("drop", (event) => {
        event.preventDefault();
        dropZone.classList.remove("dragover");
        let value = event.dataTransfer.getData("text");
        if (dropZone.textContent !== "?")
            return;
        dropZone.textContent = value;

        if (parseInt(value) == correctAnswer || autoCorrect) {
            feedback.textContent = "✅ תשובה נכונה";
            updateScore(1);
            showConfetti();
        }

        else {
            feedback.textContent = "❌תשובה שגויה ";
        }

        setTimeout(() => {
            createOptions(difficultySelect.value);
            dropZone.textContent = "?";
            feedback.textContent = "";
        }, 1500);
    });

    wheelBtn.addEventListener("click", () => {
        wheelScreen.style.display = "block";
        gameScreen.style.display = "none";
    });

    spinBtn.addEventListener("click", () => {
        let prize = prizes[getRandom(0, prizes.length - 1)];
        feedback.textContent = "🎁 זכית: " + prize.text;
        prize.action();
        wheelScreen.style.display = "none";
        gameScreen.style.display = "block";
        wheelUsed = true;
        wheelBtn.style.display = "none";
    });

    function showConfetti() {
        for (let i = 0; i < 20; i++) {
            let confetti = document.createElement("div");
            confetti.className = "confetti";
            confetti.textContent = getRandom(1, 9);
            confetti.style.left = getRandom(0, 100) + "vw";
            confetti.style.top = "0px";
            confetti.style.color = `hsl(${getRandom(0, 360)}, 70%, 50%)`;

            confettiBox.appendChild(confetti);
            (function (c) {
                setTimeout(function () {
                    confettiBox.removeChild(c);
                }, 3000);
            })(confetti);
        }
    }

    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
});