daniel156161/snake-python
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

allow to connect the snake head and tail with the body

Browse Source
This commit is contained in:
Daniel Dolezal
2026-04-06 22:05:13 +02:00
parent 59d01428a9
commit a2a79b7efb
1 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/side/dashboard.htm
+34 -17
View File
@@ -364,11 +364,11 @@
height: auto; height: auto;
width: 100%; width: 100%;
display: grid; display: grid;
gap: 1px; gap: 2px;
background: var(--grid); background: var(--grid);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
padding: 1px; padding: 6px;
align-content: start; align-content: start;
} }
@@ -379,7 +379,7 @@
min-height: 0; min-height: 0;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
position: relative; position: relative;
border-radius: 0; border-radius: 2px;
} }
.snake-turn-cell::after { .snake-turn-cell::after {
@@ -390,10 +390,11 @@
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
} }
.snake-turn-cell.snake-turn-ur::after { border-top-right-radius: 42%; } /* 50% = quarter-circle at the inner corner of the bend */
.snake-turn-cell.snake-turn-ul::after { border-top-left-radius: 42%; } .snake-turn-cell.snake-turn-ur::after { border-top-right-radius: 50%; }
.snake-turn-cell.snake-turn-dr::after { border-bottom-right-radius: 42%; } .snake-turn-cell.snake-turn-ul::after { border-top-left-radius: 50%; }
.snake-turn-cell.snake-turn-dl::after { border-bottom-left-radius: 42%; } .snake-turn-cell.snake-turn-dr::after { border-bottom-right-radius: 50%; }
.snake-turn-cell.snake-turn-dl::after { border-bottom-left-radius: 50%; }
.food { .food {
background-image: radial-gradient(circle at center, #d73a31 0 45%, transparent 48%); background-image: radial-gradient(circle at center, #d73a31 0 45%, transparent 48%);
@@ -1775,19 +1776,18 @@
if (hazards.has(key)) cell.classList.add("hazard"); if (hazards.has(key)) cell.classList.add("hazard");
if (foods.has(key)) cell.classList.add("food"); if (foods.has(key)) cell.classList.add("food");
if (snakeBody.has(key)) { if (snakeBody.has(key)) {
const bodyColor = snakeBody.get(key);
const hasHeadIcon = headIconByCell.has(key); const hasHeadIcon = headIconByCell.has(key);
const hasTailIcon = tailIconByCell.has(key); const hasTailIcon = tailIconByCell.has(key);
const bodyColor = snakeBody.get(key); const isIconCell = hasHeadIcon || hasTailIcon;
if (hasHeadIcon || hasTailIcon) { cell.style.borderRadius = "0";
//cell.style.background = "var(--cell)"; if (!isIconCell) {
} else {
cell.style.background = bodyColor; cell.style.background = bodyColor;
} }
if (selectedSnakeId && snakeIdByCell.get(key) !== selectedSnakeId) { if (selectedSnakeId && snakeIdByCell.get(key) !== selectedSnakeId) {
cell.style.opacity = "0.2"; cell.style.opacity = "0.2";
} }
if (!snakeHead.has(key) && !snakeTail.has(key)) {
const snakeId = snakeIdByCell.get(key); const snakeId = snakeIdByCell.get(key);
if (snakeId) { if (snakeId) {
const up = snakeIdByCell.get(cellKey(x, y + 1)) === snakeId; const up = snakeIdByCell.get(cellKey(x, y + 1)) === snakeId;
@@ -1795,6 +1795,7 @@
const left = snakeIdByCell.get(cellKey(x - 1, y)) === snakeId; const left = snakeIdByCell.get(cellKey(x - 1, y)) === snakeId;
const right = snakeIdByCell.get(cellKey(x + 1, y)) === snakeId; const right = snakeIdByCell.get(cellKey(x + 1, y)) === snakeId;
if (!snakeHead.has(key) && !snakeTail.has(key)) {
if (up && right && !down && !left) { if (up && right && !down && !left) {
cell.classList.add("snake-turn-cell"); cell.classList.add("snake-turn-cell");
cell.classList.add("snake-turn-dl"); cell.classList.add("snake-turn-dl");
@@ -1816,18 +1817,34 @@
cell.style.setProperty("--turn-color", bodyColor); cell.style.setProperty("--turn-color", bodyColor);
cell.style.background = "var(--cell)"; cell.style.background = "var(--cell)";
} }
}
// Outward shadows bridge the 2px gap to adjacent snake cells.
// For icon cells (head/tail), also add inset shadows to color the
// connecting edge of the cell itself, since the background stays
// transparent so the icon remains visible.
const bridgeShadows = []; const bridgeShadows = [];
if (up) bridgeShadows.push(`0 -1px 0 ${bodyColor}`); if (up) {
if (down) bridgeShadows.push(`0 1px 0 ${bodyColor}`); bridgeShadows.push(`0 -2px 0 ${bodyColor}`);
if (left) bridgeShadows.push(`-1px 0 0 ${bodyColor}`); if (isIconCell) bridgeShadows.push(`inset 0 2px 0 ${bodyColor}`);
if (right) bridgeShadows.push(`1px 0 0 ${bodyColor}`); }
if (down) {
bridgeShadows.push(`0 2px 0 ${bodyColor}`);
if (isIconCell) bridgeShadows.push(`inset 0 -2px 0 ${bodyColor}`);
}
if (left) {
bridgeShadows.push(`-2px 0 0 ${bodyColor}`);
if (isIconCell) bridgeShadows.push(`inset 2px 0 0 ${bodyColor}`);
}
if (right) {
bridgeShadows.push(`2px 0 0 ${bodyColor}`);
if (isIconCell) bridgeShadows.push(`inset -2px 0 0 ${bodyColor}`);
}
if (bridgeShadows.length > 0) { if (bridgeShadows.length > 0) {
cell.style.boxShadow = bridgeShadows.join(", "); cell.style.boxShadow = bridgeShadows.join(", ");
} }
} }
} }
}
if (snakeTail.has(key)) { if (snakeTail.has(key)) {
cell.classList.add(snakeTail.get(key)); cell.classList.add(snakeTail.get(key));
cell.classList.add(`tail-style-${tailVariantByCell.get(key) || 1}`); cell.classList.add(`tail-style-${tailVariantByCell.get(key) || 1}`);