diff --git a/static/css/style.css b/static/css/style.css index 3066da1..708733a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -4,7 +4,16 @@ --dark-color: black; } +body { + display: flex; + justify-content: center; /* horizontal centering */ + align-items: center; /* vertical centering */ + height: 100vh; /* make body full height */ + margin: 0; /* remove default margin */ +} + #board { + margin: 0 auto; display: grid; grid-template-columns: repeat(5, var(--cell-size)); grid-template-rows: repeat(5, var(--cell-size)); diff --git a/static/js/script.js b/static/js/script.js index 503a222..a6adf37 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -1,6 +1,11 @@ document.addEventListener('DOMContentLoaded', () => { + // Constants for adjusting game const MAX_SNAP_DISTANCE = 90; + // Track game state + let tokensRemaining = 5; + let inStreak = false; + // Generate the board for (let i=0; i < 5; i++) { for (let j = 0; j < 5; j++) { @@ -21,12 +26,25 @@ document.addEventListener('DOMContentLoaded', () => { board.appendChild(cell) } } + + // Generate Target Tokens + target_token_list = ['0-0', '1-2', '2-4', '3-1', '4-3'] + for (let index = 0; index < target_token_list.length; index++) { + const element = target_token_list[index]; + const token = document.createElement('div'); + token.classList.add('token'); + token.dataset.captured = 'false'; + const target_cell = document.getElementById(`cell-${element}`); + target_cell.appendChild(token); + } + // Generate player token const player_token = document.createElement('div') const target_cell = document.getElementById('cell-4-0') player_token.id="player-token" player_token.classList.add('token') target_cell.appendChild(player_token) + player_token.zIndex = 1000; // Add logic for moving player token let isDragging = false; @@ -60,7 +78,6 @@ document.addEventListener('DOMContentLoaded', () => { player_token.style.left = ''; player_token.style.top = ''; player_token.style.zIndex = ''; - startingCell.appendChild(player_token); } @@ -99,25 +116,58 @@ document.addEventListener('DOMContentLoaded', () => { return ( (rowDiff == 1 && colDiff == 2) || (rowDiff == 2 && colDiff == 1) ); } + function resetBoard() { + inStreak = false; + tokensRemaining = 5; + console.log("resetting board"); + board.querySelectorAll('.token').forEach(token => { + token.style.display = ''; + token.dataset.captured = 'false' + }); + + resetToken(null) + } + + function captureCell(cell) { + const existingToken = cell.querySelector('.token') + if (existingToken && existingToken.dataset.captured == 'false') { + existingToken.dataset.captured = 'true'; + existingToken.style.display = 'none'; + tokensRemaining--; + inStreak = true; + } else { + if (inStreak) { + return false + } + } + return true + + } + // stop dragging once they let go player_token.addEventListener('pointerup', (e) => { isDragging = false; - // Find nearest cell const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY); if (distance > MAX_SNAP_DISTANCE) { + console.log("TOO FAR AWAY") resetToken(player_token.parentElement); return; } - const isValid = checkMoveValid(player_token.parentElement, closestCell); - - if (!isValid) { - resetToken(player_token.parentElement) + if (!checkMoveValid(player_token.parentElement, closestCell)) { + console.log("INVALID MOVE") + resetBoard() return; } + if (!captureCell(closestCell)) { + console.log("") + resetBoard(); + return + }; + // Reset token style and append to cell player_token.style.position = 'relative'; player_token.style.left = ''; @@ -125,16 +175,10 @@ document.addEventListener('DOMContentLoaded', () => { player_token.style.zIndex = ''; closestCell.appendChild(player_token); + + if (tokensRemaining == 0) { + alert("You win!") + + } }); - - // Generate Target Tokens - target_token_list = ['0-0', '1-2', '2-4', '3-1', '4-3'] - for (let index = 0; index < target_token_list.length; index++) { - const element = target_token_list[index]; - const token = document.createElement('div'); - token.classList.add('token') - const target_cell = document.getElementById(`cell-${element}`) - target_cell.appendChild(token) - } - }) \ No newline at end of file