fix: add click listeners to arrow icons for mouse control

Author: TasoOneAsia

web/assets/script.js

@@ -142,6 +142,13 @@ window.addEventListener('message', (e) => {
   }
 })
 
+// Setup left and right click handlers
+const leftArrow = document.getElementById('tip-left-arrow')
+const rightArrow = document.getElementById('tip-right-arrow')
+
+leftArrow.addEventListener('click', showPrevTip)
+rightArrow.addEventListener('click', showNextTip)
+
 if (ENABLE_CURSOR) {
   const cursor = document.getElementById('cursor')
 

web/assets/styles.css

@@ -157,3 +157,11 @@ a[onclick] {
   animation: spinner 1s linear infinite;
 }
 
+.arrow-control {
+  user-select: none;
+}
+
+.arrow-control:hover {
+  cursor: pointer;
+}
+

web/config.js

@@ -23,7 +23,7 @@ export const LOADSCREEN_TIPS = [
   },
   {
     title: 'Markdown Render',
-    content: '**This is bold**. But this is not.  [This is a link!](https://github.com/project-error/pe-basicloadscreen/#)'
+    content: '**This is bold**. But this is not.  [This is a link!](https://github.com/project-error/pe-basicloading)'
   }
 ];
 

web/index.html

@@ -25,11 +25,11 @@
             </div>
             <div class="tip-text" id="tip-content"></div>
             <div class="hint-help-wrapper">
-                <span class="material-icons-outlined md-light md-24">
+                <span class="material-icons-outlined md-light md-24 arrow-control" id="tip-left-arrow">
                     chevron_left
                 </span>
                 <span class="hint-help-text" id="hint-help-text"></span>
-                <span class="material-icons-outlined md-light md-24">
+                <span class="material-icons-outlined md-light md-24 arrow-control" id="tip-right-arrow">
                     chevron_right
                 </span>
             </div>