teecup/teecup-scorekort-og-entry-spec.md

# 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.