168 lines
7.8 KiB
Markdown
168 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.
|