From 9bf91f0bd134d989e11876f5a3a4b58171d8dab1 Mon Sep 17 00:00:00 2001 From: Ramon Date: Sun, 19 Jul 2026 09:50:18 +0200 Subject: [PATCH] fix: personage-tekening had een gezicht noch duidelijke dino-vorm (v0.4.24-beta) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 Claude-Session: https://claude.ai/code/session_014EPxzBVRXZZnBPvSAaPAbJ --- VERSION | 2 +- public/css/teach.css | 21 +++++++++++++++++---- public/js/avatar.js | 8 +++++++- public/js/core.js | 2 +- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/VERSION b/VERSION index b81f59b..92ab6b2 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.4.23-beta \ No newline at end of file +0.4.24-beta \ No newline at end of file diff --git a/public/css/teach.css b/public/css/teach.css index fb11767..853053c 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -1690,11 +1690,24 @@ body.hc #penbar .pen-current,body.hc #penbar .pen-popover{border:2px solid #000; .av-species-animal .av-part-head::before{left:2%;} .av-species-animal .av-part-head::after{right:2%;} .av-part-body{position:absolute; z-index:6; display:none;} -.av-species-dino .av-part-body{display:block; left:26%; right:26%; top:42%; height:22%;} -.av-species-dino .av-part-body::before,.av-species-dino .av-part-body::after{content:""; position:absolute; width:20%; height:100%; background:var(--av-body); filter:brightness(.72); clip-path:polygon(50% 0%,0% 100%,100% 100%);} -.av-species-dino .av-part-body::before{left:8%;} -.av-species-dino .av-part-body::after{right:8%;} +.av-species-dino .av-part-body{display:block; left:22%; right:22%; top:36%; height:26%;} +.av-species-dino .av-part-body::before,.av-species-dino .av-part-body::after{content:""; position:absolute; width:22%; height:82%; bottom:0; background:var(--av-body); filter:brightness(.68); clip-path:polygon(50% 0%,100% 65%,100% 100%,0% 100%,0% 65%); border-radius:3px 3px 0 0;} +.av-species-dino .av-part-body::before{left:4%;} +.av-species-dino .av-part-body::after{right:4%;} +.av-spike-mid{display:none; position:absolute;} +.av-species-dino .av-spike-mid{display:block; left:39%; width:22%; height:100%; bottom:0; background:var(--av-body); filter:brightness(.68); clip-path:polygon(50% 0%,100% 65%,100% 100%,0% 100%,0% 65%); border-radius:3px 3px 0 0;} .av-species-animal .av-part-body{display:block; right:2%; bottom:8%; width:16%; height:30%; border-radius:50% 50% 50% 10%; background:var(--av-body); transform:rotate(20deg); filter:brightness(.9);} +.av-tail{position:absolute; z-index:0; display:none;} +.av-species-dino .av-tail{display:block; left:-8%; bottom:8%; width:22%; height:18%; background:var(--av-body); border-radius:50% 15% 50% 50%; transform:rotate(-25deg); filter:brightness(.93);} +.av-eye{position:absolute; z-index:4; top:30%; width:16%; height:16%; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px rgba(20,20,30,.15);} +.av-eye::after{content:""; position:absolute; width:46%; height:46%; left:27%; top:30%; border-radius:50%; background:#232733;} +.av-eye-l{left:25%;} +.av-eye-r{right:25%;} +.av-snout{position:absolute; z-index:7; display:none;} +.av-species-dino .av-snout{display:block; left:30%; right:30%; top:46%; height:20%; border-radius:45%; background:var(--av-body); filter:brightness(1.22);} +.av-species-dino .av-snout::before,.av-species-dino .av-snout::after{content:""; position:absolute; width:14%; height:22%; top:28%; border-radius:50%; background:#2b2b2b; opacity:.6;} +.av-species-dino .av-snout::before{left:26%;} +.av-species-dino .av-snout::after{right:26%;} .av-hair{position:absolute; z-index:4; display:none; background:var(--av-hair);} .av-hair-spiky{display:block; left:14%; right:14%; top:-2%; height:22%; clip-path:polygon(0% 100%,10% 20%,25% 90%,35% 10%,50% 90%,65% 10%,75% 90%,90% 20%,100% 100%);} .av-hair-curly{display:block; left:6%; right:6%; top:-4%; height:26%; border-radius:50% 50% 40% 40%;} diff --git a/public/js/avatar.js b/public/js/avatar.js index 58cebde..f1605e4 100644 --- a/public/js/avatar.js +++ b/public/js/avatar.js @@ -37,11 +37,17 @@ function renderAvatarFace(config, size){ const partHead = document.createElement("div"); partHead.className = "av-part-head"; const hair = document.createElement("div"); hair.className = "av-hair av-hair-" + c.hairStyle; const head = document.createElement("div"); head.className = "av-head"; + const eyeL = document.createElement("div"); eyeL.className = "av-eye av-eye-l"; + const eyeR = document.createElement("div"); eyeR.className = "av-eye av-eye-r"; + const snout = document.createElement("div"); snout.className = "av-snout"; const accHead = document.createElement("div"); accHead.className = "av-acc-head av-acc-head-" + c.accessoryHead; + const tail = document.createElement("div"); tail.className = "av-tail"; const partBody = document.createElement("div"); partBody.className = "av-part-body"; + const spikeMid = document.createElement("div"); spikeMid.className = "av-spike-mid"; + partBody.appendChild(spikeMid); const body = document.createElement("div"); body.className = "av-body"; const accBody = document.createElement("div"); accBody.className = "av-acc-body av-acc-body-" + c.accessoryBody; - face.append(partBody, body, accBody, partHead, head, accHead, hair); + face.append(tail, partBody, body, accBody, partHead, head, eyeL, eyeR, snout, accHead, hair); return face; } diff --git a/public/js/core.js b/public/js/core.js index 8642b2a..8b06dc6 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.4.23-beta"; +const VERSION = "0.4.24-beta"; (function(){ const tag = document.getElementById("verTag"); tag.textContent = "v"+VERSION;