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: 304f853)
Keyboard key reassignment
authorJulian Fietkau <git@fietkau.software>
Wed, 25 Sep 2024 22:13:50 +0000 (00:13 +0200)
committerJulian Fietkau <git@fietkau.software>
Wed, 25 Sep 2024 22:13:50 +0000 (00:13 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index 38c73707c00361737d765268d97edd465469184a..db0e1dfa7ac701f6abcbf9937bd3cfd0f631ec06 100644 (file)
--- a/index.html
+++ b/index.html
@@ -420,6 +420,17 @@
     margin: .7ex;
     width: 6em;
   }
+  .ui-page.keyboard-modal {
+    z-index: 20;
+    opacity: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000c;
+    font-size: 2em;
+    font-family: 'Nihonium113';
+    color: #fff;
+  }
   .ui-page .audio input[type=range] {
     width: 8em;
   }
diff --git a/main.js b/main.js
index 5cecc27a46a54b04f99a37d4040d528f8520b105..91a3d1a1655a629bcfbf9610e22828afccf4e21a 100644 (file)
--- a/main.js
+++ b/main.js
@@ -755,7 +755,7 @@ function loadSettings(game) {
   if(stored) {
     let merge = (source, target) => {
       for(let k of Object.keys(source)) {
-        if(typeof(source[k]) == 'object' && typeof(target[k]) == 'object') {
+        if(typeof(source[k]) == 'object' && typeof(target[k]) == 'object' && !Array.isArray(target[k])) {
           merge(source[k], target[k]);
         } else if(k in target) {
           target[k] = source[k];
@@ -811,6 +811,7 @@ function loadSettings(game) {
         case 'ArrowRight': return '🠖';
         case 'ArrowDown': return '🠗';
         case 'ArrowLeft': return '🠔';
+        case ' ': return 'Space';
         default: return k;
       }
     });
@@ -1159,6 +1160,21 @@ game.ui.root.querySelectorAll('.options .audio button').forEach((btn) => {
     }
   });
 });
+game.ui.root.querySelectorAll('.options .keyboard label button').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    if(game.ui.root.querySelector('.ui-page.keyboard-modal')) {
+      return;
+    }
+    const keyboardModal = document.createElement('div');
+    keyboardModal.classList.add('ui-page', 'keyboard-modal');
+    const instruction = document.createElement('span');
+    const direction = btn.classList[0];
+    keyboardModal.classList.add(direction);
+    instruction.innerText = 'Please press the key for “' + direction[0].toUpperCase() + direction.slice(1) + '”';
+    keyboardModal.appendChild(instruction);
+    game.ui.root.appendChild(keyboardModal);
+  });
+});
 game.ui.root.querySelector('.options .keyboard button[value="reset"]').addEventListener('click', applySettings(game));
 game.ui.root.querySelectorAll('.ui-page .areatabs button').forEach((btn) => {
   btn.addEventListener('click', (e) => {
@@ -1253,6 +1269,19 @@ window.addEventListener('blur', () => {
   }
 });
 document.addEventListener('keydown', (e) => {
+  const keyboardModal = game.ui.root.querySelector('.keyboard-modal');
+  if(keyboardModal) {
+    const direction = [...keyboardModal.classList].filter(c => c != 'ui-page' && c != 'keyboard-modal')[0];
+    if(e.key != 'Escape') {
+      game.ui.root.querySelector('.options .keyboard label button.' + direction).value = e.key;
+      applySettings(game);
+      loadSettings(game);
+    }
+    keyboardModal.remove();
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
   if(e.key == 'Escape') {
     if(game.ui.currentPage == 'gameplay') {
       game.ui.moveToPage('pause', true);