Add RPS

author: Minteck <contact@minteck.org> 2022-05-07 18:15:13 +0200
committer: Minteck <contact@minteck.org> 2022-05-07 18:15:13 +0200
commit: 88394101a513cf41dd4af1bb46881e7ae78bcf9f (patch)
tree: e99d2e9fd27ff2b1ebe1790c4e866d3862def0a5 /rps
parent: 1f8e9aab02a849f64aa6069a04cbabaf5993c65a (diff)
download: arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.tar.gz
arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.tar.bz2
arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.zip
8 files changed, 399 insertions, 0 deletions
diff --git a/rps/game.html b/rps/game.html
new file mode 100755
index 0000000..ae1a4fd
--- /dev/null
+++ b/rps/game.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" translate="no">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game | Rock Paper Scissors | Minteck Arcade</title>
+    <link rel="icon" href="/_general/favicon.svg" type="image/svg+xml">
+    <style>
+        body {
+            background: black;
+        }
+        td {
+            border: 1px solid white;
+            width: 25vh;
+            height: 25vh;
+            cursor: pointer;
+            text-align: center;
+            font-family: monospace;
+            font-size: 15vh;
+        }
+        table {
+            border-collapse: collapse;
+        }
+        .insight {
+            background: rgba(255, 255, 0, 0.3);
+        }
+        #resetbtn:hover {
+            background: white !important;
+            color: black !important;
+        }
+        #resetbtn:disabled {
+            pointer-events: none;
+            opacity: .5;
+        }
+    </style>
+    <script src="morpion/base.js"></script>
+    <script src="morpion/online.js"></script>
+</head>
+<body>
+<iframe src="/_general/navbar.html" style="position: fixed;z-index: 9999999999;top: 0;border: none;left: 0;right: 0;height: 32px;width: 100%;"></iframe>
+    <div style="display:flex;align-items:center;justify-content: center;position:fixed;inset: 0;z-index:5;top:32px;">
+        <div id="loader" style="color: white;text-align: center;">
+            Loading...
+        </div>
+        <table id="game" style="display: none;">
+            <tr>
+                <td id="p1" style="cursor:no-drop;"><img src="rock.png" style="width:100%;opacity:.5;filter:saturate(0);vertical-align: middle;"></td>
+                <td id="p2" style="cursor:no-drop;"><img src="paper.png" style="width:100%;opacity:.5;filter:saturate(0);vertical-align: middle;"></td>
+                <td id="p3" style="cursor:no-drop;"><img src="scissors.png" style="width:100%;opacity:.5;filter:saturate(0);vertical-align: middle;"></td>
+            </tr>
+            <tr>
+                <td id="p4" onclick="player(4);"><img src="rock.png" style="width:100%;vertical-align: middle;"></td>
+                <td id="p5" onclick="player(5);"><img src="paper.png" style="width:100%;vertical-align: middle;"></td>
+                <td id="p6" onclick="player(6);"><img src="scissors.png" style="width:100%;vertical-align: middle;"></td>
+            </tr>
+        </table>
+        <table class="game-template" style="display:none;">
+            <tr>
+                <td id="p1" style="cursor:no-drop;"><img src="rock.png" style="width:100%;opacity:.5;filter:saturate(0);vertical-align: middle;"></td>
+                <td id="p2" style="cursor:no-drop;"><img src="paper.png" style="width:100%;opacity:.5;filter:saturate(0);vertical-align: middle;"></td>
+                <td id="p3" style="cursor:no-drop;"><img src="scissors.png" style="width:100%;opacity:.5;filter:saturate(0);vertical-align: middle;"></td>
+            </tr>
+            <tr>
+                <td id="p4" onclick="player(4);"><img src="rock.png" style="width:100%;vertical-align: middle;"></td>
+                <td id="p5" onclick="player(5);"><img src="paper.png" style="width:100%;vertical-align: middle;"></td>
+                <td id="p6" onclick="player(6);"><img src="scissors.png" style="width:100%;vertical-align: middle;"></td>
+            </tr>
+        </table>
+    </div>
+    <div id="wait" style="position:fixed;inset: 0;z-index:10;cursor:wait;display:none;"></div>
+    <pre id="instructions" style="position:fixed;bottom:0;left:0;color:white;margin:0;">// ML Model Training
+model.addTrainedGame();</pre>
+    <div id="stats" style="position:fixed;top:32px;left:0;color:white;margin:0;font-family:monospace;">
+        <div id="online-credits" style="display:none;">Game made with ❤️ for Twi</div>
+        <div id="stats-left"></div>
+        <div id="counter-left">Games Played: <span id="counter-left-total">0</span><br>Games Won:&nbsp;&nbsp;&nbsp; <span id="counter-left-win">0</span><br>Games Lost:&nbsp;&nbsp; <span id="counter-left-lose">0</span></div>
+    </div>
+    <div id="last-games" style="text-align:right;position:fixed;top:32px;right:0;color:white;margin:0;font-family:monospace;">-</div>
+    <div id="online-restart-btn" style="text-align:left;position:fixed;bottom:0;left:0;color:white;margin:0;font-family:monospace;z-index:999999;">
+        <button disabled id="resetbtn" onclick="reset();" style="padding:10px 20px;background:black;color:white;border:1px solid white;border-bottom:none;border-left:none;">Restart Game</button>
+    </div>
+    <div id="auto-stats"></div>
+</body>
+</html>
diff --git a/rps/game.svg b/rps/game.svg
new file mode 100644
index 0000000..210bc1f
--- /dev/null
+++ b/rps/game.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39.95 43.1 24.05 27.2 18.15 33.1Q18.7 33.95 18.85 34.75Q19 35.55 19 36.5Q19 39.7 16.85 41.85Q14.7 44 11.5 44Q8.3 44 6.15 41.85Q4 39.7 4 36.5Q4 33.3 6.15 31.15Q8.3 29 11.5 29Q12.4 29 13.275 29.25Q14.15 29.5 15.1 30L20.9 24.2L15 18.3Q14.15 18.7 13.275 18.85Q12.4 19 11.5 19Q8.3 19 6.15 16.85Q4 14.7 4 11.5Q4 8.3 6.15 6.15Q8.3 4 11.5 4Q14.7 4 16.85 6.15Q19 8.3 19 11.5Q19 12.45 18.875 13.3Q18.75 14.15 18.35 14.9L43.25 39.8Q43.95 40.5 43.95 41.45Q43.95 42.4 43.25 43.1Q42.55 43.8 41.6 43.8Q40.65 43.8 39.95 43.1ZM29.95 21.65 26.65 18.35 39.95 5.05Q40.65 4.35 41.6 4.35Q42.55 4.35 43.25 5.05Q43.95 5.75 43.95 6.7Q43.95 7.65 43.25 8.35ZM11.5 16Q13.35 16 14.675 14.675Q16 13.35 16 11.5Q16 9.65 14.675 8.325Q13.35 7 11.5 7Q9.65 7 8.325 8.325Q7 9.65 7 11.5Q7 13.35 8.325 14.675Q9.65 16 11.5 16ZM24.15 25.2Q24.55 25.2 24.825 24.9Q25.1 24.6 25.1 24.2Q25.1 23.8 24.825 23.525Q24.55 23.25 24.15 23.25Q23.75 23.25 23.45 23.525Q23.15 23.8 23.15 24.2Q23.15 24.6 23.45 24.9Q23.75 25.2 24.15 25.2ZM11.5 41Q13.35 41 14.675 39.675Q16 38.35 16 36.5Q16 34.65 14.675 33.325Q13.35 32 11.5 32Q9.65 32 8.325 33.325Q7 34.65 7 36.5Q7 38.35 8.325 39.675Q9.65 41 11.5 41Z" fill="#fff"/></svg>
+\ No newline at end of file
diff --git a/rps/index.html b/rps/index.html
new file mode 100644
index 0000000..5c15faa
--- /dev/null
+++ b/rps/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" translate="no">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Online Lobby | Rock Paper Scissors | Minteck Arcade</title>
+    <link rel="icon" href="/_general/favicon.svg" type="image/svg+xml">
+    <style>
+        body {
+            background: black;
+            color: white;
+            text-align: center;
+            font-family: sans-serif;
+        }
+    </style>
+</head>
+<body>
+<iframe src="/_general/navbar.html" style="position: fixed;z-index: 9999999999;top: 0;border: none;left: 0;right: 0;height: 32px;width: 100%;"></iframe>
+<div style="display:flex;position:fixed;inset:0;align-items: center;justify-content: center;top:32px;">
+    <div>
+        <h1>Online Mode</h1>
+        <p>Enter a name for your game room: (this is the name you will give to the other player; make sure you pick something unique)</p>
+        <input maxlength="30" placeholder="Game Room Name" name="room" type="text">
+        <p>Enter a player name: (it will be shown to the other player)</p>
+        <input maxlength="30" placeholder="Player Name" name="name" type="text">
+        <p>Your game is encrypted and only you, the other player, and Minteck Arcade can know what you are doing. Player name and game room name are not stored. The other player will see your IP address.</p>
+        <div style="width:max-content;margin-left:auto;margin-right:auto;">
+            <a href="#" onclick="goIfGood();" style="color:white;text-decoration:none;display:block;border:1px solid white;padding:10px;">Let's go!</a>
+        </div>
+    </div>
+</div>
+
+<script>
+    function goIfGood() {
+        if (document.getElementsByName("room")[0].value !== "" && document.getElementsByName("name")[0].value !== "") {
+            location.href = "game.html#online/" + btoa(document.getElementsByName("room")[0].value) + "|" + btoa(document.getElementsByName("name")[0].value);
+        }
+    }
+</script>
+</body>
+</html>
+\ No newline at end of file
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
diff --git a/rps/paper.png b/rps/paper.png
new file mode 100644
index 0000000..0f890d7
--- /dev/null
+++ b/rps/paper.png
diff --git a/rps/rock.png b/rps/rock.png
new file mode 100644
index 0000000..bd3401b
--- /dev/null
+++ b/rps/rock.png
diff --git a/rps/scissors.png b/rps/scissors.png
new file mode 100644
index 0000000..37c261a
--- /dev/null
+++ b/rps/scissors.png
author	Minteck <contact@minteck.org>	2022-05-07 18:15:13 +0200
committer	Minteck <contact@minteck.org>	2022-05-07 18:15:13 +0200
commit	88394101a513cf41dd4af1bb46881e7ae78bcf9f (patch)
tree	e99d2e9fd27ff2b1ebe1790c4e866d3862def0a5 /rps
parent	1f8e9aab02a849f64aa6069a04cbabaf5993c65a (diff)
download	arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.tar.gz arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.tar.bz2 arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.zip