diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/client.js | 47 | ||||
| -rw-r--r-- | assets/room.html | 10 | ||||
| -rw-r--r-- | assets/style.css | 30 |
3 files changed, 63 insertions, 24 deletions
diff --git a/assets/client.js b/assets/client.js index 7c89495..3d6f064 100644 --- a/assets/client.js +++ b/assets/client.js @@ -1,13 +1,7 @@ window.id = NaN; -window.name = "anon"; -window.clr = "#f03333"; window.info_elem = document.getElementById("miscinfo"); -window.info_elem.innerHTML =` - <form action="javascript:;" onsubmit="register()"> - <input id="name-in" type="text" value="anon"> - <input id="clr-in" type="color" value="#33c033"></input> - <button>Join</button> - </form>`; +window.identform = document.getElementById("identform"); +window.statusline = document.getElementById("statusline"); window.board_elem = document.getElementById("board"); window.bwidth = NaN; window.bheight = NaN; @@ -19,17 +13,34 @@ 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.identity = JSON.parse(localStorage.getItem("identity")); + +if (identity != null) { + window.socket = connect(); + window.identform.style.display = "none"; +} else { + window.identform.style.display = "auto"; + window.statusline.style.display = "none"; +} +function new_ident() { + window.identity = Object(); + window.identity.name = document.getElementById("name-in").value; + window.identity.clr = document.getElementById("clr-in").value; + localStorage.setItem("identity", JSON.stringify(window.identity)); window.socket = connect(); + window.identform.style.display = "none"; + window.statusline.style.display = "flex"; +} +function new_ident_btn() { + localStorage.removeItem("identity"); + document.location.reload(); } function connect() { let wsproto = (window.location.protocol == "https:")? "wss:": "ws:"; let s = new WebSocket(`${wsproto}//${location.hostname}:${location.port}${location.pathname}/ws`); s.onopen = function() { - s.send(`register ${window.name} ${window.clr}`); + s.send(`register ${window.identity.name} ${window.identity.clr}`); } s.onmessage = function(e) { last_packet = e; @@ -62,15 +73,15 @@ function connect() { bwidth = Number(dims[0]); bheight = Number(dims[1]); mine_ratio = fields[4]; - createCursor(id, name, clr); + createCursor(id, name, identity.clr); } break; case "win": { - info_elem.innerHTML = "<p>You win! Click here to play again.</p>"; + info_elem.innerHTML = "You win! Click here to play again."; 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.innerHTML = `You lost, ${badone} was blown up. Click here to retry.`; info_elem.onclick = e => { s.send("reset") }; } break; case "logoff": { @@ -180,7 +191,7 @@ function movSelWin(win, x, y) { function getBoardBounds() { let boardb = board_elem.getBoundingClientRect(); tile_w = boardb.width / bwidth; - tile_h = 22; + tile_h = 48; return { ox: boardb.x, oy: boardb.y, @@ -192,13 +203,13 @@ function getBoardBounds() { board_elem.onclick = function(e) { let tpos = tilepos(e.clientX, e.clientY); let cmd = `reveal ${tpos.x} ${tpos.y}`; - console.log(cmd); + //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); + //console.log(cmd); socket.send(cmd); return false; } diff --git a/assets/room.html b/assets/room.html index 4470aea..281afce 100644 --- a/assets/room.html +++ b/assets/room.html @@ -11,7 +11,15 @@ <div id="board-container"> <span id="board"></span> </div> - <p id="miscinfo">Loading...</p> + <form id="identform" action="javascript:;" onsubmit="new_ident()"> + <input id="name-in" type="text" value="anon"> + <input id="clr-in" type="color" value="#33c033"></input> + <button>Join</button> + </form> + <div id="statusline"> + <p id="miscinfo"></p> + <p onclick="new_ident_btn()">new identity</p> + </div> </div> </body> <script src="https://unpkg.com/fflate"></script> diff --git a/assets/style.css b/assets/style.css index 58da34f..4127817 100644 --- a/assets/style.css +++ b/assets/style.css @@ -3,18 +3,21 @@ src: url("./f.ttf"); } #board-container { - font-size: 36px; - line-height: 22px; + font-size: 80px; + line-height: 48px; + margin: 2vw; } .cent { - width: 80vmin; + width: 80vw; margin: 0 auto; } body { font-family: vt323, monospace; + font-size: 20pt; background-color: black; color: white; + margin: 0; } .unsel { -webkit-touch-callout: none; @@ -25,15 +28,18 @@ body { user-select: none; } .cursor { - font-size: 16pt; + font-size: 20pt; + padding: 0; pointer-events: none; + z-index: 1; } .cursor * { margin: 0 0; } .cursor-name { background-color: #000000c0; - padding: 0.1em 0.1em; + padding: 0 0.1em; + line-height: initial; } #rlist a, #rlist span { @@ -42,6 +48,20 @@ body { background-color: #3c3c3c; } +#miscinfo { + flex-grow: 1; +} + +#statusline { + display: flex; + position: sticky; + background-color: black; + width: 96vw; + padding: 0 2vw; + bottom: 0px; + left: 0px; +} + span, h1, h4 { margin: 0 auto; } |