added flake

2024-03-23 17:49:50 +01:00
parent 83969a3067
commit 9914410cb7
15 changed files with 495 additions and 160 deletions
@@ -0,0 +1,88 @@
+<!-- HTML -->
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Ozai:Join</title>
+    <link rel="icon" type="image/png" href="/azul-flake.png">
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: black;
+            color: white;
+            color-scheme: dark;
+        }
+
+
+        form {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-top: 5vh;
+            width: 80%;
+            max-width: 500px;
+        }
+
+        button, input[type="submit"] {
+            background-color: #0000FF;
+            cursor: pointer;
+            box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333);
+            margin-top: 2em;
+        }
+        
+        button, input[type="submit"], input[type="text"] {
+            margin-top: 5vh;
+            padding: 1em;
+            margin-top: 1em;
+            
+            color: #fff;
+            border: none;
+            border-radius: 1em;
+            width: 100%;
+        }
+
+
+        @media (max-width: 768px) {
+            input[type="text"], input[type="submit"], button {
+                font-size: 1.5em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <img src="azul-flake.png" alt="">
+    <!-- a field to add a game id  -->
+    <form id="joinGameForm" method="POST" action="/join" onsubmit="submitForm(event)">
+        <input type="text" name="game_id" placeholder="Game ID" required value="{{ game_id }}"> 
+        <input type="submit" value="Join Game">
+        <button onclick="window.history.back();">Back</button>
+    </form>
+
+    
+</body>
+    <script>
+        function submitForm(e) {
+            e.preventDefault();
+            var game_id = document.querySelector('input[name="game_id"]').value;
+            sessionStorage.setItem('game_id', game_id);
+            document.getElementById('joinGameForm').submit();
+        }
+
+        var game_id = sessionStorage.getItem('game_id');
+        if (game_id) {
+            document.querySelector('input[name="game_id"]').value = game_id;
+        }
+    </script>
+
+    {% if game_id %}
+        <script>
+            var game_id = '{{ game_id }}';
+            sessionStorage.setItem('game_id', game_id);
+            //redirect to join game
+            window.location.href = '/join_game/' + game_id;
+        </script>
+    {% endif %}
+</html>