From e28498c4953f2da5f56a41f3123a413efa9d9a25 Mon Sep 17 00:00:00 2001 From: stale Date: Sat, 30 Jul 2022 22:07:38 -0300 Subject: jank up a chat --- assets/client.js | 16 +++++++++++++--- assets/room.html | 40 ++++++++++++++++++++++------------------ 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 @@ -

- -

- 🔈 -

- 🔗share

- new identity

- back to lobby + +

+ +

+ 🔈 + +

+ 🔗share

+ new identity

+ back to lobby +

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; -- cgit v1.2.3