Glitch Help updates

- fix open guide timeout - use frame layout for open guide btn & glitch guide frame
bcc-code · Nov 12, 2024 · ad272b4 · ad272b4
1 parent 5e72563
commit ad272b4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/src/Experience/Components/GlitchHelp.js b/src/Experience/Components/GlitchHelp.js
@@ -56,22 +56,28 @@ export default class GlitchHelp {
             </div>`
         )
 
+        const openGuideBtn = new Frame({
+            content: instance.data.get_hint_button,
+        })
+        const glitchGuideFrame = new Frame({
+            content: instance.data.hint,
+        })
         const glitchCharacter = _gl.elementFromHtml(
             `<div class="glitch-help">
                 <div id="glitch-character">
                     <video id="glitch-character-idle" src="games/glitch-help/Glitch_WEB_Oppgave3_Loop_v003.webm" muted autoplay loop></video>
                     <video id="glitch-character-popup" src="games/glitch-help/Glitch_WEB_Oppgave3_Start_v003.webm" muted></video>
                 </div>
-                <div id="open-guide" class="cursor-pointer">${instance.data.get_hint_button}</div>
-                <div id="glitch-guide">${instance.data.hint}</div>
+                <div id="open-guide" class="cc-container cursor-pointer">${openGuideBtn.getHtml()}</div>
+                <div id="glitch-guide" class="cc-container">${glitchGuideFrame.getHtml()}</div>
             </div>`
         )
 
         const nextStep = container.querySelector('button')
         if (nextStep) nextStep.addEventListener('click', instance.program.nextStep)
 
         instance.experience.interface.tasksDescription.append(container)
-        instance.experience.interface.tasksDescription.append(glitchCharacter)
+        instance.experience.interface.chapterWrapper.append(glitchCharacter)
 
         instance.experience.navigation.next.innerHTML = `<span>${_s.miniGames.skip}</span>`
     }
@@ -96,6 +102,7 @@ export default class GlitchHelp {
             characterPopup.currentTime = 0
             characterPopup.play()
         })
+
         document.querySelector('#glitch-character-popup').addEventListener('ended', () => {
             const characterPopup = document.querySelector('#glitch-character-popup')
             const characterIdle = document.querySelector('#glitch-character-idle')
@@ -111,6 +118,7 @@ export default class GlitchHelp {
                 }
             }, 10)
         })
+
         glitchCharacter.addEventListener('mouseleave', () => {
             glitchCharacter.classList.remove('hovering')
         })
@@ -124,25 +132,26 @@ export default class GlitchHelp {
             }, 500)
         } else {
             // Show guide after 60 seconds otherwise
-            setTimeout(() => {
+            instance.openGuideTimeout = setTimeout(() => {
                 instance.showOpenGuide()
             }, 60 * 1000)
         }
 
         document.querySelector('#glitch-character').addEventListener('click', instance.showOpenGuide)
-        document.querySelector('#open-guide').addEventListener('click', instance.popGlitchGuide)
+        document.querySelector('#open-guide')?.addEventListener('click', instance.popGlitchGuide)
 
         document.addEventListener(_e.ACTIONS.STEP_TOGGLED, instance.destroy)
     }
 
     showOpenGuide() {
-        document.querySelector('#glitch-character').classList.add('active')
-        document.querySelector('#open-guide').style.display = 'block'
+        clearTimeout(instance.openGuideTimeout)
+        document.querySelector('#glitch-character').classList.add('active', 'pointer-events-none')
+        document.querySelector('#open-guide').style.display = 'grid'
     }
 
     popGlitchGuide() {
         document.querySelector('#open-guide').style.display = 'none'
-        document.querySelector('#glitch-guide').style.display = 'block'
+        document.querySelector('#glitch-guide').style.display = 'grid'
     }
 
     destroy() {

diff --git a/src/Experience/Experience.js b/src/Experience/Experience.js
@@ -46,6 +46,7 @@ export default class Experience {
             mainScreen: document.querySelector('.screen-bottom_content'),
             helperScreen: document.querySelector('.screen-right_content'),
             closedCaption: document.querySelector('#closed-caption'),
+            chapterWrapper: document.querySelector('#chapter-wrapper'),
             gameContainer: document.querySelector('#games-wrapper'),
             tasksDescription: document.querySelector('#tasks-description'),
             chaptersList: document.querySelector('#chapters-list'),
@@ -111,5 +112,4 @@ export default class Experience {
     setAppView(attr) {
         document.querySelector('#app').setAttribute('data-view', attr)
     }
-
 }
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -3558,6 +3558,12 @@ $themes: (
 
 .glitch-help {
     pointer-events: all;
+    position: absolute;
+    z-index: 99;
+    bottom: 15px;
+    right: 100px;
+    display: flex;
+    flex-direction: row-reverse;
 }
 
 #glitch-idle {
@@ -3603,14 +3609,18 @@ $themes: (
 #open-guide,
 #glitch-guide {
     display: none;
-    position: absolute;
-    background: var(--bg-default);
-    right: 1rem;
-    bottom: 9rem;
     padding: 0.5rem;
-    border: 2px solid #fff;
     text-align: center;
-    width: 230px;
+    width: 330px;
+    margin: 0 195px 0 0;
+}
+
+#open-guide {
+    margin-bottom: 25px;
+
+    .content {
+        justify-content: center;
+    }
 }
 
 .pause {