From 88394101a513cf41dd4af1bb46881e7ae78bcf9f Mon Sep 17 00:00:00 2001 From: Minteck Date: Sat, 7 May 2022 18:15:13 +0200 Subject: Add RPS --- rps/game.html | 85 +++++++++++++++++++++++++++++ rps/game.svg | 1 + rps/index.html | 42 +++++++++++++++ rps/morpion/base.js | 124 ++++++++++++++++++++++++++++++++++++++++++ rps/morpion/online.js | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++ rps/paper.png | Bin 0 -> 1981 bytes rps/rock.png | Bin 0 -> 8973 bytes rps/scissors.png | Bin 0 -> 9345 bytes 8 files changed, 399 insertions(+) create mode 100755 rps/game.html create mode 100644 rps/game.svg create mode 100644 rps/index.html create mode 100755 rps/morpion/base.js create mode 100644 rps/morpion/online.js create mode 100644 rps/paper.png create mode 100644 rps/rock.png create mode 100644 rps/scissors.png (limited to 'rps') 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 @@ + + + + + + + Game | Rock Paper Scissors | Minteck Arcade + + + + + + + +

+ Loading... +

+ + + + + + + + + + + + + + + + + + + + + + + + +

+ +

// ML Model Training
+model.addTrainedGame();

+        Game made with ❤️ for Twi

+        

+        Games Played: 0
Games Won:    0
Games Lost:   0

+    

-

+        
+    

+ + 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 @@ + \ 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 @@ + + + + + + + Online Lobby | Rock Paper Scissors | Minteck Arcade + + + + + +

Online Mode

Enter a name for your game room: (this is the name you will give to the other player; make sure you pick something unique)

+ +

Enter a player name: (it will be shown to the other player)

+ +

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.

+ Let's go! +

+ + + + \ 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("<", "<").replaceAll(">", ">"); + + wcInterval = setInterval(() => { + waitCount++; + document.getElementById("loader").innerText = "Waiting for the other player... " + waitCount + "\nGame Room: " + atob(location.hash.substring(8).split("|")[0]).replaceAll("<", "<").replaceAll(">", ">"); + }, 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 Binary files /dev/null and b/rps/paper.png differ diff --git a/rps/rock.png b/rps/rock.png new file mode 100644 index 0000000..bd3401b Binary files /dev/null and b/rps/rock.png differ diff --git a/rps/scissors.png b/rps/scissors.png new file mode 100644 index 0000000..37c261a Binary files /dev/null and b/rps/scissors.png differ -- cgit