diff --git a/index.html b/index.html index c59b283..f45444b 100644 --- a/index.html +++ b/index.html @@ -213,29 +213,34 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') { .two .btn { margin-bottom: 0; } .btn.sec i { display: block; margin-top: 4px; font: 400 9px Silkscreen, monospace; font-style: normal; color: var(--dim); letter-spacing: 0.5px; } - /* the tour: two tiles SIDE BY SIDE, not two more full-width rows. The figures face the camera — - in play you only ever see your player from behind, so a rear view would show nothing. */ - #tours { display: flex; gap: 8px; } - #tours button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; - padding: 8px 6px 10px; background: var(--panel); border: 2px solid var(--line); - color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } - #tours button.on { border-color: var(--acid); background: rgba(188,212,85,0.09); } - #tours img { height: 88px; width: auto; display: block; image-rendering: pixelated; } - #tours b { font: 400 11px Silkscreen, monospace; color: var(--cream); letter-spacing: 0.5px; } - /* KIT and SKIN: a row of colour squares. That is the whole UI — the pick has no meters and no art - to show, and a labelled tile per colour would be five times the screen for a choice you make by - looking at the colour. The selected one's NAME rides in the h3 on the right, the same slot the - draw screen puts its state in, so nothing on the row is unlabelled. */ - .swrow { display: flex; gap: 7px; } + /* THE PLAYER BLOCK: the live man on the left, everything that changes him on the right, so a tap + and its result are never more than a thumb apart and the whole of "who am I" is one screenful. */ + #who { display: flex; gap: 12px; align-items: flex-start; } + #whoCtl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } + /* The live player. `position: static` is not decoration: the bare `canvas` rule above is the COURT + — fixed, full-bleed, 100dvh — and it catches any canvas in the document, so this one flew to the + top-left corner of the screen until it was told otherwise. Every geometry property that rule + sets has to be undone here. The buffer is the sprite's own 96x224, so width follows height. */ + #look { position: static; display: block; flex: none; margin: 0; + width: auto; height: 176px; touch-action: auto; image-rendering: pixelated; } + /* the tour is now TWO WORDS, not two portraits — the live player next to them is the picture, and + a second drawing of the same man (front-facing, and deaf to every colour on this screen) was + both a duplicate and the reason the court list started below the fold */ + #tours { display: flex; gap: 7px; } + #tours button { flex: 1; padding: 10px 2px; background: var(--panel); border: 2px solid var(--line); + color: var(--dim); font: 400 10px Silkscreen, monospace; letter-spacing: 1px; + cursor: pointer; -webkit-tap-highlight-color: transparent; } + #tours button.on { border-color: var(--acid); background: rgba(188,212,85,0.09); color: var(--cream); } + /* 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 + be five times the screen for a choice you make by looking at the colour. */ + .swlab { display: flex; justify-content: space-between; margin-top: 2px; text-decoration: none; + font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 1.5px; } + .swlab i { font-style: normal; color: var(--cream); } + .swrow { display: flex; gap: 6px; } .swrow button { flex: 1; aspect-ratio: 1; min-width: 0; padding: 0; border: 2px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; } .swrow button.on { border-color: var(--acid); box-shadow: inset 0 0 0 2px var(--ink); } - /* The live player, sitting between the tour tiles and the colours it answers to. `position: static` - is not decoration: the bare `canvas` rule above is the COURT — fixed, full-bleed, 100dvh — and it - catches any canvas in the document, so this one flew to the top-left corner of the screen until - it was told otherwise. Every geometry property that rule sets has to be undone here. */ - #look { position: static; display: block; margin: 12px auto 0; - width: auto; height: 150px; touch-action: auto; image-rendering: pixelated; } /* THE BOSS PICKER (back room). Two columns of portraits, because you pick a boss by looking at him — the tile is mostly art. Same plate as the tour tiles above; the grid is what makes ten of them fit on a phone. */ @@ -467,18 +472,24 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {

MATCH SETUP

+

01 · PLAYER

-
- - - -

02 · KIT

-
-

03 · SKIN

-
-

04 · COURT

+
+ +
+
+ KIT +
+ SKIN +
+
+
+

02 · COURT

@@ -570,6 +581,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
- + diff --git a/src/config.js b/src/config.js index 5341c20..1b94751 100644 --- a/src/config.js +++ b/src/config.js @@ -760,8 +760,10 @@ export const TOURS = [ // life and gives rose / powder blue / mint / lilac rather than a solid block of colour. // Her hair and skin fall out of it on lightness alone, which is why this is safe where // a dye was not. - { id: 'men', name: "MEN'S SINGLES", tile: 'tour_m', sfx: null, kit: 'dye' }, - { id: 'women', name: "WOMEN'S SINGLES", tile: 'tour_w', sfx: '_f', kit: 'wash', dx: 0.46, apex: 0.78, tossDx: -0.59, + // no `tile` any more: the setup screen draws the LIVE player instead, so assets/tour_m.png and + // tour_w.png are unreferenced (left on disk — they are generated art, not code). + { id: 'men', name: "MEN'S SINGLES", sfx: null, kit: 'dye' }, + { id: 'women', name: "WOMEN'S SINGLES", sfx: '_f', kit: 'wash', dx: 0.46, apex: 0.78, tossDx: -0.59, oDx: 0.48, oApex: 0.73 }, ]; @@ -834,7 +836,10 @@ export const SKINS = [ export const TINT = { kit: [150, 300], oKit: [345, 15], skin: [10, 45], satKit: 0.15, satSkin: 0.28, lumSkin: 0.80, - whiteLum: 0.72, whiteSat: 0.60, washS: 0.30, washL: 0.93, + // washS/washL retuned after Oliver played it: 0.30/0.93 was a hint of colour rather than a kit + // ("a little too subtle on the white — could be more"). 0.55/0.86 reads as dyed from across the + // court and still keeps every fold; past about 0.70 it stops looking like tennis whites at all. + whiteLum: 0.72, whiteSat: 0.60, washS: 0.55, washL: 0.86, }; // netW was the singles-stick width (10.06) while the court is drawn to the DOUBLES lines, so the diff --git a/src/main.js b/src/main.js index 6f3d50e..ca180ba 100644 --- a/src/main.js +++ b/src/main.js @@ -182,7 +182,9 @@ const tourList = document.getElementById('tours'); for (const t of TOURS) { const b = document.createElement('button'); b.className = t.id === pickedTour ? 'on' : ''; - b.innerHTML = `${t.name}`; + // just the word now — the live player beside it is the portrait, and the tile art was a SECOND + // drawing of the same man that no colour on this screen could reach + b.textContent = t.name.replace(' SINGLES', ''); b.addEventListener('click', () => { pickedTour = t.id; for (const el of tourList.children) el.classList.toggle('on', el === b);