|
const board = document.querySelector('.board'); |
|
const clone = document.querySelector('.clone'); |
|
const overlay = document.querySelector('.overlay'); |
|
const reset = document.querySelector('.reset'); |
|
const tileOptions = ['erupt', 'ptero', 'tri', 'ahahah', 'egg', 'dino']; |
|
|
|
// 🏇 Race you to the race conditions! >:D |
|
const state = { |
|
selections: [], |
|
boardLocked: false, |
|
matches: 0 |
|
}; |
|
|
|
reset.addEventListener('click', () => { |
|
if (state.boardLocked) return; |
|
resetGame(); |
|
}); |
|
|
|
function resetGame() { |
|
state.boardLocked = true; |
|
state.selections = []; |
|
state.matches = 0; |
|
|
|
document.querySelectorAll('.cube').forEach(tile => { |
|
tile.removeEventListener('click', () => selectTile(tile)); |
|
tile.remove(); |
|
}); |
|
|
|
overlay.classList.add('hidden'); |
|
createBoard(); |
|
} |
|
|
|
function createBoard() { |
|
const tiles = shuffleArray([...tileOptions, ...tileOptions]); |
|
const length = tiles.length; |
|
|
|
for (let i = 0; i < length; i++) { |
|
window.setTimeout(() => { |
|
board.appendChild(buildTile(tiles.pop(), i)); |
|
}, i * 100); |
|
} |
|
|
|
window.setTimeout(() => { |
|
document.querySelectorAll('.cube').forEach(tile => { |
|
tile.addEventListener('click', () => selectTile(tile)); |
|
}); |
|
|
|
state.boardLocked = false; |
|
}, tiles.length * 100); |
|
} |
|
|
|
function buildTile(option, id) { |
|
const tile = clone.cloneNode(true); |
|
tile.classList.remove('clone'); |
|
tile.classList.add('cube'); |
|
tile.setAttribute('data-tile', option); |
|
tile.setAttribute('data-id', id); |
|
return tile; |
|
} |
|
|
|
function selectTile(selectedTile) { |
|
if (state.boardLocked || selectedTile.classList.contains('flipped')) return; |
|
|
|
state.boardLocked = true; |
|
|
|
if (state.selections.length <= 1) { |
|
selectedTile.classList.add('flipped'); |
|
state.selections.push({ |
|
id: selectedTile.dataset.id, |
|
tile: selectedTile.dataset.tile, |
|
el: selectedTile |
|
}); |
|
} |
|
|
|
/* =================================* |
|
* Welcome to Timeout City * |
|
* Time since last incident: 300ms * |
|
* =================================*/ |
|
if (state.selections.length === 2) { |
|
if (state.selections[0].tile === state.selections[1].tile) { |
|
window.setTimeout(() => { |
|
state.selections[0].el.classList.add('matched'); |
|
state.selections[1].el.classList.add('matched'); |
|
|
|
state.boardLocked = false; |
|
state.matches = state.matches + 1; |
|
|
|
if (state.matches === tileOptions.length) { |
|
window.setTimeout(() => { |
|
overlay.classList.remove('hidden'); |
|
document.querySelector('.audio-win').play(); |
|
}, 600); |
|
} |
|
state.selections = []; |
|
document.querySelector(`.audio-${selectedTile.dataset.tile}`).play(); |
|
}, 600); |
|
} else { |
|
setTimeout(() => { |
|
document.querySelectorAll('.cube').forEach(tile => { |
|
tile.classList.remove('flipped'); |
|
}); |
|
state.boardLocked = false; |
|
}, 800); |
|
state.selections = []; |
|
} |
|
} else { |
|
state.boardLocked = false; |
|
} |
|
} |
|
|
|
// 🍝 Copy-Pasta - "ain't nobody got time for that" |
|
function shuffleArray(array) { |
|
for (let i = array.length - 1; i > 0; i--) { |
|
const j = Math.floor(Math.random() * (i + 1)); |
|
[array[i], array[j]] = [array[j], array[i]]; |
|
} |
|
return array; |
|
} |
|
|
|
createBoard(); |
