-<!doctype html>
+<!DOCTYPE html>
<html lang="en-CA">
- <head>
- <meta charset="UTF-8" />
- <title>github.com/coder/websocket - Chat Example</title>
- <meta name="viewport" content="width=device-width" />
+ <head>
+ <meta charset="UTF-8">
+ <title>Monopoly Web</title>
+ <meta name="viewport" content="width=device-width">
- <link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
- <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
- <link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
- <link href="/index.css" rel="stylesheet" />
- </head>
- <body>
- <div id="root">
- <div id="message-log"></div>
- <div id="publish-form-container">
- <form id="publish-form">
- <input name="message" id="message-input" type="text" />
- <input value="Submit" type="submit" />
- </form>
- </div>
- </div>
- <script type="text/javascript" src="/index.js"></script>
- </body>
+ <link href="/index.css" rel="stylesheet">
+ </head>
+ <body>
+ <div id="root">
+ <div id="log"></div>
+
+ <div id="login-form-container">
+ <form id="login-form">
+ <input name="Username" id="login-input" type="text">
+ <input value="Login" type="submit">
+ </form>
+ </div>
+
+ <button id="start" type="button">Start</button>
+ <button id="roll" type="button">Roll</button>
+ </div>
+ <script type="text/javascript" src="/index.js"></script>
+ </body>
</html>
; (() => {
- 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')
})
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}`)
+ }
+ })
+
})()
projects / monopoly-web.git / commitdiff