diff options
Diffstat (limited to 'page.html')
| -rw-r--r-- | page.html | 56 |
1 files changed, 39 insertions, 17 deletions
@@ -34,6 +34,10 @@ .cursor * { margin: 0 0; } + .cursor-name { + background-color: #000000c0; + padding: 0.1em 0.1em; + } </style> <body> <div class=""> @@ -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 = `<input id="name-in" type="text"> - <input id="clr-in" type="color"></input> + <input id="clr-in" type="color" value="#ffffff"></input> <button onclick=register()>Join</button>`; } 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 = "<p>You win! Reset?</p>"; @@ -137,34 +150,43 @@ board_elem.innerHTML = "<span>" + split_board.join("") + "</span>"; } - function createCursor(id, name) { + function createCursor(id, name, clr) { // shit doesn't line up let cursor = document.createElement("div"); - cursor.innerHTML = "<p>x</p>"; 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, |