diff options
| -rw-r--r-- | page.html | 56 | ||||
| -rw-r--r-- | src/conn.rs | 23 | ||||
| -rw-r--r-- | src/main.rs | 1 | ||||
| -rw-r--r-- | src/types.rs | 1 |
4 files changed, 54 insertions, 27 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, diff --git a/src/conn.rs b/src/conn.rs index fda3a2b..de0f704 100644 --- a/src/conn.rs +++ b/src/conn.rs @@ -47,17 +47,17 @@ pub async fn peer_connection(socket: warp::ws::WebSocket, conndata: ConnData) { "pos" => { match parse_pos(fields) { Some(pos) => { - let (name, id) = { + let (name, clr, id) = { let mut peers = peers.write().await; let mut entry = peers.get_mut(&addr).unwrap(); entry.position = pos.clone(); - (entry.name.clone(), entry.seq_id) + (entry.name.clone(), entry.clr.clone(), entry.seq_id) }; let sanitized_name = name.replace(" ", " ").to_string(); { let peers = peers.read().await; for peer_tx in peers.iter().filter(|(s, _)| **s != addr).map(|(_,p)| &p.tx) { - let r = peer_tx.send(Message::text(format!("pos {id} {sanitized_name} {} {}", pos.0, pos.1))); + let r = peer_tx.send(Message::text(format!("pos {id} {sanitized_name} {} {} {}", clr, pos.0, pos.1))); if let Err(e) = r { println!("error sending pos update: {e}"); } @@ -102,12 +102,16 @@ pub async fn peer_connection(socket: warp::ws::WebSocket, conndata: ConnData) { } }, "register" => { - let name = fields.collect::<Vec<&str>>().join(&" "); + let all_fields = fields.collect::<Vec<&str>>(); + let fcount = all_fields.len(); + peer_name = "anon".into(); let id; - if name.is_empty() { - peer_name = "anon".to_string(); - } else { - peer_name = name; + if fcount >= 2 { + peer_name = all_fields[..fcount-1].join(" "); + } + let mut clr = all_fields[fcount-1].chars().filter(|c| c.is_digit(16) || *c == '#').collect::<String>(); + if clr.is_empty() { + clr = "#f03333".into(); } { // new scope cuz paranoid bout deadlocks let mut peers = peers.write().await; @@ -116,10 +120,11 @@ pub async fn peer_connection(socket: warp::ws::WebSocket, conndata: ConnData) { tx: tx.clone(), seq_id: id, name: peer_name.clone(), + clr, position: (0,0) }); } - tx.send(Message::text(format!("id {id}"))).unwrap(); + tx.send(Message::text(format!("id {}", id))).unwrap(); if let Err(e) = cmd_tx.send(MetaMove::Dump) { println!("couldn't send game dump to \"{peer_name}\"@{addr}: {e}"); } diff --git a/src/main.rs b/src/main.rs index b3c3cf9..fe55ab2 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,5 +1,4 @@ use std::{ - convert::Infallible, collections::HashMap, error::Error, net::SocketAddr, diff --git a/src/types.rs b/src/types.rs index 73d51b8..54a93bc 100644 --- a/src/types.rs +++ b/src/types.rs @@ -33,6 +33,7 @@ pub struct Peer { pub tx: tokio::sync::mpsc::UnboundedSender<Message>, pub seq_id: usize, pub name: String, + pub clr: String, pub position: (usize, usize), } |