implement bonus timer

client/singleplayer/ClientBonusRoom.js

@@ -29,6 +29,14 @@ export default class ClientBonusRoom extends BonusRoom {
     }
   }
 
+  get liveAnswer () {
+    return document.getElementById('answer-input').value;
+  }
+
+  set liveAnswer (value) {
+    document.getElementById('answer-input').value = value;
+  }
+
   startAnswer (teamId) {
     if (!this.settings.typeToAnswer) {
       this.giveAnswer(teamId, { givenAnswer: this.bonus.answers_sanitized[this.currentPartNumber] });

client/singleplayer/bonuses/index.html

@@ -88,6 +88,10 @@ <h1 id="funny-toast-text" class="me-auto text-danger"></h1>
         </div>
         <div class="row" id="info">
             <div class="options d-lg-block col-12 col-lg-3 order-lg-1 mb-5" id="settings">
+                <div class="timer d-block p-1 text-center" id="timer">
+                    <span class="face">0</span><span class="fraction">.0</span>
+                </div>
+                <hr>
                 <div class="d-none" id="set-settings">
                     <input class="form-control" id="set-name" type="text" placeholder="Set Name" list="set-list">
                     <datalist id="set-list"></datalist>
@@ -128,6 +132,10 @@ <h1 id="funny-toast-text" class="me-auto text-danger"></h1>
                         <input class="form-check-input" id="toggle-show-history" type="checkbox" role="switch" checked>
                         <label class="form-check-label" for="toggle-show-history">Show question history</label>
                     </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" id="toggle-timer" type="checkbox" role="switch" checked>
+                        <label class="form-check-label" for="toggle-timer">Enable timer</label>
+                    </div>
                     <div class="mb-2"></div>
                     <label for="set-strictness">Strictness: <span id="strictness-display">7</span><br></label>
                     <input class="form-range" id="set-strictness" type="range" min="0" max="20" step="1" value="7">

client/singleplayer/bonuses/index.jsx

@@ -35,20 +35,22 @@ function onmessage (message) {
     case 'next':
     case 'skip':
     case 'start': return next(data);
+    case 'reveal-leadin': return revealLeadin(data);
+    case 'reveal-next-answer': return revealNextAnswer(data);
+    case 'reveal-next-part': return revealNextPart(data);
     case 'set-categories': return setCategories(data);
     case 'set-difficulties': return setDifficulties(data);
     case 'set-packet-numbers': return setPacketNumbers(data);
     case 'set-set-name': return setSetName(data);
     case 'set-strictness': return setStrictness(data);
     case 'set-year-range': return setYearRange(data);
     case 'start-answer': return startAnswer(data);
-    case 'reveal-leadin': return revealLeadin(data);
-    case 'reveal-next-answer': return revealNextAnswer(data);
-    case 'reveal-next-part': return revealNextPart(data);
+    case 'timer-update': return updateTimerDisplay(data.timeRemaining);
     case 'toggle-select-by-set-name': return toggleSelectBySetName(data);
     case 'toggle-show-history': return toggleShowHistory(data);
     case 'toggle-standard-only': return toggleStandardOnly(data);
     case 'toggle-three-part-bonuses': return toggleThreePartBonuses(data);
+    case 'toggle-timer': return toggleTimer(data);
     case 'toggle-type-to-answer': return toggleTypeToAnswer(data);
   }
 }
@@ -232,6 +234,12 @@ function toggleThreePartBonuses ({ threePartBonuses }) {
   window.localStorage.setItem('singleplayer-bonus-query', JSON.stringify({ ...room.query, version: queryVersion }));
 }
 
+function toggleTimer ({ timer }) {
+  document.getElementById('timer').classList.toggle('d-none', !timer);
+  document.getElementById('toggle-timer').checked = timer;
+  window.localStorage.setItem('singleplayer-bonus-settings', JSON.stringify({ ...room.settings, version: settingsVersion }));
+}
+
 function toggleTypeToAnswer ({ typeToAnswer }) {
   document.getElementById('type-to-answer').checked = typeToAnswer;
   window.localStorage.setItem('singleplayer-bonus-settings', JSON.stringify({ ...room.settings, version: settingsVersion }));
@@ -248,6 +256,13 @@ function updateStatDisplay (stats) {
   document.getElementById('statline').textContent = `${ppb} PPB with ${numBonuses} bonus${includePlural} seen (${stats[30]}/${stats[20]}/${stats[10]}/${stats[0]}, ${points} pts)`;
 }
 
+function updateTimerDisplay (time) {
+  const seconds = Math.floor(time / 10);
+  const tenths = time % 10;
+  document.querySelector('.timer .face').innerText = seconds;
+  document.querySelector('.timer .fraction').innerText = '.' + tenths;
+}
+
 document.getElementById('answer-form').addEventListener('submit', function (event) {
   event.preventDefault();
   event.stopPropagation();
@@ -345,6 +360,11 @@ document.getElementById('toggle-three-part-bonuses').addEventListener('click', f
   socket.sendToServer({ type: 'toggle-three-part-bonuses', threePartBonuses: this.checked });
 });
 
+document.getElementById('toggle-timer').addEventListener('click', function () {
+  this.blur();
+  socket.sendToServer({ type: 'toggle-timer', timer: this.checked });
+});
+
 document.getElementById('type-to-answer').addEventListener('click', function () {
   this.blur();
   socket.sendToServer({ type: 'toggle-type-to-answer', typeToAnswer: this.checked });
@@ -417,6 +437,7 @@ if (window.localStorage.getItem('singleplayer-bonus-settings')) {
     if (savedSettings.version !== settingsVersion) { throw new Error(); }
     socket.sendToServer({ type: 'set-strictness', ...savedSettings });
     socket.sendToServer({ type: 'toggle-show-history', ...savedSettings });
+    socket.sendToServer({ type: 'toggle-timer', ...savedSettings });
     socket.sendToServer({ type: 'toggle-type-to-answer', ...savedSettings });
   } catch {
     window.localStorage.removeItem('singleplayer-bonus-settings');