Add ability to hide the text box

This commit is contained in:
p11 2025-04-21 11:31:02 +02:00
parent 169baf4c76
commit 58eca41435

View File

@ -166,6 +166,10 @@ fn global_styles() -> Markup {
width: 20px; width: 20px;
height: 20px; height: 20px;
opacity: 0.5; opacity: 0.5;
}
.visual-novel-box.hidden {
opacity: 0;
pointer-events: none;
}"; }";
const CHARACTER_STYLES: &str = r" const CHARACTER_STYLES: &str = r"
@ -253,11 +257,21 @@ fn interactive_script(total_sections: usize) -> Markup {
(maud::PreEscaped(format!(r" (maud::PreEscaped(format!(r"
let currentScene = 0; let currentScene = 0;
const totalSections = {total_sections}; const totalSections = {total_sections};
let textVisible = true;
function toggleText(visible) {{
document.querySelectorAll('.visual-novel-box').forEach(box => {{
box.classList.toggle('hidden', !visible);
}});
textVisible = visible;
}}
function updateSection() {{ function updateSection() {{
document.querySelectorAll('.selection-section').forEach((el, index) => {{ document.querySelectorAll('.selection-section').forEach((el, index) => {{
el.style.display = index === currentScene ? 'block' : 'none'; el.style.display = index === currentScene ? 'block' : 'none';
}}); }});
toggleText(true);
document.getElementById('section-counter').textContent = document.getElementById('section-counter').textContent =
`${{currentScene + 1}}/${{totalSections}}`; `${{currentScene + 1}}/${{totalSections}}`;
}} }}
@ -272,10 +286,18 @@ fn interactive_script(total_sections: usize) -> Markup {
updateSection(); updateSection();
}} }}
document.addEventListener('keydown', (e) => {{ function handleKeys(e) {{
if(e.key === 'ArrowLeft') prev(); switch(e.key) {{
if(e.key === 'ArrowRight') next(); case 'ArrowLeft': prev(); break;
}}); case 'ArrowRight': next(); break;
case 'ArrowDown': e.preventDefault(); toggleText(false); break;
case 'ArrowUp': e.preventDefault(); toggleText(true); break;
}}
}}
document.addEventListener('keydown', handleKeys);
toggleText(true);
"))) ")))
} }
} }