From ed60ccf41ed674715cd67b891e7e00c200edc40a Mon Sep 17 00:00:00 2001
From: Sergey Stepanov <sergystepanov@gmail.com>
Date: Mon, 18 Apr 2022 19:13:26 +0300
Subject: [PATCH] Fix visibility of the help overlay

---
 web/css/main.css     | 2 --
 web/css/ui.css       | 2 +-
 web/index.html       | 6 +++---
 web/js/controller.js | 3 ++-
 web/js/gui/gui.js    | 4 ++--
 5 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/web/css/main.css b/web/css/main.css
index 0c6c476b..1aaeb592 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -49,7 +49,6 @@ body {
 #help-overlay {
     width: 100%;
     height: 100%;
-    display: none;
     position: absolute;
     top: 0;
 }
@@ -66,7 +65,6 @@ body {
 #help-overlay-detail {
     width: 100%;
     height: 100%;
-    display: block;
     position: absolute;
 
     background-image: url('/static/img/help_overlay.png');
diff --git a/web/css/ui.css b/web/css/ui.css
index 4f385b4f..8c806fca 100644
--- a/web/css/ui.css
+++ b/web/css/ui.css
@@ -1,6 +1,6 @@
 
 .hidden {
-    display: none;
+    visibility: hidden;
 }
 
 .modal-window {
diff --git a/web/index.html b/web/index.html
index 60daf856..0a4e5cd4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -84,9 +84,9 @@
 
     <div id="noti-box" class="unselectable">Oh my god</div>
 
-    <div id="help-overlay">
-        <div id="help-overlay-background"></div>
-        <div id="help-overlay-detail"></div>
+    <div id="help-overlay" class="hidden">
+        <div id="help-overlay-background" class="hidden"></div>
+        <div id="help-overlay-detail" class="hidden"></div>
     </div>
     <div id="btn-help" class="btn unselectable" value="help"></div>
     {{if .Recording.Enabled}}
diff --git a/web/js/controller.js b/web/js/controller.js
index e4b70086..bed12db7 100644
--- a/web/js/controller.js
+++ b/web/js/controller.js
@@ -97,7 +97,8 @@
             gui.toggle(keyButtons[KEY.SAVE], show || isGameScreen);
             gui.toggle(keyButtons[KEY.LOAD], show || isGameScreen);
 
-            gui.toggle(helpOverlay, show);
+            gui.toggle(helpOverlay, show)
+            Array.from(helpOverlay.children).forEach((node) => gui.toggle(node, show))
 
             this.shown = show;
 
diff --git a/web/js/gui/gui.js b/web/js/gui/gui.js
index e1d8c0c9..361fe72b 100644
--- a/web/js/gui/gui.js
+++ b/web/js/gui/gui.js
@@ -141,11 +141,11 @@ const gui = (() => {
     }
 
     const show = (el) => {
-        el.style.removeProperty('visibility');
+        el.classList.remove('hidden');
     }
 
     const hide = (el) => {
-        el.style.visibility = 'hidden';
+        el.classList.add('hidden');
     }
 
     const toggle = (el, what) => {