Add connection to public scoreboard

popup.html

@@ -44,6 +44,20 @@
     #reset-button {
       background-color: lightcoral;
     }
+    [connect-form] {
+      align-items: center;
+      display: none;
+      flex-direction: row;
+      margin-top: 3px;
+    }
+    [connect-form] > input {
+      height: 24px;
+    }
+    #connect-submit-button {
+      height: 22px;
+      margin-left: 5px;
+      margin-top: 0;
+    }
     [messages] {
       display: none;
       margin-top: 10px;
@@ -71,7 +85,12 @@
       <button id="start-button">Start a new contest</button>
       <button id="end-button" style="display: none;">End the contest</button>
       <button id="reset-button" style="display: none;">Reset all saved data</button>
-      <button id="messages-button">show messages</button>
+      <button id="connect-button">Connect to a puzzle scoreboard</button>
+      <div connect-form id="connect-form">
+        <input type="text" id="connect-text">
+        <button id="connect-submit-button">connect</button>
+      </div> 
+      <button id="messages-button">Show messages</button>
       <div messages id="messages">
       </div>
     </div>

popup.js

@@ -1,7 +1,9 @@
 let startTime = 0;
 let endTime = 0;
 let messagesCount = 0;
+let puzzleScoreboard = null;
 let showMessages = false;
+let showConnect = false;
 
 async function init() {
   const data = await chrome.storage.local.get(['startTime', 'endTime']);
@@ -22,6 +24,11 @@ async function init() {
   resetButton.onclick = resetData; 
   const messagesButton = document.getElementById('messages-button');
   messagesButton.onclick = switchMessages; 
+  const connectButton = document.getElementById('connect-button');
+  connectButton.onclick = switchConnectForm; 
+  const connectSubmitButton = document.getElementById('connect-submit-button');
+  connectSubmitButton.onclick = connectToPuzzleScoreboard; 
+  initConnect();
   update();
 }
 
@@ -79,14 +86,59 @@ function switchMessages() {
   const messagesButtonEl = document.getElementById('messages-button');
   if (showMessages) {
     messagesEl.style.display = 'none';
-    messagesButtonEl.innerHTML = 'show messages';
+    messagesButtonEl.innerHTML = 'Show messages';
   } else {
     messagesEl.style.display = 'block';
-    messagesButtonEl.innerHTML = 'hide messages';
+    messagesButtonEl.innerHTML = 'Hide messages';
   }
   showMessages = !showMessages;
 }
 
+function switchConnectForm() {
+  const connectFormEl = document.getElementById('connect-form')
+  if (showConnect) {
+    connectFormEl.style.display = 'none';
+  } else {
+    connectFormEl.style.display = 'flex';
+  }
+  showConnect = !showConnect;
+}
+
+async function initConnect() {
+  const data = await chrome.storage.local.get(['puzzleScoreboard']);
+  if (data?.puzzleScoreboard) {
+    puzzleScoreboard = data.puzzleScoreboard;
+    const connectButtonEl = document.getElementById('connect-button')
+    connectButtonEl.innerHTML = `Connected: ${puzzleScoreboard.split('/message')?.at(0)}`;  
+    const connectTextEl = document.getElementById('connect-text')
+    connectTextEl.style.display = 'none';
+    const connectSubmitButtonEl = document.getElementById('connect-submit-button')
+    connectSubmitButtonEl.innerHTML = 'disconnect';
+  }
+}
+
+function connectToPuzzleScoreboard() {
+  const connectButtonEl = document.getElementById('connect-button')
+  const connectTextEl = document.getElementById('connect-text')
+  const connectSubmitButtonEl = document.getElementById('connect-submit-button')
+  if (puzzleScoreboard) {
+    puzzleScoreboard = null;
+    chrome.storage.local.remove('puzzleScoreboard');
+    connectButtonEl.innerHTML = `Connect to a puzzle scoreboard`;  
+    connectTextEl.style.display = 'block';
+    connectSubmitButtonEl.innerHTML = 'connect';  
+  } else {
+    puzzleScoreboard = connectTextEl.value;
+    chrome.storage.local.set({ puzzleScoreboard: puzzleScoreboard });
+    const connectFormEl = document.getElementById('connect-form')
+    connectFormEl.style.display = 'none';
+    showConnect = false;
+    connectButtonEl.innerHTML = `Connected: ${puzzleScoreboard.split('/message')?.at(0)}`;  
+    connectTextEl.style.display = 'none';
+    connectSubmitButtonEl.innerHTML = 'disconnect';
+  }
+}
+
 function dis(n) {
   if (n < 10) return "0" + n;
   return n.toString();

scripts/content.js

@@ -62,7 +62,8 @@ function checkNewMessages() {
     const name = rootNode.firstChild.firstChild.innerHTML;
     const dTime = displayTime(completionTime);
     if (startTime > 0) {
-      messages.push({completionTime: completionTime, name: name, text: el.innerHTML, displayTime: dTime});
+      const text = el.innerHTML;
+      messages.push({completionTime: completionTime, name: name, text: text, displayTime: dTime});
       const messageContent = `(<span style="color: red;">${dTime}</span>) ${el.innerHTML}`;
       messageContents.set(el, messageContent);
 
@@ -73,9 +74,12 @@ function checkNewMessages() {
       setTimeout(updateMessageContents, 120);
       setTimeout(updateMessageContents, 150);
       setTimeout(updateMessageContents, 180);
+
+      // Upload the message to the puzzle scoreboard, if connected.
+      uploadMessage(name, text, completionTime);
     }
   }
-  
+
   if (newElements) {
     chrome.storage.local.set({ messages: messages });
   }
@@ -87,6 +91,24 @@ function checkNewMessages() {
   setTimeout(checkNewMessages, 100);
 }
 
+async function uploadMessage(author, text, time_seconds) {
+  data = await chrome.storage.local.get(['puzzleScoreboard']);
+  if (data?.puzzleScoreboard) {
+    fetch(data.puzzleScoreboard, {
+      method: "post",
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        author,
+        text,
+        time_seconds,
+      }),
+    });
+  }
+}
+  
+
 async function update() {
   const data = await chrome.storage.local.get(['startTime', 'endTime']);
   if (data?.startTime >= 0 && data.startTime != startTime) {