wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The leagues, phase 2: five bands, pace tiers, locked courts, the members' ground, the promotion ceremony

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-29 12:43:23 +02:00
1 parent 9133c0d351
commit 16bf5b9fed
12 files changed
+406 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+35 -3
View File
@@ -174,7 +174,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
/* ONE overlay, four panels, swapped by #intro[data-stage]. Keeping the backdrop and the card frame
alive across every screen is the point — a screen that unmounts the whole overlay flashes the
court through between menus. */
#splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub, #bracket, #vs, #train, #player { display: none; }
#splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub, #bracket, #vs, #train, #player, #promo { display: none; }
#intro[data-stage="splash"] #splash { display: flex; flex-direction: column; flex: 1; }
/* flex COLUMN, not block: it is what lets the footer's margin-top:auto reach the bottom of a
screen whose content does not fill it */
@@ -189,6 +189,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
#intro[data-stage="train"] #train,
#intro[data-stage="vs"] #vs,
#intro[data-stage="player"] #player,
#intro[data-stage="promo"] #promo,
#intro[data-stage="newbest"] #newbest { display: flex; flex-direction: column; flex: 1;
animation: drop 0.3s ease-out; }
/* the overlay is HIDDEN during play, not removed: a restart puts it straight back, and the
@@ -257,6 +258,22 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
#nameRow { display: flex; gap: 8px; }
#nameRow .tin { flex: 1; margin: 0; }
#pDice { width: 52px; flex: none; margin: 0; padding: 0; font-size: 20px; line-height: 1; }
/* a LOCKED court: the tile stays visible — it is a goal — but it answers no tap and sits back */
.court.lock { opacity: 0.45; filter: saturate(0.4); cursor: default; }
.court.lock i { color: var(--bad); }
/* THE PROMOTION CEREMONY: one centred column, the walk-on moment of the meta game. The court
tile is the reward made visible; the staggered drops are cheap CSS, no rAF (menu parks it). */
#promo .mid { gap: 10px; }
#prTag { margin: 0; font: 700 10px Silkscreen, monospace; color: var(--dim); letter-spacing: 3px;
animation: drop 0.5s ease-out; }
#prTitle { font: 400 44px Bangers, cursive; color: var(--acid); letter-spacing: 2px; margin: 0;
animation: drop 0.5s ease-out 0.15s backwards; }
#prLeague { margin: 0; font: 700 12px Silkscreen, monospace; color: var(--cream);
letter-spacing: 2px; animation: drop 0.5s ease-out 0.3s backwards; }
#prCourt { width: 74%; max-width: 300px; margin-top: 10px; border: 2px solid var(--line);
image-rendering: pixelated; animation: drop 0.5s ease-out 0.5s backwards; }
#prCourtName { margin: 0; font: 400 10px Silkscreen, monospace; color: var(--acid);
letter-spacing: 1.5px; animation: drop 0.5s ease-out 0.62s backwards; }
/* THE LEVEL STRIP: the one meta number over a thin bar, riding the splash foot. The fill colour
is the acid accent for now; the leagues will hand it the skill colour in phase 3. */
#xpRow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
@@ -264,7 +281,8 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
letter-spacing: 1px; white-space: nowrap; }
#xpRow s { flex: 1; height: 6px; background: rgba(255,255,255,0.10); border: 1px solid var(--line);
text-decoration: none; display: block; }
#xpRow s i { display: block; height: 100%; width: 0%; background: var(--acid);
#xpRow s i { display: block; height: 100%; width: 0%;
background: linear-gradient(90deg, #3f9560, var(--acid) 55%, #e8b23a);
transition: width 0.4s ease; }
/* KIT and SKIN: a row of colour squares, under a label that names whatever is selected. That is
the whole UI — the pick has no meters and no art to show, and a labelled tile per colour would
@@ -597,6 +615,20 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
<button class="btn big" id="pGo">ENTER THE CLUB</button>
</div>
</div>
<!-- THE PROMOTION (the leagues): the ceremony between the cup summary and the title screen.
Built by main.buildPromo from the profile's fresh league; the court tile IS the reward. -->
<div id="promo">
<div class="mid cent">
<p id="prTag">THE CUP IS YOURS</p>
<h2 id="prTitle">PROMOTED.</h2>
<p id="prLeague"></p>
<img id="prCourt" alt="">
<p id="prCourtName"></p>
</div>
<div class="foot bare">
<button class="btn big" id="prGo">WALK ON</button>
</div>
</div>
<!-- THE DRAW (cup mode only). SERVE UP lands here instead of on a court: the four rounds roll
through their own band of the ladder and stop, and what you watched land is what walks on
(main.js hands the settled rungs to startMatch). The rows are built in main.js from
@@ -720,6 +752,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
</div>
</div>
</div>
<script type="module" src="src/main.js?v=312"></script>
<script type="module" src="src/main.js?v=313"></script>
</body>
</html>