The dead club doubles its staff, and the draw is made where you can see it
Six new opponent families (head coach, stringer, strawberry seller, chair umpire, spectator, roller man) through the famroll/zsheet route, placed by hierarchy into an 18-rung ladder; the champion steps up behind them. THE DRAW: picking the tournament now rolls its own bracket in front of you — only the final was ever settled — and what lands is what walks on. Netplay, off Oliver's cellular report: the mid-flight early-decide was missing its !G.net gate, so the striker judged its own outbound flight and the two scoreboards drifted a point apart into a court nobody could serve on. The host's court now rides the room, its scoreboard rides the pretoss stream, and a called ball rolls to its own halt instead of freezing where the call caught it. Plus the night court, and somebody in the stand is taking pictures. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
4c47295a73
commit
9cc3ac54b3
207 files changed
+632
-81
No files matched your search
+48
-3
@@ -155,7 +155,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
|
||||
/* 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 { display: none; }
|
||||
#splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub, #bracket { 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 */
|
||||
@@ -166,6 +166,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
|
||||
#intro[data-stage="ranks"] #ranks,
|
||||
#intro[data-stage="secret"] #secret,
|
||||
#intro[data-stage="bosses"] #bosses,
|
||||
#intro[data-stage="bracket"] #bracket,
|
||||
#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
|
||||
@@ -234,6 +235,37 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
|
||||
text-align: center; line-height: 1.35; }
|
||||
#bossList i { font: 400 8px Silkscreen, monospace; color: var(--dim); font-style: normal;
|
||||
letter-spacing: 1px; }
|
||||
/* THE DRAW. Four rungs read top-down as a ladder, because that is what the mode is — the bracket
|
||||
shape a real draw is printed in needs width a phone has not got, and half of it would be blank
|
||||
anyway (you only ever play one side of it). The rows spin their portrait and their name while
|
||||
the draw is being made, and .set is what a landed one wears: the placeholder look is on the
|
||||
ROW, so a slot that has stopped is obvious at a glance and START stays out of reach until the
|
||||
last of them lands. The final wears .set from the first frame — it was never in doubt. */
|
||||
#cupRows { display: flex; flex-direction: column; gap: 8px; }
|
||||
.cupRow { display: grid; grid-template-columns: 54px 1fr auto; grid-template-rows: auto auto;
|
||||
align-items: center; column-gap: 10px; row-gap: 2px;
|
||||
padding: 7px 10px; background: var(--panel); border: 2px solid var(--line);
|
||||
/* the connector: every round but the first hangs off the one above it */
|
||||
position: relative; }
|
||||
.cupRow + .cupRow::before { content: ''; position: absolute; left: 35px; top: -10px; width: 2px;
|
||||
height: 10px; background: var(--line); }
|
||||
.cupRow img { grid-column: 1; grid-row: 1 / span 2; width: 54px; height: 54px;
|
||||
object-fit: contain; object-position: center; image-rendering: pixelated;
|
||||
/* mid-spin the faces flicker past unreadable; dimming them says "still rolling"
|
||||
without a second element to keep in sync */
|
||||
opacity: 0.5; filter: grayscale(0.7); }
|
||||
.cupRow u { grid-column: 2; grid-row: 1; font: 400 8px Silkscreen, monospace; color: var(--dim);
|
||||
letter-spacing: 1.5px; text-decoration: none; text-align: left; }
|
||||
.cupRow b { grid-column: 2; grid-row: 2; font: 400 11px Silkscreen, monospace; color: var(--dim);
|
||||
letter-spacing: 0.5px; line-height: 1.35; text-align: left; }
|
||||
.cupRow i { grid-column: 3; grid-row: 1 / span 2; font: 400 8px Silkscreen, monospace;
|
||||
font-style: normal; color: var(--dim); letter-spacing: 1px; white-space: nowrap; }
|
||||
.cupRow.set img { opacity: 1; filter: none; }
|
||||
.cupRow.set b { color: var(--cream); }
|
||||
.cupRow.fin { border-color: var(--red); }
|
||||
.cupRow.fin.set b { color: var(--acid); }
|
||||
/* START is genuinely unreachable until the draw has landed — the wait IS the ceremony */
|
||||
.btn[disabled] { opacity: 0.32; cursor: default; }
|
||||
/* a row, not a stacked tile: three 3:2 tiles stacked fill a phone twice over, and the art still
|
||||
reads at this size. -webkit-tap-highlight-color kills iOS's blue flash over the pixel art. */
|
||||
/* MODE posters are pure BUTTONS, not selectors (Oliver: the remembered highlight made each one
|
||||
@@ -305,7 +337,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
|
||||
font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 2px; }
|
||||
#splash.busy #boot { display: block; }
|
||||
#splash.busy .btn, #splash.busy .two, #splash.busy #build { display: none; }
|
||||
#sSum { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px;
|
||||
#sSum, #brSum { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px;
|
||||
font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; }
|
||||
.tabs { display: flex; gap: 6px; margin: 12px 0 14px; }
|
||||
.tabs button { flex: 1; padding: 11px 2px; background: var(--panel); border: 2px solid var(--line);
|
||||
@@ -430,6 +462,19 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
|
||||
<button class="btn big" id="cStart">SERVE UP</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
|
||||
config.CUP_ROUNDS, so a round added there needs no markup. -->
|
||||
<div id="bracket">
|
||||
<div class="hdr"><button class="chev" id="brBack">‹</button><h2>THE DRAW</h2></div>
|
||||
<h3>FOUR ROUNDS<span id="brState">DRAWING…</span></h3>
|
||||
<div id="cupRows"></div>
|
||||
<div class="foot">
|
||||
<p id="brSum"></p>
|
||||
<button class="btn big" id="cupGo" disabled>ENTER THE DRAW</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BODY COUNT. Every row in here is built by stats.js from the run records in localStorage. -->
|
||||
<div id="stats">
|
||||
<div class="hdr"><button class="chev" id="stBack">‹</button><h2 id="stTitle">BODY COUNT</h2></div>
|
||||
@@ -494,6 +539,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="src/main.js?v=256"></script>
|
||||
<script type="module" src="src/main.js?v=260"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user