diff options
Diffstat (limited to 'page.html')
| -rw-r--r-- | page.html | 55 |
1 files changed, 36 insertions, 19 deletions
@@ -43,10 +43,9 @@ <p id="miscinfo">Loading...</p> </div> </body> - <script src="https://masba.net/ansispan.js"></script> <script> window.id = NaN; - let s = new WebSocket("ws://127.0.0.1:31236"); + let s = new WebSocket(`ws://${window.location.hostname}:31236`); let info_elem = document.getElementById("miscinfo"); let board_elem = document.getElementById("board"); let name = "deadbeef"; @@ -58,7 +57,6 @@ let name_in = document.getElementById("name-in"); name = name_in.value; s.send(`register ${name}`); - info_elem.innerHTML = "Running"; } s.onopen = function(e) { info_elem.innerHTML = @@ -70,6 +68,8 @@ let d = e.data; if (typeof d == "object") { d.arrayBuffer().then(acceptBoard); + info_elem.onclick = undefined; + info_elem.innerHTML = "Running"; } else if (typeof e.data == "string") { let fields = d.split(" "); if (d.startsWith("pos")) { @@ -90,13 +90,17 @@ } else if (d.startsWith("win")) { info_elem.innerHTML = "<p>You win! Reset?</p>"; - info_elem.onclick = e => { s.send("reset"); info_elem.onclick = undefined; - info_elem.innerHTML = "Running"; }; + info_elem.onclick = e => { s.send("reset") }; } else if (d.startsWith("lose")) { - info_elem.innerHTML = "<p>You lose... Reset?</p>"; - info_elem.onclick = e => { s.send("reset"); info_elem.onclick = undefined; - info_elem.innerHTML = "Running"; }; + let badone = fields[1]; + info_elem.innerHTML = `<p>You lost, ${badone} was blown up. Reset?</p>`; + info_elem.onclick = e => { s.send("reset") }; + } + else if (d.startsWith("logoff")) { + let oid = fields[1]; + cursors.get(oid).elem.remove(); + cursors.delete(oid); } } } @@ -105,18 +109,31 @@ function acceptBoard(data) { let vals = new Uint8Array(data); - if (vals[0] == 27) { - // starts with escape char, is a board dump - board = Array.from(vals.subarray(1,vals.length).values()).reduce((s,c) => s + - String.fromCodePoint(c), ""); - board_elem.innerHTML = "<span>" + ansispan(board) + "</span>"; - } - else if (vals[0] == 'p'.charCodeAt(0)) { - // starts with a p, is a cursor position update - // unimplemented! + board = Array.from(vals).reduce((s,c) => s + String.fromCodePoint(c), ""); + let last = board[0]; + let last_idx = 0; + let split_board = []; + for (let i = 1; i < board.length+1; i++) { + let cur = board[i]; + let gamechars = /^[CFO# 1-8]+$/; + if ((cur != last && gamechars.test(cur)) || cur == undefined) { + let txt = board.substr(last_idx, i-last_idx); + if (txt[0] == 'O') { + txt = `<span style="color:red;">${txt}</span>`; + } else if (txt[0] == 'C') { + txt = `<span style="color:green;">${txt}</span>`; + } else if (txt[0] == 'F') { + txt = `<span style="color:yellow;">${txt}</span>`; + } else { + txt = `<span style="color:white;">${txt}</span>`; } - - } + split_board.push(txt); + last_idx = i; + } + last = board[i]; + } + board_elem.innerHTML = "<span>" + split_board.join("") + "</span>"; + } function createCursor(id, name) { // shit doesn't line up |