fixes, style and convenience

main.py

@@ -96,22 +96,25 @@ def join_game(game_id):
         #get the chosen player name from the form and redirect to the game page
         player_name = request.form['player']
         print('Player Name:', player_name)
-        return render_template('join_game.html', game_id=game_id, players=players, player_name=player_name)
+        local_game = request.form.get('local_game')
+        return render_template('join_game.html', game_id=game_id, players=players, player_name=player_name, local_game=local_game)
     
     return render_template('join_game.html', game_id=game_id, players=players)
 
 
 #play game page
 @app.route('/game/<game_id>/player/<player_name>', methods=['GET'])
-def game(game_id, player_name):
+@app.route('/game/<game_id>/player/<player_name>/local/<local_game>', methods=['GET'])
+def game(game_id, player_name, local_game=None):
+    local_game = local_game == 'True'
     gamestate = requests.get(ozai_url + 'game/' + game_id).json()
     #dont send player parameter if the player is a spectator
     if player_name == 'spectator':
         gamestate = requests.get(ozai_url + 'game/' + game_id).json()
-        return render_template('game.html', game_id=game_id, gamestate=gamestate)
+        return render_template('game.html', game_id=game_id, gamestate=gamestate, local_game=False)
     elif player_name in gamestate['players']:
         gamestate = requests.get(ozai_url + 'game/' + game_id + '?player=' + player_name).json()
-        return render_template('game.html', game_id=game_id, gamestate=gamestate, player_name=player_name)
+        return render_template('game.html', game_id=game_id, gamestate=gamestate, player_name=player_name, local_game=local_game)
     else:
         return 'Player not found', 404
 

templates/game.html

@@ -45,10 +45,11 @@
             background-color: #3f3ff2;
         }
         select {
-            font-size: 1.5em;
+            font-size: 1.2em;
         }
 
         .move_select {
+            margin-top: 0.5em;
             display: flex;
             justify-content: space-around;
             flex-direction: row;
@@ -64,7 +65,7 @@
             align-items: baseline;
         }
 
-        @media (max-width: 400px) {
+        @media (max-width: 40em) {
             .flex-row {
                 flex-direction: column;
                 justify-content: center;
@@ -82,7 +83,7 @@
 
         .factory {
             overflow: hidden;
-            border: 2px solid var(--border-color);
+            border: 0.2em solid var(--border-color);
             border-radius: 30%;
             display: flex;
             justify-content: center;
@@ -96,8 +97,8 @@
             
         }
         #market {
-            height: calc(var(--tile-size) * 6);
-            width: calc(var(--tile-size) * 6);
+            height: calc(var(--tile-size) * 7);
+            width: calc(var(--tile-size) * 7);
         }
         /* put the first element in the corner of the factory  */
         .factory-name {
@@ -107,7 +108,7 @@
             position: relative;
             top: 0;
             left: 0;
-            border: 2px solid var(--border-color);
+            border: 0.2em solid var(--border-color);
             text-align: center;
             margin: 0.1em;
             width: 1.5em;
@@ -119,7 +120,7 @@
 
         .factory > * {
             border-radius: 10%;
-            border: 1px solid var(--border-color);
+            border: 0.15em solid var(--border-color);
             text-align: center;
             margin: 0.1em;
             width: var(--tile-size);
@@ -130,10 +131,10 @@
         }
 
         .player_area {
-            border: 2px solid var(--border-color);
-            border-radius: 20px;
-            padding: 10px;
-            margin: 10px;
+            border: 0.2em solid var(--border-color);
+            border-radius: 2em;
+            padding: 1em;
+            margin: 1em;
         }
 
         .wall {
@@ -144,7 +145,7 @@
             gap: 0.1em;
         }
         .wall > * {
-            border: 1px solid var(--border-color);
+            border: 0.15em solid var(--border-color);
             width: var(--tile-size);
             height: var(--tile-size);
             text-align: center;
@@ -163,7 +164,7 @@
             align-items:baseline;
         }
         .pattern_line > * {
-            border: 1px solid var(--border-color);
+            border: 0.15em solid var(--border-color);
             text-align: center;
             margin: 0.1em;
             width: var(--tile-size);
@@ -179,7 +180,7 @@
             align-items:baseline;
         }
         .floor {
-            border: 1px solid var(--border-color);
+            border: 0.15em solid var(--border-color);
             text-align: center;
             width: var(--tile-size);
             height: var(--tile-size);
@@ -356,7 +357,7 @@
             </div>
 
             {% if player_name == name %}
-            <form id='moveForm'</form>>
+            <form id='moveForm'</form>
                 <div class="flex-col">
                     <div class="flex-row move_select">
                     <div>
@@ -410,10 +411,12 @@
         <!-- form for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to.  -->
         
         <!-- button to go to next player -->
+        
+        {% if local_game %}
         {% set current_index = gamestate.player_names.index(player_name) %}
         {% set next_index = current_index + 1 if current_index + 1 < gamestate.player_names|length else 0 %}
         <a href="/game/{{ game_id }}/player/{{ gamestate.player_names[next_index] }}">Next Player</a>
-
+        {% endif %}
     
     {% endif %}
 
@@ -487,6 +490,13 @@
             formData.forEach((value, key) => data[key] = value);
             console.log(data);
             socket.emit('move', {game_id: game_id, player_name, move: data});
+
+            // if local_game is tru change player
+            //{% if local_game %}
+                let nextPlayer = '{{ gamestate.player_names[gamestate.player_names.index(player_name) + 1 if gamestate.player_names.index(player_name) + 1 < gamestate.player_names|length else 0] }}';
+                window.location.href = '/game/{{ game_id }}/player/' + nextPlayer;
+            //{% endif %}
+
         });
 
     </script>

templates/join_game.html

@@ -48,7 +48,7 @@
             width: 40%;
             min-width: 30em;
             max-width: 50em;
-            height: 8vh;
+            height: 7vh;
         }
         
         input[type="submit"] {
@@ -86,6 +86,11 @@
             <option value="{{ player }}">{{ player }}</option>
             {% endfor %}
         </select>
+        <p>game type</p>
+        <select name="local_game" required>
+            <option value="True" selected>Local</option>
+            <option value="False">Online</option>
+        </select>
         <input type="submit" value="Join Game">
     </form>
 
@@ -98,13 +103,13 @@
     <noscript>
         <p>Selected player to join as: {{ player_name }}</p>
         <p>manual redirect</p>
-        <a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
+        <a href="/game/{{ game_id }}/player/{{ player_name }}/local/{{ local_game }}">Go to game</a>
     </noscript>
     <script>
         // Save player name in browser session for auto fill in game page
         sessionStorage.setItem('player_name', '{{ player_name }}');
         //redirect to game
-        window.location.href = '/game/{{ game_id }}/player/{{ player_name }}';
+        window.location.href = '/game/{{ game_id }}/player/{{ player_name }}/local/{{ local_game }}';
     </script>
     {% endif %}