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

add curves to body when snake moves and show boarder color correctly in the background

Browse Source
This commit is contained in:
Daniel Dolezal
2026-04-06 06:04:05 +02:00
parent 1cd0f1ed1d
commit afaf6c7c63
1 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/dashboard.html
+46
View File
@@ -382,6 +382,19 @@
border-radius: 0;
}
.snake-turn-cell::after {
content: "";
position: absolute;
inset: 0;
background: var(--turn-color, transparent);
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%; }
.food {
background-image: radial-gradient(circle at center, #d73a31 0 45%, transparent 48%);
background-repeat: no-repeat;
@@ -404,6 +417,7 @@
);
z-index: 4;
pointer-events: none;
border-radius: inherit;
}
.snake-you { background: var(--you); }
.snake-enemy { background: var(--enemy); }
@@ -1770,6 +1784,38 @@
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;
if (up && right && !down && !left) {
cell.classList.add("snake-turn-cell");
cell.classList.add("snake-turn-dl");
cell.style.setProperty("--turn-color", snakeBody.get(key));
cell.style.background = "var(--cell)";
} else if (up && left && !down && !right) {
cell.classList.add("snake-turn-cell");
cell.classList.add("snake-turn-dr");
cell.style.setProperty("--turn-color", snakeBody.get(key));
cell.style.background = "var(--cell)";
} else if (down && right && !up && !left) {
cell.classList.add("snake-turn-cell");
cell.classList.add("snake-turn-ul");
cell.style.setProperty("--turn-color", snakeBody.get(key));
cell.style.background = "var(--cell)";
} else if (down && left && !up && !right) {
cell.classList.add("snake-turn-cell");
cell.classList.add("snake-turn-ur");
cell.style.setProperty("--turn-color", snakeBody.get(key));
cell.style.background = "var(--cell)";
}
}
}
}
if (snakeTail.has(key)) {
cell.classList.add(snakeTail.get(key));