diff --git a/VERSION b/VERSION index b771fe7..3ffd068 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.4.51-beta +0.4.52-beta diff --git a/public/css/teach.css b/public/css/teach.css index fbebd85..e3a0e08 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -813,7 +813,7 @@ } .slot.droptarget{border-color:var(--green); background:#e3f6ea; transform:scale(1.06);} .slot .ghost{font-size:30px; font-weight:800; color:#c2cddc; height:40px; display:flex; align-items:center;} - .slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0;} + .slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0; justify-content:center;} .slot.filled .ghost,.slot.filled .slot-dots{display:none;} .slot.shake{animation:shake .35s;} @keyframes shake{ @@ -2003,6 +2003,16 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo .place-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.place-actions .tbtn:not(.ghost){background:var(--green);color:#fff} @media(max-width:480px){.place-task-card{padding:12px}.place-level-control>span{display:none}.place-top{gap:5px}.place-digit-tray.lg-tray{gap:7px;padding:9px}} +/* Letter- en cijferdoelen staan intrinsiek in het midden. safe center + valt bij een te lange woordrij terug op het begin van de scrollstrook, + zodat de eerste vakken bereikbaar blijven in plaats van links af te snijden. */ +.lg-slots,.mt-slots,.clock-answer-slots,.money-answer-slots,.place-answer-slots,.world-spell-word{ + width:max-content;max-width:100%;margin-inline:auto;justify-content:safe center; +} +.lg-slots,.mt-slots{overflow-x:auto;scrollbar-width:thin} +.lg-slots>.slot,.mt-slots>.slot,.clock-answer-slots>.slot,.money-answer-slots>.slot, +.world-spell-word>.slot,.place-answer-slots>.place-slot-col{flex:none} + /* ============================================================ Kindvriendelijke spel-laag Eén accent, duidelijke missies en tastbare bediening voor elk widgettype. @@ -2061,7 +2071,7 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo .lg-pic{font-size:clamp(42px,16cqi,60px)} .lg-pic img{width:clamp(58px,20cqi,76px);height:clamp(58px,20cqi,76px)} .lg-instr{padding:6px 8px;font-size:13px} - .lg-slots{width:100%;max-width:100%;justify-content:flex-start;gap:7px;overflow-x:auto;padding:3px 1px 8px} + .lg-slots{gap:7px;overflow-x:auto;padding:3px 1px 8px} .lg-tray{gap:7px;min-height:0;max-height:44%;overflow:auto;padding:8px} .lg-kbd{gap:5px;padding:7px} .lg-kbd button{width:36px;height:42px;font-size:18px} diff --git a/public/js/core.js b/public/js/core.js index 24e6586..bb45334 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.4.51-beta"; +const VERSION = "0.4.52-beta"; (function(){ const tag = document.getElementById("verTag"); tag.textContent = "v"+VERSION; diff --git a/test/widgets.test.js b/test/widgets.test.js index 86fea94..40b5d76 100644 --- a/test/widgets.test.js +++ b/test/widgets.test.js @@ -303,6 +303,26 @@ test('elk geldspel gebruikt geldige niveaugrenzen en realistische productcategor } }); +test('letter- en cijferdoelvakken blijven gecentreerd en lange woorden blijven bereikbaar',async()=>{ + const css=await readFile('public/css/teach.css','utf8'); + const start=css.indexOf('/* Letter- en cijferdoelen staan intrinsiek in het midden.'); + const end=css.indexOf('/* ============================================================',start); + assert.ok(start>0&&end>start,'gedeelde doelvakregel ontbreekt'); + const centered=css.slice(start,end); + for(const selector of [ + '.lg-slots','.mt-slots','.clock-answer-slots','.money-answer-slots', + '.place-answer-slots','.world-spell-word', + ])assert.ok(centered.includes(selector),selector+' mist expliciete centrering'); + for(const declaration of [ + 'width:max-content','max-width:100%','margin-inline:auto','justify-content:safe center', + 'overflow-x:auto','scrollbar-width:thin', + ])assert.ok(centered.includes(declaration),declaration+' ontbreekt bij de doelvakken'); + assert.match(css,/\.slot\.filled\{[^}]*justify-content:center/,'geplaatst blok staat niet midden in het vak'); + const compact=css.slice(css.indexOf('@container widget (max-width:520px)')); + assert.doesNotMatch(compact,/\.lg-slots\{[^}]*width:100%/,'compacte woordrij mag niet links worden uitgerekt'); + assert.doesNotMatch(compact,/\.lg-slots\{[^}]*justify-content:flex-start/,'compacte woordrij mag niet links worden vastgezet'); +}); + test('alle geregistreerde widgets hebben mobiele dekking en passen op een 320px-bord',async()=>{ const [board,pupil,css]=await Promise.all([ readFile('public/js/board.js','utf8'),