From cedcb4049a5dd690b9617d34b99f25feb0095c7a Mon Sep 17 00:00:00 2001 From: stale Date: Wed, 11 May 2022 10:02:10 -0300 Subject: more fixes --- page.html | 56 +++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 17 deletions(-) (limited to 'page.html') diff --git a/page.html b/page.html index 6806e54..949989a 100644 --- a/page.html +++ b/page.html @@ -34,6 +34,10 @@ .cursor * { margin: 0 0; } + .cursor-name { + background-color: #000000c0; + padding: 0.1em 0.1em; + }
@@ -49,20 +53,27 @@ let s = new WebSocket(`${wsproto}//${window.location.hostname}:${window.location.port}${window.location.pathname}ws`); let info_elem = document.getElementById("miscinfo"); let board_elem = document.getElementById("board"); - let name = "deadbeef"; + let tile_w = 0; + let tile_h = 0; + let name = "anon"; + let clr = "#f03333"; let last_packet = {}; let cursors = new Map(); let board = {}; let board_bounds = {}; // init when we actually have the board loaded function register() { let name_in = document.getElementById("name-in"); - name = name_in.value; - s.send(`register ${name}`); + let clr_in = document.getElementById("clr-in"); + if (name_in.value.length > 0) { + name = name_in.value; + } + clr = clr_in.value; + s.send(`register ${name} ${clr}`); } s.onopen = function(e) { info_elem.innerHTML = ` - + `; } s.onmessage = function(e) { @@ -77,18 +88,20 @@ if (d.startsWith("pos")) { let oid = Number(fields[1]); let name = fields[2]; - let x = fields[3]; - let y = fields[4]; + let clr = fields[3]; + let x = fields[4]; + let y = fields[5]; if (!cursors.has(oid)) { - createCursor(oid, name); + createCursor(oid, name, clr); } let celem = cursors.get(oid).elem; celem.style.left = x + 'px'; celem.style.top = y + 'px'; + console.log(oid + name + clr + x + y); } else if (d.startsWith("id")) { window.id = Number(fields[1]); - createCursor(id, name); + createCursor(id, name, clr); } else if (d.startsWith("win")) { info_elem.innerHTML = "

You win! Reset?

"; @@ -137,34 +150,43 @@ board_elem.innerHTML = "" + split_board.join("") + ""; } - function createCursor(id, name) { + function createCursor(id, name, clr) { // shit doesn't line up let cursor = document.createElement("div"); - cursor.innerHTML = "

x

"; 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 = "#00c000a0"; + selection_window.style.position = "absolute"; + selection_window.classList.add('cursor'); cursor.appendChild(nametag); cursor.classList.add('cursor'); - let cb = cursor.getBoundingClientRect(); - let tip = cursor.firstChild.getBoundingClientRect(); - let dx = tip.width/2 - cb.width/2; - let dy = -(tip.height/2 - cb.height/2); + 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 + dx) + 'px'; - cursor.style.top = (e.pageY + dy) + 'px'; + cursor.style.left = (e.pageX + 15) + 'px'; + cursor.style.top = (e.pageY + 15) + 'px'; + let tpos = tilepos(e.clientX, e.clientY); + selection_window.style.left = ((tpos.x + 0.5) * tile_w) + 'px'; + selection_window.style.top = ((tpos.y + 0.5) * tile_h) + 'px'; + selection_window.style.width = tile_w + 'px'; + selection_window.style.height = tile_h + 'px'; s.send(`pos ${e.pageX} ${e.pageY}`); }, false); } - cursors.set(id, {name: name, elem: cursor}); + cursors.set(id, {name: name, elem: cursor, selwin: selection_window}); return cursor; } function getBoardBounds() { let boardb = board_elem.getBoundingClientRect(); let textb = board_elem.firstChild.getBoundingClientRect(); + tile_w = textb.width / 75; + tile_h = boardb.height / 35; return { ox: boardb.x, oy: boardb.y, -- cgit v1.2.3