Erol Haagenrud
dabf3478ec
Integrerer V0-eksporten for hole-diagram-view.tsx. Traff props- kontrakten i prompten eksakt -- ingen integreringsjustering nødvendig, tsc rent på første forsøk. Egne tillegg fra V0 utover prompten: full aria-label-oppsummering av hele diagrammet for skjermlesere, lett kollisjons-unngåelse for nære hindringsetiketter. Re-verifisert i scratch mot samme kjente syntetiske geometri som den midlertidige hånd-kodede versjonen -- identiske tall/posisjoner. Lys+mørk bekreftet. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
309 lines
11 KiB
TypeScript
309 lines
11 KiB
TypeScript
"use client"
|
|
|
|
// V0-eksportert visning (2026-08-17, ADR-083) -- ren kontrollert
|
|
// komponent, ingen egen GPS-/geometrilogikk. All geometri-utregning
|
|
// (projectOntoAxis) bor i hole-target-distance.tsx, allerede bevist
|
|
// riktig med enhetstester + scratch-verifisering FØR denne visningen
|
|
// ble bestilt. Erstattet en midlertidig hånd-kodet stand-in med samme
|
|
// props-kontrakt -- samme mønster som FlagPlantSheet/PlayerImportPanel.
|
|
|
|
import { Flag, MapPin, TriangleAlert } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type DiagramHazard = {
|
|
label: string
|
|
/** Live distance FROM THE PLAYER, always accurate. */
|
|
distanceMeters: number
|
|
/** 0 = at tee, 100 = at green. May be <0 or >100. */
|
|
alongPercent: number
|
|
/** Positive = right of the tee->green axis, negative = left. */
|
|
crossMeters: number
|
|
}
|
|
|
|
type Props = {
|
|
distances: { front: number; middle: number; back: number }
|
|
playerPosition: { alongPercent: number; crossMeters: number }
|
|
/** Already sorted nearest-to-player first. */
|
|
hazards: DiagramHazard[]
|
|
size?: "compact" | "full"
|
|
className?: string
|
|
}
|
|
|
|
// --- Diagram geometry (percentages of the field box) ---------------------
|
|
// Fixed endpoints: green stays at the top, tee stays at the bottom, always.
|
|
const TRACK_TOP = 12 // where alongPercent === 100 lands (leaves room for the flag)
|
|
const TRACK_BOTTOM = 88 // where alongPercent === 0 lands (leaves room for the tee dot)
|
|
// Sideways scale: this many meters of cross offset maps to the max visual swing.
|
|
const MAX_CROSS_METERS = 30
|
|
const MAX_OFFSET_PCT = 40 // ±40% of the field width, per spec
|
|
// Label collision handling: minimum vertical gap between stacked labels.
|
|
const LABEL_MIN_GAP_PCT = 11
|
|
|
|
function clamp(n: number, lo: number, hi: number) {
|
|
return Math.min(hi, Math.max(lo, n))
|
|
}
|
|
|
|
function alongToTopPct(alongPercent: number) {
|
|
const a = clamp(alongPercent, 0, 100)
|
|
return TRACK_TOP + ((100 - a) / 100) * (TRACK_BOTTOM - TRACK_TOP)
|
|
}
|
|
|
|
function crossToLeftPct(crossMeters: number) {
|
|
const offset = clamp(
|
|
(crossMeters / MAX_CROSS_METERS) * MAX_OFFSET_PCT,
|
|
-MAX_OFFSET_PCT,
|
|
MAX_OFFSET_PCT,
|
|
)
|
|
return 50 + offset
|
|
}
|
|
|
|
function formatMeters(m: number) {
|
|
return `${Math.round(m)} m`
|
|
}
|
|
|
|
export function HoleDiagram({
|
|
distances,
|
|
playerPosition,
|
|
hazards,
|
|
size = "full",
|
|
className,
|
|
}: Props) {
|
|
if (size === "compact") {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col gap-2 rounded-xl border border-clubhouse-border bg-clubhouse-card p-3 text-clubhouse-ink",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex items-baseline justify-center gap-3 tabular-nums">
|
|
<CompactNumber label="Front" value={distances.front} />
|
|
<CompactNumber label="Senter" value={distances.middle} emphasized />
|
|
<CompactNumber label="Bak" value={distances.back} />
|
|
</div>
|
|
{hazards.length > 0 && (
|
|
<ul className="flex flex-col gap-1 border-t border-clubhouse-border pt-2">
|
|
{hazards.map((h, i) => (
|
|
<li key={`${h.label}-${i}`} className="flex items-center gap-1.5 text-sm">
|
|
<TriangleAlert
|
|
aria-hidden="true"
|
|
className="size-3.5 shrink-0 text-cup-strong"
|
|
/>
|
|
<span className="min-w-0 flex-1 truncate text-clubhouse-muted">{h.label}</span>
|
|
<span className="shrink-0 font-bold tabular-nums text-clubhouse-ink">
|
|
{formatMeters(h.distanceMeters)}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// --- Full variant -------------------------------------------------------
|
|
// Precompute placements and a light label-collision nudge (top -> bottom).
|
|
const placed = hazards.map((h, i) => ({
|
|
...h,
|
|
key: `${h.label}-${i}`,
|
|
topPct: alongToTopPct(h.alongPercent),
|
|
leftPct: crossToLeftPct(h.crossMeters),
|
|
}))
|
|
|
|
const byTop = [...placed].sort((a, b) => a.topPct - b.topPct)
|
|
const labelTopByKey = new Map<string, number>()
|
|
let lastLabelTop = Number.NEGATIVE_INFINITY
|
|
for (const p of byTop) {
|
|
const desired = p.topPct
|
|
const labelTop = Math.max(desired, lastLabelTop + LABEL_MIN_GAP_PCT)
|
|
labelTopByKey.set(p.key, labelTop)
|
|
lastLabelTop = labelTop
|
|
}
|
|
|
|
const playerTop = alongToTopPct(playerPosition.alongPercent)
|
|
const playerLeft = crossToLeftPct(playerPosition.crossMeters)
|
|
|
|
return (
|
|
<div className={cn("flex w-full flex-col gap-4 text-clubhouse-ink", className)}>
|
|
{/* Distance readout: center emphasized + largest, in the tee-green color. */}
|
|
<div className="flex items-end justify-center gap-6 tabular-nums">
|
|
<BigNumber label="Front" value={distances.front} />
|
|
<BigNumber label="Senter" value={distances.middle} emphasized />
|
|
<BigNumber label="Bak" value={distances.back} />
|
|
</div>
|
|
|
|
{/* The hole diagram. Green fixed top, tee fixed bottom. */}
|
|
<div
|
|
className="relative h-[24rem] w-full overflow-hidden rounded-2xl border border-clubhouse-border bg-clubhouse-field"
|
|
role="img"
|
|
aria-label={buildDiagramAria(distances, hazards, playerPosition)}
|
|
>
|
|
{/* Discreet tee->green centerline */}
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute top-[10%] bottom-[10%] left-1/2 w-px -translate-x-1/2 bg-clubhouse-border"
|
|
/>
|
|
|
|
{/* Green marker (fixed top) */}
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute left-1/2 top-[3%] flex -translate-x-1/2 flex-col items-center gap-0.5"
|
|
>
|
|
<Flag className="size-6 text-tee-strong" strokeWidth={2.5} />
|
|
<span className="rounded bg-clubhouse-card px-1.5 py-0.5 text-xs font-bold text-tee-strong">
|
|
Green
|
|
</span>
|
|
</div>
|
|
|
|
{/* Tee marker (fixed bottom) */}
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute bottom-[3%] left-1/2 flex -translate-x-1/2 flex-col items-center gap-0.5"
|
|
>
|
|
<span className="rounded bg-clubhouse-card px-1.5 py-0.5 text-xs font-bold text-clubhouse-muted">
|
|
Tee
|
|
</span>
|
|
<span className="size-3 rounded-full border-2 border-clubhouse-muted bg-clubhouse-card" />
|
|
</div>
|
|
|
|
{/* Hazard markers + always-visible distance labels */}
|
|
{placed.map((p) => {
|
|
const labelTop = labelTopByKey.get(p.key) ?? p.topPct
|
|
const labelOnLeft = p.leftPct > 55
|
|
return (
|
|
<div key={p.key} aria-hidden="true">
|
|
{/* marker dot */}
|
|
<div
|
|
className="absolute z-10 flex size-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-clubhouse-card bg-cup-strong shadow-sm"
|
|
style={{ top: `${p.topPct}%`, left: `${p.leftPct}%` }}
|
|
>
|
|
<TriangleAlert className="size-4 text-clubhouse-card" strokeWidth={2.5} />
|
|
</div>
|
|
{/* distance label (nudged vertically on collision) */}
|
|
<div
|
|
className={cn(
|
|
"absolute z-20 -translate-y-1/2 whitespace-nowrap rounded-md bg-clubhouse-card px-1.5 py-0.5 text-xs font-bold tabular-nums text-clubhouse-ink shadow-sm ring-1 ring-clubhouse-border",
|
|
labelOnLeft ? "-translate-x-full" : "translate-x-0",
|
|
)}
|
|
style={{
|
|
top: `${labelTop}%`,
|
|
left: labelOnLeft ? `calc(${p.leftPct}% - 1rem)` : `calc(${p.leftPct}% + 1rem)`,
|
|
}}
|
|
>
|
|
{formatMeters(p.distanceMeters)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{/* Player position ("you are here") — a pin, shape-distinct from hazards */}
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute z-30 flex -translate-x-1/2 -translate-y-full flex-col items-center"
|
|
style={{ top: `${playerTop}%`, left: `${playerLeft}%` }}
|
|
>
|
|
<span className="mb-0.5 rounded bg-clubhouse-card px-1.5 py-0.5 text-xs font-bold text-tee-strong ring-1 ring-clubhouse-border">
|
|
Deg
|
|
</span>
|
|
<MapPin className="size-7 fill-tee-strong text-clubhouse-card" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Accessible, screen-reader-friendly text list — the same info as the diagram. */}
|
|
{hazards.length > 0 && (
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="text-sm font-bold uppercase tracking-wide text-clubhouse-muted">
|
|
Hindringer
|
|
</h3>
|
|
<ul className="flex flex-col divide-y divide-clubhouse-border rounded-xl border border-clubhouse-border bg-clubhouse-card">
|
|
{hazards.map((h, i) => (
|
|
<li key={`${h.label}-${i}`} className="flex items-center gap-3 px-3 py-2.5">
|
|
<TriangleAlert
|
|
aria-hidden="true"
|
|
className="size-5 shrink-0 text-cup-strong"
|
|
strokeWidth={2.5}
|
|
/>
|
|
<span className="min-w-0 flex-1 text-pretty text-base text-clubhouse-ink">
|
|
{h.label}
|
|
</span>
|
|
<span className="shrink-0 text-lg font-bold tabular-nums text-clubhouse-ink">
|
|
{formatMeters(h.distanceMeters)}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BigNumber({
|
|
label,
|
|
value,
|
|
emphasized,
|
|
}: {
|
|
label: string
|
|
value: number
|
|
emphasized?: boolean
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<span
|
|
className={cn(
|
|
"font-black leading-none tabular-nums",
|
|
emphasized ? "text-6xl text-tee-strong" : "text-4xl text-clubhouse-ink",
|
|
)}
|
|
>
|
|
{Math.round(value)}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"mt-1 font-bold uppercase tracking-wide",
|
|
emphasized ? "text-sm text-tee-strong" : "text-xs text-clubhouse-muted",
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CompactNumber({
|
|
label,
|
|
value,
|
|
emphasized,
|
|
}: {
|
|
label: string
|
|
value: number
|
|
emphasized?: boolean
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<span
|
|
className={cn(
|
|
"font-black leading-none tabular-nums",
|
|
emphasized ? "text-3xl text-tee-strong" : "text-xl text-clubhouse-ink",
|
|
)}
|
|
>
|
|
{Math.round(value)}
|
|
</span>
|
|
<span className="text-[0.65rem] font-bold uppercase tracking-wide text-clubhouse-muted">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function buildDiagramAria(
|
|
distances: Props["distances"],
|
|
hazards: DiagramHazard[],
|
|
player: Props["playerPosition"],
|
|
) {
|
|
const base = `Baneskisse. Senter ${Math.round(distances.middle)} meter til green. Din posisjon markert.`
|
|
if (hazards.length === 0) return `${base} Ingen hindringer.`
|
|
const list = hazards
|
|
.map((h) => `${h.label} ${Math.round(h.distanceMeters)} meter`)
|
|
.join(", ")
|
|
return `${base} Hindringer: ${list}.`
|
|
}
|