Add RPS

2 files changed, 271 insertions, 0 deletions

diff --git a/rps/morpion/base.js b/rps/morpion/base.js
new file mode 100755
index 0000000..511be33
--- /dev/null
+++ b/rps/morpion/base.js
@@ -0,0 +1,124 @@
+trainingMain = true;
+training = false;
+playable = true;
+gridBefore = [];
+
+function train() {}
+
+window.addEventListener("load", () => {
+    if (!location.hash.startsWith("#online/")) {
+        document.getElementById("loader").style.display = "none";
+        document.getElementById("game").style.display = "block";
+    } else {
+        train();
+        online();
+    }
+})
+
+function player(cell) {
+    document.getElementById("p4").style.opacity = ".5";
+    document.getElementById("p4").style.filter = "saturate(0)";
+    document.getElementById("p5").style.opacity = ".5";
+    document.getElementById("p5").style.filter = "saturate(0)";
+    document.getElementById("p6").style.opacity = ".5";
+    document.getElementById("p6").style.filter = "saturate(0)";
+    document.getElementById("p" + cell).style.opacity = "1";
+    document.getElementById("p" + cell).style.filter = "";
+
+    if (playable) {
+        document.getElementById("wait").style.display = "block";
+    }
+
+    if (location.hash.startsWith("#online/")) {
+        ws.send(JSON.stringify({action:"place",position:cell}));
+        document.getElementById("last-games").innerText = "Playing with " + window.peerName + "\nWaiting for the other player to place.";
+    }
+
+    youPlaced = true;
+    if (otherPlaced) {
+        checkWinner();
+    }
+}
+
+function disableGame() {
+    document.getElementById("game").style.opacity = "0.5";
+    document.getElementById("wait").style.display = "none";
+    document.getElementById("game").style.pointerEvents = "none";
+}
+
+function grid() {
+    try {
+        return [
+            document.getElementById("p1").style.opacity === "1",
+            document.getElementById("p2").style.opacity === "1",
+            document.getElementById("p3").style.opacity === "1",
+            document.getElementById("p4").style.opacity === "1",
+            document.getElementById("p5").style.opacity === "1",
+            document.getElementById("p6").style.opacity === "1"
+        ]
+    } catch (e) {
+        return [false,false,false,false,false,false];
+    }
+}
+
+window.addEventListener("load", () => {
+    if (location.hash === "#/train") {
+        location.href = "/";
+    }
+    if (!location.hash.startsWith("#online/")) {
+        document.getElementById("resetbtn").style.display = "none";
+    }
+
+    if (location.hash === "#/train") {
+        location.href = "/";
+    } else if (location.hash.startsWith("#online/")) {
+        document.title = "Online Game | Rock Paper Scissors | Minteck Arcade";
+    } else if (location.hash === "#/auto") {
+        location.href = "/";
+    } else {
+        location.href = "/";
+    }
+});
+
+rps = {
+    action: {
+        ROCK: 1,
+        PAPER: 2,
+        SCISSORS: 3
+    },
+    state: {
+        WIN: 1,
+        LOSE: 2,
+        NONE: 3
+    }
+}
+
+function checkWinner() {
+    document.getElementById("counter-left-total").innerText = (document.getElementById("counter-left-total").innerText - 1 + 2).toString();
+    document.getElementsByClassName("picked")[0].children[0].style.opacity = "1";
+    document.getElementsByClassName("picked")[0].children[0].style.filter = "";
+    disableGame();
+
+    me = (Array.from(document.querySelectorAll("table#game td")).filter(i => i.id.substring(1) - 1 + 1 > 3 && i.style.opacity === "1")[0].id.substring(1) - 1 + 1) - 3;
+    other = document.getElementsByClassName("picked")[0].id.substring(1) - 1 + 1;
+
+    let state = rps.state.NONE;
+
+    if (me === rps.action.ROCK && other === rps.action.ROCK) state = rps.state.NONE;
+    if (me === rps.action.PAPER && other === rps.action.PAPER) state = rps.state.NONE;
+    if (me === rps.action.SCISSORS && other === rps.action.SCISSORS) state = rps.state.NONE;
+    if (me === rps.action.ROCK && other === rps.action.PAPER) state = rps.state.LOSE;
+    if (me === rps.action.ROCK && other === rps.action.SCISSORS) state = rps.state.WIN;
+    if (me === rps.action.PAPER && other === rps.action.SCISSORS) state = rps.state.LOSE;
+    if (me === rps.action.PAPER && other === rps.action.ROCK) state = rps.state.WIN;
+    if (me === rps.action.SCISSORS && other === rps.action.ROCK) state = rps.state.LOSE;
+    if (me === rps.action.SCISSORS && other === rps.action.PAPER) state = rps.state.WIN;
+
+    if (state === rps.state.WIN) {
+        document.getElementById("last-games").innerText = "Played with " + window.peerName + "\nGame ended, you won.";
+    } else if (state === rps.state.LOSE) {
+        document.getElementById("last-games").innerText = "Played with " + window.peerName + "\nGame ended, you lost.";
+    } else {
+        document.getElementById("last-games").innerText = "Played with " + window.peerName + "\nGame ended, that's a draw.";
+    }
+}
\ No newline at end of file
diff --git a/rps/morpion/online.js b/rps/morpion/online.js
new file mode 100644
index 0000000..cce2905
--- /dev/null
+++ b/rps/morpion/online.js
@@ -0,0 +1,147 @@
+const onlineServer = "wss://arcade.minteck.org/tictactoe/server/prod";
+let errorDisconnect = false;
+let wcInterval;
+let waitCount = 0;
+let youPlaced = false;
+let otherPlaced = false;
+
+function reset() {
+    ws.send(JSON.stringify({"action":"reset"}));
+}
+
+function online() {
+    let peerName;
+    document.getElementById("wait").style.display = "none";
+    document.getElementById("instructions").style.display = "none";
+    document.getElementById("online-credits").style.display = "block";
+    document.getElementById("stats-left").style.display = "none";
+    document.getElementById("last-games").innerText = "Not connected";
+    document.getElementById("loader").innerText = "Connecting to server...";
+
+    ws = new WebSocket(onlineServer);
+    ws.onerror = (e) => {
+        console.log(e);
+        errorDisconnect = true;
+        let status = "";
+        switch (ws.readyState) {
+            case 0:
+                status = "connection is stuck";
+                break;
+            case 1:
+                status = "connection is open (most likely a bug)";
+                break;
+            case 2:
+                status = "connection is closing";
+                break;
+            case 3:
+                status = "connection is closed";
+                break;
+        }
+        document.getElementById("loader").style.display = "block";
+        document.getElementById("game").style.display = "none";
+        document.getElementById("loader").innerText = "Communication error: " + status;
+        document.getElementById("wait").style.display = "none";
+        document.getElementById("last-games").innerText = "Not connected";
+    }
+
+    ws.onopen = (e) => {
+        console.log(e);
+        document.getElementById("loader").innerText = "Connection established, initializing game...";
+        let parts = location.hash.substring(8).split("|");
+        ws.send(JSON.stringify({
+            action: 'init',
+            room: "rps." + atob(parts[0]),
+            player: atob(parts[1])
+        }))
+    }
+
+    ws.onclose = (e) => {
+        console.log(e);
+        document.getElementById("resetbtn").disabled = true;
+        if (!errorDisconnect) {
+            document.getElementById("loader").style.display = "block";
+            document.getElementById("game").style.display = "none";
+            document.getElementById("loader").innerText = "Connection closed";
+            document.getElementById("wait").style.display = "none";
+            document.getElementById("last-games").innerText = "Not connected";
+        }
+    }
+
+    ws.onmessage = (e) => {
+        let data = JSON.parse(e.data);
+        console.log(data);
+
+        if (data.error) {
+            document.getElementById("loader").style.display = "block";
+            document.getElementById("game").style.display = "none";
+            document.getElementById("loader").innerText = "Server error: " + data.error;
+            document.getElementById("wait").style.display = "none";
+            document.getElementById("last-games").innerText = "Not connected";
+            errorDisconnect = true;
+            ws.close();
+        }
+
+        if (data.result && data.result.name && data.result.name === "CONNECTION_ESTABLISHED") {
+            document.getElementById("loader").innerText = "Waiting for the other player... " + waitCount + "\nGame Room: " + atob(location.hash.substring(8).split("|")[0]).replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+
+            wcInterval = setInterval(() => {
+                waitCount++;
+                document.getElementById("loader").innerText = "Waiting for the other player... " + waitCount + "\nGame Room: " + atob(location.hash.substring(8).split("|")[0]).replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+            }, 1000)
+        }
+
+        if (data.notification && data.notification.name === "PEER_JOIN") {
+            clearInterval(wcInterval);
+            document.getElementById("resetbtn").disabled = false;
+
+            document.getElementById("loader").innerText = "Ready!";
+            ws.send(JSON.stringify({
+                action: "ready"
+            }));
+            window.peerName = data.notification.message.name;
+            document.getElementById("loader").style.display = "none";
+            document.getElementById("game").style.display = "block";
+
+            document.getElementById("last-games").innerText = "Playing with " + window.peerName + "\nIt is your turn.";
+        }
+
+        if (data.notification && data.notification.name === "GAME_READY") {
+            clearInterval(wcInterval);
+            document.getElementById("resetbtn").disabled = false;
+
+            document.getElementById("loader").style.display = "none";
+            document.getElementById("game").style.display = "block";
+            window.peerName = data.notification.message.name;
+
+            document.getElementById("last-games").innerText = "Playing with " + window.peerName + "\nIt is your turn.";
+            trainingMain = !trainingMain;
+        }
+
+        if (data.notification && data.notification.name === "GAME_RESET") {
+            el = document.getElementById("game");
+            el.outerHTML = document.getElementsByClassName("game-template")[0].outerHTML;
+            el = document.getElementsByClassName("game-template")[0];
+            el.id = "game";
+            el.classList.remove("game-template");
+            el.style.display = "";
+            playable = true;
+            otherPlaced = false;
+            youPlaced = false;
+            document.getElementById("instructions").innerText = "// ML Model Training\nmodel.addTrainedGame();";
+        }
+
+        if (data.notification && data.notification.name === "CELL_PLACE") {
+            document.getElementById("p" + (data.notification.message.name - 3)).classList.add("picked");
+            otherPlaced = true;
+            if (youPlaced) {
+                checkWinner();
+            }
+        }
+
+        if (data.notification && data.notification.name === "YOUR_TURN") {
+            document.getElementById("wait").style.display = "none";
+            document.getElementById("last-games").innerText = "Playing with " + window.peerName + "\nIt is your turn.";
+            trainingMain = true;
+        }
+    }
+}
\ No newline at end of file