diff --git a/src/game.css b/src/game.css index 78d6c4d..f8425dc 100755 --- a/src/game.css +++ b/src/game.css @@ -36,14 +36,36 @@ Snake Rendering ========================================================= */ .snake-cell.snake-head { - background-color: var(--primary, #82aaff); - border-radius: 30%; - box-shadow: 0 0 8px color-mix(in srgb, var(--primary, #82aaff) 70%, transparent); + background-color: var(--accent, #ffc777); + border-radius: 6px 6px 2px 2px; + box-shadow: + 0 0 8px color-mix(in srgb, var(--accent, #ffc777) 70%, transparent), + inset 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 90%, transparent); + position: relative; +} + +.snake-cell.snake-head::after { + content: ""; + position: absolute; + top: 25%; + left: 50%; + transform: translateX(-50%); + width: 60%; + height: 30%; + background: radial-gradient(circle, var(--accent-foreground, #1b1d2b) 30%, transparent 60%); + opacity: 0.8; } .snake-cell.snake-body { - background-color: var(--primary, #82aaff); + background-color: var(--accent, #ffc777); opacity: 0.7; - box-shadow: inset 0 0 3px color-mix(in srgb, var(--primary, #82aaff) 50%, transparent); + box-shadow: inset 0 0 3px color-mix(in srgb, var(--accent, #ffc777) 50%, transparent); +} + +.snake-cell.snake-tail { + background-color: var(--accent, #ffc777); + opacity: 0.5; + border-radius: 2px 2px 6px 6px; + box-shadow: 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 40%, transparent); } diff --git a/src/useGame/useGameStatus.ts b/src/useGame/useGameStatus.ts index 22c87cd..ee7262f 100755 --- a/src/useGame/useGameStatus.ts +++ b/src/useGame/useGameStatus.ts @@ -30,8 +30,8 @@ export function useGameStatus( clearSnake(); setGameStatus("waiting"); const container = containerRef.current; - container?.querySelectorAll(".snake-head, .snake-body").forEach((el) => { - el.classList.remove("snake-head", "snake-body"); + container?.querySelectorAll(".snake-head, .snake-body, .snake-tail").forEach((el) => { + el.classList.remove("snake-head", "snake-body", "snake-tail"); }); }; diff --git a/src/useGame/useSnake.ts b/src/useGame/useSnake.ts index d7734fc..8cbd92d 100755 --- a/src/useGame/useSnake.ts +++ b/src/useGame/useSnake.ts @@ -21,6 +21,9 @@ export function useSnake( { r: centerR, c: centerC }, { r: centerR + 1, c: centerC }, { r: centerR + 2, c: centerC }, + { r: centerR + 3, c: centerC }, + { r: centerR + 4, c: centerC }, + { r: centerR + 5, c: centerC }, ]; setSnakeBody(initialBody); @@ -41,8 +44,8 @@ export function useSnake( const container = containerRef.current; if (!container) return; - container.querySelectorAll(".snake-head, .snake-body").forEach((el) => { - el.classList.remove("snake-head", "snake-body"); + container.querySelectorAll(".snake-head, .snake-body, .snake-tail").forEach((el) => { + el.classList.remove("snake-head", "snake-body", "snake-tail"); }); body.forEach((segment, idx) => { @@ -50,7 +53,13 @@ export function useSnake( `.snake-cell[data-r="${segment.r}"][data-c="${segment.c}"]` ); if (cell) { - cell.classList.add(idx === 0 ? "snake-head" : "snake-body"); + if (idx === 0) { + cell.classList.add("snake-head"); + } else if (idx === body.length - 1) { + cell.classList.add("snake-tail"); + } else { + cell.classList.add("snake-body"); + } } }); };