Add visual smoothing for snake game and systemd deployment

CSS animations for smoother 60fps feel despite 7Hz game ticks:
- 130ms transitions on cell background/box-shadow
- Head pop-in animation on direction changes
- Food pulse animation
- Smooth death state fade with grayscale

Per-snake colored glow on head cells.

Make server port configurable via PORT env var (default 8080).

Add deploy/ with systemd service and scripts:
- setup.sh: create games user, /opt/c4, install unit
- deploy.sh: build and install binary, restart service
- package.sh: cross-compile, tarball, base64 split for transfer
- reassemble.sh: decode and extract on target server
This commit is contained in:
Ryan Hamamura
2026-02-04 06:50:18 -10:00
parent 038c4b3f22
commit 2dc75107d1
9 changed files with 307 additions and 1770 deletions

View File

@@ -75,13 +75,30 @@
.snake-cell {
background: #16213e;
border: 1px solid rgba(255,255,255,0.03);
transition: background 0.05s;
transition: background 130ms ease-in-out, box-shadow 130ms ease-out;
}
.snake-cell.snake-head {
border-radius: 4px;
animation: head-pop 130ms ease-out;
}
@keyframes head-pop {
0% { transform: scale(0.6); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.snake-cell.snake-food {
background: #ff6b6b;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,107,107,0.6);
animation: food-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes food-pulse {
from { box-shadow: 0 0 6px rgba(255,107,107,0.4); transform: scale(0.85); }
to { box-shadow: 0 0 12px rgba(255,107,107,0.9); transform: scale(1); }
}
.snake-cell.snake-dead {
opacity: 0.35;
filter: grayscale(0.5);
transition: opacity 400ms ease-out, background 130ms ease-in-out;
}
.snake-cell.snake-head { border-radius: 4px; }
.snake-cell.snake-dead { opacity: 0.35; }
.snake-wrapper:focus { outline: none; }

File diff suppressed because one or more lines are too long