diff options
| author | stale <redkugelblitzin@gmail.com> | 2022-07-30 22:07:38 -0300 |
|---|---|---|
| committer | stale <redkugelblitzin@gmail.com> | 2022-07-30 22:07:38 -0300 |
| commit | e28498c4953f2da5f56a41f3123a413efa9d9a25 (patch) | |
| tree | b3f2b94ef68836df67b7704be6773e00801e658f | |
| parent | 0aeda028a1b512a65b51a199225290839a3a5f94 (diff) | |
jank up a chat
| -rw-r--r-- | assets/client.js | 16 | ||||
| -rw-r--r-- | assets/room.html | 40 | ||||
| -rw-r--r-- | assets/style.css | 15 |
3 files changed, 47 insertions, 24 deletions
diff --git a/assets/client.js b/assets/client.js index f215a9c..f5558a7 100644 --- a/assets/client.js +++ b/assets/client.js @@ -6,7 +6,8 @@ window.elem = { bcont: document.getElementById("board-container"), board: document.getElementById("board"), cursor_frame: document.getElementById("cursor-frame"), - volslider: document.getElementById("volslider") + volslider: document.getElementById("volslider"), + chat_div: document.getElementById("chat-div") }; const U32MAX = Math.pow(2,32) - 1; @@ -124,6 +125,7 @@ function connect() { room.bconf.h = Number(dims[1]); room.bconf.mine_ratio = fields[5]; createCursor(player.uid, name, room.identity.clr); + setup_chat(name, room.name); } break; case "win": { elem.info.innerHTML = "You win! Click here to play again."; @@ -236,8 +238,8 @@ function pageToBoard(x,y) { function boardToPage(b) { return [ - b[0] * (room.cbounds.w / U32MAX) + room.cbounds.ox, - b[1] * (room.cbounds.h / U32MAX) + room.cbounds.ox + b[0] * (room.cbounds.w / U32MAX), + b[1] * (room.cbounds.h / U32MAX) ]; } @@ -324,3 +326,11 @@ volChanged(); heartbeat(); }, 30000); })(); + +function setup_chat(name, room_name) { + let chat_iframe = document.createElement("iframe"); + // FIXME the url should come from the server + chat_iframe.setAttribute("src", "/gamja?channels=" + encodeURIComponent(`#mines-${room_name}`) + "&nick=" + encodeURIComponent(name)); + elem.chat_div.appendChild(chat_iframe); +} + diff --git a/assets/room.html b/assets/room.html index e526c8b..f8a3f1b 100644 --- a/assets/room.html +++ b/assets/room.html @@ -7,25 +7,29 @@ <link rel="stylesheet" type="text/css" href="../style.css"> </head> <body> - <div> - <div id="board-container"> - <span id="board"></span> - <div id="cursor-frame"></div> - </div> - <form id="identform" style="display: none" action="javascript:;" onsubmit="join()"> - <input id="name-in" type="text" value="anon"> - <input id="clr-in" type="color" value="#33c033"></input> - <button>Join</button> - </form> - <div class="statusline"> - <p id="miscinfo"></p> - <div> - <span id="volbutton" style="margin-right: 0">๐</span> - <input id="volslider" type="range" min="0" max="1" step="0.01"></div> - <a href="javascript:navigator.clipboard.writeText(window.location.href);alert('copied link to clipboard');">๐share</p> - <a href="javascript:clear_ident();">new identity</p> - <a href="..">back to lobby</a> + <form id="identform" style="display: none" action="javascript:;" onsubmit="join()"> + <input id="name-in" type="text" value="anon"> + <input id="clr-in" type="color" value="#33c033"></input> + <button>Join</button> + </form> + <div id="splitscreen"> + <div> + <div id="board-container"> + <span id="board"></span> + <div id="cursor-frame"></div> + </div> + <div class="statusline"> + <p id="miscinfo"></p> + <div> + <span id="volbutton" style="margin-right: 0">๐</span> + <input id="volslider" type="range" min="0" max="1" step="0.01"> + </div> + <a href="javascript:navigator.clipboard.writeText(window.location.href);alert('copied link to clipboard');">๐share</p> + <a href="javascript:clear_ident();">new identity</p> + <a href="..">back to lobby</a> + </div> </div> + <div id="chat-div"></div> </div> </body> <script src="https://unpkg.com/fflate"></script> diff --git a/assets/style.css b/assets/style.css index 4d12602..a5cf01c 100644 --- a/assets/style.css +++ b/assets/style.css @@ -15,10 +15,19 @@ top: 0px; left: 0px; } +#splitscreen { + display: flex; + justify-content: flex-end; +} +#chat-div iframe { + border: none; + width: 20vw; + height: 100vh; +} body { font-family: vt323, monospace; - font-size: 20pt; + font-size: 14pt; background-color: black; color: white; margin: 0; @@ -32,7 +41,7 @@ body { user-select: none; } .cursor { - font-size: 20pt; + font-size: 18pt; padding: 0; pointer-events: none; z-index: 1; @@ -59,7 +68,7 @@ a { display: flex; position: sticky; background-color: black; - width: 96vw; + width: 72vw; padding: 0 2vw; bottom: 0px; left: 0px; |