Add connection to public scoreboard
This commit is contained in:
parent
376dd1c3a9
commit
452a57970f
21
popup.html
21
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>
|
||||
|
56
popup.js
56
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();
|
||||
|
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user