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
+43 -26
View File
@@ -364,11 +364,11 @@
height: auto;
width: 100%;
display: grid;
gap: 1px;
gap: 2px;
background: var(--grid);
border: 1px solid var(--line);
border-radius: 10px;
padding: 1px;
padding: 6px;
align-content: start;
}
@@ -379,7 +379,7 @@
min-height: 0;
aspect-ratio: 1 / 1;
position: relative;
border-radius: 0;
border-radius: 2px;
}
.snake-turn-cell::after {
@@ -390,10 +390,11 @@
z-index: 0;
pointer-events: none;
}
.snake-turn-cell.snake-turn-ur::after { border-top-right-radius: 42%; }
.snake-turn-cell.snake-turn-ul::after { border-top-left-radius: 42%; }
.snake-turn-cell.snake-turn-dr::after { border-bottom-right-radius: 42%; }
.snake-turn-cell.snake-turn-dl::after { border-bottom-left-radius: 42%; }
/* 50% = quarter-circle at the inner corner of the bend */
.snake-turn-cell.snake-turn-ur::after { border-top-right-radius: 50%; }
.snake-turn-cell.snake-turn-ul::after { border-top-left-radius: 50%; }
.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 {
background-image: radial-gradient(circle at center, #d73a31 0 45%, transparent 48%);
@@ -1775,26 +1776,26 @@
if (hazards.has(key)) cell.classList.add("hazard");
if (foods.has(key)) cell.classList.add("food");
if (snakeBody.has(key)) {
const bodyColor = snakeBody.get(key);
const hasHeadIcon = headIconByCell.has(key);
const hasTailIcon = tailIconByCell.has(key);
const bodyColor = snakeBody.get(key);
if (hasHeadIcon || hasTailIcon) {
//cell.style.background = "var(--cell)";
} else {
const isIconCell = hasHeadIcon || hasTailIcon;
cell.style.borderRadius = "0";
if (!isIconCell) {
cell.style.background = bodyColor;
}
if (selectedSnakeId && snakeIdByCell.get(key) !== selectedSnakeId) {
cell.style.opacity = "0.2";
}
if (!snakeHead.has(key) && !snakeTail.has(key)) {
const snakeId = snakeIdByCell.get(key);
if (snakeId) {
const up = snakeIdByCell.get(cellKey(x, y + 1)) === snakeId;
const down = snakeIdByCell.get(cellKey(x, y - 1)) === snakeId;
const left = snakeIdByCell.get(cellKey(x - 1, y)) === snakeId;
const right = snakeIdByCell.get(cellKey(x + 1, y)) === snakeId;
const snakeId = snakeIdByCell.get(key);
if (snakeId) {
const up = snakeIdByCell.get(cellKey(x, y + 1)) === snakeId;
const down = snakeIdByCell.get(cellKey(x, y - 1)) === snakeId;
const left = 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) {
cell.classList.add("snake-turn-cell");
cell.classList.add("snake-turn-dl");
@@ -1816,15 +1817,31 @@
cell.style.setProperty("--turn-color", bodyColor);
cell.style.background = "var(--cell)";
}
}
const bridgeShadows = [];
if (up) bridgeShadows.push(`0 -1px 0 ${bodyColor}`);
if (down) bridgeShadows.push(`0 1px 0 ${bodyColor}`);
if (left) bridgeShadows.push(`-1px 0 0 ${bodyColor}`);
if (right) bridgeShadows.push(`1px 0 0 ${bodyColor}`);
if (bridgeShadows.length > 0) {
cell.style.boxShadow = bridgeShadows.join(", ");
}
// 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 = [];
if (up) {
bridgeShadows.push(`0 -2px 0 ${bodyColor}`);
if (isIconCell) bridgeShadows.push(`inset 0 2px 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) {
cell.style.boxShadow = bridgeShadows.join(", ");
}
}
}