# 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). > **Notert 2026-08-22, IKKE designet/bygget ennå** (se > FEATURE_BACKLOG.md "Inkrementell deltaker-id (startnummer) for > turneringer"): bruker vil at hver deltaker skal ha et fortløpende > tildelt startnummer, synlig her (og på startlister). Foreløpig > ingen avgjørelse om plassering i denne raden (f.eks. foran navnet) > -- avklares når selve funksjonen designes. - **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.