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

update background gradient and board border. Remove some console logs. Fix pointer movement for touch screen by removing default action and adding css property to have no touch default.

This commit is contained in:
taylor berukoff 2025-11-13 15:18:48 -10:00
parent cd9970d47c
commit 3d84f9053c
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/css/style.css
View File

@ -2,12 +2,17 @@
--cell-size: 4rem; --cell-size: 4rem;
--light-color: white; --light-color: white;
--dark-color: black; --dark-color: black;
--background-radial-percent: 70%;
} }
body { body {
background: #141E30; /* fallback for old browsers */ background: #141E30; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, black, #141E30); /* Chrome 10-25, Safari 5.1-6 */ background: hsla(0, 0%, 0%, 1);
background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
background: -moz-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
background: -webkit-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#141E30", GradientType=1 );
display: flex; display: flex;
justify-content: center; /* horizontal centering */ justify-content: center; /* horizontal centering */
@ -27,7 +32,7 @@ body {
background: -webkit-linear-gradient(to right, #3c1053, #ad5389); /* Chrome 10-25, Safari 5.1-6 */ 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+ */ 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 */ /* border: .5px solid #bebcbc76; subtle outer border */
} }
.token { .token {
@ -43,6 +48,7 @@ body {
#player-token { #player-token {
background-color: #EE6C4D; background-color: #EE6C4D;
cursor: grab; cursor: grab;
touch-action: none;
} }
.cell { .cell {

12
static/js/script.js
View File

@ -52,12 +52,16 @@ document.addEventListener('DOMContentLoaded', () => {
// check for the player grabbing the player icon // check for the player grabbing the player icon
player_token.addEventListener('pointerdown', (e) => { player_token.addEventListener('pointerdown', (e) => {
e.preventDefault();
const rect = player_token.getBoundingClientRect(); const rect = player_token.getBoundingClientRect();
player_token.style.width = `${rect.width}px`; player_token.style.width = `${rect.width}px`;
player_token.style.height = `${rect.height}px`; player_token.style.height = `${rect.height}px`;
offsetX = e.pageX - rect.left;
offsetY = e.pageY - rect.top;
isDragging = true; isDragging = true;
offsetX = e.offsetX;
offsetY = e.offsetY;
player_token.setPointerCapture(e.pointerId); player_token.setPointerCapture(e.pointerId);
}); });
@ -119,7 +123,6 @@ document.addEventListener('DOMContentLoaded', () => {
function resetBoard() { function resetBoard() {
inStreak = false; inStreak = false;
tokensRemaining = 5; tokensRemaining = 5;
console.log("resetting board");
board.querySelectorAll('.token').forEach(token => { board.querySelectorAll('.token').forEach(token => {
token.style.display = ''; token.style.display = '';
token.dataset.captured = 'false' token.dataset.captured = 'false'
@ -151,19 +154,16 @@ document.addEventListener('DOMContentLoaded', () => {
const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY); const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY);
if (distance > MAX_SNAP_DISTANCE) { if (distance > MAX_SNAP_DISTANCE) {
console.log("TOO FAR AWAY")
resetToken(player_token.parentElement); resetToken(player_token.parentElement);
return; return;
} }
if (!checkMoveValid(player_token.parentElement, closestCell)) { if (!checkMoveValid(player_token.parentElement, closestCell)) {
console.log("INVALID MOVE")
resetBoard() resetBoard()
return; return;
} }
if (!captureCell(closestCell)) { if (!captureCell(closestCell)) {
console.log("")
resetBoard(); resetBoard();
return return
}; };