f2243c13c4
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 18s
- Thema's krijgen een optioneel folder-veld; de theme-dropdown in de woorden-editor en de kaart-dropdowns in de widgets (fillWordSourceSel) groeperen per map met optgroups, mapl0ze thema's bovenaan - Nieuw 📁-knopje in de editor zet het gekozen thema in een map (leeg veld haalt het eruit); zichtbaarheid volgt de themakeuze - Ankerthema's komen automatisch in de vaste map "⚓" (id-koppeling met de ankerwidget blijft onaangeroerd) - Nieuwe i18n-teksten themeFolder/themeFolderPh (nl/en)
669 lines
26 KiB
JavaScript
669 lines
26 KiB
JavaScript
/* widget: Letterblokken (Ik leer lezen) */
|
||
function mountLetterGame(root, initState, opts){
|
||
const readonly = !!(opts && opts.readonly);
|
||
const onProgress = opts && opts.onProgress;
|
||
const S = { level:1, card:0, wordIdx:0, stars:0, lang:LANG, count:6, order:[], snd:true, amode:"blocks" };
|
||
if(initState){
|
||
S.level = initState.level||1;
|
||
S.card = initState.card ?? "g";
|
||
S.count = initState.count||6;
|
||
S.snd = initState.snd !== false;
|
||
S.amode = initState.amode||"blocks";
|
||
}
|
||
const play = f=>{ if(S.snd) f(); };
|
||
|
||
root.innerHTML = `
|
||
<div class="lg">
|
||
<div class="lg-top">
|
||
<button class="lg-snd"></button>
|
||
<button class="lg-mode"></button>
|
||
<div class="lg-levels">
|
||
<button data-l="1"></button><button data-l="2"></button><button data-l="3"></button>
|
||
</div>
|
||
<div class="lg-cards"></div>
|
||
<select class="lg-num"></select>
|
||
<div class="lg-progress"><span class="lg-count"></span><span class="lg-stars"></span></div>
|
||
</div>
|
||
<div class="lg-instr"></div>
|
||
<div class="lg-card">
|
||
<div class="lg-pic"></div>
|
||
<div class="lg-slots"></div>
|
||
<div class="lg-done"><div class="dg">🌟</div><div class="dt"></div><div class="dp" style="color:var(--muted);font-weight:700;"></div></div>
|
||
</div>
|
||
<div class="lg-tray blocks-tray"></div>
|
||
<div class="lg-tray lg-kbd"></div>
|
||
<div class="lg-bottom"><button class="lg-next"></button></div>
|
||
<div class="lg-editor">
|
||
<div class="lg-ed-head"><b class="ed-title"></b><button class="wclose lg-ed-close">✕</button></div>
|
||
<div class="lg-ed-themerow">
|
||
<select class="ed-theme-sel"></select>
|
||
<button class="tbtn ed-theme-add">＋</button>
|
||
<input type="text" class="ed-theme-name" maxlength="16" style="display:none;">
|
||
<button class="ed-theme-mv">📁</button>
|
||
<input type="text" class="ed-theme-folder" maxlength="16" style="display:none;">
|
||
<button class="ed-theme-del">🗑</button>
|
||
</div>
|
||
<div class="lg-ed-form">
|
||
<input type="text" class="ed-word" maxlength="5">
|
||
<div class="ed-preview">?</div>
|
||
<button class="ed-add"></button>
|
||
<div class="ed-msg"></div>
|
||
</div>
|
||
<div class="ed-tabs">
|
||
<button data-t="emoji"></button><button data-t="picto"></button><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 class="lg-ed-list"></div>
|
||
</div>
|
||
</div>`;
|
||
|
||
const el = s => root.querySelector(s);
|
||
const slotsEl = el(".lg-slots"), trayEl = el(".blocks-tray"), picEl = el(".lg-pic"),
|
||
instrEl = el(".lg-instr"), nextBtn = el(".lg-next"), doneEl = el(".lg-done"),
|
||
countEl = el(".lg-count"), starsEl = el(".lg-stars"), cardsEl = el(".lg-cards");
|
||
|
||
/* card buttons (built dynamically: N cards + star + edit) */
|
||
const numSel = root.querySelector(".lg-num");
|
||
function buildNumSel(){
|
||
numSel.innerHTML = "";
|
||
[4,6,8,10,"all"].forEach(v=>{
|
||
const o = document.createElement("option");
|
||
o.value = v;
|
||
o.textContent = v==="all" ? T("all") : v;
|
||
numSel.appendChild(o);
|
||
});
|
||
numSel.value = S.count;
|
||
numSel.title = T("numWords");
|
||
}
|
||
numSel.addEventListener("change", ()=>{
|
||
S.count = numSel.value==="all" ? "all" : +numSel.value;
|
||
newRound(); render();
|
||
});
|
||
const sndBtn = root.querySelector(".lg-snd");
|
||
sndBtn.addEventListener("click", ()=>{
|
||
S.snd = !S.snd;
|
||
updateSndBtn();
|
||
});
|
||
function updateSndBtn(){
|
||
sndBtn.textContent = S.snd ? "🔔" : "🔕";
|
||
sndBtn.classList.toggle("off", !S.snd);
|
||
sndBtn.title = T("sndWidget");
|
||
modeBtn.textContent = S.amode==="blocks" ? "🧱" : "⌨️";
|
||
modeBtn.title = T("amode");
|
||
root.querySelector(".lg").classList.toggle("typemode", S.amode==="type");
|
||
}
|
||
const modeBtn = root.querySelector(".lg-mode");
|
||
modeBtn.addEventListener("click", ()=>{
|
||
S.amode = S.amode==="blocks" ? "type" : "blocks";
|
||
updateSndBtn();
|
||
});
|
||
|
||
/* on-screen letter keyboard for type mode */
|
||
const kbdEl = root.querySelector(".lg-kbd");
|
||
"abcdefghijklmnopqrstuvwxyz".split("").forEach(l=>{
|
||
const b = document.createElement("button");
|
||
b.textContent = l;
|
||
b.className = VOWELS.includes(l) ? "v" : "c";
|
||
b.addEventListener("click", ()=>typeLetter(l));
|
||
kbdEl.appendChild(b);
|
||
});
|
||
function typeLetter(l){
|
||
if(doneEl.classList.contains("show") || edEl.classList.contains("open")) return;
|
||
const slot = slotsEl.querySelector(".slot:not(.filled)");
|
||
if(!slot) return;
|
||
if(slot.dataset.letter === l){
|
||
const b = makeBlock(l);
|
||
b.classList.add("in-slot");
|
||
b.dataset.placedAt = Date.now();
|
||
slot.appendChild(b);
|
||
slot.classList.add("filled");
|
||
play(sndGood);
|
||
checkComplete();
|
||
}else{
|
||
slot.classList.add("shake");
|
||
setTimeout(()=>slot.classList.remove("shake"), 400);
|
||
play(sndBad);
|
||
}
|
||
}
|
||
|
||
/* word source: one compact dropdown (general card + themes + anchor grids) */
|
||
let srcSel = null;
|
||
function buildCardButtons(){
|
||
cardsEl.innerHTML = "";
|
||
srcSel = document.createElement("select");
|
||
srcSel.className = "fl-sel";
|
||
fillWordSourceSel(srcSel, S.card);
|
||
srcSel.addEventListener("change", ()=>{ S.card = srcSel.value; newRound(); render(); });
|
||
cardsEl.appendChild(srcSel);
|
||
if(!readonly){
|
||
const edit = document.createElement("button");
|
||
edit.className = "lg-edit"; edit.textContent = "✎";
|
||
edit.addEventListener("click", openEditor);
|
||
cardsEl.appendChild(edit);
|
||
}
|
||
}
|
||
buildCardButtons();
|
||
|
||
root.querySelectorAll(".lg-levels button").forEach(b=>{
|
||
b.addEventListener("click", ()=>{ S.level = +b.dataset.l; newRound(); render(); });
|
||
});
|
||
nextBtn.addEventListener("click", ()=>{
|
||
S.wordIdx++;
|
||
if(S.wordIdx >= S.order.length){ showCardDone(); } else render();
|
||
});
|
||
document.addEventListener("langchange", ()=>{
|
||
S.lang=LANG; S.card="g"; buildCardButtons(); buildNumSel(); newRound(); render();
|
||
});
|
||
document.addEventListener("wordschange", ()=>{
|
||
buildCardButtons(); newRound(); render();
|
||
if(edEl.classList.contains("open")){ renderThemeSel(); renderEdList(); }
|
||
});
|
||
|
||
function fullList(){
|
||
S.card = normWordSource(S.card);
|
||
return wordSourceList(S.card);
|
||
}
|
||
function newRound(){
|
||
const list = fullList();
|
||
const n = S.count==="all" ? list.length : Math.min(+S.count, list.length);
|
||
S.order = shuffle(list.map((_,i)=>i)).slice(0,n);
|
||
S.wordIdx = 0; S.stars = 0;
|
||
}
|
||
function currentWord(){ return fullList()[S.order[S.wordIdx]]; }
|
||
|
||
function makeBlock(letter){
|
||
const b = document.createElement("div");
|
||
b.className = "blok " + (VOWELS.includes(letter) ? "vowel" : "cons");
|
||
b.dataset.letter = letter;
|
||
b.innerHTML = `<div class="bl">${letter}</div>`;
|
||
const dg = dotGrid(letter); dg.classList.add("blok-dots");
|
||
b.appendChild(dg);
|
||
attachDrag(b);
|
||
return b;
|
||
}
|
||
function makeSlot(letter, showGhost){
|
||
const s = document.createElement("div");
|
||
s.className = "slot";
|
||
s.dataset.letter = letter;
|
||
s.innerHTML = `<div class="ghost">${showGhost ? letter : ""}</div>`;
|
||
const dg = dotGrid(letter); dg.classList.add("slot-dots");
|
||
s.appendChild(dg);
|
||
s.addEventListener("click", ()=>{
|
||
const placed = s.querySelector(".blok");
|
||
/* ignore the synthetic click that follows a successful drop */
|
||
if(placed && !placed.classList.contains("fixed") &&
|
||
Date.now() - (+placed.dataset.placedAt || 0) > 400){
|
||
placed.classList.remove("in-slot");
|
||
trayEl.appendChild(placed);
|
||
s.classList.remove("filled");
|
||
}
|
||
});
|
||
return s;
|
||
}
|
||
function distractors(word, n){
|
||
const pool = "abcdefghijklmnoprstuvwz".split("").filter(c=>!word.includes(c));
|
||
return shuffle(pool).slice(0,n);
|
||
}
|
||
|
||
function render(){
|
||
if(!S.order.length || S.wordIdx >= S.order.length) newRound();
|
||
doneEl.classList.remove("show");
|
||
nextBtn.classList.remove("show");
|
||
nextBtn.textContent = T("next");
|
||
root.querySelectorAll(".lg-levels button").forEach(b=>{
|
||
b.textContent = T("lvl"+b.dataset.l);
|
||
b.classList.toggle("active", +b.dataset.l===S.level);
|
||
});
|
||
const editBtn = cardsEl.querySelector(".lg-edit");
|
||
if(editBtn) editBtn.title = T("manage");
|
||
numSel.title = T("numWords");
|
||
const allOpt = numSel.querySelector('option[value="all"]');
|
||
if(allOpt) allOpt.textContent = T("all");
|
||
|
||
const [word, pic] = currentWord();
|
||
setPic(picEl, pic);
|
||
countEl.textContent = `${T("word")} ${S.wordIdx+1}/${S.order.length}`;
|
||
starsEl.textContent = S.stars ? S.stars+" ★" : "";
|
||
slotsEl.innerHTML = ""; trayEl.innerHTML = "";
|
||
|
||
const letters = word.split("");
|
||
if(S.level===1){
|
||
instrEl.innerHTML = T("instr1");
|
||
letters.forEach(l=>slotsEl.appendChild(makeSlot(l,true)));
|
||
shuffle(letters.concat(distractors(word,3))).forEach(l=>trayEl.appendChild(makeBlock(l)));
|
||
}
|
||
else if(S.level===2){
|
||
const types = ["begin","end","mid"];
|
||
const posType = types[S.wordIdx % 3];
|
||
let idx = posType==="begin" ? 0 : posType==="end" ? letters.length-1 : Math.floor(letters.length/2);
|
||
instrEl.innerHTML = T("instr2_"+posType);
|
||
letters.forEach((l,i)=>{
|
||
if(i===idx){ slotsEl.appendChild(makeSlot(l,false)); }
|
||
else{
|
||
const s = makeSlot(l,true);
|
||
s.classList.add("filled");
|
||
const b = makeBlock(l); b.classList.add("in-slot","fixed");
|
||
b.style.pointerEvents = "none";
|
||
s.appendChild(b);
|
||
slotsEl.appendChild(s);
|
||
}
|
||
});
|
||
shuffle([letters[idx]].concat(distractors(word,3))).forEach(l=>trayEl.appendChild(makeBlock(l)));
|
||
}
|
||
else{
|
||
instrEl.innerHTML = T("instr3");
|
||
letters.forEach(l=>slotsEl.appendChild(makeSlot(l,false)));
|
||
shuffle(letters.concat(distractors(word,3))).forEach(l=>trayEl.appendChild(makeBlock(l)));
|
||
}
|
||
}
|
||
|
||
function checkComplete(){
|
||
const open = slotsEl.querySelectorAll(".slot:not(.filled)").length;
|
||
if(open===0){
|
||
S.stars++;
|
||
starsEl.textContent = S.stars ? S.stars+" ★" : "";
|
||
play(sndWin); confetti(el(".lg-card"));
|
||
doneEl.querySelector(".dt").textContent = T("welldone");
|
||
doneEl.querySelector(".dp").textContent = currentWord()[0];
|
||
doneEl.classList.add("show");
|
||
nextBtn.classList.add("show");
|
||
if(onProgress) onProgress({ attempts: 1, correct: 1, stars: 1 });
|
||
}
|
||
}
|
||
function showCardDone(){
|
||
doneEl.querySelector(".dt").textContent = T("cardDone");
|
||
doneEl.querySelector(".dp").textContent = T("pickCard");
|
||
doneEl.classList.add("show");
|
||
nextBtn.classList.remove("show");
|
||
newRound();
|
||
}
|
||
|
||
/* ---------- custom words editor ---------- */
|
||
const edEl = el(".lg-editor"), edWord = el(".ed-word"),
|
||
edPrev = el(".ed-preview"), edMsg = el(".ed-msg"), edList = el(".lg-ed-list"),
|
||
edFile = el(".ed-p-upload input"), edPSearch = el(".ed-psearch"),
|
||
edPGrid = el(".ed-pgrid"), edStatus = el(".ed-status"),
|
||
edThemeSel = el(".ed-theme-sel"), edThemeAdd = el(".ed-theme-add"),
|
||
edThemeName = el(".ed-theme-name"), edThemeDel = el(".ed-theme-del"),
|
||
edThemeMv = el(".ed-theme-mv"), edThemeFolder = el(".ed-theme-folder");
|
||
let edPic = "", edTab = "emoji", edCat = 0, edTheme = "g";
|
||
|
||
/* ---- word target: the general card or one of the themes ---- */
|
||
function renderThemeSel(){
|
||
const list = THEMES[S.lang];
|
||
if(edTheme !== "g" && edTheme >= list.length) edTheme = "g";
|
||
edThemeSel.innerHTML = "";
|
||
const og = document.createElement("option");
|
||
og.value = "g";
|
||
og.textContent = `${T("cardGeneral")} (${generalList().length})`;
|
||
edThemeSel.appendChild(og);
|
||
/* thema's zonder map bovenaan, daarna per map gegroepeerd - zelfde
|
||
indeling als fillWordSourceSel (data.js) in de widget-dropdowns */
|
||
const groups = new Map();
|
||
list.forEach((th,i)=>{
|
||
const f = th.folder || "";
|
||
if(!groups.has(f)) groups.set(f, []);
|
||
groups.get(f).push([th, i]);
|
||
});
|
||
const addOpt = (parent, th, i)=>{
|
||
const o = document.createElement("option");
|
||
o.value = i; o.textContent = `★ ${th.name} (${th.words.length})`;
|
||
parent.appendChild(o);
|
||
};
|
||
(groups.get("") || []).forEach(([th,i])=>addOpt(edThemeSel, th, i));
|
||
[...groups.keys()].filter(f=>f).sort().forEach(f=>{
|
||
const grp = document.createElement("optgroup");
|
||
grp.label = "📁 " + f;
|
||
groups.get(f).forEach(([th,i])=>addOpt(grp, th, i));
|
||
edThemeSel.appendChild(grp);
|
||
});
|
||
edThemeSel.value = edTheme;
|
||
edThemeAdd.title = T("newTheme");
|
||
edThemeDel.title = T("delTheme");
|
||
edThemeMv.title = T("themeFolder");
|
||
edThemeName.placeholder = T("themeNamePh");
|
||
edThemeFolder.placeholder = T("themeFolderPh");
|
||
edThemeMv.style.display = edTheme === "g" ? "none" : "";
|
||
}
|
||
edThemeSel.addEventListener("change", ()=>{
|
||
edTheme = edThemeSel.value==="g" ? "g" : +edThemeSel.value;
|
||
edThemeMv.style.display = edTheme === "g" ? "none" : "";
|
||
renderEdList();
|
||
});
|
||
edThemeAdd.addEventListener("click", ()=>{
|
||
edThemeName.style.display = "block";
|
||
edThemeName.value = "";
|
||
edThemeName.focus();
|
||
});
|
||
let themeDone = false;
|
||
function commitTheme(){
|
||
if(themeDone) return; themeDone = true;
|
||
const nm = edThemeName.value.trim();
|
||
if(nm){
|
||
THEMES[S.lang].push({name:nm, words:[]});
|
||
edTheme = THEMES[S.lang].length-1;
|
||
persistWords();
|
||
renderThemeSel(); renderEdList();
|
||
document.dispatchEvent(new CustomEvent("wordschange"));
|
||
}
|
||
edThemeName.style.display = "none";
|
||
setTimeout(()=>{ themeDone = false; }, 100);
|
||
}
|
||
edThemeName.addEventListener("keydown", ev=>{
|
||
ev.stopPropagation();
|
||
if(ev.key==="Enter") commitTheme();
|
||
if(ev.key==="Escape"){ themeDone=true; edThemeName.style.display="none"; setTimeout(()=>{themeDone=false;},100); }
|
||
});
|
||
edThemeName.addEventListener("blur", commitTheme);
|
||
edThemeDel.addEventListener("click", ()=>{
|
||
if(edTheme==="g" || !THEMES[S.lang].length) return;
|
||
THEMES[S.lang].splice(edTheme,1);
|
||
edTheme = "g";
|
||
persistWords();
|
||
renderThemeSel(); renderEdList();
|
||
document.dispatchEvent(new CustomEvent("wordschange"));
|
||
});
|
||
/* thema in een map zetten (of eruit halen met een leeg veld): 📁 toont een
|
||
inline invoer, voorgevuld met de huidige map van het gekozen thema */
|
||
edThemeMv.addEventListener("click", ()=>{
|
||
if(edTheme==="g") return;
|
||
edThemeFolder.style.display = "block";
|
||
edThemeFolder.value = THEMES[S.lang][edTheme].folder || "";
|
||
edThemeFolder.focus();
|
||
});
|
||
let folderDone = false;
|
||
function commitFolder(){
|
||
if(folderDone) return; folderDone = true;
|
||
if(edTheme !== "g" && THEMES[S.lang][edTheme]){
|
||
const f = edThemeFolder.value.trim();
|
||
const th = THEMES[S.lang][edTheme];
|
||
if(f) th.folder = f; else delete th.folder;
|
||
persistWords();
|
||
renderThemeSel();
|
||
document.dispatchEvent(new CustomEvent("wordschange"));
|
||
}
|
||
edThemeFolder.style.display = "none";
|
||
setTimeout(()=>{ folderDone = false; }, 100);
|
||
}
|
||
edThemeFolder.addEventListener("keydown", ev=>{
|
||
ev.stopPropagation();
|
||
if(ev.key==="Enter") commitFolder();
|
||
if(ev.key==="Escape"){ folderDone=true; edThemeFolder.style.display="none"; setTimeout(()=>{folderDone=false;},100); }
|
||
});
|
||
edThemeFolder.addEventListener("blur", commitFolder);
|
||
|
||
function selectPic(p, btn){
|
||
edPic = p; setPic(edPrev, p);
|
||
root.querySelectorAll(".ed-grid button.sel,.ed-pgrid button.sel").forEach(b=>b.classList.remove("sel"));
|
||
if(btn) btn.classList.add("sel");
|
||
}
|
||
|
||
/* tabs */
|
||
root.querySelectorAll(".ed-tabs button").forEach(b=>{
|
||
b.addEventListener("click", ()=>{ edTab = b.dataset.t; refreshTabs(); });
|
||
});
|
||
function refreshTabs(){
|
||
root.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===edTab);
|
||
});
|
||
el(".ed-p-emoji").style.display = edTab==="emoji" ? "block" : "none";
|
||
el(".ed-p-picto").style.display = edTab==="picto" ? "block" : "none";
|
||
el(".ed-p-upload").style.display = edTab==="upload" ? "block" : "none";
|
||
if(edTab==="picto" && !edPSearch.value) edPSearch.value = edWord.value.trim();
|
||
}
|
||
|
||
/* emoji tab */
|
||
function renderEmojiCats(){
|
||
const cats = el(".ed-cats");
|
||
cats.innerHTML = "";
|
||
T("cats").forEach((name,i)=>{
|
||
const b = document.createElement("button");
|
||
b.textContent = name;
|
||
b.classList.toggle("active", i===edCat);
|
||
b.addEventListener("click", ()=>{ edCat=i; renderEmojiCats(); });
|
||
cats.appendChild(b);
|
||
});
|
||
const grid = el(".ed-grid");
|
||
grid.innerHTML = "";
|
||
EMOJI_CATS[edCat].forEach(em=>{
|
||
const b = document.createElement("button");
|
||
b.type="button"; b.textContent = em;
|
||
b.classList.toggle("sel", em===edPic);
|
||
b.addEventListener("click", ()=>selectPic(em, b));
|
||
grid.appendChild(b);
|
||
});
|
||
}
|
||
|
||
/* picto tab (ARASAAC) */
|
||
async function searchPictos(){
|
||
const term = edPSearch.value.trim();
|
||
if(!term) return;
|
||
edStatus.textContent = T("pictoLoad");
|
||
edPGrid.innerHTML = "";
|
||
try{
|
||
const arr = await arasaacSearch(term, S.lang);
|
||
if(!arr.length){ edStatus.textContent = T("pictoNone"); return; }
|
||
edStatus.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", ()=>selectPic(url, b));
|
||
edPGrid.appendChild(b);
|
||
});
|
||
}catch(e){ edStatus.textContent = T("pictoErr"); }
|
||
}
|
||
el(".ed-pgo").addEventListener("click", searchPictos);
|
||
edPSearch.addEventListener("keydown", e=>{ if(e.key==="Enter") searchPictos(); });
|
||
/* typing a word auto-fills picto search */
|
||
edWord.addEventListener("input", ()=>{ edPSearch.value = edWord.value.trim(); });
|
||
|
||
/* upload tab */
|
||
edFile.addEventListener("change", ()=>{
|
||
const f = edFile.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);
|
||
selectPic(c.toDataURL("image/png"));
|
||
URL.revokeObjectURL(img.src);
|
||
};
|
||
img.src = URL.createObjectURL(f);
|
||
edFile.value = "";
|
||
});
|
||
|
||
el(".ed-add").addEventListener("click", ()=>{
|
||
const w = edWord.value.trim().toLowerCase();
|
||
if(!/^[a-z]{2,5}$/.test(w)){ edMsg.textContent = T("badWord"); return; }
|
||
if(!edPic){ edMsg.textContent = T("needPic"); return; }
|
||
edMsg.textContent = "";
|
||
if(edTheme==="g"){
|
||
GENERAL_EXTRA[S.lang].push([w, edPic]); /* extend the general card */
|
||
}else{
|
||
THEMES[S.lang][edTheme].words.push([w, edPic]);
|
||
}
|
||
persistWords();
|
||
renderThemeSel();
|
||
edWord.value = ""; edPSearch.value = ""; edPic = ""; edPrev.textContent = "?";
|
||
root.querySelectorAll(".ed-grid button.sel,.ed-pgrid button.sel").forEach(b=>b.classList.remove("sel"));
|
||
renderEdList();
|
||
play(sndGood);
|
||
document.dispatchEvent(new CustomEvent("wordschange"));
|
||
});
|
||
el(".lg-ed-close").addEventListener("click", ()=>{
|
||
edEl.classList.remove("open");
|
||
buildCardButtons();
|
||
newRound();
|
||
render();
|
||
});
|
||
function openEditor(){
|
||
el(".ed-title").textContent = T("manage");
|
||
el(".ed-uplbl").textContent = T("upload");
|
||
el(".ed-uphint").textContent = T("upHint");
|
||
el(".ed-credit").innerHTML = T("pictoCredit");
|
||
el(".ed-pgo").textContent = T("pictoSearch");
|
||
edPSearch.placeholder = T("pictoPh");
|
||
edWord.placeholder = T("wordPh");
|
||
el(".ed-add").textContent = T("addWord");
|
||
el(".lg-ed-close").title = T("close");
|
||
edMsg.textContent = ""; edStatus.textContent = "";
|
||
refreshTabs();
|
||
renderEmojiCats();
|
||
renderThemeSel();
|
||
renderEdList();
|
||
edEl.classList.add("open");
|
||
}
|
||
function renderEdList(){
|
||
edList.innerHTML = "";
|
||
const isGen = edTheme==="g";
|
||
const base = isGen ? WORDS[S.lang] : [];
|
||
const list = isGen ? GENERAL_EXTRA[S.lang] : (THEMES[S.lang][edTheme] ? THEMES[S.lang][edTheme].words : []);
|
||
if(!base.length && !list.length){
|
||
edList.innerHTML = `<div class="empty">${T("noWords")}</div>`;
|
||
return;
|
||
}
|
||
const addRow = (entry, delFn)=>{
|
||
const row = document.createElement("div");
|
||
row.className = "ed-row" + (delFn ? "" : " base");
|
||
const p = document.createElement("div"); p.className = "ep"; setPic(p, entry[1]);
|
||
const wv = document.createElement("div"); wv.className = "ew"; wv.textContent = entry[0];
|
||
row.appendChild(p); row.appendChild(wv);
|
||
if(delFn){
|
||
const del = document.createElement("button"); del.className = "edel"; del.textContent = "✕";
|
||
del.addEventListener("click", delFn);
|
||
row.appendChild(del);
|
||
}
|
||
edList.appendChild(row);
|
||
};
|
||
/* own words first (deletable), built-in general words below (fixed) */
|
||
list.forEach((entry, i)=>addRow(entry, ()=>{
|
||
list.splice(i,1);
|
||
persistWords();
|
||
renderThemeSel(); renderEdList();
|
||
document.dispatchEvent(new CustomEvent("wordschange"));
|
||
}));
|
||
base.forEach(entry=>addRow(entry, null));
|
||
}
|
||
|
||
/* ---------- drag & drop ----------
|
||
Hit-testing is geometric (cursor vs slot rectangles) instead of
|
||
elementFromPoint, so overlays/transforms can never break drops. */
|
||
function attachDrag(block){
|
||
block.addEventListener("pointerdown", e=>{
|
||
if(block.classList.contains("in-slot")) return;
|
||
if(e.pointerType==="mouse" && e.button!==0) return;
|
||
e.preventDefault();
|
||
/* avoid implicit touch capture retargeting the follow-up click */
|
||
try{ block.releasePointerCapture(e.pointerId); }catch(_){}
|
||
const clone = block.cloneNode(true);
|
||
clone.id = "dragClone";
|
||
document.body.appendChild(clone);
|
||
block.classList.add("dragging");
|
||
const moveTo = ev=>{ const zf = VZ(); clone.style.left = (ev.clientX/zf)+"px"; clone.style.top = (ev.clientY/zf)+"px"; };
|
||
moveTo(e);
|
||
let hovered = null;
|
||
const hitSlot = ev=>{
|
||
const pad = 8;
|
||
let found = null;
|
||
slotsEl.querySelectorAll(".slot:not(.filled)").forEach(s=>{
|
||
const r = s.getBoundingClientRect();
|
||
if(ev.clientX >= r.left-pad && ev.clientX <= r.right+pad &&
|
||
ev.clientY >= r.top-pad && ev.clientY <= r.bottom+pad) found = s;
|
||
});
|
||
return found;
|
||
};
|
||
const move = ev=>{
|
||
moveTo(ev);
|
||
const slot = hitSlot(ev);
|
||
if(hovered && hovered!==slot) hovered.classList.remove("droptarget");
|
||
hovered = slot;
|
||
if(hovered) hovered.classList.add("droptarget");
|
||
};
|
||
const up = ev=>{
|
||
document.removeEventListener("pointermove",move);
|
||
document.removeEventListener("pointerup",up);
|
||
document.removeEventListener("pointercancel",cancel);
|
||
clone.remove();
|
||
block.classList.remove("dragging");
|
||
if(hovered) hovered.classList.remove("droptarget");
|
||
const target = hitSlot(ev);
|
||
if(target){
|
||
if(target.dataset.letter === block.dataset.letter){
|
||
target.classList.add("filled");
|
||
block.classList.add("in-slot");
|
||
block.dataset.placedAt = Date.now();
|
||
target.appendChild(block);
|
||
play(sndGood);
|
||
checkComplete();
|
||
}else{
|
||
target.classList.add("shake");
|
||
setTimeout(()=>target.classList.remove("shake"), 400);
|
||
play(sndBad);
|
||
}
|
||
}
|
||
};
|
||
const cancel = ()=>{
|
||
document.removeEventListener("pointermove",move);
|
||
document.removeEventListener("pointerup",up);
|
||
document.removeEventListener("pointercancel",cancel);
|
||
clone.remove();
|
||
block.classList.remove("dragging");
|
||
if(hovered) hovered.classList.remove("droptarget");
|
||
};
|
||
document.addEventListener("pointermove",move);
|
||
document.addEventListener("pointerup",up);
|
||
document.addEventListener("pointercancel",cancel);
|
||
});
|
||
}
|
||
|
||
buildNumSel();
|
||
updateSndBtn();
|
||
newRound();
|
||
render();
|
||
document.addEventListener("langchange", updateSndBtn);
|
||
return {
|
||
getState: ()=>({ level:S.level, card:S.card, count:S.count, snd:S.snd, amode:S.amode }),
|
||
setState: st=>{ if(st){ S.level=st.level||1; S.card=st.card??0; S.count=st.count||6; S.snd=st.snd!==false; S.amode=st.amode||"blocks"; buildNumSel(); updateSndBtn(); newRound(); render(); } }
|
||
};
|
||
}
|
||
|
||
function confetti(container){
|
||
const colors = ["#e0554d","#3b7dd8","#3fae6a","#f7c948","#9b59b6"];
|
||
const rect = container.getBoundingClientRect();
|
||
for(let i=0;i<28;i++){
|
||
const c = document.createElement("div");
|
||
c.className = "confetti";
|
||
c.style.left = Math.random()*rect.width + "px";
|
||
c.style.background = colors[i%colors.length];
|
||
c.style.animationDuration = (1.2+Math.random()*1.4)+"s";
|
||
c.style.animationDelay = (Math.random()*0.3)+"s";
|
||
container.appendChild(c);
|
||
setTimeout(()=>c.remove(), 3200);
|
||
}
|
||
}
|
||
|
||
|