From dce876ae66fa66ccfd664486bae4ca5fb7a0a5fd Mon Sep 17 00:00:00 2001 From: Ritik Mishra Date: Sun, 27 Feb 2022 07:41:05 -0600 Subject: [PATCH 1/4] get room code, turn state, word/underscores into planes in aframe --- static/index.html | 38 +++++++++++++++++++++++++----- static/js/bookkeeping.js | 43 +++++++++++++++++++++++----------- static/js/hud.js | 12 ++++++++++ static/js/overlay.component.js | 8 +++++++ 4 files changed, 81 insertions(+), 20 deletions(-) create mode 100644 static/js/hud.js create mode 100644 static/js/overlay.component.js diff --git a/static/index.html b/static/index.html index 2345e7a..790c7a3 100644 --- a/static/index.html +++ b/static/index.html @@ -37,14 +37,16 @@ + + @@ -156,6 +158,33 @@ + + + + + + + + + - + @@ -189,9 +218,6 @@
-

waiting for others to join . . .

-

(room code: )

-

(id: )

diff --git a/static/js/bookkeeping.js b/static/js/bookkeeping.js index f9a4cf8..b767294 100644 --- a/static/js/bookkeeping.js +++ b/static/js/bookkeeping.js @@ -68,19 +68,26 @@ const setBookkeeping = (newValue) => { updateState(); - let describeGameState; + showHudItemById( + "room-code", + `room code is: ${roomCode}${bookkeeping.amITheHost ? " (we are hosting)" : ""}` + ); + + let roundDesc = `round ${bookkeeping.currentRoundNumber + 1}/${bookkeeping.totalNumberOfRounds} -- `; + let describeGameState = ""; switch (bookkeeping.gameState) { + case GameState.STARTING: + roundDesc = ""; + describeGameState = "waiting for players to join . . ."; + break; case GameState.FINISHED: + roundDesc = ""; describeGameState = "game over!"; break; - case GameState.STARTING: - describeGameState = "starting"; - break; case GameState.BREAK: describeGameState = "intermission"; break; case GameState.PLAYING: - describeGameState = `round ${bookkeeping.currentRoundNumber}/${bookkeeping.totalNumberOfRounds} --`; switch (bookkeeping.turnState) { case TurnState.CHOOSING: describeGameState += "choosing word"; @@ -90,14 +97,12 @@ const setBookkeeping = (newValue) => { break; } } - let el = document.querySelector("#am-i-the-host"); - if (el) { - el.innerHTML = ` ${bookkeeping.amITheHost ? "(host!)" : ""} -- timer remaining: ${ - bookkeeping.timeRemaining - } (${describeGameState}) ${ - bookkeeping.turnOrder[bookkeeping.currentPlayerInTurn] === ourNetworkId ? "we are up!" : "" - }`; + + let timer = ""; + if (roundDesc) { + timer = "\n" + `${bookkeeping.timeRemaining} seconds remaining`; } + showHudItemById("game-state", roundDesc + describeGameState + timer); }; const updateState = () => { @@ -142,7 +147,7 @@ window.addEventListener("load", () => { document.body.addEventListener("connected", function (evt) { ourNetworkId = evt.detail.clientId; bookkeeping.turnOrder.unshift(ourNetworkId); - document.querySelector("#whoami").innerHTML = ourNetworkId; + // document.querySelector("#whoami").innerHTML = ourNetworkId; }); document.body.addEventListener("clientConnected", function (evt) { @@ -174,7 +179,17 @@ window.addEventListener("load", () => { }); wordDisplayBS.subscribe({ - next: (txt) => (document.querySelector("#worddisplay").innerHTML = txt), + next: (txt) => { + if (txt) { + if (txt != bookkeeping.obscuredWord) { + showHudItemById("word-to-guess", `please draw: ${txt}`); + } else { + showHudItemById("word-to-guess", `word is: ${txt}`); + } + } else { + hideHudItemById("word-to-guess"); + } + }, }); }); diff --git a/static/js/hud.js b/static/js/hud.js new file mode 100644 index 0000000..754f7fe --- /dev/null +++ b/static/js/hud.js @@ -0,0 +1,12 @@ + +const hideHudItemById = (itemId) => { + const el = document.getElementById(itemId); + el.setAttribute("material", "opacity", "0.0"); + el.setAttribute("text", "value", ""); +} + +const showHudItemById = (itemId, text, opacity=0.5) => { + const el = document.getElementById(itemId); + el.setAttribute("material", "opacity", `${opacity}`); + el.setAttribute("text", "value", text); +} diff --git a/static/js/overlay.component.js b/static/js/overlay.component.js new file mode 100644 index 0000000..763974c --- /dev/null +++ b/static/js/overlay.component.js @@ -0,0 +1,8 @@ +AFRAME.registerComponent("overlay", { + dependencies: ["material"], + init: function () { + this.el.sceneEl.renderer.sortObjects = true; + this.el.object3D.renderOrder = 100; + this.el.components.material.material.depthTest = false; + }, +}); From a2445bc825248801e00b53d7f25d62e461cc078c Mon Sep 17 00:00:00 2001 From: Ritik Mishra Date: Sun, 27 Feb 2022 07:49:03 -0600 Subject: [PATCH 2/4] plane in the sky :D --- static/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/index.html b/static/index.html index 790c7a3..e17af66 100644 --- a/static/index.html +++ b/static/index.html @@ -158,7 +158,7 @@ - + Date: Sun, 27 Feb 2022 09:08:35 -0600 Subject: [PATCH 3/4] oogh --- static/index.html | 43 ++++++++++++++++++++++++++++++++++++++----- static/js/hud.js | 15 +++++++++++---- 2 files changed, 49 insertions(+), 9 deletions(-) diff --git a/static/index.html b/static/index.html index e17af66..b6ea96b 100644 --- a/static/index.html +++ b/static/index.html @@ -183,6 +183,30 @@ text="value: ; font: sourcecodepro;" material="color: blue; opacity: 0.5; side: double"> + + + + + + + + + + + + + + + -
diff --git a/static/js/hud.js b/static/js/hud.js index 754f7fe..ad2cce4 100644 --- a/static/js/hud.js +++ b/static/js/hud.js @@ -1,12 +1,19 @@ - const hideHudItemById = (itemId) => { const el = document.getElementById(itemId); + hideHudItemByEl(el); +}; + +const hideHudItemByEl = (el) => { el.setAttribute("material", "opacity", "0.0"); el.setAttribute("text", "value", ""); -} +}; -const showHudItemById = (itemId, text, opacity=0.5) => { +const showHudItemById = (itemId, text, opacity = 0.5) => { const el = document.getElementById(itemId); + showHudItemByEl(el, text, opacity); +}; + +const showHudItemByEl = (el, text, opacity = 0.5) => { el.setAttribute("material", "opacity", `${opacity}`); el.setAttribute("text", "value", text); -} +}; From 50f4ba876ef6a5d6c92ff75dc04a3a1f3ca60b81 Mon Sep 17 00:00:00 2001 From: Ritik Mishra Date: Sun, 27 Feb 2022 09:12:16 -0600 Subject: [PATCH 4/4] actually, we just pick a word for other ppl --- static/js/bookkeeping.js | 67 ++++++++++++++++++++++++++++++---------- 1 file changed, 50 insertions(+), 17 deletions(-) diff --git a/static/js/bookkeeping.js b/static/js/bookkeeping.js index b767294..4e60150 100644 --- a/static/js/bookkeeping.js +++ b/static/js/bookkeeping.js @@ -52,6 +52,21 @@ Object.freeze(DataChannel); const wordChooserBS = new rxjs.BehaviorSubject(null); const wordDisplayBS = new rxjs.BehaviorSubject(""); +const clickingEnabled = new rxjs.BehaviorSubject(false); + +clickingEnabled.subscribe({ + next: (isEnabled) => { + // console.log("clicking enabled: ", isEnabled); + // const existingControls = document.querySelectorAll("#camera-rig > a-entity[laser-controls]"); + // if (isEnabled && existingControls.length == 0) { + // const template = document.querySelector("#cursor-template"); + // const el = template.content.cloneNode(true); + // document.querySelector("#camera-rig").appendChild(el); + // } else if (!isEnabled) { + // existingControls.forEach(el => el.parentNode.removeChild(el)); + // } + }, +}); const setBookkeeping = (newValue) => { // FIXME: makes it difficult to change the host in the middle of the game @@ -166,13 +181,14 @@ window.addEventListener("load", () => { next: (v) => { console.log("word chooser bs subscriber -- ", v); if (!v) { - document.querySelector("#wordchooser").classList.add("hidden"); + document.querySelectorAll("#wordchooser > a-entity").forEach(hideHudItemByEl); + clickingEnabled.next(false); } else { - console.log("yuh"); - document.querySelector("#wordchooser").classList.remove("hidden"); - document.querySelectorAll("#wordchooser > button").forEach((el, idx) => { - el.innerHTML = bookkeeping.availableWords[idx]; - el.onclick = () => chooseAWord(bookkeeping.availableWords[idx]); + clickingEnabled.next(true); + document.querySelectorAll("#wordchooser > a-entity").forEach((el, idx) => { + showHudItemByEl(el, bookkeeping.availableWords[idx]); + el.addEventListener("click", () => chooseAWord(bookkeeping.availableWords[idx])); + wordDisplayBS.next("clicked!"); }); } }, @@ -183,6 +199,8 @@ window.addEventListener("load", () => { if (txt) { if (txt != bookkeeping.obscuredWord) { showHudItemById("word-to-guess", `please draw: ${txt}`); + } else if (bookkeeping.gameState == GameState.BREAK) { + showHudItemById("word-to-guess", `word was: ${txt}`); } else { showHudItemById("word-to-guess", `word is: ${txt}`); } @@ -191,6 +209,19 @@ window.addEventListener("load", () => { } }, }); + + document.querySelectorAll("#wordchooser > a-entity").forEach((el) => { + el.addEventListener("click", (event) => { + chooseAWord(el.getAttribute("text").value); + }); + + el.addEventListener("mouseover", (event) => { + el.setAttribute("material", "color", "red"); + }); + el.addEventListener("mouseleave", (event) => { + el.setAttribute("material", "color", "orange"); + }); + }); }); NAF.connection.subscribeToDataChannel( @@ -297,17 +328,19 @@ const rungame = async () => { }); // start timer for choosing a word (networked) - const { chosenWord } = await rxjs.lastValueFrom( - rxjs.race( - // If they exceed the time limit, then pick the first word for them - countDownFromTimeRemaining().pipe( - rxjs.operators.last(), - rxjs.operators.mapTo({ chosenWord: choosableWords[0] }) - ), - waitForWordChoiceReply, - hostWordChooserSubject.pipe(rxjs.operators.first()) - ) - ); + // const { chosenWord } = await rxjs.lastValueFrom( + // rxjs.race( + // // If they exceed the time limit, then pick the first word for them + // countDownFromTimeRemaining().pipe( + // rxjs.operators.last(), + // rxjs.operators.mapTo({ chosenWord: choosableWords[0] }) + // ), + // waitForWordChoiceReply, + // hostWordChooserSubject.pipe(rxjs.operators.first()) + // ) + // ); + + const chosenWord = choosableWords[0]; // now we have chosen a word console.log("the chosen word was ", chosenWord);