From 254d91faa03fd5d0875f3af6569aa2c9b3079075 Mon Sep 17 00:00:00 2001
From: Julian Fietkau <git@fietkau.software>
Date: Mon, 7 Oct 2024 23:15:06 +0200
Subject: [PATCH] Add options toggle for in-game HUD

---
 index.html | 4 ++++
 main.js    | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 9a0ccaf..93b71ee 100644
--- a/index.html
+++ b/index.html
@@ -991,6 +991,10 @@
 <label><input type="radio" name="upInTheAirGame-graphics" value="3"> Minimal</label>
 </p>
 </div>
+<div class="hud">
+<label><input type="checkbox" name="upInTheAirGame-hud"> Enable HUD</label>
+<p class="annotation">Shows the number of collected words and the progress through the course in the top left. Only recommended for repeat players and high score chasers.</p>
+</div>
 <div class="audio">
 <h3>Audio</h3>
 <label>Music:
diff --git a/main.js b/main.js
index 1d0d94e..efa8d0b 100644
--- a/main.js
+++ b/main.js
@@ -1214,7 +1214,6 @@ game['fn'].loadSettings = () => {
     merge(stored, settings);
   }
   const ui = game.ui.root.querySelector('.ui-page.options');
-  game.ui.hud.style.display = settings['enablehud'] ? 'flex' : 'none';
   if(settings['controls']) {
     ui.querySelector('.controls input[value="' + settings['controls'] + '"]').checked = true;
     ui.querySelector('.controls .leftside input').checked = settings['virtualinputleft'];
@@ -1222,6 +1221,8 @@ game['fn'].loadSettings = () => {
     ui.querySelectorAll('.controls p span:not(.' + settings['controls'] + ')').forEach(span => span.style.display = 'none');
     ui.querySelector('.controls span.' + settings['controls']).style.display = 'block';
   }
+  ui.querySelector('.hud input[name="upInTheAirGame-hud"]').checked = settings['enablehud'];
+  game.ui.hud.style.display = settings['enablehud'] ? 'flex' : 'none';
   ui.querySelector('.graphics input[value="' + settings['graphics'] + '"]').checked = true;
   for(let audioCategory of ['music', 'sounds']) {
     let newValue = Math.max(0, Math.min(100, Math.round(100 * settings['audio'][audioCategory])));
@@ -1341,6 +1342,7 @@ game['fn'].applySettings = () => {
     game.view.camera.updateProjectionMatrix();
     game.view.renderer.setSize(game.view.canvas.width, game.view.canvas.height);
   }
+  game.settings['enablehud'] = ui.querySelector('.hud input[name="upInTheAirGame-hud"]').checked;
   for(let audioCategory of ['music', 'sounds']) {
     game.settings['audio'][audioCategory] = parseInt(ui.querySelector('.audio input[type=range].' + audioCategory).value, 10) / 100;
   }
@@ -1993,7 +1995,7 @@ game['fn'].unlockWithKey = (input) => {
 game['fn'].start = () => {
   game.ui = {
     root: document.querySelector('.upInTheAirGame .ui-container'),
-    hud: document.querySelector('.upInTheAirGame .hud'),
+    hud: document.querySelector('.upInTheAirGame .gameplay .hud'),
     gamepads: [],
   };
   game.settings = {};
@@ -2073,7 +2075,7 @@ game['fn'].start = () => {
     });
   });
 
-  game.ui.root.querySelectorAll('.options .controls input, .options .graphics input, .options .feather input, .options .accessibility input, .options .accessibility select').forEach((elem) => {
+  game.ui.root.querySelectorAll('.options .controls input, .options .graphics input, .options .hud input, .options .feather input, .options .accessibility input, .options .accessibility select').forEach((elem) => {
     elem.addEventListener('change', () => {
       game['fn'].applySettings();
       if(elem.name == 'upInTheAirGame-controls') {
-- 
2.34.1