Erol Haagenrud
6bfd986964
Bekreftet, reelt: "Deg Deg"-duplikaten er ekte. playerLabel() erstatter selve NAVNET med teksten "Deg" for din egen rad, OG kortet legger på en egen "Deg"-badge ved siden av — du ser den bokstavelig to ganger, akkurat som i skjermbildet du delte tidligere. Samme sted i koden (spillerkortet OG den nye scoringslisten). Også bekreftet: score-sirkelen i den nye listen er rounded-full + grønn UANSETT om resultatet er under, over eller på par — den følger ikke golfscore-språket i det hele tatt (sirkel skal bety under par, firkant over par). Det forklarer noe jeg ikke helt klarte å sette fingeren på selv: fargen grønn er kraftig overbrukt — aktiv hull-fane, valgt tall, denne sirkelen, "Deg"-badgen, rangeringsmerket for lederen, primærknapper — alt er grønt, uansett om det faktisk betyr "aktiv/positivt" eller bare er standard-stilen. Det er en skarpere diagnose enn noe jeg selv har formulert denne økten, og den forklarer trolig mye av "fortsatt rotete"-følelsen din utover selve tettheten. Resten (tetthetsprinsippet, "verktøy ikke nettside", scorekort-som-grid) er en sammenhengende, godt begrunnet retning — men det er en STØRRE strukturell endring (bytte fra dagens "faner + kompakt liste" til et fullt scorekort-grid som primærvisning, med veiviseren åpnet fra en hvilken som helst celle). Jeg foreslår å dele dette i to: Compliance-passet (seksjon 3) nå — konkrete, allerede bekreftede feil, lav risiko, rask gevinst. Grid-redesignet som egen, større runde — fortjener et bevisst ja fra deg først, siden det er en helt annen informasjonsarkitektur enn det jeg bygde i går.
167 lines
7.8 KiB
Markdown
167 lines
7.8 KiB
Markdown
# TeeCup — skjerm-spec: Scorekort + Score-entry
|
||
|
||
> **Status: PRESKRIPTIV (mål, ikke beskrivelse).** Dette dokumentet er
|
||
> bevisst det motsatte av `DESIGN_SYSTEM.md`: der DS beskriver hva som ER
|
||
> i koden, beskriver dette hva skjermene SKAL være. Det gir repoet et tak
|
||
> å sikte mot, ikke bare et gulv å reprodusere.
|
||
>
|
||
> **Til Claude Code:** behandle token- og prop-navn her som *intensjon*.
|
||
> Der de avviker fra faktisk `globals.css` / `components/*.tsx`, vinner
|
||
> kildekoden — avstem, ikke gjett. Alt visuelt skal fortsatt gå gjennom
|
||
> tokenene og komponentene i `DESIGN_SYSTEM.md`; dette dokumentet endrer
|
||
> *komposisjon og tetthet*, ikke fargespråket.
|
||
>
|
||
> Grunnlaget er en gjennomgang av fem etablerte golf-apper (Golf GameBook,
|
||
> Golf Pad, Golfshot, Hole 19, 18Birdies). Reglene under er der de fem
|
||
> konvergerer — altså «slik løser kategorien det», ikke smak.
|
||
|
||
---
|
||
|
||
## 0. Prinsipper (gjelder begge skjermene)
|
||
|
||
Fire ting skiller de fem appene fra dagens TeeCup-skjerm. Alt under er
|
||
utledet av disse:
|
||
|
||
1. **Tetthet framfor høflighet.** Ingen av de fem lar en flate stå halvtom.
|
||
Entry- og visningskontrollene fyller skjermen. Et enkelt kort øverst med
|
||
død luft under er ikke et mønster i kategorien — det er tegnet på en
|
||
nettside, ikke et verktøy. **Regel:** ingen score-flate skal ha mer enn
|
||
~1 skjermhøyde tom plass under fold. Har runden få hull ført, vis alle
|
||
18 (kommende hull grået ut), ikke whitespace.
|
||
|
||
2. **Ett aksent-poeng på nøytralt underlag.** Alle fem bruker et nesten
|
||
monokromt underlag + ÉN aksent (blå/grønn/teal). TeeCup-score-skjermen
|
||
leser som grønt-på-grønt fordi sirkler, faner, hull-velger og knapper
|
||
deler samme grønn. **Regel:** `primary` (grønn) reserveres for aktiv
|
||
tilstand + under-par/positivt. `brand-orange` er kontrast-polen
|
||
(over par). Alt annet er nøytralt: `bg-card`, `bg-muted`,
|
||
`border-border`, `muted-foreground`. Hvis to naboelementer begge er
|
||
grønne uten at begge betyr «aktiv/positiv», er ett av dem feil.
|
||
|
||
3. **Tall vises alltid med term og/eller til-par — aldri farge alene.**
|
||
Alle fem viser Eagle/Birdie/Par/Bogey og/eller +N/−N/E ved siden av
|
||
tallet. Dette er allerede din `§Golfscore-språket`; håndhev den. En bar
|
||
grønn sirkel med råtall (dagens skjerm) er det ene mønsteret ingen av de
|
||
fem bruker.
|
||
|
||
4. **Verktøy, ikke nettside.** Hard, tydelig header; klare skiller mellom
|
||
rader/kolonner; kraftig `font-extrabold tabular-nums` på resultat-tall.
|
||
Myke, like avrundede kort overalt = generisk.
|
||
|
||
---
|
||
|
||
## 1. Scorekort-skjerm (score-VISNING)
|
||
|
||
**Mål:** erstatt ett-hull-kortet med et tett, scrollbart scorekort-grid.
|
||
Dette er skjermens største enkeltløft.
|
||
|
||
### Layout
|
||
- Container: `mx-auto w-full max-w-xl` (per DS for scorekort-visninger).
|
||
- **Sticky header** (`sticky top-0 z-10 border-b border-border
|
||
bg-background/95 backdrop-blur`): banenavn, dato, evt. format
|
||
(Slag/Stableford). Ikke et stort kort — en tett topplinje.
|
||
- **Grid, ikke kort-stabel.** Én container
|
||
(`rounded-2xl border border-border overflow-hidden`) — DS sier eksplisitt
|
||
at sammenhengende lister skal være én container med `divide-y`, ikke
|
||
separate kort med mellomrom.
|
||
- **Spillere = rader.** Venstre kolonne er *sticky* (`sticky left-0`):
|
||
fullt navn (roster-kontekst → fullt navn, ikke fornavn) + HCP under, i
|
||
`text-sm muted-foreground`. Fast rad-høyde (`min-h-[Npx]` + `truncate`)
|
||
så rader med ulik navnelengde blir like høye (DS-mønsteret fra
|
||
2026-07-26).
|
||
- **Hull = kolonner**, horisontalt scrollbare. Kolonnetopp:
|
||
hull-nr (`font-bold`), Par og evt. HCP-indeks under i
|
||
`text-sm muted-foreground`. Aktivt/valgt hull markeres med `bg-primary`
|
||
på kolonnetoppen (én grønn, ikke grønn overalt).
|
||
- **Celle** = score for (spiller × hull): brutto som hovedtall
|
||
(`font-extrabold tabular-nums`) med net som liten senket subscript.
|
||
Score-merket følger `§Golfscore-språket` UBRYTELIG:
|
||
- under par → sirkel (`rounded-full`)
|
||
- over par → firkant (`rounded-[4px]`)
|
||
- E → ren tekst, ingen ramme
|
||
- eagle+/dobbel bogey+/leder → *fylt* (`bg-primary`/`bg-brand-orange`),
|
||
samme form, kun fyllingen endres. Vanlig = `border-2` + `/10`-tint.
|
||
- **Sum-kolonner:** Ut / Inn / Total i en høyre *sticky* kolonne
|
||
(`sticky right-0`), `tabular-nums font-extrabold`, til-par som E/+N/−N.
|
||
- **Fyll flaten:** vis alle 18 hull-kolonner alltid. Uspilte hull =
|
||
tomme celler på nøytralt underlag, ikke utelatt.
|
||
|
||
### Farge
|
||
Underlaget er nøytralt (`bg-card`). Grønn (`primary`) opptrer kun i:
|
||
aktivt hulls kolonnetopp, under-par-merker, og lederens sum. Over-par-
|
||
merker bruker firkant-form + `brand-orange`-tint. Ingenting annet er grønt.
|
||
|
||
### Interaksjon
|
||
Tapp en celle (eller en rad-header) → åpne score-entry-overlegget (§2) for
|
||
det hullet. Overgang, ikke ny side.
|
||
|
||
---
|
||
|
||
## 2. Score-entry-skjerm (per hull)
|
||
|
||
**Mål:** tett, fokusert entry som fyller skjermen — komponentene finnes
|
||
allerede (`NumberPicker`, `Stepper`, `ChoiceRow`, `DirectionCross`); dette
|
||
er ren komposisjon.
|
||
|
||
### Struktur — DS' fullskjerm-overlegg
|
||
`fixed inset-0 z-50 flex flex-col bg-background`, tredelt:
|
||
|
||
**`header` (shrink-0)**
|
||
- Hull · Par · HCP-indeks, og «til par så langt» (`tabular-nums`, E/+N/−N).
|
||
- Lukk-knapp, `size-11`, ikon + `aria-label`.
|
||
- Aktiv spillers navn + HCP (roster-kontekst → fullt navn).
|
||
|
||
**`main` (`flex-1 overflow-y-auto`)** — i denne rekkefølgen, alt synlig med
|
||
minst mulig scroll:
|
||
1. **Score** — `NumberPicker` (eksisterende): 3-kol grid, `h-16`, valgt =
|
||
`bg-primary`, term-caption relativt til hullets par
|
||
(Albatross/Eagle/Birdie/Par/Bogey/Dobbel bogey). «10+»-utvidelse
|
||
beholdes.
|
||
2. **Putter** — `Stepper` (+/−, `size-11`).
|
||
3. **Fairway** — `ChoiceRow` eller `DirectionCross`: Bom venstre / Treff /
|
||
Bom høyre. Alltid tekstlabel (DS: aldri ikon alene).
|
||
4. **Green (GIR)** — `DirectionCross` «Bommet green? Hvor» (Lang/Kort/
|
||
Venstre/Høyre + treff i sentrum), eller `ChoiceRow` hvis enklere.
|
||
5. **Bunkerslag / Straffeslag / Chip** — `Stepper` hver.
|
||
6. **Sand save / Up & down** — toggles (pille, `size-11`-treffflate).
|
||
|
||
**`footer` (shrink-0)** — handling-rad:
|
||
- Sekundær «Forrige» (`bg-muted`/nøytral) + primær «Neste»/«Ferdig»
|
||
(`bg-primary`), begge full bredde-andel, `min-h-12`.
|
||
|
||
### Multiplayer
|
||
Behold **per-spiller fullskjerm-fokus** (GameBook-mønsteret) framfor inline-
|
||
rader — det matcher størrelsen på `NumberPicker` og tilgjengelighetsgulvet
|
||
bedre enn tette inline-steppere. «Neste» går til neste spiller på samme
|
||
hull, deretter neste hull. (18Birdies' inline-alle-spillere er et alternativ
|
||
å vurdere senere, men krever mindre trykkflater — sekundært valg.)
|
||
|
||
### Tetthet
|
||
Score + Putter + Fairway skal være synlige uten scroll på en vanlig telefon.
|
||
Resten scroller i `main`. Ingen halvtom skjerm.
|
||
|
||
---
|
||
|
||
## 3. Compliance-pass (kjør FØR nybygg)
|
||
|
||
Dette er avvik mellom `DESIGN_SYSTEM.md` og faktisk kode som allerede er
|
||
synlige i skjermbildene. Fiks dem først — de gir størst effekt per innsats:
|
||
|
||
- [ ] **`ScoreMark` brukes på ALLE score-visninger.** Auditér
|
||
`round-scorecard.tsx` og score-visnings-skjermen: dagens grønne sirkler
|
||
med råtall bryter `§Golfscore-språket`. Bogey og dobbel bogey skal IKKE se
|
||
like ut, og over-par skal være firkant.
|
||
- [ ] **Badge-dublett «Deg Deg».** `Badge`: `default` (fylt) = «Deg»,
|
||
`outline` = «Eier». Fjern at navnet «Deg» får en «Deg»-badge oppå seg.
|
||
- [ ] **`tabular-nums`** på alle score-/HCP-/sum-tall.
|
||
- [ ] **44px trykkgulv** (`min-h-11`) på alt trykkbart; `size-11` på
|
||
ikon-only.
|
||
- [ ] **Farge aldri alene** — hver farge-bærende tilstand har også form
|
||
eller tekst.
|
||
|
||
---
|
||
|
||
## 4. Referanser
|
||
Legg GameBook- + de fire andre skjermdumpene i `design/references/` og pek
|
||
Claude Code på dem: «scorekort-skjermen skal matche tetthet og hierarki i
|
||
disse». Visuell referanse forankrer bedre enn prosa alene.
|