UI polish: logo start screen, broadcast scoreboard, kill pips, best-run
- start screen: SPLATTER TENNIS logo + slogan, controls kept - scoreboard redrawn as a real broadcast board (server ball, name, sets, games, highlighted points cell); weapon stock moved to a status strip - kills-to-next-point pips (NEXT ○○○) so the K-kill gate is visible; TUNE.killPips toggles it - miss-debug HUD off by default (TUNE.missHud 0), dev-only now - eaten screen crows "NEW BEST" when the run beats the stored high score Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
1 parent
aa8d2fff36
commit
ae8c04d413
5 files changed
+79
-48
No files matched your search
+27
-15
@@ -10,15 +10,24 @@
|
||||
#hint { position: fixed; bottom: 8px; width: 100%; text-align: center;
|
||||
font: 12px monospace; color: #6b7688; }
|
||||
@media (pointer: coarse) { #hint, #intro .kb { display: none; } }
|
||||
#intro { position: fixed; inset: 0; background: rgba(10, 13, 20, 0.88); display: grid;
|
||||
place-items: center; z-index: 10; touch-action: none; }
|
||||
#intro .card { font: 16px monospace; color: #dfe6f2; text-align: left; line-height: 2;
|
||||
border: 2px solid #5a6a85; background: #141a26; padding: 24px 32px; }
|
||||
#intro h1 { font-size: 18px; margin: 0 0 12px; color: #f8e048; text-align: center; }
|
||||
#intro p { margin: 0; }
|
||||
#intro p span { display: inline-block; width: 32px; }
|
||||
#intro em { color: #8a96ab; font-style: normal; font-size: 13px; }
|
||||
#intro .start { margin-top: 16px; text-align: center; color: #f8e048; animation: blink 1.1s step-end infinite; }
|
||||
#intro { position: fixed; inset: 0; z-index: 10; touch-action: none; display: grid; place-items: center;
|
||||
background: radial-gradient(circle at 50% 34%, rgba(34,16,20,0.92), rgba(8,10,16,0.96)); }
|
||||
#intro .card { font: 13px monospace; color: #dfe6f2; text-align: center; line-height: 1.9;
|
||||
padding: 18px 26px; max-width: 92vw; animation: drop 0.5s ease-out; }
|
||||
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
|
||||
#intro .logo { line-height: 0.9; margin-bottom: 8px; }
|
||||
#intro .logo span { display: block; font-weight: 900; }
|
||||
#intro .l1 { font-size: 46px; letter-spacing: 3px; color: #e0231a;
|
||||
text-shadow: 0 2px 0 #7a0f0a, 0 4px 0 #550906, 0 6px 1px rgba(0,0,0,0.4), 0 0 20px rgba(224,35,26,0.35); }
|
||||
#intro .l2 { font-size: 30px; letter-spacing: 9px; color: #eef23a; margin-top: 2px;
|
||||
text-shadow: 0 2px 0 #59610f, 0 0 14px rgba(238,242,58,0.3); }
|
||||
#intro .slogan { margin: 8px 0 16px; font-size: 13px; font-style: italic; color: #b6a0a4; letter-spacing: 0.5px; }
|
||||
#intro .slogan b { color: #e0231a; font-style: normal; }
|
||||
#intro .how { display: inline-block; text-align: left; color: #cbd4e2; line-height: 2; }
|
||||
#intro .how p { margin: 0; }
|
||||
#intro .how span { display: inline-block; width: 30px; }
|
||||
#intro em { color: #8a96ab; font-style: normal; font-size: 12px; }
|
||||
#intro .start { margin-top: 18px; color: #f8e048; font-weight: bold; letter-spacing: 1px; animation: blink 1.1s step-end infinite; }
|
||||
@keyframes blink { 50% { opacity: 0.25; } }
|
||||
</style>
|
||||
</head>
|
||||
@@ -27,14 +36,17 @@
|
||||
<div id="hint">move: WASD/arrows · serve/swing: SPACE · aim: hold a direction while swinging · T: tuning panel</div>
|
||||
<div id="intro">
|
||||
<div class="card">
|
||||
<h1>🎾 SPLATTER TENNIS</h1>
|
||||
<p><span>👆</span> tap — serve & swing</p>
|
||||
<p><span>👉</span> flick — aimed shot</p>
|
||||
<p><span>✋</span> drag — run <em>(auto-run is on)</em></p>
|
||||
<p class="kb"><span>⌨️</span> WASD / arrows + SPACE</p>
|
||||
<div class="logo"><span class="l1">SPLATTER</span><span class="l2">TENNIS</span></div>
|
||||
<p class="slogan">Fifteen. Thirty. Forty. <b>Dead.</b></p>
|
||||
<div class="how">
|
||||
<p><span>👆</span> tap — serve & swing</p>
|
||||
<p><span>👉</span> flick — aimed shot</p>
|
||||
<p><span>✋</span> drag — run <em>(auto-run is on)</em></p>
|
||||
<p class="kb"><span>⌨️</span> WASD / arrows + SPACE</p>
|
||||
</div>
|
||||
<p class="start">TAP TO START</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="main.js?v=9"></script>
|
||||
<script type="module" src="main.js?v=10"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user