tsb95
/
console_puzzle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: tsb95:cd9970d47c43bbc0d9feb2e3f9393cb0d7a95df9
Branches Tags
tsb95:main
..
compare: tsb95:f4eb35e141b3c2e9a4b210999ff40dfc22822417
Branches Tags
tsb95:main

No commits in common. "cd9970d47c43bbc0d9feb2e3f9393cb0d7a95df9" and "f4eb35e141b3c2e9a4b210999ff40dfc22822417" have entirely different histories.
cd9970d47c ... f4eb35e141

2 changed files with 35 additions and 136 deletions
Show Stats Expand all files Collapse all files

27
static/css/style.css
View File

@ -4,34 +4,14 @@
--dark-color: black; --dark-color: black;
} }
body {
background: #141E30; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, black, #141E30); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh; /* make body full height */
margin: 0; /* remove default margin */
}
#board { #board {
margin: 0 auto;
display: grid; display: grid;
grid-template-columns: repeat(5, var(--cell-size)); grid-template-columns: repeat(5, var(--cell-size));
grid-template-rows: repeat(5, var(--cell-size)); grid-template-rows: repeat(5, var(--cell-size));
gap: 0; /* we'll use borders instead */
background: #ad5389; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3c1053, #ad5389); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: .5px solid #bebcbc76; /* subtle outer border */
} }
.token { .token {
background-color: #17A398; background-color: orange;
width: 60%; width: 60%;
height: 60%; height: 60%;
border-radius: 50%; border-radius: 50%;
@ -41,16 +21,13 @@ body {
} }
#player-token { #player-token {
background-color: #EE6C4D; background-color: darkkhaki;
cursor: grab; cursor: grab;
} }
.cell { .cell {
width: var(--cell-size); width: var(--cell-size);
height: var(--cell-size); height: var(--cell-size);
border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */
box-sizing: border-box; /* ensures borders don't expand cells */
} }
.dark { .dark {

144
static/js/script.js
View File

@ -1,11 +1,4 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Constants for adjusting game
const MAX_SNAP_DISTANCE = 90;
// Track game state
let tokensRemaining = 5;
let inStreak = false;
// Generate the board // Generate the board
for (let i=0; i < 5; i++) { for (let i=0; i < 5; i++) {
for (let j = 0; j < 5; j++) { for (let j = 0; j < 5; j++) {
@ -15,36 +8,23 @@ document.addEventListener('DOMContentLoaded', () => {
cell.id = `cell-${i}-${j}` cell.id = `cell-${i}-${j}`
cell.dataset.piece = "" cell.dataset.piece = ""
cell.classList.add('cell') cell.classList.add('cell')
// if ((i + j) % 2 == 0) { if ((i + j) % 2 == 0) {
// cell.classList.add('dark') cell.classList.add('dark')
// } }
// else { else {
// cell.classList.add('light') cell.classList.add('light')
// } }
const board = document.getElementById('board') const board = document.getElementById('board')
board.appendChild(cell) 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 // Generate player token
const player_token = document.createElement('div') const player_token = document.createElement('div')
const target_cell = document.getElementById('cell-4-0') const target_cell = document.getElementById('cell-4-0')
player_token.id="player-token" player_token.id="player-token"
player_token.classList.add('token') player_token.classList.add('token')
target_cell.appendChild(player_token) target_cell.appendChild(player_token)
player_token.zIndex = 1000;
// Add logic for moving player token // Add logic for moving player token
let isDragging = false; let isDragging = false;
@ -69,104 +49,40 @@ document.addEventListener('DOMContentLoaded', () => {
player_token.style.top = `${e.pageY - offsetY}px`; player_token.style.top = `${e.pageY - offsetY}px`;
}); });
function resetToken(startingCell) { function resetToken() {
if (startingCell == null) { const startingCell = document.getElementById(`cell-4-0`);
startingCell = document.getElementById('cell-4-0');
}
// Reset position inside cell // Reset position inside cell
player_token.style.position = 'relative'; // back to relative so it sits inside the cell player_token.style.position = 'relative'; // back to relative so it sits inside the cell
player_token.style.left = ''; player_token.style.left = '';
player_token.style.top = ''; player_token.style.top = '';
player_token.style.zIndex = ''; player_token.style.zIndex = '';
startingCell.appendChild(player_token);
originalCell.appendChild(token);
} }
function getClosestCellByDistance(x, y) { function getClosestCell(x,y) {
let closestCell = null; const boardRect = board.getBoundingClientRect();
let minDistance = Infinity; const cellSize = boardRect.width / 5;
const cells = document.querySelectorAll('.cell'); // Convert page coordinates to board-relative coordinates
cells.forEach(cell => { const relX = x - boardRect.left;
const rect = cell.getBoundingClientRect(); const relY = y - boardRect.top;
const cellCenterX = rect.left + rect.width / 2;
const cellCenterY = rect.top + rect.height / 2;
const dx = x - cellCenterX; // Find closest column and row
const dy = y - cellCenterY; const col = Math.min(4, Math.max(0, Math.floor(relX / cellSize)));
const distance = Math.sqrt(dx*dx + dy*dy); const row = Math.min(4, Math.max(0, Math.floor(relY / cellSize)));
if (distance < minDistance) { return document.getElementById(`cell-${row}-${col}`);
minDistance = distance;
closestCell = cell;
}
});
return { cell: closestCell, distance: minDistance };
} }
function checkMoveValid(startingCell, endingCell) {
const startRow = startingCell.dataset.row
const startCol = startingCell.dataset.col
const endRow = endingCell.dataset.row
const endCol = endingCell.dataset.col
const rowDiff = Math.abs(startRow - endRow)
const colDiff = Math.abs(startCol - endCol)
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 // stop dragging once they let go
player_token.addEventListener('pointerup', (e) => { player_token.addEventListener('pointerup', (e) => {
isDragging = false; isDragging = false;
// Find nearest cell // Find nearest cell
const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY); const closestCell = getClosestCell(e.pageX, e.pageY);
if (distance > MAX_SNAP_DISTANCE) {
console.log("TOO FAR AWAY")
resetToken(player_token.parentElement);
return;
}
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 // Reset token style and append to cell
player_token.style.position = 'relative'; player_token.style.position = 'relative';
@ -175,10 +91,16 @@ document.addEventListener('DOMContentLoaded', () => {
player_token.style.zIndex = ''; player_token.style.zIndex = '';
closestCell.appendChild(player_token); 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)
}
}) })