(function () { "use strict"; var cardBoard = document.querySelector("#cardBoard"); var moveCount = document.querySelector("#moveCount"); var gameStatus = document.querySelector("#gameStatus"); var newGameButton = document.querySelector("#newGameButton"); if (!cardBoard || !moveCount || !gameStatus || !newGameButton) { return; } var symbols = [ { id: "sun", label: "Sun", svg: "" }, { id: "leaf", label: "Leaf", svg: "" }, { id: "moon", label: "Moon", svg: "" }, { id: "star", label: "Star", svg: "" }, { id: "drop", label: "Drop", svg: "" }, { id: "flower", label: "Flower", svg: "" } ]; var state = { cards: [], flipped: [], matched: [], moves: 0, locked: false, round: 0 }; function shuffle(items) { var copy = items.slice(); for (var i = copy.length - 1; i > 0; i -= 1) { var j = Math.floor(Math.random() * (i + 1)); var temp = copy[i]; copy[i] = copy[j]; copy[j] = temp; } return copy; } function createCards() { var deck = []; symbols.forEach(function (symbol) { deck.push({ id: symbol.id + "-a", symbolId: symbol.id }); deck.push({ id: symbol.id + "-b", symbolId: symbol.id }); }); return shuffle(deck); } function getSymbol(symbolId) { return symbols.find(function (symbol) { return symbol.id === symbolId; }); } function isVisible(index) { return state.flipped.indexOf(index) !== -1 || state.matched.indexOf(index) !== -1; } function render() { moveCount.textContent = String(state.moves); cardBoard.innerHTML = ""; state.cards.forEach(function (card, index) { var symbol = getSymbol(card.symbolId); var button = document.createElement("button"); var visible = isVisible(index); var matched = state.matched.indexOf(index) !== -1; button.type = "button"; button.className = "memory-card" + (visible ? " is-flipped" : "") + (matched ? " is-matched" : ""); button.dataset.index = String(index); button.disabled = matched || state.locked; button.setAttribute("aria-label", visible ? symbol.label + " card" : "Hidden card " + (index + 1)); button.setAttribute("aria-pressed", visible ? "true" : "false"); button.innerHTML = ""; cardBoard.appendChild(button); }); } function setStatus(message) { gameStatus.textContent = message; } function startGame() { state.cards = createCards(); state.flipped = []; state.matched = []; state.moves = 0; state.locked = false; state.round += 1; setStatus("Find 6 pairs."); render(); } function finishTurn(roundAtStart) { if (roundAtStart !== state.round) { return; } var firstIndex = state.flipped[0]; var secondIndex = state.flipped[1]; var first = state.cards[firstIndex]; var second = state.cards[secondIndex]; if (first.symbolId === second.symbolId) { state.matched.push(firstIndex, secondIndex); state.flipped = []; state.locked = false; if (state.matched.length === state.cards.length) { setStatus("All 6 pairs found in " + state.moves + " moves!"); } else { setStatus("Pair found. Keep going."); } render(); return; } state.flipped = []; state.locked = false; setStatus("Not a match. Try again."); render(); } function chooseCard(index) { if (state.locked || state.matched.indexOf(index) !== -1 || state.flipped.indexOf(index) !== -1) { return; } state.flipped.push(index); render(); if (state.flipped.length === 1) { setStatus("Choose one more card."); return; } state.moves += 1; state.locked = true; setStatus("Checking pair..."); render(); var roundAtStart = state.round; window.setTimeout(function () { finishTurn(roundAtStart); }, 700); } newGameButton.addEventListener("click", startGame); cardBoard.addEventListener("click", function (event) { var card = event.target.closest(".memory-card"); if (!card || !cardBoard.contains(card)) { return; } chooseCard(Number(card.dataset.index)); }); startGame(); })();