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') {