Gloop 🫧

Gratis mini games voor tussendoor, gemaakt door Gloop. Gebouwd met Next.js (App Router). Alle pagina's worden vooraf als statische HTML gebouwd, en elke game wordt pas geladen als iemand hem opent.

Lokaal draaien

npm install
npm run dev        # http://localhost:3000

Productiebuild testen:

npm run build
npm start

Online zetten (Vercel)

1. Zet deze map in een GitHub-repo (git init, git add ., git commit, git push).
2. Vercel → Add New → Project → kies de repo. Vercel herkent Next.js vanzelf → Deploy.
3. Settings → Domains: koppel je domein.
4. Vul in lib/site.js het veld url in (bijv. https://gloop.nl) en push. Dit wordt gebruikt voor deellinks, de sitemap en Google. Laat je het leeg, dan gebruikt de site op Vercel automatisch het productiedomein van het project.

Accounts (Supabase)

Spelers kunnen een account maken met alleen een spelersnaam en een pincode van 4 of 6 cijfers (geen e-mail). Records gaan dan automatisch mee naar elk apparaat. Accounts staan in Supabase; alleen de server praat met de database.

1. Maak een project op supabase.com. Kies als regio Frankfurt (EU) – de privacyverklaring zegt dat de data in de EU staat.
2. Open SQL Editor, plak de inhoud van supabase/schema.sql en klik Run.
3. Zet in Supabase (Database → Extensions) pg_cron aan en voer uit: select cron.schedule('gloop-cleanup', '17 3 * * *', 'select public.gloop_cleanup()'); Zo worden accounts die 400 dagen niet zijn gebruikt automatisch verwijderd (dat belooft de privacyverklaring).
4. Vercel → Settings → Environment Variables: voeg toe
   • SUPABASE_URL – Project Settings → API → Project URL
   • SUPABASE_SERVICE_ROLE_KEY – Project Settings → API → service_role key (geheim, nooit NEXT_PUBLIC_ ervoor zetten)
5. Deploy opnieuw.

Zonder deze instellingen werkt de site gewoon; op de inlogpagina staat dan dat inloggen nog niet beschikbaar is. Lokaal (npm run dev) wordt zonder instellingen een tijdelijke database in het geheugen gebruikt.

Bestand	Wat
lib/accountRules.js	Regels voor namen en pincodes (o.a. blokkade van makkelijke codes)
lib/account.js	Inloggen/uitloggen in de browser en records automatisch bewaren
lib/merge.js	Records van apparaat en account samenvoegen (beste score wint)
lib/server/*	Database, pincode-hashing (scrypt), sessies, beperking van inlogpogingen
app/api/account/*	De account-API
lib/server/admin.js, app/api/beheer/*, app/beheer	Beheer (zie hieronder)

Beheer (admin)

Op /beheer kan een beheerder spelers zoeken, verbergen op de ranglijst, hernoemen, hun scores wissen of het account verwijderen, en per spel/niveau losse scores van de ranglijst halen (bijv. bij valsspelen). Een weggehaalde score komt niet terug via een ander apparaat (staat in de kolom players.cleared). Elke beheeractie staat in de Vercel-logs ([gloop beheer]).

Er zijn twee sloten, omdat een pincode van een kinderaccount makkelijk te raden is:

1. Draai supabase/schema.sql opnieuw (voegt is_admin en cleared toe).
2. Supabase → Table Editor → players → jouw eigen rij → zet is_admin op true.
3. Vercel → Settings → Environment Variables: voeg ADMIN_PASSWORD toe (minstens 12 tekens, niet je pincode), en deploy opnieuw.
4. Log in met je account; in Profiel staat dan de knop Beheer. Vul daar het beheerwachtwoord in (2 uur geldig).

Lokaal zonder Supabase: GLOOP_DEV_ADMIN=JouwNaam ADMIN_PASSWORD=... npm run dev.

Gloop als app (PWA)

Gloop is te installeren als app op telefoon, tablet en computer, zonder app store.

Bestand	Wat
app/manifest.ts	Naam, kleuren, icoontjes en snelkoppelingen van de app
public/icons/	App-icoontjes (icon-* gewoon, maskable-* met extra rand voor Android)
app/apple-icon.png	Icoontje voor iPhone/iPad
app/sw.js/route.ts	Service worker: bewaart pagina's en games, zodat ze ook offline werken
components/InstallApp.tsx	Knop/banner "Installeren" (met uitleg voor iPhone/iPad en Mac)

Nieuwtjes ("Wat is er nieuw?")

Leuke vernieuwingen voor spelers staan in lib/updates.js en op de pagina /nieuw. Zet een nieuw nieuwtje bovenaan de lijst. Met popup: true krijgen spelers één keer een pop-up "Nieuw in Gloop!" (nooit tijdens het spelen; nieuwe bezoekers krijgen geen oude nieuwtjes). Technische of kleine verbeteringen horen er niet in.

Mappenstructuur

Map / bestand	Wat staat erin
lib/site.js	Sitegegevens: eigenaar, e-mail, plaats, KvK, hosting, live-URL
lib/games.js	Lijst met alle games (titel, categorie, kleuren, speelbaar of "Binnenkort")
lib/engine/*.js	Eén bestand per game (canvas/DOM-code)
lib/engine/index.js	Koppeling game-id → game-bestand (code-splitting)
lib/engine/common.js	Gedeeld resultaatscherm, delen en dagelijkse uitdaging
lib/store.js	Lokale opslag (records, gespeelde potjes, naam), dagelijkse uitdaging, recordteksten
lib/content.js	Teksten van info- en juridische pagina's (privacy, cookies, voorwaarden, FAQ…)
lib/blob.js	Gloopie-tekening (SVG) en iconen
app/	Pagina's (home, games, ranglijst, profiel, info-pagina's, sitemap, robots)
components/	React-onderdelen (header, footer, gamekaarten, uitdaging…)
app/globals.css	Alle vormgeving (Gloop-huisstijl)

Stickers en thema-albums

Alles staat in lib/stickers.js:

This is the beginning of the README. Read the rest at the original. Read the full README ↗