Erol Haagenrud 6bfd986964 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

7.8 KiB

Raw Blame History

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:

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

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.
Putter — Stepper (+/−, size-11).
Fairway — ChoiceRow eller DirectionCross: Bom venstre / Treff / Bom høyre. Alltid tekstlabel (DS: aldri ikon alene).
Green (GIR) — DirectionCross «Bommet green? Hvor» (Lang/Kort/ Venstre/Høyre + treff i sentrum), eller ChoiceRow hvis enklere.
Bunkerslag / Straffeslag / Chip — Stepper hver.
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.

7.8 KiB Raw Blame History Unescape Escape