Hopp til hovedinnhold

Har du vært på hyttetur og kranglet med venner og familie om de rette reglene i kortspillet dere spiller? For å vinne alle slike diskusjoner for all framtid, har jeg laget nettsiden «Norske kortspill». Din definitive guide til alle (ikke egentlig alle) norske kortspill.

Norske kortspill

Hva?

Målet med Norske kortspill er å samle alle norske kortspill på én plass, slik at det er enkelt å finne et kortspill som passer både for deg og de andre som vil være med. Nettsiden skal være rask, tilgjengelig og inneholde alle kortspill som i alle fall jeg har prøvd. Per i dag har siden regler for 7 kortspill og en del varianter, men med nok ferier og manglende 5G ser jeg ikke bort fra at det straks blir flere.

Håpet er at det er enkelt å finne et passende kortspill. Enten ved å bruke filterne, hvor mange vi er, hvor lang tid vi ønsker å bruke og evt. maks alder på det som er med, eller ved å søke etter navnet på kortspillet.

Søk og filtrering på Norske kortspill
Søk eller filtrer for å finne et morsomt kortspill som passer

Inspirasjon?

Jeg har vært Svelte-curious og glad i kortspill i mange år, men manglet idéen som skulle settes ut i live for å kombinere disse to. Først etter å ha søkt etter kortspillregler på Internett en vakker påskedag, ble det tydelig at det finnes et marked for ei nettside med kortspillregler som er enkel å bruke, og som samtidig kan gjøre det lettere å prøve nye kortspill.

I tillegg var håpet å henge seg på AI-bølgen og bare genere opp regler for kjente kortspill, men det viste seg at selv for LLMer er det vanskelig å lande på det rette regelsettet for et gitt kortspill.

Teknologier?

Svelte! Supabase! Disse er de to magiske ingrediensene som gjør Norske kortspill til den beste nettsiden for alle som er glad i å spille kort (kilde: meg).

Svelte

Mange av mine tidligere nettsider er statiske, det vil si at alt innholdet genereres til HTML, CSS og JS på forhånd og serves direkte fra web-serveren. Og en slik stack hadde fungert strålende for denne nettsiden også, bare dumt for stacken at jeg ønsket å lære noe nytt.

Svelte har et godt rykte på seg, se f.eks. Snapen jeg fikk i går, og skiller seg ut ved å kompilere komponenter til effektiv JavaScript-kode under byggeprosessen.

Snap som forteller hvor enkelt Svelte er å bruke
Hyggelig snap fra i går med korrekt budskap

Dette resulterer i mindre pakkestørrelser, raskere lasting og bedre ytelse. I motsetning til andre rammeverk som bruker en virtuell DOM, oppdaterer Svelte DOM-en direkte, noe som reduserer kompleksiteten og forbedrer ytelsen. Og SvelteKit gjør det veldig lett å komme i gang.

Bilde av prosjektet åpnet i VSCode
Svelte i aksjon i VSCode

Supabase

Jeg hadde prøvd Supabase før i en del proof of concepts, men nå ville jeg faktisk prøve å bygge noe fornuftig med det.

Bilde av Supabase
Med Supabase trenger du ikke engang et database-IDE

Supabase gir deg en komplett backend uten at du trenger å sette opp servere eller skrive backend-kode. Med Supabase får du en fullverdig PostgreSQL-database, autentisering, sanntidsoppdateringer, lagring og serverløse funksjoner, inkludert klientbiblioteker som gjør det veldig raskt å komme i gang.

Bruk av Supabase
Supabase passer fint med Svelte

Jeg har også laget et enkelt designsystem for nettsiden, det kan best oppsummeres med dette bildet:

Norsk flagg

Læring?

Supabase blir dessverre ikke brukt helt til fulle i dette prosjektet. Faktisk bruker jeg det kun som en key-value store. Alle reglene lagres i JSON, og nøkkelen er ID-en til kortspillet. Disse reglene kunne like gjerne ligget på web-serveren, men igjen, Supabaaase!

En annen læring er at det TAR LANG TID å skrive gode regler for kortspill på en folkelig og forståelig måte. Jeg har jo prøvd å folkeliggjøre det litt ekstra ved å bruke en City Syd-kortstokk (#tiller), men kortstokken gjorde det ikke enklere å skrive en god tekst. Det er i tillegg vanskelig å skrive om kortspill som jeg ikke har prøvd selv, siden forskjellige kilder alltid har forskjellige forslag til hva reglene skal være.

Et kortspill, illustrert med City Syd-kortstokk
Et kortspill, illustrert med City Syd-kortstokk

Dermed er faktisk innholdsproduksjon det som er vanskeligst på denne nettsiden. Svelte og Supabase har vært megachill å jobbe med, og jeg anbefaler dem til alle som ønsker å bygge en nettside med en database bak.

Liker du innlegget?

Del gjerne med kollegaer og venner