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) {