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));