From: Skullheadx Date: Mon, 8 Jun 2026 19:53:46 +0000 (-0400) Subject: frontend js + html X-Git-Url: http://git.skullheadx.com/nixos/static/projects/suckless.html?a=commitdiff_plain;h=99e5af3e52efa0d48b8dfe84e1aad1822d7e33b4;p=monopoly-web.git frontend js + html --- diff --git a/game/game.go b/game/game.go index 50a6220..37fb726 100644 --- a/game/game.go +++ b/game/game.go @@ -141,7 +141,7 @@ func (ms *MonopolyServer) rollHandler(w http.ResponseWriter, r *http.Request) { http.Error(w, "Not your turn", http.StatusForbidden) } ms.roll() - w.WriteHeader(http.StatusAccepted) + w.WriteHeader(http.StatusOK) } func (ms *MonopolyServer) roll() { diff --git a/public/index.html b/public/index.html index 7038342..3dc8e76 100644 --- a/public/index.html +++ b/public/index.html @@ -1,25 +1,26 @@ - + - - - github.com/coder/websocket - Chat Example - + + + Monopoly Web + - - - - - - -
-
-
-
- - -
-
-
- - + + + +
+
+ +
+
+ + +
+
+ + + +
+ + diff --git a/public/index.js b/public/index.js index aabfa80..c6d759b 100644 --- a/public/index.js +++ b/public/index.js @@ -1,16 +1,19 @@ ; (() => { - let expectingMessage = false + let connected = false + function dial() { const conn = new WebSocket(`ws://${location.host}/subscribe`) conn.addEventListener('close', ev => { - appendLog(`WebSocket Disconnected code: ${ev.code}, reason: ${ev.reason}`, true) + console.error(`WebSocket Disconnected code: ${ev.code}, reason: ${ev.reason}`) + connected = false if (ev.code !== 1001) { - appendLog('Reconnecting in 1s', true) + console.error('Reconnecting in 1s') setTimeout(dial, 1000) } }) conn.addEventListener('open', ev => { + connected = true console.info('websocket connected') }) @@ -19,52 +22,74 @@ console.error('unexpected message type', typeof ev.data) return } - const p = appendLog(ev.data) - if (expectingMessage) { - p.scrollIntoView() - expectingMessage = false - } + appendGameLog(ev.data) }) } - dial() + // dial() - const messageLog = document.getElementById('message-log') - const publishForm = document.getElementById('publish-form') - const messageInput = document.getElementById('message-input') + const gameLog = document.getElementById('log') + const loginForm = document.getElementById('login-form') + const loginInput = document.getElementById('login-input') + const startButton = document.getElementById('start') + const rollButton = document.getElementById('roll') - function appendLog(text, error) { + function appendGameLog(text) { const p = document.createElement('p') - p.innerText = `${new Date().toLocaleTimeString()}: ${text}` - if (error) { - p.style.color = 'red' - p.style.fontStyle = 'bold' - } - messageLog.append(p) + p.innerText = text + gameLog.append(p) return p } - appendLog('Submit a message to get started!') + appendGameLog('Welcome to Monopoly Web') - publishForm.onsubmit = async ev => { + loginForm.onsubmit = async ev => { ev.preventDefault() - const msg = messageInput.value + const msg = loginInput.value if (msg === '') { return } - messageInput.value = '' + loginInput.value = '' - expectingMessage = true try { - const resp = await fetch('/publish', { + const resp = await fetch('/login', { method: 'POST', body: msg, }) - if (resp.status !== 202) { + if (resp.status !== 200) { throw new Error(`Unexpected HTTP Status ${resp.status} ${resp.statusText}`) } + + dial() } catch (err) { - appendLog(`Publish failed: ${err.message}`, true) + console.error(`Login failed: ${err.message}`) } } + + startButton.addEventListener('click', async () => { + try { + const resp = await fetch('/start', { + method: 'POST', + }) + if (resp.status !== 202) { + throw new Error(`Unexpected HTTP Status ${resp.status} ${resp.statusText}`) + } + } catch (err) { + console.error(`Start failed: ${err.message}`) + } + }) + + rollButton.addEventListener('click', async () => { + try { + const resp = await fetch('/roll', { + method: 'POST', + }) + if (resp.status !== 200) { + throw new Error(`Unexpected HTTP Status ${resp.status} ${resp.statusText}`) + } + } catch (err) { + console.error(`Start failed: ${err.message}`) + } + }) + })()