diff --git a/public/js/data.js b/public/js/data.js index a3aa7d6..1051b31 100644 --- a/public/js/data.js +++ b/public/js/data.js @@ -66,6 +66,14 @@ function setPic(el, pic){ else el.textContent = pic; } +/* ---- ARASAAC pictogram lookup (shared by the word editor + anchor grid) ---- */ +async function arasaacSearch(term, lang){ + const resp = await fetch(`https://api.arasaac.org/api/pictograms/${lang}/search/${encodeURIComponent(term)}`); + if(!resp.ok) throw new Error("http "+resp.status); + return resp.json(); +} +const arasaacUrl = id => `https://static.arasaac.org/pictograms/${id}/${id}_300.png`; + /* ---- shared word source (general card + themes + anchor grids) ---- */ /* anchor-word widgets register their words here so every language widget can use them as a theme automatically */ diff --git a/public/js/widgets/anchor.js b/public/js/widgets/anchor.js index 7b6ce14..2a1da84 100644 --- a/public/js/widgets/anchor.js +++ b/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} }; + const S = { cells:{}, pan:{x:0, y:0}, pics:{} }; if(initState){ const src = initState.cells || {}; Object.keys(src).forEach(k=>{ @@ -15,6 +15,22 @@ 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) */ + } + const FALLBACK_PIC = "⚓"; + 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; + }).catch(()=>{ + S.pics[word] = FALLBACK_PIC; + }).finally(()=>{ + fetching.delete(word); + syncSource(); + }); } root.innerHTML = `