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: 4085589)
Adjustable font override
authorJulian Fietkau <git@fietkau.software>
Sun, 22 Sep 2024 16:14:15 +0000 (18:14 +0200)
committerJulian Fietkau <git@fietkau.software>
Sun, 22 Sep 2024 16:14:15 +0000 (18:14 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index 05bd8c6fd3fe37511b1c73a39d9b30bc9c84fbd6..efb9d74aff38d450603a41350a95c228fbff0e9d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -58,12 +58,19 @@
   .game-upintheair.font-atkinson * {
     font-family: 'Atkinson Hyperlegible' !important;
   }
+  .game-upintheair.font-opendyslexic * {
+    font-family: 'OpenDyslexic' !important;
+    font-size-adjust: 0.4;
+    line-height: 1.0;
+  }
   .ui-page {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
+    box-sizing: border-box;
+    height: 100%;
     opacity: 0;
     display: none;
     transition: opacity 250ms;
@@ -153,7 +160,7 @@
   }
   .ui-page.title button {
     width: 8em;
-    padding: .6em 1em;
+    padding: .6em;
     font-size: 2.5em;
     line-height: 1em;
     font-family: Cookie;
@@ -235,7 +242,7 @@
 <div class="ui-page title">
 <h1>Up in the Air</h1>
 <button class="goto openingcutscene">Start Game</button>
-<button class="goto options">Options</button>
+<button class="goto options-general">Options</button>
 <button class="goto credits">Credits</button>
 <div class="footer">
 <span>Version: dev</span>
@@ -243,7 +250,15 @@
 <span>Website: <a href="https://fietkau.media/up_in_the_air" target="_blank">fietkau.media/up_in_the_air</a></span>
 </div>
 </div>
-<div class="ui-page options">
+<div class="ui-page options options-general">
+<h2>Options</h2>
+<div class="area">
+<p><label>Font: <select class="font">
+<option value="standard" selected>Standard</option>
+<option value="atkinson">Atkinson Hyperlegible</option>
+<option value="opendyslexic">OpenDyslexic</option>
+</select></label></p>
+</div>
 <button class="goto title">Back</button>
 </div>
 <div class="ui-page credits">
@@ -269,7 +284,7 @@
 <p>“<a href="https://fonts.google.com/specimen/Cookie" target="_blank">Cookie</a>” by Ania Kruk</p>
 <p>“<a href="https://github.com/scfried/soft-type-jersey" target="_blank">Jersey 10</a>” by <a href="https://camd.northeastern.edu/people/sarah-cadigan-fried/" target="_blank">Sarah Cadigan-Fried</a></p>
 <p>“<a href="https://www.brailleinstitute.org/freefont/" target="_blank">Atkinson Hyperlegible</a>” by <a href="https://www.brailleinstitute.org/" target="_blank">Braille Institute of America, Inc.</a></p>
-<p>“<a href="https://opendyslexic.org/" target="_blank">OpenDyslexic</a>” by <a href="https://abbiecod.es/" target="_blank">Abbie Gonzalez</a> (<a href="https://hackers.town/@antijingoist" target="_blank">@antijingoist@hackers.town</a>)</p>
+<p>“<a href="https://opendyslexic.org/" target="_blank">OpenDyslexic</a>” by <a href="https://abbiegonzalez.com/" target="_blank">Abbie Gonzalez</a> (<a href="https://hackers.town/@antijingoist" target="_blank">@antijingoist@hackers.town</a>)</p>
 <h4>Engine</h4>
 <p><a href="https://threejs.org/" target="_blank">three.js</a> v168 by mrdoob and contributors</p>
 <p class="seealso">See <a href="README.txt" target="_blank">README.txt</a> for detailed licensing information.</p>
diff --git a/main.js b/main.js
index 4ed91cbd3b8359ad545713a6333d2eb6c5f41d18..93b3bba50fff2d97bb6519740739893e15fdf19f 100644 (file)
--- a/main.js
+++ b/main.js
@@ -520,19 +520,26 @@ function animate(game, renderer, scene) {
   renderer.render(scene, game.view.camera);
 }
 
-document.querySelector('#enableMusic').checked = false;
-document.querySelectorAll('button.goto').forEach((btn) => {
-  btn.addEventListener('click', (e) => {
-    let target = e.target.closest('button');
-    game.ui.moveToPage(Array.from(target.classList).filter(c => c != 'goto')[0]);
-  });
-});
 window['game'] = {
   state: 'loadingAssets',
   ui: {
     root: document.querySelector('.game-upintheair'),
   },
 };
+game.ui.root.querySelector('#enableMusic').checked = false;
+game.ui.root.querySelectorAll('button.goto').forEach((btn) => {
+  btn.addEventListener('click', (e) => {
+    let target = e.target.closest('button');
+    game.ui.moveToPage(Array.from(target.classList).filter(c => c != 'goto')[0]);
+  });
+});
+game.ui.root.querySelector('.options select.font').addEventListener('change', (e) => {
+  game.ui.root.classList.remove('font-atkinson', 'font-opendyslexic');
+  const newFont = e.target.value;
+  if(newFont != 'standard') {
+    game.ui.root.classList.add('font-' + newFont);
+  }
+});
 game.ui.moveToPage = (target, skipFade = false) => {
   let fadeDuration = 250;
   if(skipFade) {