diff --git a/server/templates/dashboard.html b/server/templates/dashboard.html
index eb6defe..fff8cc8 100644
--- a/server/templates/dashboard.html
+++ b/server/templates/dashboard.html
@@ -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));