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:
@@ -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
Reference in New Issue
Block a user