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.