close #68

qbreader · Sep 14, 2022 · 17f84bd · 17f84bd
1 parent 488689f
commit 17f84bd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/client/multiplayer/room.html b/client/multiplayer/room.html
@@ -99,6 +99,8 @@
                 </div>
                 <label for="reading-speed">Reading speed: <span id="reading-speed-display">50</span><br></label>
                 <input class="form-range" id="reading-speed" type="range" min="0" max="100" step="5">
+                <label for="font-size">Font size: <span id="font-size-display">16</span>px</label>
+                <input class="form-range" id="font-size" type="range" value="16" min="10" max="30" step="1">
                 <div class="text-center mb-2">
                     <button type="button" class="btn btn-warning" id="clear-stats">Clear Stats</button>
                     <button type="button" class="btn btn-danger"  id="category-select-button" data-bs-toggle="modal" data-bs-target="#category-modal">Categories</button>

diff --git a/client/quizbowl.js b/client/quizbowl.js
@@ -261,6 +261,12 @@ document.getElementById('set-name').addEventListener('change', async function (e
     }
 });
 
+document.getElementById('font-size').addEventListener('input', function () {
+    localStorage.setItem('font-size', this.value);
+    document.getElementById('font-size-display').innerHTML = this.value;
+    document.getElementById('question').style.setProperty('font-size', `${this.value}px`);
+});
+
 document.getElementById('toggle-high-contrast-question-text').addEventListener('click', function () {
     this.blur();
     if (this.checked) {
@@ -277,6 +283,12 @@ document.getElementById('toggle-options').addEventListener('click', function ()
     document.getElementById('options').classList.toggle('d-none');
 });
 
+if (localStorage.getItem('font-size')) {
+    document.getElementById('font-size').value = localStorage.getItem('font-size');
+    document.getElementById('font-size-display').innerHTML = localStorage.getItem('font-size');
+    document.getElementById('question').style.setProperty('font-size', `${localStorage.getItem('font-size')}px`);
+}
+
 if (localStorage.getItem('high-contrast-question-text') === 'true') {
     document.getElementById('toggle-high-contrast-question-text').checked = true;
     document.getElementById('question').classList.add('high-contrast-question-text');

diff --git a/client/singleplayer/bonuses.html b/client/singleplayer/bonuses.html
@@ -74,7 +74,10 @@
                 <datalist id="set-list"></datalist>
                 <input type="text" class="form-control my-1" id="packet-number" placeholder="Packet Numbers">
                 <input type="text" class="form-control" id="question-number" placeholder="Starting question #">
-                <div class="text-center mt-3 mb-2">
+                <div class="my-2"></div>
+                <label for="font-size">Font size: <span id="font-size-display">16</span>px</label>
+                <input class="form-range" id="font-size" type="range" value="16" min="10" max="30" step="1">
+                <div class="text-center mb-2">
                     <button type="button" class="btn btn-danger" id="category-select-button" data-bs-toggle="modal" data-bs-target="#category-modal">Categories</button>
                     <button type="button" class="btn btn-warning" id="clear-stats">Clear Stats</button>
                 </div>

diff --git a/client/singleplayer/tossups.html b/client/singleplayer/tossups.html
@@ -77,6 +77,8 @@
                 <div class="my-2"></div>
                 <label for="reading-speed">Reading speed: <span id="reading-speed-display">50</span><br></label>
                 <input class="form-range" id="reading-speed" type="range" min="0" max="100" step="5">
+                <label for="font-size">Font size: <span id="font-size-display">16</span>px</label>
+                <input class="form-range" id="font-size" type="range" value="16" min="10" max="30" step="1">
                 <div class="text-center mb-2">
                     <button type="button" class="btn btn-danger"  id="category-select-button" data-bs-toggle="modal" data-bs-target="#category-modal">Categories</button>
                     <button type="button" class="btn btn-warning" id="clear-stats">Clear Stats</button>