Ja, den gir mye mening — og jeg sjekket to av påstandene direkte mot koden i stedet for å ta dem på tro:
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.
2026-07-27 09:03:15 +02:00
|
|
|
|
# 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).
|
2026-08-22 05:32:23 +02:00
|
|
|
|
> **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.
|
Ja, den gir mye mening — og jeg sjekket to av påstandene direkte mot koden i stedet for å ta dem på tro:
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.
2026-07-27 09:03:15 +02:00
|
|
|
|
- **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.
|