v0.2.16-beta: ankerwoorden - lengtegrens-bug, geen nep-ankersymbool, koppeling met woordkaart

- Lengte-check voor ankerwoorden was strenger dan het invoerveld zelf toestond ({2,12} vs maxLength 24): woorden als "kledingwinkel" werden nooit opgezocht terwijl ARASAAC er prima plaatjes voor heeft
- Geen ankersymbool meer als terugval wanneer ARASAAC geen match heeft (bv. "contant"); de cel blijft leeg en is klikbaar als snelkoppeling naar een nieuwe, herbruikbare plaatjeskiezer (nieuw: public/js/picker.js, hergebruikt dezelfde emoji-lijst/ARASAAC-zoekfunctie/CSS als de bestaande woordkaart-editor)
- Elk ankerraster synchroniseert zijn woorden-met-plaatje voortaan naar een eigen thema in THEMES, zodat ankerwoorden ook beheerbaar zijn via de bestaande woordkaart-editor (Letterblokken-widget) - geen wijziging aan letters.js nodig, het bestaande thema-systeem pakt dit vanzelf op
- Oudere borden met het letterlijke ankersymbool als opgeslagen "plaatje" migreren automatisch naar de nieuwe lege staat

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

public/css/teach.css

@@ -887,6 +887,13 @@
     justify-content:center; font-size:16px; line-height:1;
   }
   .an-pic img{width:100%; height:100%; object-fit:contain;}
+  /* geen automatisch plaatje (nog) - lege, klikbare plek i.p.v. een nep-ankersymbool,
+     dient als snelkoppeling naar de plaatjeskiezer */
+  .an-pic-empty{
+    border:1.5px dashed #cdd7e4; border-radius:6px; cursor:pointer; opacity:.6;
+    transition:opacity .15s, border-color .15s;
+  }
+  .an-pic-empty:hover{opacity:1; border-color:var(--blue);}
   .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;

public/index.html

@@ -150,6 +150,7 @@
 <script src="js/core.js"></script>
 <script src="js/permissions.js"></script>
 <script src="js/data.js"></script>
+<script src="js/picker.js"></script>
 <script src="js/widgets/letters.js"></script>
 <script src="js/widgets/write.js"></script>
 <script src="js/widgets/math.js"></script>

public/js/core.js

@@ -47,6 +47,7 @@ const I18N = {
     card:"Kaart", cardGeneral:"Algemeen", word:"Woord", welldone:"Goed zo!", next:"Volgende woord ▸",
     cardDone:"Kaart klaar! 🎉", pickCard:"Kies een nieuwe kaart of een ander niveau.",
     myWords:"Mijn woorden", manage:"Thema's en woorden beheren", addWord:"＋ Toevoegen",
+    pickPic:"Kies een plaatje",
     newTheme:"Nieuw thema", themeNamePh:"naam van het thema…", delTheme:"Thema verwijderen",
     numWords:"Woorden per spel", all:"Alle", noThemes:"— nog geen thema's —",
     muteAll:"Alle geluiden aan/uit", sndWidget:"Geluid van deze widget aan/uit",
@@ -173,6 +174,7 @@ const I18N = {
     card:"Card", cardGeneral:"General", word:"Word", welldone:"Well done!", next:"Next word ▸",
     cardDone:"Card complete! 🎉", pickCard:"Pick a new card or another level.",
     myWords:"My words", manage:"Manage themes and words", addWord:"＋ Add",
+    pickPic:"Choose a picture",
     newTheme:"New theme", themeNamePh:"name of the theme…", delTheme:"Delete theme",
     numWords:"Words per game", all:"All", noThemes:"— no themes yet —",
     muteAll:"All sounds on/off", sndWidget:"This widget's sound on/off",

public/js/picker.js

@@ -0,0 +1,162 @@
+/* teach - herbruikbare plaatjeskiezer (emoji / ARASAAC-zoeken / eigen upload).
+   Bouwt voort op dezelfde bouwstenen als de woordkaart-editor in letters.js
+   (EMOJI_CATS, arasaacSearch/arasaacUrl, setPic, dezelfde CSS-klassen) i.p.v.
+   een tweede plaatjessysteem te maken. Gebruikt door widgets die snel een los
+   plaatje willen laten kiezen zonder de volledige woordkaart-editor te openen
+   (bv. Ankerwoorden, als snelkoppeling vanaf een woord zonder automatisch plaatje). */
+"use strict";
+let pickerWrap = null, pickerCat = 0, pickerOnSelect = null;
+
+function choosePic(pic){
+  if(pickerOnSelect) pickerOnSelect(pic);
+  closePicPicker();
+}
+function closePicPicker(){
+  if(pickerWrap) pickerWrap.classList.remove("open");
+  pickerOnSelect = null;
+}
+
+function ensurePicPicker(){
+  if(pickerWrap) return pickerWrap;
+  const wrap = document.createElement("div");
+  wrap.className = "modalwrap";
+  wrap.innerHTML = `
+    <div class="modal">
+      <div class="am-head">
+        <h2 data-i18n="pickPic"></h2>
+        <button class="wclose pp-close">✕</button>
+      </div>
+      <div class="ed-tabs">
+        <button type="button" data-t="emoji"></button>
+        <button type="button" data-t="picto"></button>
+        <button type="button" data-t="upload"></button>
+      </div>
+      <div class="ed-pane">
+        <div class="ed-p-emoji">
+          <div class="ed-cats"></div>
+          <div class="ed-grid"></div>
+        </div>
+        <div class="ed-p-picto" style="display:none;">
+          <div class="ed-pictorow">
+            <input type="text" class="ed-psearch" maxlength="30">
+            <button class="tbtn ed-pgo"></button>
+          </div>
+          <div class="ed-status"></div>
+          <div class="ed-pgrid"></div>
+          <div class="ed-credit"></div>
+        </div>
+        <div class="ed-p-upload" style="display:none;">
+          <label class="ed-upload"><span class="ed-uplbl"></span><input type="file" accept="image/*"></label>
+          <div class="ed-uphint"></div>
+        </div>
+      </div>
+    </div>`;
+  document.body.appendChild(wrap);
+  pickerWrap = wrap;
+  const q = s => wrap.querySelector(s);
+
+  wrap.addEventListener("click", e=>{ if(e.target===wrap) closePicPicker(); });
+  q(".pp-close").addEventListener("click", closePicPicker);
+
+  let tab = "emoji";
+  function setTab(t){ tab = t; refreshTabs(); }
+  function applyLabels(){
+    q(".ed-uplbl").textContent = T("upload");
+    q(".ed-uphint").textContent = T("upHint");
+    q(".ed-credit").innerHTML = T("pictoCredit");
+    q(".ed-pgo").textContent = T("pictoSearch");
+    q(".ed-psearch").placeholder = T("pictoPh");
+    q(".pp-close").title = T("close");
+    refreshTabs();
+  }
+  function refreshTabs(){
+    wrap.querySelectorAll(".ed-tabs button").forEach(b=>{
+      b.textContent = T("tab"+b.dataset.t[0].toUpperCase()+b.dataset.t.slice(1));
+      b.classList.toggle("active", b.dataset.t===tab);
+    });
+    q(".ed-p-emoji").style.display  = tab==="emoji" ? "block" : "none";
+    q(".ed-p-picto").style.display  = tab==="picto" ? "block" : "none";
+    q(".ed-p-upload").style.display = tab==="upload" ? "block" : "none";
+  }
+  wrap.querySelectorAll(".ed-tabs button").forEach(b=>{
+    b.addEventListener("click", ()=>{ tab = b.dataset.t; refreshTabs(); });
+  });
+
+  function renderCats(){
+    const cats = q(".ed-cats");
+    cats.innerHTML = "";
+    T("cats").forEach((name,i)=>{
+      const b = document.createElement("button");
+      b.type = "button"; b.textContent = name;
+      b.classList.toggle("active", i===pickerCat);
+      b.addEventListener("click", ()=>{ pickerCat=i; renderCats(); });
+      cats.appendChild(b);
+    });
+    const grid = q(".ed-grid");
+    grid.innerHTML = "";
+    EMOJI_CATS[pickerCat].forEach(em=>{
+      const b = document.createElement("button");
+      b.type = "button"; b.textContent = em;
+      b.addEventListener("click", ()=>choosePic(em));
+      grid.appendChild(b);
+    });
+  }
+
+  async function searchPictos(){
+    const term = q(".ed-psearch").value.trim();
+    if(!term) return;
+    q(".ed-status").textContent = T("pictoLoad");
+    q(".ed-pgrid").innerHTML = "";
+    try{
+      const arr = await arasaacSearch(term, LANG);
+      if(!arr.length){ q(".ed-status").textContent = T("pictoNone"); return; }
+      q(".ed-status").textContent = "";
+      arr.slice(0,12).forEach(p=>{
+        const url = arasaacUrl(p._id);
+        const b = document.createElement("button");
+        b.type = "button";
+        const im = document.createElement("img");
+        im.src = url; im.loading = "lazy"; im.alt = term;
+        b.appendChild(im);
+        b.addEventListener("click", ()=>choosePic(url));
+        q(".ed-pgrid").appendChild(b);
+      });
+    }catch(e){ q(".ed-status").textContent = T("pictoErr"); }
+  }
+  q(".ed-pgo").addEventListener("click", searchPictos);
+  q(".ed-psearch").addEventListener("keydown", e=>{ if(e.key==="Enter") searchPictos(); });
+
+  q(".ed-p-upload input").addEventListener("change", e=>{
+    const f = e.target.files[0]; if(!f) return;
+    const img = new Image();
+    img.onload = ()=>{
+      const c = document.createElement("canvas");
+      const s = Math.min(1, 128/Math.max(img.width, img.height));
+      c.width = Math.round(img.width*s); c.height = Math.round(img.height*s);
+      c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
+      choosePic(c.toDataURL("image/png"));
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(f);
+    e.target.value = "";
+  });
+
+  wrap.__applyLabels = applyLabels;
+  wrap.__renderCats = renderCats;
+  wrap.__searchPictos = searchPictos;
+  wrap.__setTab = setTab;
+  return wrap;
+}
+
+function openPicPicker(word, onSelect){
+  const wrap = ensurePicPicker();
+  pickerOnSelect = onSelect;
+  wrap.__applyLabels();
+  wrap.__renderCats();
+  wrap.querySelector(".ed-psearch").value = word || "";
+  /* met een woord starten we meteen op het picto-zoekresultaat i.p.v. het emoji-tabblad,
+     anders lijkt de vooraf ingevulde zoekopdracht nergens naartoe te leiden */
+  wrap.__setTab(word ? "picto" : "emoji");
+  wrap.classList.add("open");
+  if(word) wrap.__searchPictos();
+}

public/js/widgets/anchor.js

@@ -6,7 +6,7 @@ function mountAnchor(root, initState){
   const CW = 128, CH = 56, G = 10;
   /* colour cycle for connecting words: none → green → blue → red → purple → orange → yellow */
   const COLS = [null,"#3fae6a","#3b7dd8","#e0554d","#9b59b6","#f28c38","#d9a400"];
-  const S = { cells:{}, pan:{x:0, y:0}, pics:{} };
+  const S = { cells:{}, pan:{x:0, y:0}, pics:{}, themeId:null };
   if(initState){
     const src = initState.cells || {};
     Object.keys(src).forEach(k=>{
@@ -15,22 +15,27 @@ function mountAnchor(root, initState){
       S.cells[k] = (typeof v==="string") ? {t:v, c:null} : {t:v.t||"", c:v.c||null};
     });
     S.pan = initState.pan || {x:0, y:0};
-    S.pics = initState.pics || {};   /* word -> auto-fetched pictogram (or fallback emoji) */
+    S.pics = initState.pics || {};   /* word -> resolved picture (undefined/null/URL) */
+    /* migrate: older boards stored the literal anchor emoji as a "picture" - treat
+       that the same as "no match found" now that it's no longer shown as a picture */
+    Object.keys(S.pics).forEach(w=>{ if(S.pics[w] === "⚓") S.pics[w] = null; });
+    S.themeId = initState.themeId || null;
   }
-  const FALLBACK_PIC = "⚓";
+  /* S.pics[word]: undefined = not tried yet, null = tried, no ARASAAC match
+     (shown empty, no fake anchor icon), string = resolved picture URL */
   const fetching = new Set();
-  /* auto-fetch a matching picture per word instead of using the anchor emoji for everything */
   function fetchPic(word){
     if(S.pics[word] !== undefined || fetching.has(word)) return;
     fetching.add(word);
     arasaacSearch(word, LANG).then(arr=>{
-      S.pics[word] = (arr && arr.length) ? arasaacUrl(arr[0]._id) : FALLBACK_PIC;
+      S.pics[word] = (arr && arr.length) ? arasaacUrl(arr[0]._id) : null;
     }).catch(()=>{
-      S.pics[word] = FALLBACK_PIC;
+      S.pics[word] = null;
     }).finally(()=>{
       fetching.delete(word);
       syncSource();
       render();
+      persistWords();
     });
   }
   root.innerHTML = `
@@ -46,6 +51,22 @@ function mountAnchor(root, initState){
   /* register this grid as a word source for the language widgets */
   const reg = { el: root, name: T("wg_anchor"), words: [] };
   ANCHORS.push(reg);
+  /* mirror words that already have a real picture into a linked theme, so the
+     existing woordkaart-editor (letters.js) can manage/fix their pictures too -
+     the anchor grid stays the source of truth for which words exist */
+  function syncTheme(){
+    if(!S.themeId) S.themeId = "an-"+Math.random().toString(36).slice(2,10);
+    const withPic = reg.words.filter(([,p]) => typeof p === "string");
+    const list = THEMES[LANG];
+    const idx = list.findIndex(t => t.id === S.themeId);
+    if(!withPic.length){
+      if(idx >= 0) list[idx].words = [];
+      return;
+    }
+    const name = "⚓ " + reg.name;
+    if(idx < 0) list.push({ id: S.themeId, name, words: withPic.slice() });
+    else{ list[idx].name = name; list[idx].words = withPic.slice(); }
+  }
   function syncSource(quiet){
     const center = S.cells["0,0"];
     reg.name = (center && center.t) ? center.t : T("wg_anchor");
@@ -53,12 +74,13 @@ function mountAnchor(root, initState){
     reg.words = [];
     Object.keys(S.cells).forEach(k=>{
       const w = (S.cells[k].t||"").trim().toLowerCase();
-      if(/^[a-zà-ÿ]{2,12}$/.test(w) && !seen.has(w)){
+      if(/^[a-zà-ÿ]{2,24}$/.test(w) && !seen.has(w)){
         seen.add(w);
         if(S.pics[w] === undefined) fetchPic(w);
-        reg.words.push([w, S.pics[w] || FALLBACK_PIC]);
+        reg.words.push([w, S.pics[w] ?? null]);
       }
     });
+    syncTheme();
     if(!quiet) document.dispatchEvent(new CustomEvent("wordschange"));
   }
 
@@ -80,9 +102,28 @@ 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 normWord = word.trim().toLowerCase();
+          const wPic = S.pics[normWord];
           const pic = document.createElement("div");
           pic.className = "an-pic";
-          setPic(pic, S.pics[word.trim().toLowerCase()] || FALLBACK_PIC);
+          if(wPic){
+            setPic(pic, wPic);
+          }else{
+            /* no automatic match (or not tried yet) - stays empty, but doubles as a
+               shortcut to manually pick a picture instead of showing a fake anchor icon */
+            pic.classList.add("an-pic-empty");
+            pic.title = T("pickPic");
+            pic.addEventListener("pointerdown", ev=>ev.stopPropagation());
+            pic.addEventListener("click", ev=>{
+              ev.stopPropagation();
+              openPicPicker(normWord, chosen=>{
+                S.pics[normWord] = chosen;
+                syncSource();
+                render();
+                persistWords();
+              });
+            });
+          }
           c.appendChild(pic);
           const span = document.createElement("span");
           span.className = "an-word";
@@ -177,6 +218,6 @@ function mountAnchor(root, initState){
   syncSource(true);
   render();
   if(reg.words.length) document.dispatchEvent(new CustomEvent("wordschange"));
-  return { getState: ()=>({ cells:S.cells, pan:S.pan, pics:S.pics }) };
+  return { getState: ()=>({ cells:S.cells, pan:S.pan, pics:S.pics, themeId:S.themeId }) };
 }