From a2a79b7efbfb50772e771879856be749d95a2c71 Mon Sep 17 00:00:00 2001
From: Daniel Dolezal <d.dolezal97@protonmail.com>
Date: Mon, 6 Apr 2026 22:05:13 +0200
Subject: [PATCH] allow to connect the snake head and tail with the body

---
 templates/side/dashboard.htm | 69 ++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/templates/side/dashboard.htm b/templates/side/dashboard.htm
index 095d3da..a2d84fc 100644
--- a/templates/side/dashboard.htm
+++ b/templates/side/dashboard.htm
@@ -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(", ");
               }
             }
           }