diff options
Diffstat (limited to 'page.html')
| -rw-r--r-- | page.html | 64 |
1 files changed, 41 insertions, 23 deletions
@@ -54,7 +54,7 @@ window.info_elem = document.getElementById("miscinfo"); window.info_elem.innerHTML =` <input id="name-in" type="text" value="anon"> - <input id="clr-in" type="color" value="#ffffff"></input> + <input id="clr-in" type="color" value="#33c033"></input> <button onclick=register()>Join</button>`; window.board_elem = document.getElementById("board"); window.bwidth = NaN; @@ -85,7 +85,7 @@ if (typeof d == "object") { d.arrayBuffer().then(acceptBoard); info_elem.onclick = undefined; - info_elem.innerHTML = "Running"; + info_elem.innerHTML = `Running, ${mine_ratio} tiles are mines`; } else if (typeof e.data == "string") { let fields = d.split(" "); switch (fields[0]) { @@ -98,10 +98,11 @@ if (!cursors.has(oid)) { createCursor(oid, name, clr); } - let celem = window.cursors.get(oid).elem; + let celem = cursors.get(oid).elem; celem.style.left = x + 'px'; celem.style.top = y + 'px'; - } break; + movSelWin(cursors.get(oid).selwin, x, y); + } break; case "regack": { name = fields[1]; id = Number(fields[2]); @@ -114,18 +115,18 @@ case "win": { info_elem.innerHTML = "<p>You win! Click here to play again.</p>"; info_elem.onclick = e => { s.send("reset") }; - } break; + } break; case "lose": { let badone = fields[1]; info_elem.innerHTML = `<p>You lost, ${badone} was blown up. Click here to retry.</p>`; info_elem.onclick = e => { s.send("reset") }; - } break; + } break; case "logoff": { let oid = Number(fields[1]); cursors.get(oid).elem.remove(); cursors.get(oid).selwin.remove(); cursors.delete(oid); - } break; + } break; } } } @@ -145,14 +146,25 @@ let gamechars = /^[CFO# 1-8]+$/; if ((cur != last && gamechars.test(cur)) || cur == undefined) { let txt = board.substr(last_idx, i-last_idx); - if (txt[0] == 'O') { - txt = `<span style="color:red;">${txt}</span>`; - } else if (txt[0] == 'C') { - txt = `<span style="color:green;">${txt}</span>`; - } else if (txt[0] == 'F') { - txt = `<span style="color:yellow;">${txt}</span>`; - } else { - txt = `<span style="color:white;">${txt}</span>`; + switch(txt[0]) { + case 'O': + txt = `<span style="color:red;">${txt}</span>`; + break; + case 'C': + txt = `<span style="color:green;">${txt}</span>`; + break; + case 'F': + txt = `<span style="color:yellow;">${txt}</span>`; + break; + + case '1': txt = `<span style="color:#0100FB;">${txt}</span>`; break; + case '2': txt = `<span style="color:#027F01;">${txt}</span>`; break; + case '3': txt = `<span style="color:#FD0100;">${txt}</span>`; break; + case '4': txt = `<span style="color:#01017B;">${txt}</span>`; break; + case '5': txt = `<span style="color:#7D0302;">${txt}</span>`; break; + case '6': txt = `<span style="color:#00807F;">${txt}</span>`; break; + + default: txt = `<span style="color:white;">${txt}</span>`; break; } split_board.push(txt); last_idx = i; @@ -170,7 +182,7 @@ nametag.innerHTML = name; nametag.classList.add('cursor-name'); let selection_window = document.createElement("div"); - selection_window.style.backgroundColor = "#00c000a0"; + selection_window.style.backgroundColor = clr + "a0"; selection_window.style.position = "absolute"; selection_window.classList.add('cursor'); cursor.appendChild(nametag); @@ -182,21 +194,27 @@ document.addEventListener('mousemove', e => { cursor.style.left = (e.pageX + 15) + 'px'; cursor.style.top = (e.pageY + 15) + 'px'; + movSelWin(selection_window, e.clientX, e.clientY); let tpos = tilepos(e.clientX, e.clientY); socket.send(`pos ${e.pageX} ${e.pageY}`); }, false); - board_elem.addEventListener('mousemove', e => { - 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'; - }, false); } cursors.set(id, {name: name, elem: cursor, selwin: selection_window}); return cursor; } + function movSelWin(win, x, y) { + let tpos = tilepos(x, y); + if (tpos.x > (bwidth - 1) || tpos.x < 0 || tpos.y > (bheight - 1) || tpos.y < 0) { + win.style.display = "none"; + } else { + win.style.display = ""; + } + win.style.left = ((tpos.x + 0.5) * tile_w) + 'px'; + win.style.top = ((tpos.y + 0.5) * tile_h) + 'px'; + win.style.width = tile_w + 'px'; + win.style.height = tile_h + 'px'; + } function getBoardBounds() { let boardb = board_elem.getBoundingClientRect(); tile_w = boardb.width / bwidth; |