From 3ea84a1bf54cfab441973ea89efedc2a0cfa1e39 Mon Sep 17 00:00:00 2001
From: Christian Aribaud <christian@aribaud.net>
Date: Sun, 16 Apr 2023 22:24:59 +0200
Subject: [PATCH] Adding helper infobox

---
 comic_reader.css                | 45 ++++++++++++++++++++++++++++++++-
 comic_reader.js                 |  7 +++--
 comic_reader_test_high_res.html |  9 +++++++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/comic_reader.css b/comic_reader.css
index 61cea82..4e65fd4 100644
--- a/comic_reader.css
+++ b/comic_reader.css
@@ -43,7 +43,7 @@
 }
 
 #nav-controls {
-    grid-template-columns: 1fr 15em 1fr;
+    grid-template-columns: 33% 0 1fr;
     grid-template-rows: auto;
 }
 
@@ -78,3 +78,46 @@
 #focus-overlay > .center {
     box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
 }
+
+#help-menu{
+    font-size: 120%;
+    display: flex;
+    flex-direction: column;
+    color: white;
+    background-color: rgba(0,0,0,0.8)
+    border: 0.1em solid black;
+    height: 100%;
+    justify-content: end;
+    box-sizing: border-box;
+    align-items: end;
+}
+
+#help-menu > #help-controls {
+    display: grid;
+    padding: 0 1em 1em 0;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 1;
+    opacity: 0;
+    transition: all 1.5s linear;
+    border: white solid;
+    border-width: 1px 0 0 1px;
+    border-radius: 0.3em 0 0 0;
+}
+
+#help-menu > #help-controls:hover {
+    opacity: 1;
+    transition: all 0.3s linear;
+}
+
+#help-menu > #help-controls > div {
+    margin-top: 1em;
+    text-align: end;
+}
+
+.key {
+    display: inline;
+    margin: 0 0.5em;
+    border: 1px white solid;
+    padding: 0 0.1em;
+    border-radius: 0.2em;
+}
\ No newline at end of file
diff --git a/comic_reader.js b/comic_reader.js
index 9d6da41..52715f5 100644
--- a/comic_reader.js
+++ b/comic_reader.js
@@ -13,7 +13,7 @@ TOGGLE_FULLSCREEN = "F"
 
 PAGE_TRANSITION_SPEED = "1.5s"
 MOUSEWHELL_MIN_DELAY = 50
-
+DELAY_BEFORE_HIDDING_CONTROLS = 3000;
 
 //====================
 //  STATES CONSTANTS
@@ -22,6 +22,7 @@ MOUSEWHELL_MIN_DELAY = 50
 READER_FRAME = document.getElementById("reader-frame")
 READER_PAGES = document.getElementById("reader-pages")
 FOCUS_OVERLAY = document.getElementById("focus-overlay")
+HELP_CONTROLS = document.getElementById("help-controls")
 
 CURRENT_ZOOM = 0
 CURRENT_PAGE = 1
@@ -138,7 +139,9 @@ function initReader(){
         READER_PAGES.hidden = false
     }, "300")
     
-    
+    setTimeout(() => {
+        HELP_CONTROLS.style.opacity = null;
+    }, DELAY_BEFORE_HIDDING_CONTROLS)
 }
 
 
diff --git a/comic_reader_test_high_res.html b/comic_reader_test_high_res.html
index 3a6b76c..435e548 100644
--- a/comic_reader_test_high_res.html
+++ b/comic_reader_test_high_res.html
@@ -38,6 +38,15 @@
                 <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
                 <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
             </div>
+            
+            <div id="help-menu">
+                <div id="help-controls" style="opacity:1">
+                    <div><div class="key">F</div>: Toggle fullscreen</div>
+                    <div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div>
+                    <div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div>
+                    <div><div class="key">CRTL</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>
+                </div>
+            </div>
         </div>
     
     </body>