${sym(r.symbol)} ${r.responses.length ? r.responses.map((x) => - `${T.slots[x.slot]}.${T.halves[x.half]} ${T.meaning[x.meaning]}${x.meaning === 'yes' || x.meaning === 'no' ? '' : ' ' + esc(T.quote(x.part))}${x.to ? esc(T.to(x.to)) : ''}`).join('') : `${T.noComment}`}
`).join('')} + `${T.slots[x.slot]}.${T.halves[x.half] ?? T.digit(x.half.split(' ')[1])} ${T.meaning[x.meaning]}${x.meaning === 'yes' || x.meaning === 'no' ? '' : ' ' + esc(T.quote(x.part))}${x.to ? esc(T.to(x.to)) : ''}`).join('') : `${T.noComment}`}`).join('')} `).join('')}`; } @@ -129,14 +130,19 @@ function explainer({ en, voc }) { for (const el of $$('[data-gs-number]')) { const input = $('input[type=range]', el), num = $('input[type=number]', el), out = $('.gs-draw', el), bits = $('.gs-bits', el); const show = (n) => { - n = Math.max(0, Math.min(511, Math.round(+n || 0))); - input.value = num.value = n; + n = Math.max(0, Math.min(+num.max || 511, Math.round(+n || 0))); + num.value = n; + input.value = Math.min(n, 511); const w = en.parse(`COUNT.${n}`); out.innerHTML = wordSvg(en, w); - const sh = numberShape(n); + // the bits of the last digit; a bigger number shows how its digits add up + const ds = toDigits(n); + const sh = numberShape(ds[ds.length - 1]); const vals = [256, 128, 64, 32, 16, 8, 4, 2, 1]; bits.innerHTML = sh.join('').split('').map((c, i) => `${vals[i]}`).join(''); - $('.gs-number-word', el).textContent = wordStr(w); + const term = (d, p) => (p === 0 ? `${d}` : p === 1 ? `${d} × ${BASE}` : `${d} × ${BASE}^${p}`); + const sum = ds.length > 1 ? ` = ${ds.map((d, i) => term(d, ds.length - 1 - i)).join(' + ')}` : ''; + $('.gs-number-word', el).textContent = wordStr(w) + sum; }; input.addEventListener('input', () => show(input.value)); num.addEventListener('input', () => show(num.value)); @@ -179,7 +185,7 @@ function dictionary({ en, voc }) { const t = q.value.trim().toLowerCase(); // a word written out (BODY.STAR, count.42): show how it draws and reads, in the dictionary or not built.hidden = true; - if (t && /^[a-z_]+(\.[a-z0-9_]*)?$/i.test(t)) { + if (t && /^[a-z_]+(\.[a-z0-9_]*)*$/i.test(t)) { try { const w = en.parse(t); if (!isEmpty(w)) { @@ -213,18 +219,21 @@ const SYMBOLS = ['+', '×', '*']; function converter({ en, voc }) { const src = $('#gs-src'), out = $('#gs-out'), rowsOut = $('#gs-rows'), graphOut = $('#gs-graph'), errOut = $('#gs-src-err'); - const examples = $('#gs-examples'); + const examples = $('#gs-examples'), perLineIn = $('#gs-per-line'); let lastRows = []; + const perLine = () => +perLineIn.value || 2; // ---- source -> drawing const fromSource = () => { try { const page = parsePage(src.value, en); - lastRows = render(en, page); - out.innerHTML = page.lines.length ? renderSvg(en, page, { cell: 16 }) : ''; + lastRows = render(en, page, perLine()); + out.innerHTML = page.triplets.length ? renderSvg(en, page, { cell: 16, perLine: perLine() }) : ''; rowsOut.textContent = lastRows.join('\n'); - graphOut.innerHTML = page.lines.length ? graphHtml(voc, readGraph(voc, page), pageSymbols(page)) : ''; - errOut.hidden = true; + graphOut.innerHTML = page.triplets.length ? graphHtml(voc, readGraph(voc, page), pageSymbols(page)) : ''; + const hidden = hiddenZeros(page, perLine()); + errOut.textContent = hidden.map(T.hiddenZero).join(' '); + errOut.hidden = !hidden.length; src.removeAttribute('aria-invalid'); } catch (err) { errOut.textContent = message(err); errOut.hidden = false; @@ -232,6 +241,7 @@ function converter({ en, voc }) { } }; src.addEventListener('input', fromSource); + perLineIn.addEventListener('change', fromSource); examples.addEventListener('change', () => { const opt = examples.selectedOptions[0]; if (!opt.value) return; @@ -240,7 +250,7 @@ function converter({ en, voc }) { $('#gs-copy-rows').addEventListener('click', (ev) => copyText(lastRows.join('\n') + '\n', ev.currentTarget)); $('#gs-svg').addEventListener('click', () => { try { - const blob = new Blob([renderSvg(en, parsePage(src.value, en))], { type: 'image/svg+xml' }); + const blob = new Blob([renderSvg(en, parsePage(src.value, en), { perLine: perLine() })], { type: 'image/svg+xml' }); const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: 'grid-script.svg' }); a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000); } catch { /* the error is already on screen */ } @@ -258,7 +268,7 @@ function converter({ en, voc }) { // ---- drawing -> source: an editor grid, mirrored in a text area const drawing = $('#gs-drawing'), editor = $('#gs-editor'), back = $('#gs-back'), backGraph = $('#gs-back-graph'), backErr = $('#gs-back-err'); - const linesIn = $('#gs-lines'), voicesIn = $('#gs-voices'), palette = $('#gs-palette'), numIn = $('#gs-num'); + const linesIn = $('#gs-lines'), voicesIn = $('#gs-voices'), palette = $('#gs-palette'), numIn = $('#gs-num'), widthIn = $('#gs-width'); let grid = []; // rows of characters let symbol = '+'; let tool = 'BODY'; // a part name, 'NUMBER', 'CELL' or 'ERASE' @@ -266,21 +276,26 @@ function converter({ en, voc }) { const heightFor = (lines, voices) => lines * (4 * voices - 1) + LINE_GAP_ROWS * (lines - 1); const LINE_GAP_ROWS = 3; + const cols = () => Math.max(7, Math.min(120, Math.round(+widthIn.value || 45))); const resize = (h) => { - const blank = () => Array(WIDTH).fill(EMPTY_CELL); - grid = Array.from({ length: h }, (_, r) => grid[r] || blank()); + const w = cols(); + grid = Array.from({ length: h }, (_, r) => { + const row = (grid[r] || []).slice(0, w); + while (row.length < w) row.push(EMPTY_CELL); + return row; + }); }; const drawEditor = () => { const symbols = [...new Set(SYMBOLS.concat(grid.flat().filter((c) => c !== EMPTY_CELL)))]; - // lattice positions are a shade lighter, so the grid shows where parts go + // the rows where bands go are a shade lighter, so the grid shows where parts can sit const voices = +voicesIn.value, period = 4 * voices - 1 + LINE_GAP_ROWS; - const w = (WIDTH + 2) * CELL, h = (grid.length + 2) * CELL, size = CELL - 2; + const w = (cols() + 2) * CELL, h = (grid.length + 2) * CELL, size = CELL - 2; const out = [`