show the packet and question number in the question card

Author: geoffrey-wu

client/multiplayer/room.js

@@ -9,6 +9,8 @@ var oldValidSubcategories = [];
 var validCategories = [];
 var validSubcategories = [];
 var currentQuestion = {}
+var currentQuestionNumber = -1;
+var currentPacketNumber = -1;
 var timeoutID = -1;
 var changedCategories = false;
 
@@ -61,8 +63,8 @@ async function processSocketMessage(data) {
             loadCategoryModal(validCategories, validSubcategories);
             break;
         case 'next':
+            createQuestionCard(currentQuestion, currentPacketNumber, currentQuestionNumber + 1);
             if (await loadAndReadTossup()) {
-                createQuestionCard(currentQuestion);
                 if (document.getElementById('next').innerHTML === 'Skip') {
                     logEvent(data.username, `skipped the question`);
                 } else {
@@ -247,6 +249,8 @@ async function loadAndReadTossup() {
             currentlyBuzzing = false;
             paused = false;
             currentQuestion = data.question;
+            currentPacketNumber = data.packetNumber;
+            currentQuestionNumber = data.questionNumber;
             questionText = currentQuestion.question;
             questionTextSplit = questionText.split(' ');
 
@@ -539,12 +543,14 @@ window.onload = () => {
     fetch(`/api/get-room?roomName=${encodeURIComponent(ROOM_NAME)}`)
         .then(response => response.json())
         .then(data => {
+            var currentPacketNumber = data.packetNumber || 0;
+            var currentQuestionNumber = data.currentQuestionNumber || 0;
             document.getElementById('set-title').value = data.setTitle || '';
             document.getElementById('packet-number').value = data.packetNumbers || [];
 
             document.getElementById('set-title-info').innerHTML = data.setTitle || '';
-            document.getElementById('packet-number-info').innerHTML = data.packetNumber || 0;
-            document.getElementById('question-number-info').innerHTML = (data.currentQuestionNumber || 0) + 1;
+            document.getElementById('packet-number-info').innerHTML = currentPacketNumber;
+            document.getElementById('question-number-info').innerHTML = currentQuestionNumber + 1;
 
             document.getElementById('toggle-visibility').checked = data.isPublic;
             document.getElementById('chat').disabled = data.isPublic;

client/script.js

@@ -274,7 +274,7 @@ function initialize(alertOnFailure = true) {
     return true;
 }
 
-function createQuestionCard(question) {
+function createQuestionCard(question, packetNumber, questionNumber) {
     if (!question || Object.keys(question).length === 0) return;
 
     // append a card containing the question to the history element
@@ -308,6 +308,11 @@ function createQuestionCard(question) {
     cardFooterText.innerHTML = `${document.getElementById('set-title').value} / ${question.category} / ${question.subcategory}`;
     cardFooter.appendChild(cardFooterText);
 
+    let cardFooterText2 = document.createElement('small');
+    cardFooterText2.className = 'text-muted float-end';
+    cardFooterText2.innerHTML = `Packet ${packetNumber} / Question ${questionNumber}`;
+    cardFooter.appendChild(cardFooterText2);
+
     cardContainer.appendChild(cardBody);
     cardContainer.appendChild(cardFooter);
     card.appendChild(cardContainer);

client/singleplayer/tossups/tossups.js

@@ -274,7 +274,7 @@ document.getElementById('pause').addEventListener('click', function () {
 
 document.getElementById('next').addEventListener('click', async function () {
     this.blur();
-    createQuestionCard(questions[currentQuestionNumber]);
+    createQuestionCard(questions[currentQuestionNumber], currentPacketNumber, currentQuestionNumber + 1);
     await loadAndReadTossup();
 });