diff options
| author | stale <redkugelblitzin@gmail.com> | 2022-04-30 04:44:08 -0300 |
|---|---|---|
| committer | stale <redkugelblitzin@gmail.com> | 2022-04-30 04:44:08 -0300 |
| commit | 9987d7abf6acd647b4a3a00c20d15f716dce653c (patch) | |
| tree | 1d87a1024c67c0aa67d83b96414ade735b53cb95 /page.html | |
| parent | f8deba936e62e5c9b4f7487f656c92c253427d42 (diff) | |
we finally got moving cursors heck yeah
Diffstat (limited to 'page.html')
| -rw-r--r-- | page.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/page.html b/page.html new file mode 100644 index 0000000..75bb7fd --- /dev/null +++ b/page.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>websweeper</title> + <meta name="viewport" content="width=device-width,initial-scale=1"> + </head> + <style> +@font-face { + font-family: vt323; + src: url("font.ttf"); +} + #board-container { + font-family: vt323, monospace; + font-size: 28pt; + line-height: 0.6em; + } + body { + background-color: black; + color: white; + } + + .unsel { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .cursor * { + font-size: 16pt; + margin: 0 0; + } + </style> + <body> + <div class=""> + <div id="board-container"> + <div id="board"></div> + </div> + <p id="miscinfo">Loading...</p> + </div> + </body> + <script src="https://p.masba.net:8443/ansispan.js"></script> + <script> + let id = NaN; + let s = new WebSocket("ws://127.0.0.1:31236"); + let info_elem = document.getElementById("miscinfo"); + let board_elem = document.getElementById("board"); + let last_packet = {}; + let cursors = new Map(); + let board = {}; + s.onopen = function(e) { info_elem.innerHTML = "Connected"; } + s.onmessage = function(e) { + console.log(`got msg ${e.data}`); + last_packet = e; + let d = e.data; + if (typeof d == "object") { + d.arrayBuffer().then(acceptPacket); + } else if (typeof e.data == "string") { + let fields = d.split(" "); + if (d.startsWith("pos")) { + let oid = fields[1]; + let name = fields[2]; + let x = fields[3]; + let y = fields[4]; + if (!cursors.has(oid)) { + createCursor(oid, name); + } + let celem = cursors.get(oid).elem; + celem.style.left = x + 'px'; + celem.style.top = y + 'px'; + } + else if (d.startsWith("id")) { + id = fields[1]; + createCursor(id, "You"); + } + } + } + s.onerror = function(e) { info_elem.innerHTML += `<br>error ${e}`; } + s.onclose = function(e) { info_elem.innerHTML = "Closed"; } + + function acceptPacket(data) { + let vals = new Uint8Array(data); + if (vals[0] == 27) { + // starts with escape char, is a board dump + board = Array.from(vals.subarray(1,vals.length).values()).reduce((s,c) => s + + String.fromCodePoint(c), ""); + board_elem.innerHTML = ansispan(board); + } + else if (vals[0] == 'p'.charCodeAt(0)) { + // starts with a p, is a cursor position update + // unimplemented! + } + + } + + function createCursor(id, name) { + // 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; + 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); + document.getElementById('board-container').append(cursor); + document.addEventListener('mousemove', e => { + cursor.style.left = (e.pageX + dx) + 'px'; + cursor.style.top = (e.pageY + dy) + 'px'; + s.send(`pos ${e.pageX} ${e.pageY}`); + }, + false); + cursors.set(id, {name: name, elem: cursor}); + return cursor; + } + </script> +</html> |