Gewijzigde functionaliteiten:
- Voegt vijf afwisselende avatardansen toe.
- Houdt lichaam, haar en accessoires als een verbonden SVG-figuur.
- Danst na afgeronde woordgroepen, flitsrondes, galgjerondes en rekenrondes.
- Respecteert verminderde beweging met een stil feestbeeld.
Tests: 159 geslaagd; npm audit: 0 kwetsbaarheden.
- Nieuwe hoofdaccessoires: zonnebril, koptelefoon, feesthoedje.
- Nieuwe lichaamsaccessoires: ketting, rugtas (bandjes over de
schouders, zichtbaar van voren).
- Server-validatie (src/api.js) en vertalingen (nl+en) meegewerkt met
dezelfde nieuwe waarden - anders zou de client een optie tonen die de
server als "ongeldig hoofdaccessoire" afwijst.
- Geen wijziging aan de bestaande pet/kroon-onderdrukkingsregel nodig:
zonnebril/koptelefoon/feesthoedje bedekken het bovenhoofd niet volledig,
dus haar blijft er gewoon zichtbaar naast/onder.
- Geverifieerd: alle select-opties komen aan in de instellingen-editor,
een PUT met de nieuwe waarden slaagt (bestaande server-validatie
accepteert ze nu), en alle soort/accessoire-combinaties oogden goed in
screenshot (zonnebril op de dino, koptelefoon op het monster,
feesthoedje + ketting samen, rugtas op het dier).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ
- Dino: rugstekels stonden als een rij spitse vormen voor de hals/borst
("Ga als designer kijken" - gebruiker vond dit "wat vreemd"), wat als
een rare kraag oogde. Verplaatst naar een klein randje bovenop de kop
(zoals kleine hoorntjes) - dichter bij de anatomische plek (rug/kruin)
en rustiger op klein formaat.
- Dier (beer): had een los staartje opzij op dezelfde hoogte en met
vrijwel dezelfde vorm/grootte als de armen/benen, waardoor het als een
extra ledemaat oogde. Verwijderd - een beer laat van de voorkant
sowieso nauwelijks iets van zijn staart zien, dus dit is ook
anatomisch kloppender dan een zichtbaar zij-staartje.
- Overwogen: SVG vs. PNG-lagen als basis. SVG blijft de juiste keuze
hier - lichaams-/haarkleur zijn vrije kleurkiezers (elke hex-waarde),
wat via fill-attributen triviaal is maar bij PNG een vast palet of
canvas-hertintplugin zou vereisen; SVG schaalt bovendien scherp op
alle drie weergavegroottes zonder aparte assets.
- Geverifieerd: alle vijf bestaande scenario's, volledige testsuite,
en een School-navigator met een echte klas (leerling met dier-
personage toont nu geen vreemd zij-staartje meer).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ
- Kernprobleem: de CSS-laagjesversie (losse divs met percentage-posities
en z-index) had onderdelen die los van het lichaam hingen en een
tekenvolgorde die niet klopte (soort-specifieke delen soms achter
hoofd/lijf verstopt, soms er los voor zwevend). SVG lost dit
structureel op: tekenvolgorde = laagvolgorde, geen z-index nodig, en
elk onderdeel is een gebogen path/ellips die het silhouet van het
vorige onderdeel ruim overlapt in plaats van ernaast te zweven.
- Onderzocht hoe gangbare avatar-generators (DiceBear, Avataaars) dit
aanpakken: vaste 100x100 viewBox, onderdelen als SVG-groepen in de
juiste volgorde, kleur via directe fill-waarden i.p.v. CSS-variabelen
in SVG. Dat patroon hier toegepast, geen code overgenomen.
- Elke soort (dino/monster/dier) is nu een samenhangend lichaam: poten,
armen, staart/oren, buikvlek en gezicht overlappen allemaal duidelijk
met het hoofd/lijf. Dino: rugstekels, snuit met neusgaten, glimlach.
Monster: hoorntjes, brede mond met slagtandjes, asymmetrische ogen.
Dier: ronde oren, beer-snuit, kleine staart.
- Haar (spits/krullen/paardenstaart/mohawk) en accessoires (pet/kroon/
bril/strik/sjaal/cape/badge) opnieuw getekend zodat ze ook echt op
hun naam lijken, i.p.v. simpele gekleurde blokjes.
- Regel toegevoegd: een pet of kroon dekt het hele bovenhoofd af, dus
onderliggend haar wordt dan niet getekend (gaf anders rommelige,
half verstopte plukjes rond de rand) - een paardenstaart blijft wel
zichtbaar, want die hangt naar opzij.
- Kleuren (lichter voor buik/snuit, donkerder voor poten/staart/
rugstekels) worden nu berekend uit de gekozen lichaamskleur zelf
(avatarShade-helper), i.p.v. via CSS filter:brightness().
- CSS: alle oude .av-* laag-regels (~65 regels) verwijderd; alleen
afmetingen (sm/md/lg) en de bestaande instellingen/widget/
aanmoedigings-CSS blijven staan.
- Geverifieerd: alle vijf bestaande scenario's (opslaan, widget,
School-navigator-badge met een echte klas vol verschillende
personages, math.js-aanmoediging, ongeldige input), plus uitgebreide
screenshot-rondes van losse onderdelen, alle soort/haar/accessoire-
combinaties en alle drie weergavegroottes (24/44/180px) vóór het
committen.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ
- Buikvlek (lichter gekleurde ovaal) op de romp - een klassiek dino-kenmerk
dat meteen de "kleurvlek zonder vorm"-indruk wegneemt.
- Twee kleine pootjes onderaan en twee stompe armpjes opzij (T-rex-stijl) -
het lichaam stond eerder als een rond blok zonder ledematen.
- Staart herzien naar een echte taps toelopende vorm (clip-path) i.p.v. de
ronde druppelvorm van hiervoor.
- Alleen voor soort "dino" - monster/dier ongewijzigd, geen regressie
(gecontroleerd via de screenshot-galerij van alle drie soorten samen).
- Geverifieerd op alle vijf bestaande scenario's (opslaan, widget,
School-navigator-badge, math.js-aanmoediging, ongeldige input) én
opnieuw op alle drie weergavegroottes (24/44/180px) vóór het committen.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ
- Elk personage kreeg ogen (was volledig gezichtsloos - de kernoorzaak van de
lage beeldkwaliteit: een gekleurde vlek zonder gezicht oogt nooit als een
figuur, ongeacht soort/haar/accessoires).
- Dino kreeg een snuitje met neusgaten, een duidelijk zichtbaar staartje en
een derde, groter/donkerder rugstekel-plaatje - hiervoor waren de
rugstekels aanwezig maar onzichtbaar (z-index onder het lijf/hoofd, zie
vorige commit), nu bewust vóór het silhouet getekend zodat ze altijd tonen.
- Snuitje stond eerst z-index-onder de rugstekels (dus zelf ook onzichtbaar,
identieke fout als hierboven) - z-index verhoogd zodat het snuitje altijd
vóór de rugstekels ligt, wat ook anatomisch klopt (snuit zit vooraan).
- Geverifieerd met alle vijf scenario's uit de vorige verificatie (opslaan,
widget, School-navigator-badge, math.js-aanmoediging) plus een losse
screenshot-galerij op alle drie weergavegroottes (24/44/180px).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ
- Nieuwe migratie db/018_user_avatar.sql: kolom avatar_data (jsonb) op users.
- publicUser() geeft avatar overal automatisch mee (login, /auth/me,
/admin/users) - bestaande school/klas-rechten regelen vanzelf wie welke
personages ziet, geen nieuwe permissie-sleutel nodig.
- Nieuwe route PUT /me/avatar (open voor elke ingelogde rol, zelfde patroon
als /me/data): valideert soort/kleuren/haar/accessoires, slaat de eigen rij op.
- Nieuwe gedeelde module public/js/avatar.js: personage samenstellen uit
soort (dino/monster/dier - elk met een vast eigen lichaamsdeel, ook de
gevraagde dinostekels), lichaams- en haarkleur, haarstijl en hoofd-/
lichaamsaccessoires; gedeelde editor-UI voor zowel de instellingen-sectie
"Mijn personage" als de nieuwe widget.
- Instellingen-sectie "Mijn personage" (cms.js-patroon) - de leerling-toegang,
want widgets van categorie "class" zijn niet toewijsbaar in het
afgeschermde leerling-speelscherm.
- Widget 🦖 toegevoegd aan het bord (categorie "class") voor staf en
volledige-whiteboard-gebruikers.
- School-navigator (admin.js): leerkracht/beheerder ziet nu het personage
van elk klaslid in de personenlijst i.p.v. altijd de initialen-cirkel.
- Voorbereiding gerelateerd roadmappunt: math.js toont het eigen personage
kort naast "Goed!" als aanmoediging (pilot in één widget, geen nieuw
feedbacktype); zonder ingesteld personage blijft het gedrag ongewijzigd.
- Vertalingen (nl+en) voor de nieuwe widget, instellingen-sectie en editor.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ
