Spaces:
Running on Zero
Running on Zero
File size: 4,187 Bytes
7d7a567 89a4bf6 7d7a567 89a4bf6 7d7a567 89a4bf6 7d7a567 89a4bf6 7d7a567 89a4bf6 7d7a567 89a4bf6 7d7a567 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transcript harness</title>
<link rel="stylesheet" href="./transcript.css" />
<style>
body {
margin: 16px;
font: 16px/1.4 system-ui, sans-serif;
}
/* Border and padding only: the column's height and overflow are transcript.css's, so
the harness measures the shape the app ships rather than one of its own. */
#transcript-text {
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<!--
THE STANDALONE LAYER FOR THE TRANSCRIPT (plan 02-07). Open it off a static server
with no Python app and no host framework: the golden fixture's token records go
through avatar/transcript.js into real <ruby><rt> DOM, exactly as stage.html does
for the avatar. If this page renders ruby and the
deployed page does not, the fault is the host, not the renderer.
window.__renderFixture(number, who) takes the 1-BASED sentence number of the 02-05
table (#9 = 日本語を勉強しています。, #13 = 田中さんは東京に住んでいます。). That is the ONE
convention every prose reference and every test in 02-07 / 02-08 / 02-09 uses -
never pass a 0-based index. window.__fixtureUnits(number) returns the same
sentence's token records for an oracle to compute against.
Query parameters: ?narrow=1 sets #transcript-text to a 300 px SCROLLING column - the
phone shape plan 02-08's popover has to stay inside, and the only way the container's
own scroll event (which closes the card) can fire at all.
-->
<div id="reading-controls" class="reading-controls">
<label for="furigana-mode">Furigana</label>
<select id="furigana-mode" aria-label="Furigana mode">
<option value="always" selected>always</option>
<option value="above">above my level</option>
<option value="never">never</option>
</select>
<label for="level-select">My level</label>
<select id="level-select" aria-label="JLPT level">
<option value="N5" selected>N5</option>
<option value="N4">N4</option>
<option value="N3">N3</option>
<option value="N2">N2</option>
</select>
</div>
<div id="transcript-text" class="transcript" aria-live="polite"></div>
<script type="module">
import { createTranscript } from './transcript.js';
const params = new URLSearchParams(location.search);
const container = document.getElementById('transcript-text');
if (params.get('narrow') === '1') {
container.style.width = '300px';
container.style.maxHeight = '360px';
container.style.overflowY = 'auto';
}
const t = createTranscript(container);
t.bindPointer();
window.__transcript = t;
// The same objects the renderer writes to, not copies: a test reads live numbers.
window.__transcriptDebug = t.debug.furigana;
window.__popoverDebug = t.debug.popover;
window.__transcriptReady = false;
document.getElementById('furigana-mode').addEventListener('change', (e) => {
t.setMode(e.target.value);
});
document.getElementById('level-select').addEventListener('change', (e) => {
t.setLevel(e.target.value);
});
// The static server serves the repo root; the golden fixture is one level up from avatar/.
const response = await fetch('../tests/fixtures/sentences.json');
if (!response.ok) throw new Error(`golden fixture: HTTP ${response.status}`);
const fixture = await response.json();
const sentences = fixture.sentences;
window.__fixtures = sentences;
window.__fixtureUnits = (number) => sentences[number - 1].units;
window.__renderFixture = (number, who = 'avatar') => {
const { text, units } = sentences[number - 1];
const { lineId } = t.addLine({ who, text });
t.setTokens(lineId, units);
return lineId;
};
window.__transcriptReady = true;
</script>
</body>
</html>
|