diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/client.js | 4 | ||||
| -rw-r--r-- | assets/index.html | 33 | ||||
| -rw-r--r-- | assets/room.html | 4 | ||||
| -rw-r--r-- | assets/style.css | 20 |
4 files changed, 41 insertions, 20 deletions
diff --git a/assets/client.js b/assets/client.js index 14e95f0..33ad796 100644 --- a/assets/client.js +++ b/assets/client.js @@ -11,7 +11,7 @@ window.room = { }; window.info_elem = document.getElementById("miscinfo"); window.identform = document.getElementById("identform"); -window.statusline = document.getElementById("statusline"); +window.statusline = document.getElementsByClassName("statusline")[0]; window.bcont_elem = document.getElementById("board-container"); window.board_elem = document.getElementById("board"); window.cursor_frame = document.getElementById("cursor-frame"); @@ -34,7 +34,7 @@ function join() { room.socket = connect(); statusline.style.display = "flex"; } -function new_ident_btn() { +function clear_ident() { localStorage.removeItem("identity"); document.location.reload(); } diff --git a/assets/index.html b/assets/index.html index 9282726..f86287e 100644 --- a/assets/index.html +++ b/assets/index.html @@ -52,20 +52,39 @@ <form method="post" action="r" class="cent"> <fieldset> <legend>-={ Create a new room }=-</legend> - <label>room name<input name="rname" type="text" autofocus></label><br> - <label>board dimensions<br> + <label>room name <input name="rname" type="text" autofocus></label><br> + <label> + board dimensions <input name="rwidth" type="number" value="30" required> x <input name="rheight" type="number" value="20" required><br> - where<input name="rration" type="number" value="1" required> - in every<input name="rratiod" type="number" value="8" required> + where <input name="rration" type="number" value="1" required> + in every <input name="rratiod" type="number" value="8" required> tiles are mines </label><br> <label>public, ie. shown in the lobby <input name="raccess" type="checkbox" checked></label><br> - <label>safe first move (if possible)<input name="ralwayssafe1move" type="checkbox" checked></label><br> - <label>player limit<input name="rlimit" type="number" value="32"></label><br> + <label>safe first move (if possible) <input name="ralwayssafe1move" type="checkbox" checked></label><br> + <label>player limit <input name="rlimit" type="number" value="32"></label><br> <button id="createbtn">create</button> </fieldset> - <form> + </form> + <div class="statusline cent"> + <p id="ident-name"></p> + <a id="ident-clr" href="javascript:clear_ident();">clear identity</a> + </div> + <script> + function clear_ident() { + localStorage.removeItem("identity"); + document.location.reload(); + } + let ident = JSON.parse(localStorage.getItem("identity")); + let ident_elem = document.getElementById("ident-name"); + if (ident == null) { + ident_elem.innerHTML = "no identity yet"; + document.getElementById("ident-clr").style.display = "none"; + } else { + ident_elem.innerHTML = `you are <span style="color: ${ident.clr}">${ident.name}</span>`; + } + </script> </body> </html> diff --git a/assets/room.html b/assets/room.html index b669757..c3dc871 100644 --- a/assets/room.html +++ b/assets/room.html @@ -17,10 +17,10 @@ <input id="clr-in" type="color" value="#33c033"></input> <button>Join</button> </form> - <div id="statusline"> + <div class="statusline"> <p id="miscinfo"></p> <a href="javascript:navigator.clipboard.writeText(window.location.href);alert('copied link to clipboard');">đŸ”—share</p> - <a href="javascript:new_ident_btn();">new identity</p> + <a href="javascript:clear_ident();">new identity</p> <a href="../..">back to lobby</a> </div> </div> diff --git a/assets/style.css b/assets/style.css index 16ca7f0..49e832e 100644 --- a/assets/style.css +++ b/assets/style.css @@ -15,10 +15,6 @@ top: 0px; left: 0px; } -.cent { - width: 80vw; - margin: 0 auto; -} body { font-family: vt323, monospace; @@ -50,17 +46,16 @@ body { line-height: initial; } -#rlist a, #rlist span { +a { text-decoration: none; - color: #dfdfff; - background-color: #3c3c3c; + color: #8b8be8; } #miscinfo { flex-grow: 1; } -#statusline { +.statusline { display: flex; position: sticky; background-color: black; @@ -69,10 +64,17 @@ body { bottom: 0px; left: 0px; } -#statusline * { +.statusline * { margin: 0.5em 2em 0 0; } +/* i was today years old when i learned that css selector declaration order matters */ +/* cent should come after statusline, so it overwrites statusline's props */ +.cent { + width: 80vw; + margin: 0 auto; +} + span, h1, h4 { margin: 0 auto; } |