teach/public/js/core.js

/* teach - kern: versie, i18n, accounts, opslag, geluid */
"use strict";
/* version — bump on every change (form 0.0.00) */
const VERSION = "0.2.01";
(function(){
  const tag = document.getElementById("verTag");
  tag.textContent = "v"+VERSION;
  /* dev branch deploys report a dev-… build via /api/version → mark as beta;
     main/release builds show only the version number */
  fetch("/api/version")
    .then(r=>r.ok ? r.json() : null)
    .then(v=>{
      if(v && typeof v.version==="string" && v.version.startsWith("dev")){
        tag.textContent = "v"+VERSION+" · beta";
        tag.classList.add("beta");
      }
    })
    .catch(()=>{});
})();
/* =========================================================
   i18n
==========================================================*/
const I18N = {
  nl:{
    addWidget:"Widget", chooseWidget:"Kies een widget", saveBoard:"Bord opslaan",
    emptyBoard:"Het bord is leeg. Klik op “Widget” om te beginnen.",
    wg_letters:"Letterblokken", wg_letters_d:"Leer lezen en spellen met letterblokken – 3 niveaus, zoals ‘Ik leer lezen’.",
    wg_notes:"Notities", wg_notes_d:"Een vel om op te schrijven.",
    wg_timer:"Timer", wg_timer_d:"Afteltimer met kijkklok voor de klas.",
    wg_write:"Schrijfblad", wg_write_d:"Schrijven en rekenen: pen, gum en papier met schrijflijnen of rekenblokjes.",
    bgBlank:"Leeg blad", bgLines:"Lijntjes", bgWrite:"Schrijflijnen",
    bgGridS:"Kleine rekenblokjes", bgGridB:"Grote rekenblokjes",
    penSize:"Dikte", eraser:"Gum", clearAll:"Alles wissen",
    toolPen:"Pen", toolFountain:"Vulpen (dun en dik, reageert op druk of snelheid)",
    toolMark:"Markeerstift", toolText:"Tekst typen (klik op het blad)",
    wMin:"Minimaliseren", wMax:"Herstellen",
    lvl1:"Niveau 1", lvl2:"Niveau 2", lvl3:"Niveau 3",
    instr1:"Leg de letterblokken op de goede plek. Kijk goed naar de letters!",
    instr2_begin:"Zoek de <b>beginletter</b> van het woord.",
    instr2_mid:"Zoek de <b>middelste letter</b> van het woord.",
    instr2_end:"Zoek de <b>eindletter</b> van het woord.",
    instr3:"Spel het woord bij het plaatje. De nopjes helpen je!",
    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",
    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",
    catTaal:"Taal", catRekenen:"Rekenen", catTools:"Hulpmiddelen", catMedia:"Media",
    wg_madd:"Plussommen", wg_madd_d:"Optellen tot 10, 20 of 100.",
    wg_msub:"Minsommen", wg_msub_d:"Aftrekken tot 10, 20 of 100.",
    wg_mmul:"Keersommen", wg_mmul_d:"De tafels van 1 t/m 12 oefenen.",
    wg_mdiv:"Deelsommen", wg_mdiv_d:"Delen met de tafels van 1 t/m 12.",
    wg_mpct:"Procenten", wg_mpct_d:"Procenten uitrekenen met mooie getallen.",
    mGood:"Goed zo!", mAnsWas:"Het goede antwoord is", mAgain:"Nog een keer ▸",
    mGoed:"goed", mOf:"van", mDoneT:"Klaar!",
    amode:"Blokjes slepen of typen", penMode:"Tekenen op het bord",
    fabWidgets:"Widget toevoegen", fabDraw:"Tekenen & schrijven", fabMind:"Mindmap op het bord",
    fabImg:"Afbeelding op het bord",
    nodeColor:"Kleur", nodeFont:"Lettergrootte", lineColor:"Lijnkleur", lineStyle:"Lijnstijl",
    a11y:"Hoog contrast (voor slechtzienden)",
    zoomUI:"Beeldgrootte: alles groter of kleiner tonen",
    lensBig:"Loep groter", lensSmall:"Loep kleiner", lensShape:"Rond of vierkant",
    toolHand:"Handje: verplaatsen en bedienen",
    boardsNav:"Borden en mappen", newBoard:"＋ Bord", newFolder:"＋ Map",
    folderPh:"naam nieuwe map…", boardName:"Bord", folderName:"Map",
    delBoard:"Bord verwijderen (2× tikken)",
    renameTip:"Dubbelklik op een bord om het te hernoemen",
    hudMin:"Menu inklappen/uitklappen", hudOrient:"Horizontaal of verticaal",
    wFull:"Maximaliseren", wUnfull:"Terugzetten",
    wZoom:"Inhoud groter of kleiner (voor slechtzienden)",
    wg_flits:"Flitswoorden", wg_flits_d:"Een woord flitst kort in beeld – lezen voordat het verdwijnt!",
    flFlash:"⚡ Flits", flShow:"👁 Toon", flNext:"Volgende ▸", flSec:"sec",
    wg_dice:"Dobbelstenen", wg_dice_d:"Gooi 1, 2 of 3 grote dobbelstenen.",
    diceRoll:"🎲 Gooi!", diceSum:"Samen",
    wg_light:"Stoplicht", wg_light_d:"Rood, oranje of groen – bijvoorbeeld voor het werkrumoer.",
    wg_names:"Namenkiezer", wg_names_d:"Kies willekeurig een naam uit de klas.",
    namesPh:"Eén naam per regel…", namesPick:"🎯 Kies!", namesNoRep:"Zonder herhaling",
    namesDone:"Iedereen is geweest! 🎉",
    wg_hak:"Hakken & plakken", wg_hak_d:"Woorden in klanken hakken en weer plakken, met voorlezen.",
    hakChop:"✂️ Hak", hakGlue:"🔗 Plak", hakSay:"🔊 Lees voor",
    wg_ball:"Ballonnenwoord", wg_ball_d:"Raad het woord letter voor letter voordat de ballonnen knappen.",
    wg_anchor:"Ankerwoorden", wg_anchor_d:"Onbeperkt woordraster rond een thema: elk woord hoort bij de woorden eromheen.",
    anchorPh:"thema…", anchorHint:"Tik op een vak en typ · sleep de achtergrond om te schuiven",
    anchorColor:"Kleur: klik om te wisselen (verbind woorden met dezelfde kleur)",
    ballWin:"Geraden! 🎉", ballLose:"Helaas! Het woord was:",
    bgDots:"Stippen", toolRuler:"Liniaal", toolGeo:"Geodriehoek", toolLens:"Vergrootglas",
    wg_mind:"Mindmap", wg_mind_d:"Woordweb, spin of boomdiagram om samen ideeën te ordenen.",
    mmSpider:"Spin", mmTree:"Boom", mmWeb:"Woordweb", mmRoot:"Onderwerp",
    mmHint:"Klik op tekst om te typen · sleep aan de rand",
    wg_media:"Foto & video", wg_media_d:"Toon foto's en video's van internet, zoals YouTube of Vimeo.",
    mediaPh:"Plak een link (YouTube, Vimeo, foto of video)…", mediaShow:"Tonen",
    mediaEmpty:"Plak hierboven een link en klik op Tonen.",
    mediaErr:"Deze link kan niet worden getoond. Probeer een YouTube-, Vimeo-, foto- of videolink, of open hem met ↗ in een nieuw tabblad.",
    mediaOpen:"Open in nieuw tabblad",
    wordPh:"woord (2–5 letters)", close:"Sluiten",
    badWord:"Gebruik 2 t/m 5 letters (a-z).", needPic:"Kies eerst een plaatje.",
    noWords:"Nog geen eigen woorden. Voeg er hierboven een toe!",
    tabEmoji:"😀 Emoji", tabPicto:"🖼️ Picto's", tabUpload:"📷 Upload",
    pictoSearch:"Zoeken", pictoPh:"zoekwoord…", pictoNone:"Niets gevonden. Probeer een ander woord.",
    pictoLoad:"Zoeken…", pictoErr:"Kon picto's niet laden (internet nodig).",
    pictoCredit:"Picto's: <a href='https://arasaac.org' target='_blank'>ARASAAC</a> (CC BY-NC-SA, Gobierno de Aragón). Ook leuk: <a href='https://www.sclera.be' target='_blank'>sclera.be</a> (gratis download, dan via Upload toevoegen).",
    upload:"📷 Kies een afbeelding…",
    upHint:"Tip: vierkant plaatje, witte of doorzichtige achtergrond, één duidelijk voorwerp, géén tekst in het plaatje.",
    cats:["Dieren","Eten","Natuur","Vervoer","Spullen","Lichaam"],
    notesPh:"Schrijf hier…",
    start:"Start", pause:"Pauze", reset:"Reset", min:"min",
    tmDigits:"Cijfers", tmVisual:"Kijkklok", tmBoth:"Allebei", tmSound:"Geluid aan/uit",
    tmHint:"Sleep aan de rode schijf om de tijd in te stellen.",
    login:"Inloggen", loginBtn:"Inloggen", registerBtn:"Account maken", logout:"Uitloggen",
    namePh:"naam", passPh:"wachtwoord",
    guestNote:"Zonder inloggen wordt niets bewaard. Log in met je schoolaccount om alles op de server te bewaren.",
    storedNote:"Je werk staat op de school-server en is op elk digibord beschikbaar.",
    errLogin:"Onbekende naam of verkeerd wachtwoord.",
    schoolSel:"— kies je school (leeg = overkoepelend) —",
    linkIntro:"Nieuw account? Activeer het met je koppelcode:",
    linkBtn:"Account activeren", pwChange:"Wijzig", pwNewPh:"nieuw wachtwoord (min. 6)",
    codePh:"koppelcode", beheer:"Beheer",
    roleSuper:"Overkoepelend beheerder", roleAdmin:"Schoolbeheerder",
    roleTeacher:"Groepsleiding", rolePupil:"Leerling",
    amUsers:"Gebruikers", amClasses:"Klassen", amSchools:"Scholen",
    amNewSchool:"＋ School", amNewClass:"＋ Klas", amNewTeacher:"＋ Groepsleiding",
    amNewAdmin:"＋ Schoolbeheerder", amNewSuper:"＋ Overkoepelend beheerder",
    amNewPupil:"＋ Leerling", amUserPh:"gebruikersnaam…", amNamePh:"naam…",
    amCode:"koppelcode", amNewCode:"nieuwe code", amPw:"wachtwoord",
    amNoClass:"— geen klas —", amPending:"nog niet geactiveerd",
    amCouple:"koppel leerkracht", amAllSchools:"— alle scholen —", amSuperGroup:"Overkoepelend",
    amCreated:"Aangemaakt! Geef deze koppelcode door:",
    amPupilMade:"Leerling aangemaakt. Wachtwoord:",
    amConfirmDel:"Weet je zeker dat je deze gebruiker wilt verwijderen?",
    errExists:"Deze naam bestaat al.",
    errName:"Naam: 2–20 letters of cijfers.",
    errPass:"Wachtwoord: minimaal 4 tekens.",
    errCrypto:"Inloggen werkt niet in deze browser.",
    hello:"Hoi", boardSaved:"Opgeslagen ✓", loginFirst:"Eerst inloggen"
  },
  en:{
    addWidget:"Widget", chooseWidget:"Choose a widget", saveBoard:"Save board",
    emptyBoard:"The board is empty. Click “Widget” to get started.",
    wg_letters:"Letter blocks", wg_letters_d:"Learn to read and spell with letter blocks – 3 levels, like ‘Ik leer lezen’.",
    wg_notes:"Notes", wg_notes_d:"A sheet to write on.",
    wg_timer:"Timer", wg_timer_d:"Countdown timer with a visual clock for class.",
    wg_write:"Writing pad", wg_write_d:"Writing and maths: pen, eraser and paper with handwriting lines or maths squares.",
    bgBlank:"Blank sheet", bgLines:"Lines", bgWrite:"Handwriting lines",
    bgGridS:"Small maths squares", bgGridB:"Big maths squares",
    penSize:"Thickness", eraser:"Eraser", clearAll:"Clear all",
    toolPen:"Pen", toolFountain:"Fountain pen (thin and thick, follows pressure or speed)",
    toolMark:"Highlighter", toolText:"Type text (click the sheet)",
    wMin:"Minimize", wMax:"Restore",
    lvl1:"Level 1", lvl2:"Level 2", lvl3:"Level 3",
    instr1:"Place the letter blocks in the right spot. Look closely at the letters!",
    instr2_begin:"Find the <b>beginning letter</b> of the word.",
    instr2_mid:"Find the <b>middle letter</b> of the word.",
    instr2_end:"Find the <b>ending letter</b> of the word.",
    instr3:"Spell the word for the picture. The little studs will help you!",
    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",
    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",
    catTaal:"Language", catRekenen:"Maths", catTools:"Tools", catMedia:"Media",
    wg_madd:"Addition", wg_madd_d:"Adding up to 10, 20 or 100.",
    wg_msub:"Subtraction", wg_msub_d:"Subtracting up to 10, 20 or 100.",
    wg_mmul:"Multiplication", wg_mmul_d:"Practise the times tables 1–12.",
    wg_mdiv:"Division", wg_mdiv_d:"Dividing with the tables 1–12.",
    wg_mpct:"Percentages", wg_mpct_d:"Working out percentages with friendly numbers.",
    mGood:"Well done!", mAnsWas:"The right answer is", mAgain:"Again ▸",
    mGoed:"correct", mOf:"of", mDoneT:"Done!",
    amode:"Drag blocks or type", penMode:"Draw on the board",
    fabWidgets:"Add widget", fabDraw:"Draw & write", fabMind:"Mindmap on the board",
    fabImg:"Picture on the board",
    nodeColor:"Colour", nodeFont:"Font size", lineColor:"Line colour", lineStyle:"Line style",
    a11y:"High contrast (for low vision)",
    zoomUI:"Display size: show everything bigger or smaller",
    lensBig:"Larger magnifier", lensSmall:"Smaller magnifier", lensShape:"Round or square",
    toolHand:"Hand: move and interact",
    boardsNav:"Boards and folders", newBoard:"＋ Board", newFolder:"＋ Folder",
    folderPh:"name of new folder…", boardName:"Board", folderName:"Folder",
    delBoard:"Delete board (tap twice)",
    renameTip:"Double-click a board to rename it",
    hudMin:"Collapse/expand menu", hudOrient:"Horizontal or vertical",
    wFull:"Maximize", wUnfull:"Restore",
    wZoom:"Content bigger or smaller (low vision)",
    wg_flits:"Flash words", wg_flits_d:"A word flashes briefly – read it before it disappears!",
    flFlash:"⚡ Flash", flShow:"👁 Show", flNext:"Next ▸", flSec:"sec",
    wg_dice:"Dice", wg_dice_d:"Roll 1, 2 or 3 big dice.",
    diceRoll:"🎲 Roll!", diceSum:"Total",
    wg_light:"Traffic light", wg_light_d:"Red, orange or green – e.g. for classroom noise.",
    wg_names:"Name picker", wg_names_d:"Pick a random name from the class.",
    namesPh:"One name per line…", namesPick:"🎯 Pick!", namesNoRep:"No repeats",
    namesDone:"Everyone has had a turn! 🎉",
    wg_hak:"Chop & blend", wg_hak_d:"Chop words into sounds and blend them back, with read-aloud.",
    hakChop:"✂️ Chop", hakGlue:"🔗 Blend", hakSay:"🔊 Read aloud",
    wg_ball:"Balloon word", wg_ball_d:"Guess the word letter by letter before the balloons pop.",
    wg_anchor:"Anchor words", wg_anchor_d:"Unlimited word grid around a theme: every word relates to its neighbours.",
    anchorPh:"theme…", anchorHint:"Tap a cell and type · drag the background to pan",
    anchorColor:"Colour: click to cycle (connect words with the same colour)",
    ballWin:"You got it! 🎉", ballLose:"Oh no! The word was:",
    bgDots:"Dots", toolRuler:"Ruler", toolGeo:"Set square", toolLens:"Magnifier",
    wg_mind:"Mind map", wg_mind_d:"Word web, spider or tree diagram to organise ideas together.",
    mmSpider:"Spider", mmTree:"Tree", mmWeb:"Word web", mmRoot:"Topic",
    mmHint:"Click text to type · drag by the edge",
    wg_media:"Photo & video", wg_media_d:"Show photos and videos from the internet, such as YouTube or Vimeo.",
    mediaPh:"Paste a link (YouTube, Vimeo, photo or video)…", mediaShow:"Show",
    mediaEmpty:"Paste a link above and click Show.",
    mediaErr:"This link cannot be shown. Try a YouTube, Vimeo, photo or video link, or open it with ↗ in a new tab.",
    mediaOpen:"Open in new tab",
    wordPh:"word (2–5 letters)", close:"Close",
    badWord:"Use 2 to 5 letters (a-z).", needPic:"Pick a picture first.",
    noWords:"No custom words yet. Add one above!",
    tabEmoji:"😀 Emoji", tabPicto:"🖼️ Pictos", tabUpload:"📷 Upload",
    pictoSearch:"Search", pictoPh:"search word…", pictoNone:"Nothing found. Try another word.",
    pictoLoad:"Searching…", pictoErr:"Could not load pictos (internet required).",
    pictoCredit:"Pictos: <a href='https://arasaac.org' target='_blank'>ARASAAC</a> (CC BY-NC-SA, Gobierno de Aragón). Also nice: <a href='https://www.sclera.be' target='_blank'>sclera.be</a> (free download, then add via Upload).",
    upload:"📷 Choose an image…",
    upHint:"Tip: square picture, white or transparent background, one clear object, no text in the picture.",
    cats:["Animals","Food","Nature","Transport","Things","Body"],
    notesPh:"Write here…",
    start:"Start", pause:"Pause", reset:"Reset", min:"min",
    tmDigits:"Digits", tmVisual:"Visual clock", tmBoth:"Both", tmSound:"Sound on/off",
    tmHint:"Drag the red disc to set the time.",
    login:"Log in", loginBtn:"Log in", registerBtn:"Create account", logout:"Log out",
    namePh:"name", passPh:"password",
    guestNote:"Without logging in nothing is saved. Log in with your school account to keep everything on the server.",
    storedNote:"Your work is stored on the school server and available on any board.",
    errLogin:"Unknown name or wrong password.",
    schoolSel:"— choose your school (empty = overarching) —",
    linkIntro:"New account? Activate it with your link code:",
    linkBtn:"Activate account", pwChange:"Change", pwNewPh:"new password (min. 6)",
    codePh:"link code", beheer:"Management",
    roleSuper:"Overarching administrator", roleAdmin:"School administrator",
    roleTeacher:"Group leader", rolePupil:"Pupil",
    amUsers:"Users", amClasses:"Classes", amSchools:"Schools",
    amNewSchool:"＋ School", amNewClass:"＋ Class", amNewTeacher:"＋ Group leader",
    amNewAdmin:"＋ School admin", amNewSuper:"＋ Overarching admin",
    amNewPupil:"＋ Pupil", amUserPh:"username…", amNamePh:"name…",
    amCode:"link code", amNewCode:"new code", amPw:"password",
    amNoClass:"— no class —", amPending:"not yet activated",
    amCouple:"link teacher", amAllSchools:"— all schools —", amSuperGroup:"Overarching",
    amCreated:"Created! Pass on this link code:",
    amPupilMade:"Pupil created. Password:",
    amConfirmDel:"Are you sure you want to delete this user?",
    errExists:"This name already exists.",
    errName:"Name: 2–20 letters or digits.",
    errPass:"Password: at least 4 characters.",
    errCrypto:"Login does not work in this browser.",
    hello:"Hi", boardSaved:"Saved ✓", loginFirst:"Log in first"
  }
};
let LANG = "nl";
const T = k => I18N[LANG][k];
/* effective CSS zoom of the app (display-size setting); pointer coordinates
   are visual pixels, absolute positions are layout pixels → divide by VZ() */
const VZ = ()=>{ const z = parseFloat(document.body.style.zoom); return z>0 ? z : 1; };

function applyI18n(){
  document.querySelectorAll("[data-i18n]").forEach(el=>{ el.textContent = T(el.dataset.i18n); });
  document.querySelectorAll("#langToggle button").forEach(b=>b.classList.toggle("active", b.dataset.lang===LANG));
  document.getElementById("liName").placeholder = T("namePh");
  document.getElementById("liPass").placeholder = T("passPh");
  document.getElementById("liCode").placeholder = T("codePh");
  document.getElementById("liPassNew").placeholder = T("pwNewPh");
  document.getElementById("ownPw").placeholder = T("pwNewPh");
  document.getElementById("btnMute").title = T("muteAll");
  updateUserUI();
  document.dispatchEvent(new CustomEvent("langchange"));
}
document.querySelectorAll("#langToggle button").forEach(b=>{
  b.addEventListener("click", ()=>{ LANG=b.dataset.lang; applyI18n(); });
});
document.getElementById("btnFs").addEventListener("click", ()=>{
  if(document.fullscreenElement) document.exitFullscreen(); else document.documentElement.requestFullscreen();
});

/* =========================================================
   Accounts & sessies — via de server-API (src/api.js)
   Rollen: super (overkoepelend), admin (school), teacher (groepsleiding),
   pupil (leerling). Zonder inloggen wordt niets bewaard.
==========================================================*/
let TOKEN = null;
try{ TOKEN = localStorage.getItem("teach.token"); }catch(e){}
let currentUser = null;   /* {id, username, displayName, role, schoolId, classId} */

async function api(path, opts={}){
  const headers = { "Content-Type": "application/json" };
  if(TOKEN) headers.Authorization = "Bearer " + TOKEN;
  const r = await fetch("/api" + path, {
    method: opts.method || (opts.body ? "POST" : "GET"),
    headers,
    body: opts.body ? JSON.stringify(opts.body) : undefined
  });
  const j = await r.json().catch(()=>({}));
  if(!r.ok) throw new Error(j.error || ("fout " + r.status));
  return j;
}

/* alles van de gebruiker (borden, thema's, eigen woorden) staat op de server */
let saveTimer = null;
function persistUser(){
  if(!currentUser) return Promise.resolve();
  return api("/me/data", { method:"PUT", body:{
    themes: THEMES, generalExtra: GENERAL_EXTRA, boards: BS
  }}).catch(()=>{});
}
function persistWords(){
  if(!currentUser) return;
  clearTimeout(saveTimer);
  saveTimer = setTimeout(persistUser, 800);
}
function generalExtraFromData(data){
  return (data && data.generalExtra) ? data.generalExtra : {nl:[], en:[]};
}
async function hydrateFromServer(){
  const d = (await api("/me/data")).data || {};
  THEMES = themesFromData(d);
  GENERAL_EXTRA = generalExtraFromData(d);
  BS = boardsFromData(d);
  document.dispatchEvent(new CustomEvent("wordschange"));
  loadCurrentSlot();
  document.dispatchEvent(new CustomEvent("userchange"));
}
function resetToGuest(){
  currentUser = null;
  TOKEN = null;
  try{ localStorage.removeItem("teach.token"); }catch(e){}
  THEMES = {nl:[],en:[]};
  GENERAL_EXTRA = {nl:[],en:[]};
  BS = freshBS();
  loadCurrentSlot();
  updateUserUI();
  document.dispatchEvent(new CustomEvent("wordschange"));
  document.dispatchEvent(new CustomEvent("userchange"));
}

/* login UI */
const loginWrap = document.getElementById("loginWrap");
const loginMsg  = document.getElementById("loginMsg");
const roleKey = r => r==="super" ? "roleSuper" : r==="admin" ? "roleAdmin" : r==="teacher" ? "roleTeacher" : "rolePupil";
function updateUserUI(){
  document.getElementById("userLbl").textContent = currentUser ? currentUser.displayName : T("login");
  document.getElementById("btnUser").classList.toggle("on", !!currentUser);
  document.getElementById("loginBox").style.display  = currentUser ? "none" : "block";
  document.getElementById("loggedBox").style.display = currentUser ? "block" : "none";
  const adminBtn = document.getElementById("btnAdmin");
  adminBtn.style.display = currentUser && currentUser.role !== "pupil" ? "" : "none";
  adminBtn.title = T("beheer");
  if(currentUser){
    document.getElementById("helloLbl").textContent =
      `${T("hello")} ${currentUser.displayName}! 👋 · ${T(roleKey(currentUser.role))}`;
    document.getElementById("ownPwRow").style.display = currentUser.role==="pupil" ? "none" : "flex";
  }
}
async function loadSchools(){
  const sel = document.getElementById("liSchool");
  try{
    const list = await api("/schools");
    sel.innerHTML = `<option value="">${T("schoolSel")}</option>` +
      list.map(x=>`<option value="${x.id}">${x.name.replace(/</g,"&lt;")}</option>`).join("");
  }catch(e){ sel.innerHTML = `<option value="">${T("schoolSel")}</option>`; }
}
document.getElementById("btnUser").addEventListener("click", ()=>{
  loginMsg.textContent = ""; loginMsg.classList.remove("ok");
  loadSchools();
  loginWrap.classList.add("open");
});
loginWrap.addEventListener("click", e=>{ if(e.target===loginWrap) loginWrap.classList.remove("open"); });

async function afterLogin(res){
  TOKEN = res.token;
  try{ localStorage.setItem("teach.token", TOKEN); }catch(e){}
  currentUser = res.user;
  updateUserUI();
  loginWrap.classList.remove("open");
  await hydrateFromServer();
}
document.getElementById("btnLogin").addEventListener("click", async ()=>{
  const schoolId = document.getElementById("liSchool").value || null;
  const username = document.getElementById("liName").value.trim();
  const password = document.getElementById("liPass").value;
  loginMsg.classList.remove("ok");
  try{
    await afterLogin(await api("/auth/login", { body:{ schoolId: schoolId ? +schoolId : null, username, password } }));
    document.getElementById("liPass").value = "";
  }catch(e){ loginMsg.textContent = e.message || T("errLogin"); }
});
document.getElementById("liPass").addEventListener("keydown", e=>{
  if(e.key==="Enter") document.getElementById("btnLogin").click();
});
/* account activeren met een koppelcode */
document.getElementById("btnLink").addEventListener("click", async ()=>{
  const code = document.getElementById("liCode").value.trim().toUpperCase();
  const password = document.getElementById("liPassNew").value;
  loginMsg.classList.remove("ok");
  try{
    await afterLogin(await api("/auth/link", { body:{ code, password } }));
    document.getElementById("liCode").value = "";
    document.getElementById("liPassNew").value = "";
  }catch(e){ loginMsg.textContent = e.message; }
});
document.getElementById("btnLogout").addEventListener("click", async ()=>{
  try{ await api("/auth/logout", { method:"POST", body:{} }); }catch(e){}
  resetToGuest();
  loginWrap.classList.remove("open");
});
/* eigen wachtwoord wijzigen (niet voor leerlingen) */
document.getElementById("btnOwnPw").addEventListener("click", async ()=>{
  const pw = document.getElementById("ownPw").value;
  try{
    await api("/auth/password", { method:"PATCH", body:{ password: pw } });
    document.getElementById("ownPw").value = "";
  }catch(e){ alert(e.message); }
});

/* save board */
document.getElementById("btnSave").addEventListener("click", async ()=>{
  const btn = document.getElementById("btnSave");
  const lbl = btn.querySelector("span");
  if(!currentUser){
    lbl.textContent = T("loginFirst");
    setTimeout(()=>{ lbl.textContent = T("saveBoard"); }, 2200);
    loadSchools();
    loginWrap.classList.add("open");
    return;
  }
  stashCurrent();
  await persistUser();
  lbl.textContent = T("boardSaved");
  btn.classList.add("ok");
  setTimeout(()=>{ lbl.textContent = T("saveBoard"); btn.classList.remove("ok"); }, 1800);
});

/* =========================================================
   Sounds
==========================================================*/
let AC=null, MUTED=false;
const btnMute = document.getElementById("btnMute");
btnMute.addEventListener("click", ()=>{
  MUTED = !MUTED;
  btnMute.textContent = MUTED ? "🔇" : "🔊";
  btnMute.title = T("muteAll");
});
function tone(freq, dur=0.12, delay=0, type="sine", vol=0.18){
  if(MUTED) return;
  try{
    AC = AC || new (window.AudioContext||window.webkitAudioContext)();
    const o=AC.createOscillator(), g=AC.createGain();
    o.type=type; o.frequency.value=freq;
    g.gain.setValueAtTime(vol, AC.currentTime+delay);
    g.gain.exponentialRampToValueAtTime(0.001, AC.currentTime+delay+dur);
    o.connect(g); g.connect(AC.destination);
    o.start(AC.currentTime+delay); o.stop(AC.currentTime+delay+dur+0.02);
  }catch(e){}
}
const sndGood = ()=> tone(880,0.1);
const sndBad  = ()=> tone(180,0.18,0,"square",0.10);
const sndWin  = ()=>{ [523,659,784,1047].forEach((f,i)=>tone(f,0.16,i*0.12,"triangle",0.2)); };