46696b0d7d
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 1m40s
- 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 |
||
|---|---|---|
| .. | ||
| image-catalog.css | ||
| teach.css | ||