From 6cb0965a9c7b4d5b1e9dc6e84949a9fdf1cdee5b Mon Sep 17 00:00:00 2001
From: Ramon <dev@ramonbesselink.nl>
Date: Mon, 13 Jul 2026 17:32:42 +0200
Subject: [PATCH] v0.2.15-beta: ankerwoorden tonen nu ook zelf hun plaatje

- De automatische ARASAAC-plaatjes (sinds v0.2.06-beta) werden alleen doorgegeven aan andere widgets (Hak/Flits/Bal/Woordkaart) als woordbron, maar nooit getoond in het Ankerwoorden-raster zelf - vandaar dat het leek te ontbreken, voor zowel bestaande als nieuwe woorden
- render() tekent nu een klein plaatje naast elk woord in de cel, met een render()-aanroep zodra een opgehaald plaatje binnenkomt
- Getest tegen de echte ARASAAC-API: bestaande woorden (uit een opgeslagen bord) tonen hun plaatje meteen bij het laden, nieuwe woorden tonen eerst het ankersymbool en daarna het echte plaatje zodra dat binnenkomt

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/css/teach.css        | 7 ++++++-
 public/js/widgets/anchor.js | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/css/teach.css b/public/css/teach.css
index b86cdef..f60166e 100644
--- a/public/css/teach.css
+++ b/public/css/teach.css
@@ -873,7 +873,7 @@
   .an-layer{position:absolute; inset:0;}
   .an-cell{
     position:absolute; width:128px; height:56px; border-radius:12px; border:2px dashed #dbe4f0;
-    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
+    display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:15px;
     color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer;
   }
   .an-cell:hover{border-color:#b6c6dc;}
@@ -882,6 +882,11 @@
   .an-cell.root.filled{background:var(--yellow); font-size:16px;}
   .an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;}
   .an-word{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
+  .an-pic{
+    flex:none; width:22px; height:22px; display:flex; align-items:center;
+    justify-content:center; font-size:16px; line-height:1;
+  }
+  .an-pic img{width:100%; height:100%; object-fit:contain;}
   .an-dot{
     position:absolute; right:4px; bottom:4px; width:15px; height:15px; border-radius:50%;
     border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; padding:0;
diff --git a/public/js/widgets/anchor.js b/public/js/widgets/anchor.js
index d6b176d..d6d4f9a 100644
--- a/public/js/widgets/anchor.js
+++ b/public/js/widgets/anchor.js
@@ -30,6 +30,7 @@ function mountAnchor(root, initState){
     }).finally(()=>{
       fetching.delete(word);
       syncSource();
+      render();
     });
   }
   root.innerHTML = `
@@ -79,6 +80,10 @@ function mountAnchor(root, initState){
         c.style.left = (cx + gx*(CW+G) - CW/2)+"px";
         c.style.top = (cy + gy*(CH+G) - CH/2)+"px";
         if(word){
+          const pic = document.createElement("div");
+          pic.className = "an-pic";
+          setPic(pic, S.pics[word.trim().toLowerCase()] || FALLBACK_PIC);
+          c.appendChild(pic);
           const span = document.createElement("span");
           span.className = "an-word";
           span.textContent = word;