diff --git a/popup.html b/popup.html
index 3f1875a..4324955 100644
--- a/popup.html
+++ b/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 @@
-
+
+
+
+
+
+
diff --git a/popup.js b/popup.js
index d5a43b2..7e1d540 100644
--- a/popup.js
+++ b/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();
diff --git a/scripts/content.js b/scripts/content.js
index 2fa86bc..c328eb9 100644
--- a/scripts/content.js
+++ b/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 = `(${dTime}) ${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) {