From 17f84bdeafa984bb63b393b4ff9b89e5edab8add Mon Sep 17 00:00:00 2001
From: Geoffrey Wu <geoffrey.feifei@gmail.com>
Date: Wed, 14 Sep 2022 14:21:08 -0400
Subject: [PATCH] close #68

---
 client/multiplayer/room.html     |  2 ++
 client/quizbowl.js               | 12 ++++++++++++
 client/singleplayer/bonuses.html |  5 ++++-
 client/singleplayer/tossups.html |  2 ++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/multiplayer/room.html b/client/multiplayer/room.html
index 25cd6fc60..921193147 100644
--- 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
index 607052a74..7dec0f551 100644
--- 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
index ce46bbbe7..1f3f2f69f 100644
--- 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
index 9bfb2bc41..077b727b8 100644
--- 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>