"use client" import { useCallback, useEffect, useState } from "react" import { Box, Button, Container, Flex, Heading, HStack, SimpleGrid, Skeleton, SkeletonCircle, Stack, Text, } from "@chakra-ui/react" import NextLink from "next/link" import { Icon } from "@obelisk/blocks" /** * Het eigen strippensaldo van de ingelogde speler, als papieren strippenkaart. * * De kaart zelf is het scherm: één vakje per gekochte les, en een afgestempeld * vakje voor elke les die de speler gevolgd heeft. Dat is wat een speler van een * strippenkaart kent — hij ziet in één oogopslag hoeveel vakjes nog leeg zijn, * zonder een getal te hoeven lezen. * * De stempels staan per vakje een paar graden gedraaid. Die hoek komt uit de * index, niet uit een random: bij een re-render mag een stempel niet verspringen, * en op de server moet dezelfde hoek uitkomen als in de browser. * * Alles komt van /mine/, dat op de sessie filtert. Deze component stuurt dus * nooit een speler-id mee; hij kan per definitie alleen het eigen saldo tonen. */ // Maatvoering van de stempel. De letterpositie volgt hieruit, zodat een andere // stempelgrootte of ringafstand niet betekent dat je posities opnieuw moet // uitzoeken. // Het vakje vult z'n kolom in het raster en is vierkant; de stempel zit daar // met STEMPEL_MARGE binnen, zodat er wit om de afdruk staat. // // STEMPEL_SIZE is geen pixelmaat meer maar de rekeneenheid waarin de onderdelen // van de stempel beschreven zijn: alle maten worden als percentage daarvan naar // container-units (cqi) omgezet, zodat de afdruk meeschaalt met het vakje in // plaats van bij een smalle kolom uit z'n cirkel te lopen. const STEMPEL_SIZE = 100 const STEMPEL_MARGE = "9%" const STEMPEL_LIJN = 2 const RING_INSET = 20 const LETTER_SIZE = 12 // Het hart van de band tussen de twee cirkels: van de binnenkant van de // buitenlijn tot de buitenkant van de binnenlijn, en daar precies tussenin. // LETTER_INZET trekt de tekst daarna nog iets naar binnen: meetkundig gecentreerd // staat hij optisch te dicht op de buitenring, omdat het oog de dikke buitenlijn // meeweegt en de dunne binnenring nauwelijks. const BAND_BUITEN = STEMPEL_SIZE / 2 - STEMPEL_LIJN const BAND_BINNEN = STEMPEL_SIZE / 2 - RING_INSET + STEMPEL_LIJN const LETTER_INZET = 1.5 const RING_RADIUS = (BAND_BUITEN + BAND_BINNEN) / 2 - LETTER_INZET // Gemiddelde letterbreedte als deel van de fontgrootte, voor bold sans-serif. // Opgemeten in de browser: hoofdletters lopen van 4,3px ('I') tot 10,9px ('O') // bij 14px, dus ~0,62em gemiddeld. const LETTER_RATIO = 0.62 // Hoe lang de hele reeks stempels maximaal mag duren, in seconden. const STEMPEL_REEKS = 2.4 // De kaart toont altijd minstens dit aantal vakjes: ook wie één les gekocht // heeft ziet een kaart in plaats van één los vakje, en tijdens het laden staat // er meteen een kaart van de juiste hoogte. const MIN_VAKJES = 12 const MAANDEN = [ "jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec", ] function formatDate(iso) { if (!iso) return "" const date = new Date(iso) if (Number.isNaN(date.getTime())) return "" return new Intl.DateTimeFormat("nl-NL", { day: "numeric", month: "long", year: "numeric", }).format(date) } /** Kort datumstempel: '9 sep' — moet in een vakje passen. */ function stampDate(iso) { if (!iso) return "" const date = new Date(iso) if (Number.isNaN(date.getTime())) return "" return `${date.getDate()} ${MAANDEN[date.getMonth()]}` } function formatMoney(value) { return new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR", }).format(Number(value || 0)) } export default function MijnStrippenkaart({ title = "Mijn strippenkaart", buyUrl = "/lessen/", }) { const [data, setData] = useState(null) const [error, setError] = useState("") // Het laatst bekende aantal vakjes, zodat de kaart bij een volgend bezoek // direct de juiste hoogte heeft in plaats van van vijf naar vijftien vakjes // te springen zodra /mine/ antwoordt. Alleen een hint voor de layout: het // echte aantal komt altijd uit de response. const [vorigAantal, setVorigAantal] = useState(() => { if (typeof window === "undefined") return null const opgeslagen = window.localStorage.getItem("stripcard-vakjes") return opgeslagen ? Number(opgeslagen) || null : null }) const load = useCallback(() => { fetch("/api/app/stripcards/mine/") .then((res) => { if (res.status === 401 || res.status === 403) { throw new Error("Log in om je strippenkaart te zien.") } return res.json() }) .then((body) => { setData(body) setError("") const aantal = body?.balance?.strips_bought if (aantal && typeof window !== "undefined") { window.localStorage.setItem("stripcard-vakjes", String(aantal)) setVorigAantal(aantal) } }) .catch((err) => setError(err?.message || "Je strippenkaart kon niet geladen worden.")) }, []) useEffect(() => { load() }, [load]) if (error) { return ( {error} ) } // Geen spinner: de kaart staat er meteen, ook voordat /mine/ geantwoord heeft. // Zolang het saldo onbekend is worden er PLACEHOLDER_VAKJES lege vakjes getoond // en blijft de kop leeg — het aantal klapt dus één keer om zodra het echte // aantal binnen is, in plaats van dat de hele kaart pas na de fetch verschijnt. const laden = !data const saldo = data?.balance || {} const left = saldo.strips_left || 0 const gekocht = laden ? vorigAantal || 0 : saldo.strips_bought || 0 // Het raster is nooit kleiner dan MIN_VAKJES. De extra vakjes zijn opvulling // en horen niet bij het saldo: het aantal in de kop en de tekst blijven het // echte 'gekocht', alleen de kaart is groter. const rasterVakjes = Math.max(gekocht, MIN_VAKJES) const purchases = data?.purchases || [] const uses = data?.uses || [] // De kaart loopt van les 1 tot het aantal gekochte lessen. De gevolgde lessen // vullen de vakjes op volgorde van oud naar nieuw: /mine/ levert ze // nieuwste-eerst, dus die lijst gaat hier omgekeerd in. const oudsteEerst = [...uses].reverse() const vakjes = Array.from({ length: rasterVakjes }, (_, i) => ({ nummer: i + 1, use: oudsteEerst[i] || null, // Voorbij het gekochte aantal: opvulling om de kaart op MIN_VAKJES te // houden. Die vakjes zijn geen les die je nog hebt, dus ze staan flauwer. opvulling: i >= gekocht, })) // De stempels komen één voor één neer, 180ms na elkaar, maar samen nooit // langer dan STEMPEL_REEKS: bij een kaart van dertig lessen zou de laatste // stempel anders vijf seconden op zich laten wachten. const stapVertraging = oudsteEerst.length > 1 ? Math.min(0.18, STEMPEL_REEKS / (oudsteEerst.length - 1)) : 0 return ( {title} {saldo.holder_name ? ( {saldo.holder_name} ) : null} {!laden && gekocht === 0 ? ( Je kaart is nog leeg Koop een pakket lessen, dan verschijnen hier je vakjes. De trainer stempelt er één af elke keer dat je een les volgt. ) : ( Pickleball Apeldoorn Lessenkaart {laden ? ( ) : ( {left} / {gekocht} )} {laden ? ( ) : ( {left === 0 ? "Alle vakjes zijn afgestempeld." : `Nog ${left} ${left === 1 ? "les" : "lessen"} te gebruiken.`} )} {laden ? " " : `${gekocht} ${gekocht === 1 ? "vakje" : "vakjes"}`} {vakjes.map((vak, index) => ( ))} {left === 0 ? ( Je kaart is vol. Koop lessen bij om te blijven spelen — wat je bijkoopt komt op een nieuwe kaart te staan. ) : null} )} Gevolgde lessen {uses.length === 0 ? ( Je hebt nog geen les gevolgd. ) : ( {uses.map((les, index) => ( {formatDate(les.used_at)} {les.note ? ( {les.note} ) : null} ))} )} Aankopen {purchases.length === 0 ? ( Je hebt nog geen lessen gekocht. ) : ( {purchases.map((buy) => ( {buy.type_title} {formatDate(buy.purchased_at)} {formatMoney(buy.price)} ))} )} ) } /** * Eén vakje van de kaart: leeg met z'n nummer, of afgestempeld met de datum * waarop de les gevolgd is. * * Staat na de default export: de props_schema van een library-component wordt * afgeleid uit de eerste component in het bestand, en dan zou dit vakje de * props van de pagina bepalen in plaats van title/buyUrl. */ function Vakje({ nummer, use, index, stapVertraging, laden }) { const gebruikt = Boolean(use) const hoek = [-9, 6, -4, 11, -7, 3][nummer % 6] return ( {laden ? "" : nummer} {laden ? ( ) : gebruikt ? ( ) : null} ) } /** * Eén letter van de gebogen tekst. * * De letter staat in het midden van de stempel, wordt om dat punt gedraaid en * dan RING_RADIUS naar buiten geschoven — daarmee komt hij precies op het hart * van de band tussen de twee cirkels te liggen. * * Het vakje is nul breed met de letter gecentreerd, zodat elke glyph op de * rotatie-as staat: met een vaste breedte (1em) zou een smalle 'I' 8px ruimte * krijgen en een brede 'O' bijna niets, en dan verspringt de letterafstand. * * Onderaan draait de letter 180° zodat hij niet op z'n kop hangt, met de hoek * OPGETELD bij die 180. Aftrekken zou de leesrichting omklappen en 'APELDOORN' * als 'NROODLEPA' laten verschijnen. */ function BoogLetter({ letter, hoek, boven }) { const richting = boven ? -1 : 1 const kanteling = boven ? 0 : 180 return ( {letter} ) } /** * Tekst langs de rand van de stempel. * * De spread wordt berekend uit de tekst zelf: hoeveel graden een woord van deze * lengte op deze radius nodig heeft. Zo blijft de letterafstand gelijk of het * woord nu negen of twaalf letters heeft, in plaats van een vast aantal graden * dat bij een langer woord de letters op elkaar drukt. */ function Boog({ tekst, boven }) { const letters = tekst.split("") const breedte = letters.length * LETTER_SIZE * LETTER_RATIO const spread = (breedte / RING_RADIUS) * (180 / Math.PI) const stap = spread / (letters.length - 1) return letters.map((letter, i) => ( )) } /** * De inktafdruk: dubbele ring, de clubnaam gebogen langs de boven- en onderrand * en een banderol met de datum er dwars door — de opbouw van een rubberstempel. * * Schaalt mee met het vakje: de stempel is een vierkant dat z'n container vult, * en alle maten erin staan in cqi (percentage van die containerbreedte). Zo * blijven de ringen, de boogletters en de banderol in verhouding, of de kolom * nu 96px of 130px breed is. */ function Stempel({ datum }) { return ( {datum} ) }

Wachtwoord vergeten