From 58eca41435513bd3cde6752630756a0b2d8039d8 Mon Sep 17 00:00:00 2001
From: p11 <Krapohl.f@gmx.de>
Date: Mon, 21 Apr 2025 11:31:02 +0200
Subject: [PATCH] Add ability to hide the text box

---
 src/vn.rs | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/vn.rs b/src/vn.rs
index 73abbb7..c0bfe26 100644
--- a/src/vn.rs
+++ b/src/vn.rs
@@ -166,6 +166,10 @@ fn global_styles() -> Markup {
             width: 20px;
             height: 20px;
             opacity: 0.5;
+        }
+        .visual-novel-box.hidden {
+            opacity: 0;
+            pointer-events: none;
         }";
 
     const CHARACTER_STYLES: &str = r"
@@ -253,11 +257,21 @@ fn interactive_script(total_sections: usize) -> Markup {
             (maud::PreEscaped(format!(r"
                 let currentScene = 0;
                 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() {{
                     document.querySelectorAll('.selection-section').forEach((el, index) => {{
                         el.style.display = index === currentScene ? 'block' : 'none';
                     }});
+
+                    toggleText(true);
                     document.getElementById('section-counter').textContent = 
                         `${{currentScene + 1}}/${{totalSections}}`;
                 }}
@@ -272,10 +286,18 @@ fn interactive_script(total_sections: usize) -> Markup {
                     updateSection();
                 }}
 
-                document.addEventListener('keydown', (e) => {{
-                    if(e.key === 'ArrowLeft') prev();
-                    if(e.key === 'ArrowRight') next();
-                }});
+                function handleKeys(e) {{
+                    switch(e.key) {{
+                        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);
             ")))
         }
     }