From f8735f5b539b991f8da9ec1b3e64966566d77477 Mon Sep 17 00:00:00 2001 From: stale Date: Sun, 3 Jul 2022 04:24:51 -0300 Subject: sounds! --- assets/client.js | 109 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 78 insertions(+), 31 deletions(-) (limited to 'assets/client.js') diff --git a/assets/client.js b/assets/client.js index 53689e0..fabff83 100644 --- a/assets/client.js +++ b/assets/client.js @@ -1,11 +1,38 @@ window.player = { uid: NaN }; -window.info_elem = document.getElementById("miscinfo"); -window.identform = document.getElementById("identform"); -window.statusline = document.getElementsByClassName("statusline")[0]; -window.bcont_elem = document.getElementById("board-container"); -window.board_elem = document.getElementById("board"); -window.cursor_frame = document.getElementById("cursor-frame"); +window.elem = { + info: document.getElementById("miscinfo"), + identform: document.getElementById("identform"), + statusline: document.getElementsByClassName("statusline")[0], + bcont: document.getElementById("board-container"), + board: document.getElementById("board"), + cursor_frame: document.getElementById("cursor-frame"), + volslider: document.getElementById("volslider") +}; + window.queued_pos = undefined; +window.assets = { + audio: { + explosion: registerMediaElem(new Audio("../explosion.opus")) + } +}; + +function registerMediaElem(melm) { + let record = { data: melm, loaded: false }; + melm.addEventListener("canplaythrough", e => { + record.loaded = true; + }); + return record; +} + +document.addEventListener('roomloading', function() { + //window.elem.info.innerHTML = "loading..."; + // TODO/FIXME: this should check all the assets, once we have more than one + if (assets.audio.explosion.loaded) { + room.socket = connect(); // drive the game with socket events from then on + } else { + setTimeout(function() { document.dispatchEvent(new Event('roomloading')) }, 500); + } +}); window.room = { name: undefined, @@ -20,8 +47,8 @@ window.room = { if (room.identity == null) { - statusline.style.display = "none"; - identform.style.display = "initial"; + elem.statusline.style.display = "none"; + elem.identform.style.display = "initial"; } else { join(); } @@ -33,9 +60,9 @@ function join() { room.identity.clr = document.getElementById("clr-in").value; localStorage.setItem("identity", JSON.stringify(room.identity)); } - identform.style.display = "none"; - room.socket = connect(); - statusline.style.display = "flex"; + elem.identform.style.display = "none"; + elem.statusline.style.display = "flex"; + document.dispatchEvent(new Event('roomloading')); } function clear_ident() { localStorage.removeItem("identity"); @@ -53,8 +80,8 @@ function connect() { let d = e.data; if (typeof d == "object") { d.arrayBuffer().then(acceptBoard); - info_elem.onclick = undefined; - info_elem.innerHTML = `${room.name} (${room.bconf.w}x${room.bconf.h}) >> Running, ${room.bconf.mine_ratio} tiles are mines`; + elem.info.onclick = undefined; + elem.info.innerHTML = `${room.name} (${room.bconf.w}x${room.bconf.h}) >> Running, ${room.bconf.mine_ratio} tiles are mines`; } else if (typeof e.data == "string") { let fields = d.split(" "); switch (fields[0]) { @@ -65,10 +92,12 @@ function connect() { let x = pdat[1][0]; let y = pdat[1][1]; let curs = room.cursors.get(oid); - if (oid != player.uid && curs != undefined) { - movCursor(curs, x, y); - } else { - console.log("livepos sys incoherent"); + if (oid != player.uid) { + if (curs != undefined) { + movCursor(curs, x, y); + } else { + console.log("livepos sys incoherent"); + } } }); } break; @@ -96,13 +125,14 @@ function connect() { createCursor(player.uid, name, room.identity.clr); } break; case "win": { - info_elem.innerHTML = "You win! Click here to play again."; - info_elem.onclick = e => { s.send("reset") }; + elem.info.innerHTML = "You win! Click here to play again."; + elem.info.onclick = e => { s.send("reset") }; } break; case "lose": { let badone = fields[1]; - info_elem.innerHTML = `You lost, ${badone} was blown up. Click here to retry.`; - info_elem.onclick = e => { s.send("reset") }; + elem.info.innerHTML = `You lost, ${badone} was blown up. Click here to retry.`; + elem.info.onclick = e => { s.send("reset") }; + assets.audio.explosion.data.play(); } break; case "logoff": { let oid = Number(fields[1]); @@ -113,8 +143,8 @@ function connect() { } } } - s.onerror = function(e) { info_elem.innerHTML += `
Connection error: ${e}`; } - s.onclose = function(e) { info_elem.innerHTML = "Connection closed"; } + s.onerror = function(e) { elem.info.innerHTML += `
Connection error: ${e}`; } + s.onclose = function(e) { elem.info.innerHTML = "Connection closed"; } return s; } @@ -163,7 +193,7 @@ function acceptBoard(data) { } last = room.board[i]; } - board_elem.innerHTML = split_board.join(""); + elem.board.innerHTML = split_board.join(""); room.cbounds = getBoardBounds(); } @@ -181,8 +211,8 @@ function createCursor(id, name, clr) { cursor.appendChild(nametag); cursor.classList.add('cursor'); cursor.style.color = clr; - document.getElementById('cursor-frame').append(cursor); - document.getElementById('cursor-frame').append(selection_window); + elem.cursor_frame.append(cursor); + elem.cursor_frame.append(selection_window); let c = { name: name, elem: cursor, selwin: selection_window }; if (id == window.player.uid) { document.addEventListener('mousemove', e => { @@ -207,7 +237,6 @@ function movCursor(c, bx, by) { } function movSelWin(win, bx, by) { let tpos = tilepos(bx,by); - console.log(tpos); if (tpos.x > (room.bconf.w - 1) || tpos.x < 0 || tpos.y > (room.bconf.h - 1) || tpos.y < 0) { win.style.display = "none"; } else { @@ -219,8 +248,8 @@ function movSelWin(win, bx, by) { win.style.height = room.bconf.tile_h + 'px'; } function getBoardBounds() { - let a = bcont_elem.getBoundingClientRect(); - let b = board_elem.getBoundingClientRect(); + let a = elem.bcont.getBoundingClientRect(); + let b = elem.board.getBoundingClientRect(); room.bconf.tile_w = b.width / room.bconf.w; room.bconf.tile_h = 48; return { @@ -234,13 +263,13 @@ window.onresize = () => { room.cbounds = getBoardBounds(); } -bcont_elem.onclick = function(e) { +elem.bcont.onclick = function(e) { let bcoords = pageToBoardPx(e.pageX, e.pageY); let tpos = tilepos(bcoords[0], bcoords[1]); let cmd = `reveal ${tpos.x} ${tpos.y}`; room.socket.send(cmd); } -bcont_elem.oncontextmenu = function(e) { +elem.bcont.oncontextmenu = function(e) { let bcoords = pageToBoardPx(e.pageX, e.pageY); let tpos = tilepos(bcoords[0], bcoords[1]); let cmd = `flag ${tpos.x} ${tpos.y}`; @@ -255,6 +284,18 @@ function tilepos(bx,by) { return { x: tilex, y: tiley }; } +function volChanged() { + let newVol = elem.volslider.value; + localStorage.setItem("audioVolume", JSON.stringify(newVol)); + for (i of Object.keys(assets.audio)) { + assets.audio[i].data.volume = newVol; + } +} +elem.volslider.onchange = volChanged; +let storedVol = localStorage.getItem("audioVolume"); +if (storedVol) { elem.volslider.value = JSON.parse(storedVol); } +volChanged(); + (function sendPos() { let qp = window.queued_pos; if (qp) { @@ -265,3 +306,9 @@ function tilepos(bx,by) { sendPos(); }, 16); })(); +(function heartbeat() { + setTimeout(function() { + room.socket.send("<3"); + heartbeat(); + }, 30000); +})(); -- cgit v1.2.3