diff options
| 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 | |
| parent | 1f8e9aab02a849f64aa6069a04cbabaf5993c65a (diff) | |
| download | arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.tar.gz arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.tar.bz2 arcade-88394101a513cf41dd4af1bb46881e7ae78bcf9f.zip | |
Add RPS
| -rw-r--r-- | .idea/vcs.xml | 6 | ||||
| -rw-r--r-- | _general/favicon.svg | 39 | ||||
| -rw-r--r-- | _general/navbar.html | 36 | ||||
| -rw-r--r-- | index.html | 36 | ||||
| -rwxr-xr-x | rps/game.html | 85 | ||||
| -rw-r--r-- | rps/game.svg | 1 | ||||
| -rw-r--r-- | rps/index.html | 42 | ||||
| -rwxr-xr-x | rps/morpion/base.js | 124 | ||||
| -rw-r--r-- | rps/morpion/online.js | 147 | ||||
| -rw-r--r-- | rps/paper.png | bin | 0 -> 1981 bytes | |||
| -rw-r--r-- | rps/rock.png | bin | 0 -> 8973 bytes | |||
| -rw-r--r-- | rps/scissors.png | bin | 0 -> 9345 bytes | |||
| -rw-r--r-- | tictactoe/game.svg | 1 | ||||
| -rw-r--r-- | tictactoe/index.html | 9 | ||||
| -rwxr-xr-x | tictactoe/morpion.html | 10 | ||||
| -rwxr-xr-x | tictactoe/morpion/base.js | 19 | ||||
| -rw-r--r-- | tictactoe/morpion/online.js | 4 | ||||
| -rw-r--r-- | tictactoe/online.html | 10 |
18 files changed, 554 insertions, 15 deletions
diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="VcsDirectoryMappings"> + <mapping directory="$PROJECT_DIR$" vcs="Git" /> + </component> +</project>
\ No newline at end of file diff --git a/_general/favicon.svg b/_general/favicon.svg new file mode 100644 index 0000000..a224243 --- /dev/null +++ b/_general/favicon.svg @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:url(#SVGID_1_);} + .st1{fill:url(#SVGID_00000040550151792771118680000011973571232457792395_);} +</style> + <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24" y1="48" x2="24" y2="-9.094947e-13"> + <stop offset="0" style="stop-color:#F9948D"/> + <stop offset="1" style="stop-color:#FFCACB"/> +</linearGradient> + <path class="st0" d="M38,48H10C4.48,48,0,43.52,0,38V10C0,4.48,4.48,0,10,0h28c5.52,0,10,4.48,10,10v28C48,43.52,43.52,48,38,48z"/> + <g> + + <linearGradient id="SVGID_00000175294772786944723820000011078486129057885837_" gradientUnits="userSpaceOnUse" x1="24" y1="11.9199" x2="24" y2="36.0801"> + <stop offset="0" style="stop-color:#C40000"/> + <stop offset="1" style="stop-color:#D10000"/> + </linearGradient> + <path style="fill:url(#SVGID_00000175294772786944723820000011078486129057885837_);" d="M9.63,36.08c-1.09,0-1.95-0.37-2.57-1.1 + c-0.62-0.73-0.84-1.75-0.67-3.04l2.07-14.45c0.23-1.52,0.94-2.83,2.14-3.93s2.55-1.64,4.08-1.64h18.68c1.52,0,2.88,0.55,4.08,1.64 + c1.19,1.09,1.91,2.4,2.14,3.93l2.03,14.45c0.17,1.29-0.05,2.31-0.67,3.04c-0.62,0.73-1.47,1.1-2.57,1.1 + c-0.66,0-1.22-0.11-1.68-0.32c-0.46-0.22-0.85-0.48-1.16-0.8l-4.49-4.49H16.97l-4.49,4.49c-0.32,0.32-0.7,0.58-1.16,0.8 + C10.86,35.97,10.29,36.08,9.63,36.08z M10.29,33.43l5.48-5.48h16.45l5.48,5.48c0.15,0.15,0.41,0.28,0.78,0.39 + c0.26,0,0.46-0.13,0.59-0.39c0.13-0.26,0.17-0.52,0.11-0.78L37.1,17.89c-0.15-1.02-0.57-1.84-1.28-2.48 + c-0.71-0.64-1.5-0.96-2.37-0.96H14.56c-0.87,0-1.66,0.32-2.37,0.96c-0.71,0.64-1.14,1.47-1.28,2.48L8.81,32.64 + c-0.06,0.26-0.02,0.52,0.11,0.78c0.13,0.26,0.33,0.39,0.59,0.39C9.71,33.82,9.97,33.69,10.29,33.43z M33.28,25.74 + c0.45,0,0.84-0.17,1.18-0.51c0.34-0.34,0.51-0.73,0.51-1.18c0-0.45-0.17-0.84-0.51-1.18c-0.34-0.34-0.73-0.51-1.18-0.51 + c-0.45,0-0.84,0.17-1.18,0.51c-0.34,0.34-0.51,0.73-0.51,1.18c0,0.45,0.17,0.84,0.51,1.18C32.43,25.57,32.83,25.74,33.28,25.74z + M29.69,20.26c0.45,0,0.84-0.17,1.18-0.51c0.34-0.34,0.51-0.73,0.51-1.18c0-0.45-0.17-0.84-0.51-1.18 + c-0.34-0.34-0.73-0.51-1.18-0.51s-0.84,0.17-1.18,0.51c-0.34,0.34-0.51,0.73-0.51,1.18c0,0.45,0.17,0.84,0.51,1.18 + C28.85,20.09,29.24,20.26,29.69,20.26z M17.46,25.53c0.31,0,0.56-0.1,0.76-0.3c0.2-0.2,0.3-0.45,0.63-0.76v-1.59h1.77 + c0.31-0.51,0.56-0.61,0.76-0.81c0.2-0.2,0.3-0.45,0.3-0.76s-0.1-0.56-0.3-0.76c-0.2-0.2-0.45-0.3-0.76-0.2h-1.77v-2.2 + c-0.34-0.31-0.44-0.56-0.63-0.76c-0.2-0.2-0.45-0.3-0.76-0.3c-0.31,0-0.56,0.1-0.76,0.3c-0.2,0.2-0.3,0.45-0.38,0.76v2.2H14.3 + c-0.31-0.09-0.56,0.01-0.76,0.2c-0.2,0.2-0.3,0.45-0.3,0.76s0.1,0.56,0.3,0.76c0.2,0.2,0.45,0.3,0.76,0.81h2.02v1.59 + c0.08,0.31,0.18,0.56,0.38,0.76S17.16,25.53,17.46,25.53z M24,24.14L24,24.14L24,24.14L24,24.14L24,24.14L24,24.14L24,24.14 + L24,24.14L24,24.14L24,24.14L24,24.14L24,24.14L24,24.14z"/> +</g> +</svg> diff --git a/_general/navbar.html b/_general/navbar.html new file mode 100644 index 0000000..6dc721d --- /dev/null +++ b/_general/navbar.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en" translate="no"> +<head> + <meta charset="UTF-8"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> + <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> + <title>navigation</title> + <style> + #home:hover, .game:hover { + background: #444; + } + + #home:active, .game:active { + background: #555; + } + + * { + overflow: hidden !important; + } + </style> +</head> +<body style="background:#333;margin:0;margin-left:2vw;margin-right:2vw;"> + <a title="Go to Minteck Arcade homepage" href="/" target="_top" id="home" style="display:inline-block;padding:3px 10px;"> + <img src="/_general/favicon.svg" alt="" style="width: 24px;padding: 4px;vertical-align:middle;"> + <span style="display:inline-block;color:white;text-decoration:none;vertical-align: middle;">Minteck Arcade</span> + </a><span id="games" style="margin-top: -25px;display: inline-block;vertical-align: middle;"> + <a title="Tic-Tac-Toe" class="game" href="/tictactoe" target="_top" style="height:36px;display: inline-block;vertical-align: middle;margin-top: 6px;padding-left:5px;padding-right:5px;padding-top: 2px;"> + <img src="/tictactoe/game.svg" style="width:24px;"> + </a><a title="Rock Paper Scissors" class="game" href="/rps" target="_top" style="height:36px;display: inline-block;vertical-align: middle;margin-top: 6px;padding-left:5px;padding-right:5px;padding-top: 2px;"> + <img src="/rps/game.svg" style="width:24px;"> + </a> + </span> +</body> +</html>
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..74c960b --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ +<!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>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>Minteck Arcade</h1> + <p>Select a game:</p> + <div style="width:max-content;margin-left:auto;margin-right:auto;"> + <a href="/tictactoe" style="color:white;text-decoration:none;display:block;border:1px solid white;border-bottom:none;padding:10px;">Tic-Tac-Toe</a> + <a href="/rps" style="color:white;text-decoration:none;display:block;border:1px solid white;padding:10px;">Rock Paper Scissors</a> +<!-- <a href="game.html#/train" style="color:white;text-decoration:none;display:block;border:1px solid white;border-bottom:none;padding:10px;">Local multiplayer</a>--> +<!-- <a href="online.html" style="color:white;text-decoration:none;display:block;border:1px solid white;border-bottom:none;padding:10px;">Online multiplayer</a>--> +<!-- <a href="game.html#/auto" style="color:white;text-decoration:none;display:block;border:1px solid white;padding:10px;">Automated machine learning</a>--> + </div> + <p>© Minteck</p> + </div> +</div> +</body> +</html>
\ No newline at end of file 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: <span id="counter-left-win">0</span><br>Games Lost: <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("<", "<").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 Binary files differnew file mode 100644 index 0000000..0f890d7 --- /dev/null +++ b/rps/paper.png diff --git a/rps/rock.png b/rps/rock.png Binary files differnew file mode 100644 index 0000000..bd3401b --- /dev/null +++ b/rps/rock.png diff --git a/rps/scissors.png b/rps/scissors.png Binary files differnew file mode 100644 index 0000000..37c261a --- /dev/null +++ b/rps/scissors.png diff --git a/tictactoe/game.svg b/tictactoe/game.svg new file mode 100644 index 0000000..9d0be2c --- /dev/null +++ b/tictactoe/game.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M41 44H7Q5.8 44 4.9 43.1Q4 42.2 4 41V7Q4 5.8 4.9 4.9Q5.8 4 7 4H41Q42.2 4 43.1 4.9Q44 5.8 44 7V41Q44 42.2 43.1 43.1Q42.2 44 41 44ZM16.35 41V31.7H7V41Q7 41 7 41Q7 41 7 41ZM7 28.7H16.35V19.35H7ZM7 16.35H16.35V7H7Q7 7 7 7Q7 7 7 7ZM19.35 41H28.65V31.7H19.35ZM19.35 28.7H28.65V19.35H19.35ZM19.35 16.35H28.65V7H19.35ZM31.65 41H41Q41 41 41 41Q41 41 41 41V31.7H31.65ZM31.65 28.7H41V19.35H31.65ZM31.65 16.35H41V7Q41 7 41 7Q41 7 41 7H31.65Z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/tictactoe/index.html b/tictactoe/index.html index 51b4b60..6a86ca6 100644 --- a/tictactoe/index.html +++ b/tictactoe/index.html @@ -1,10 +1,11 @@ <!DOCTYPE html> -<html lang="en"> +<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>Tic-Tac-Toe</title> + <title>Tic-Tac-Toe | Minteck Arcade</title> + <link rel="icon" href="/_general/favicon.svg" type="image/svg+xml"> <style> body { background: black; @@ -15,7 +16,9 @@ </style> </head> <body> - <div style="display:flex;position:fixed;inset:0;align-items: center;justify-content: center;"> + <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>Tic-Tac-Toe</h1> <p>Select a game mode:</p> diff --git a/tictactoe/morpion.html b/tictactoe/morpion.html index 87ae9df..c53ba55 100755 --- a/tictactoe/morpion.html +++ b/tictactoe/morpion.html @@ -4,7 +4,8 @@ <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>Tic-Tac-Toe</title> + <title>Game | Tic-Tac-Toe | Minteck Arcade</title> + <link rel="icon" href="/_general/favicon.svg" type="image/svg+xml"> <style> body { background: black; @@ -40,7 +41,8 @@ <script src="morpion/online.js"></script> </head> <body> - <div style="display:flex;align-items:center;justify-content: center;position:fixed;inset: 0;z-index:5;"> +<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> @@ -82,14 +84,14 @@ <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:0;left:0;color:white;margin:0;font-family:monospace;"> + <div id="stats" style="position:fixed;top:32px;left:0;color:white;margin:0;font-family:monospace;"> <div id="online-credits" style="display:none;">Online mode made with ❤️ for Twi</div> <div id="stats-left"> Thought Moves: <span id="stat-thought">0</span><br>Random Moves: <span id="stat-random">0</span><br>Randomness: <span id="stat-randomness">0.00%</span><br>Game State: <span id="stat-state">NONE</span><br>Learned Games: <span id="stat-games"><script> document.getElementById("stat-games").innerText = modelTrainedGames; </script></span><span id="stat-goal">/5000</span> (<span id="stat-modelsize">...</span>)<br>Played Games: <span id="stat-played">-</span></div> </div> - <div id="last-games" style="text-align:right;position:fixed;top:0;right:0;color:white;margin:0;font-family:monospace;">-</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> diff --git a/tictactoe/morpion/base.js b/tictactoe/morpion/base.js index b5db1d2..7bb8fd2 100755 --- a/tictactoe/morpion/base.js +++ b/tictactoe/morpion/base.js @@ -215,5 +215,20 @@ function airevrand() { } window.addEventListener("load", () => { - if (location.hash === "#/train") train(); -}); + if (location.hash === "#/train") { + train(); + } + if (!location.hash.startsWith("#online/")) { + document.getElementById("resetbtn").style.display = "none"; + } + + if (location.hash === "#/train") { + document.title = "Local Game | Tic-Tac-Toe | Minteck Arcade"; + } else if (location.hash.startsWith("#online/")) { + document.title = "Online Game | Tic-Tac-Toe | Minteck Arcade"; + } else if (location.hash === "#/auto") { + document.title = "Automated machine learning | Tic-Tac-Toe | Minteck Arcade"; + } else { + document.title = "Singleplayer Game | Tic-Tac-Toe | Minteck Arcade"; + } +});
\ No newline at end of file diff --git a/tictactoe/morpion/online.js b/tictactoe/morpion/online.js index c218e79..49bf957 100644 --- a/tictactoe/morpion/online.js +++ b/tictactoe/morpion/online.js @@ -1,4 +1,4 @@ -const onlineServer = "wss://tictactoe.minteck.org/server/prod"; +const onlineServer = "wss://arcade.minteck.org/tictactoe/server/prod"; let errorDisconnect = false; let wcInterval; let waitCount = 0; @@ -46,7 +46,7 @@ function online() { let parts = location.hash.substring(8).split("|"); ws.send(JSON.stringify({ action: 'init', - room: atob(parts[0]), + room: "tictactoe." + atob(parts[0]), player: atob(parts[1]) })) } diff --git a/tictactoe/online.html b/tictactoe/online.html index 38ceb88..37a64df 100644 --- a/tictactoe/online.html +++ b/tictactoe/online.html @@ -1,10 +1,11 @@ <!DOCTYPE html> -<html lang="en"> +<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 | Tic-Tac-Toe</title> + <title>Online Lobby | Tic-Tac-Toe | Minteck Arcade</title> + <link rel="icon" href="/_general/favicon.svg" type="image/svg+xml"> <style> body { background: black; @@ -15,14 +16,15 @@ </style> </head> <body> -<div style="display:flex;position:fixed;inset:0;align-items: center;justify-content: center;"> +<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 tictactoe.minteck.org can know what you are doing. Player name and game room name are not stored. The other player will see your IP address.</p> + <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> |
