Up-in-the-Air – commitdiff

Clone
You can use Git to clone the repository via the web URL. Download snapshot (zip)
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c3174e4)
Virtual input widget can be moved to the left side
authorJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 11:57:14 +0000 (13:57 +0200)
committerJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 12:38:17 +0000 (14:38 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index 56d6b65c9c0231cf569d3c39bdd2982d616b885b..b16fcafc47bc2d51a5af576c99b35decce846072 100644 (file)
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
     width: calc(100% - 2 * var(--game-margin));
     height: calc(100svh - 2 * var(--game-margin));
     font-family: sans-serif;
+    line-height: 1;
     display: flex;
     justify-content: center;
     align-items: flex-start;
@@ -87,6 +88,10 @@
     right: 0;
     z-index: 25;
   }
+  .virtual-input-left .virtual-input-widget {
+    left: 0;
+    right: unset;
+  }
   @media (min-width: 15cm) and (min-height: 15cm) {
     @container (min-width: calc(100cqh - 4cm - 1rem - 4rem)) {
       .game-upintheair .ui-container.control-touchpad, .game-upintheair .ui-container.control-thumbstick {
@@ -99,6 +104,10 @@
         margin: 0 calc(1rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin)))) 0 0;
         align-self: flex-end;
       }
+      .game-upintheair.virtual-input-left .ui-container.control-touchpad, .game-upintheair .ui-container.control-thumbstick {
+        margin: 0 0 0 calc(1rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
+        align-self: flex-end;
+      }
     }
   }
   @media (max-width: 15cm) or (max-height: 15cm) {
@@ -109,6 +118,10 @@
       bottom: 1rem;
       right: 1rem;
     }
+    .virtual-input-left .virtual-input-widget {
+      left: 1rem;
+      right: unset;
+    }
     @container (min-width: calc(100cqh - 4cm - 2rem)) {
       .game-upintheair .ui-container.control-touchpad, .game-upintheair .ui-container.control-thumbstick {
         margin: 0 calc(2rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
@@ -120,6 +133,10 @@
         margin: 0 calc(2rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin)))) 0 0;
         align-self: flex-end;
       }
+      .game-upintheair.virtual-input-left .ui-container.control-touchpad, .game-upintheair .ui-container.control-thumbstick {
+        margin: 0 0 0 calc(2rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
+        align-self: flex-end;
+      }
     }
   }
   .game-upintheair .ui-container.font-atkinson * {
@@ -463,6 +480,9 @@
     font-size: 1em;
     font-family: 'Nihonium113';
   }
+  .ui-page.options .controls {
+    position: relative;
+  }
   .ui-page.options .controls p:last-child {
     margin-top: 1em;
     padding-right: 1em;
@@ -471,6 +491,15 @@
   .ui-page.options .controls p:last-child span:not(:first-child) {
     display: none;
   }
+  .ui-page.options .controls .leftside {
+    position: absolute;
+    left: 60%;
+    top: 4em;
+    max-width: 40%;
+  }
+  .ui-page.options .controls .leftside label {
+    display: inline;
+  }
   .ui-page.options .graphics *:not(.audio) label, .ui-page.options .audiotheme:not(.audio) label {
     display: inline;
     margin-left: 1ex;
@@ -670,6 +699,7 @@
 <div class="column">
 <div class="controls">
 <h3>Controls</h3>
+<div class="leftside"><label><input type="checkbox">&nbsp;&nbsp;Left side</label></div>
 <p><label><input type="radio" name="upInTheAirGame-controls" value="mouse"> Mouse movement</label></p>
 <p><label><input type="radio" name="upInTheAirGame-controls" value="touchpad"> Virtual touchpad</label></p>
 <p><label><input type="radio" name="upInTheAirGame-controls" value="thumbstick"> Virtual thumbstick</label></p>
diff --git a/main.js b/main.js
index b107e67bcd71a8f287cbbd4800fffc3dd191464d..0b99c678ce7c643ea577b23f9f1542083174ded7 100644 (file)
--- a/main.js
+++ b/main.js
@@ -888,6 +888,7 @@ function animate(game, renderer, scene) {
 function loadSettings(game) {
   let settings = {
     'controls': 'mouse',
+    'virtualinputleft': false,
     'graphics': 1,
     'audio': {
       'music': 0.5,
@@ -926,6 +927,8 @@ function loadSettings(game) {
   }
   const ui = game.ui.root.querySelector('.ui-page.options');
   ui.querySelector('.controls input[value="' + settings['controls'] + '"]').checked = true;
+  ui.querySelector('.controls .leftside input').checked = settings['virtualinputleft'];
+  ui.querySelector('.controls .leftside').style.display = (['touchpad', 'thumbstick'].includes(settings['controls'])) ? 'block' : 'none';
   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('.graphics input[value="' + settings['graphics'] + '"]').checked = true;
@@ -987,6 +990,12 @@ function loadSettings(game) {
 function applySettings(game) {
   const ui = game.ui.root.querySelector('.ui-page.options');
   game.settings['controls'] = ui.querySelector('input[name="upInTheAirGame-controls"]:checked').value;
+  game.settings['virtualinputleft'] = ui.querySelector('.controls .leftside input').checked;
+  if(game.settings['virtualinputleft']) {
+    game.ui.root.parentNode.classList.add('virtual-input-left');
+  } else {
+    game.ui.root.parentNode.classList.remove('virtual-input-left');
+  }
   const virtualInput = game.ui.root.parentNode.querySelector('.virtual-input-widget');
   virtualInput.children[0].style.display = 'block';
   virtualInput.children[0].style.left = '50%';
@@ -1363,6 +1372,7 @@ game.ui.root.querySelectorAll('.options .controls input, .options .graphics inpu
   elem.addEventListener('change', () => {
     applySettings(game);
     if(elem.name == 'upInTheAirGame-controls') {
+      game.ui.root.querySelector('.controls .leftside').style.display = (['touchpad', 'thumbstick'].includes(game.settings['controls'])) ? 'block' : 'none';
       game.ui.root.querySelectorAll('.options .controls p span:not(.' + game.settings['controls'] + ')').forEach(span => span.style.display = 'none');
       game.ui.root.querySelector('.options .controls span.' + game.settings['controls']).style.display = 'block';
     } else if(elem.value == 'highcontrast' || elem.name == 'upInTheAirGame-graphics') {
@@ -1555,7 +1565,7 @@ loadAllAssets(game, (progress) => {
   game.ui.root.querySelector('.ui-page.loading progress').value = percentage;
   game.ui.root.querySelector('.ui-page.loading span').innerText = percentage;
 }).then(() => {
-  if(window.location.hostname == 'fietkau.media') {
+  if(window.location.hostname == 'fietkau.media' && window.location.pathname == '/up_in_the_air') {
     game.ui.root.querySelector('.ui-page.title .footer span:last-child').remove();
   }
   if(!game.assets.audiothemes.includes(game.settings['audio']['theme'])) {