megapath/scripts.js at main · pak0st/megapath · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// Data for words
const wordData = {
    yud: {
        russian: [
            { hebrew: "אטום", translation: "атом" },
            { hebrew: "מולקולה", translation: "молекула" },
            { hebrew: "תרכובת", translation: "соединение" },
        ],
        portuguese: [
            { hebrew: "אטום", translation: "átomo" },
            { hebrew: "מולקולה", translation: "molécula" },
            { hebrew: "תרכובת", translation: "composto" },
        ],
        english: [
            { hebrew: "אטום", translation: "atom" },
            { hebrew: "מולקולה", translation: "molecule" },
            { hebrew: "תרכובת", translation: "compound" },
        ],
    },
};

// Default selection
let selectedClass = "yud";
let selectedLanguage = "russian";

// Function to initialize the game buttons
function initializeGameButtons() {
    const flashcardsBtn = document.getElementById("flashcards-btn");
    const matchGameBtn = document.getElementById("matchgame-btn");

    flashcardsBtn.addEventListener("click", startFlashcards);
    matchGameBtn.addEventListener("click", startMatchGame);
}

// Start the Flashcards game
function startFlashcards() {
    const gameArea = document.getElementById("game-area");
    const words = wordData[selectedClass][selectedLanguage];

    gameArea.innerHTML = `
        <h2>Flashcards</h2>
        <div id="flashcards-container" style="display: flex; flex-wrap: wrap; gap: 10px;"></div>
    `;

    const cards = [];
    words.forEach((word, index) => {
        cards.push({ text: word.hebrew, id: hebrew-${index}, type: "hebrew" });
        cards.push({ text: word.translation, id: translation-${index}, type: "translation" });
    });

    cards.sort(() => Math.random() - 0.5);

    const container = document.getElementById("flashcards-container");
    cards.forEach((card) => {
        const cardElement = document.createElement("div");
        cardElement.className = "card";
        cardElement.id = card.id;
        cardElement.textContent = card.text;
        cardElement.addEventListener("click", () => handleFlashcardClick(cardElement, card));
        container.appendChild(cardElement);
    });
}

let firstCard = null;
let secondCard = null;

function handleFlashcardClick(cardElement, card) {
    if (cardElement.classList.contains("matched")) return;

    cardElement.style.background = "#ddd";
    cardElement.classList.add("flipped");

    if (!firstCard) {
        firstCard = { cardElement, card };
    } else {
        secondCard = { cardElement, card };
        checkFlashcardMatch();
    }
}

function checkFlashcardMatch() {
    if (firstCard.card.id.split("-")[1] === secondCard.card.id.split("-")[1]) {
        firstCard.cardElement.classList.add("matched");
        secondCard.cardElement.classList.add("matched");
    } else {
        setTimeout(() => {
            firstCard.cardElement.style.background = "";
            secondCard.cardElement.style.background = "";
        }, 1000);
    }
    firstCard = null;
    secondCard = null;
}

// Start the Match Word to Picture game
function startMatchGame() {
    const gameArea = document.getElementById("game-area");
    const words = wordData[selectedClass][selectedLanguage];

    gameArea.innerHTML = `
        <h2>Match Word to Picture</h2>
        <div id="match-game-container" style="display: flex; flex-wrap: wrap; gap: 10px;"></div>
    `;

    const container = document.getElementById("match-game-container");
    words.forEach((word) => {
        const wordElement = document.createElement("div");
        wordElement.textContent = word.hebrew;
        wordElement.style.cssText = `
            width: 100px; height: 50px; border: 1px solid #000;
            text-align: center; display: flex; align-items: center; justify-content: center;
        `;

        const blankSpace = document.createElement("div");
        blankSpace.style.cssText = `
            width: 100px; height: 50px; border: 1px dashed gray;
        `;

        container.appendChild(wordElement);
        container.appendChild(blankSpace);
    });
}

// Initialize event listeners on page loadwindow.onload = initializeGameButtons;