diff options
Diffstat (limited to 'page.html')
| -rw-r--r-- | page.html | 256 |
1 files changed, 0 insertions, 256 deletions
diff --git a/page.html b/page.html deleted file mode 100644 index 8656495..0000000 --- a/page.html +++ /dev/null @@ -1,256 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>websweeper</title> - <meta name="viewport" content="width=device-width,initial-scale=1"> - </head> - <style> -@font-face { - font-family: vt323; - src: url("font.ttf"); -} - #board-container { - font-size: 36px; - line-height: 22px; - } - body { - font-family: vt323, monospace; - background-color: black; - color: white; - } - .unsel { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - .cursor { - font-size: 16pt; - pointer-events: none; - } - .cursor * { - margin: 0 0; - } - .cursor-name { - background-color: #000000c0; - padding: 0.1em 0.1em; - } - </style> - <body> - <div class=""> - <div id="board-container"> - <span id="board"></span> - </div> - <p id="miscinfo">Loading...</p> - </div> - </body> - <script> - window.id = NaN; - window.name = "anon"; - window.clr = "#f03333"; - window.info_elem = document.getElementById("miscinfo"); - window.info_elem.innerHTML =` - <input id="name-in" type="text" value="anon"> - <input id="clr-in" type="color" value="#33c033"></input> - <button onclick=register()>Join</button>`; - window.board_elem = document.getElementById("board"); - window.bwidth = NaN; - window.bheight = NaN; - window.tile_w = NaN; - window.tile_h = NaN; - window.mine_ratio = "unk"; - window.socket = {}; - window.last_packet = {}; - window.cursors = new Map(); - window.board = {}; - window.board_bounds = {}; // init when we actually have the board loaded - function register() { - window.name = document.getElementById("name-in").value; - window.clr = document.getElementById("clr-in").value; - window.socket = connect(); - } - - function connect() { - let wsproto = (window.location.protocol == "https:")? "wss:": "ws:"; - let s = new WebSocket(`${wsproto}//${window.location.hostname}:${window.location.port}${window.location.pathname}ws`); - s.onopen = function() { - s.send(`register ${window.name} ${window.clr}`); - } - s.onmessage = function(e) { - last_packet = e; - let d = e.data; - if (typeof d == "object") { - d.arrayBuffer().then(acceptBoard); - info_elem.onclick = undefined; - info_elem.innerHTML = `Running, ${mine_ratio} tiles are mines`; - } else if (typeof e.data == "string") { - let fields = d.split(" "); - switch (fields[0]) { - case "pos": { - let oid = Number(fields[1]); - let name = fields[2]; - let clr = fields[3]; - let x = fields[4]; - let y = fields[5]; - if (!cursors.has(oid)) { - createCursor(oid, name, clr); - } - let celem = cursors.get(oid).elem; - celem.style.left = x + 'px'; - celem.style.top = y + 'px'; - movSelWin(cursors.get(oid).selwin, x, y); - } break; - case "regack": { - name = fields[1]; - id = Number(fields[2]); - let dims = fields[3].split("x"); - bwidth = Number(dims[0]); - bheight = Number(dims[1]); - mine_ratio = fields[4]; - createCursor(id, name, clr); - } break; - case "win": { - info_elem.innerHTML = "<p>You win! Click here to play again.</p>"; - info_elem.onclick = e => { s.send("reset") }; - } break; - case "lose": { - let badone = fields[1]; - info_elem.innerHTML = `<p>You lost, ${badone} was blown up. Click here to retry.</p>`; - info_elem.onclick = e => { s.send("reset") }; - } break; - case "logoff": { - let oid = Number(fields[1]); - cursors.get(oid).elem.remove(); - cursors.get(oid).selwin.remove(); - cursors.delete(oid); - } break; - } - } - } - s.onerror = function(e) { info_elem.innerHTML += `<br>Error ${e}`; } - s.onclose = function(e) { info_elem.innerHTML = "Closed"; } - return s; - } - - function acceptBoard(data) { - let vals = new Uint8Array(data); - 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); - switch(txt[0]) { - case 'O': - txt = `<span style="color:red;">${txt}</span>`; - break; - case 'C': - txt = `<span style="color:green;">${txt}</span>`; - break; - case 'F': - txt = `<span style="color:yellow;">${txt}</span>`; - break; - - case '1': txt = `<span style="color:#0100FB;">${txt}</span>`; break; - case '2': txt = `<span style="color:#027F01;">${txt}</span>`; break; - case '3': txt = `<span style="color:#FD0100;">${txt}</span>`; break; - case '4': txt = `<span style="color:#01017B;">${txt}</span>`; break; - case '5': txt = `<span style="color:#7D0302;">${txt}</span>`; break; - case '6': txt = `<span style="color:#00807F;">${txt}</span>`; break; - - default: txt = `<span style="color:white;">${txt}</span>`; break; - } - split_board.push(txt); - last_idx = i; - } - last = board[i]; - } - board_elem.innerHTML = split_board.join(""); - } - - function createCursor(id, name, clr) { - // shit doesn't line up - let cursor = document.createElement("div"); - cursor.style.position = "absolute"; - let nametag = document.createElement("p"); - nametag.innerHTML = name; - nametag.classList.add('cursor-name'); - let selection_window = document.createElement("div"); - selection_window.style.backgroundColor = clr + "a0"; - selection_window.style.position = "absolute"; - selection_window.classList.add('cursor'); - cursor.appendChild(nametag); - cursor.classList.add('cursor'); - cursor.style.color = clr; - document.getElementById('board-container').append(cursor); - document.getElementById('board-container').append(selection_window); - if (id == window.id) { - document.addEventListener('mousemove', e => { - cursor.style.left = (e.pageX + 15) + 'px'; - cursor.style.top = (e.pageY + 15) + 'px'; - movSelWin(selection_window, e.clientX, e.clientY); - let tpos = tilepos(e.clientX, e.clientY); - socket.send(`pos ${e.pageX} ${e.pageY}`); - }, - false); - } - cursors.set(id, {name: name, elem: cursor, selwin: selection_window}); - return cursor; - } - function movSelWin(win, x, y) { - let tpos = tilepos(x, y); - if (tpos.x > (bwidth - 1) || tpos.x < 0 || tpos.y > (bheight - 1) || tpos.y < 0) { - win.style.display = "none"; - } else { - win.style.display = ""; - } - win.style.left = ((tpos.x + 0.5) * tile_w) + 'px'; - win.style.top = ((tpos.y + 0.5) * tile_h) + 'px'; - win.style.width = tile_w + 'px'; - win.style.height = tile_h + 'px'; - } - function getBoardBounds() { - let boardb = board_elem.getBoundingClientRect(); - tile_w = boardb.width / bwidth; - tile_h = 22; - return { - ox: boardb.x, - oy: boardb.y, - w: boardb.width, - h: boardb.height - }; - } - - board_elem.onclick = function(e) { - let tpos = tilepos(e.clientX, e.clientY); - let cmd = `reveal ${tpos.x} ${tpos.y}`; - console.log(cmd); - socket.send(cmd); - } - board_elem.oncontextmenu = function(e) { - let tpos = tilepos(e.clientX, e.clientY); - let cmd = `flag ${tpos.x} ${tpos.y}`; - console.log(cmd); - socket.send(cmd); - return false; - } - function tilepos(x,y) { - board_bounds = getBoardBounds(); - let b = board_bounds; - let relx = (x - b.ox); - let rely = (y - b.oy); - let tilex = Math.floor(bwidth * relx/b.w); - let tiley = Math.floor(bheight * rely/b.h); - return { x: tilex, y: tiley }; - } - function sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); - } - </script> -</html> |