game improvements

src/main.py

@@ -160,6 +160,11 @@ def game(game_id, player_name, local_game=None):
     else:
         return 'Player not found', 404
 
+@app.route('/gametitle/<game_id>', methods=['GET'])
+def gametitle(game_id):
+    gamestate = requests.get(ozai_url + 'game/' + game_id).json()
+    return render_template('gametitle.html', game_id=game_id, gamestate=gamestate)
+
 
 @socketio.on('connect')
 def ws_connect(message):

src/templates/game.html

@@ -236,7 +236,7 @@
                 {% for color, number in gamestate.market.items() %}
                  {% if number > 0 %}
                     {% for i in range(0, number) %}
-                        <div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
+                        <div onclick="selectTile(this)" draggable="true" ondragstart="handleDragStart(event)" class="{{ color }}">{{ color[:1] }}</div>
                     {% endfor %}
                 {% endif %}
                 {% endfor %}
@@ -250,7 +250,7 @@
                     {% for color, number in factory.items() %}
                     {% if number > 0 %}
                         {% for i in range(0, number) %}
-                            <div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
+                            <div onclick="selectTile(this)" draggable="true" ondragstart="handleDragStart(event)" class="{{ color }}">{{ color[:1] }}</div>
                         {% endfor %}
                     {% endif %}
                     {% endfor %}
@@ -283,7 +283,7 @@
                 <div class="flex-col">
                     <!-- <h3>Pattern Lines</h3> -->
                     {% for line in player_data.pattern_lines %}
-                    <div class="pattern_line" onclick="selectPatternLine(this)" value="{{loop.index}}">
+                    <div class="pattern_line" onclick="selectPatternLine(this)" ondragover="handleDragOver(event)" ondrop="handleDrop(event)" value="{{loop.index}}">
                         <!-- TODO: Fix this to not fill empty spaces. -->
                         {% for i in range(0, loop.index) %}
                             {% if line.number > i %}
@@ -313,7 +313,7 @@
                 </div>
                 </div>
 
-            <div class="floor_container" onclick="selectPatternLine(this)" value="floor">
+            <div ondragover="handleDragOver(event)" ondrop="handleDrop(event)" class="floor_container" onclick="selectPatternLine(this)" value="floor">
                 {% set floor_count = 0 %}
                 {% set floor_negative_values = [1,1,2,2,2,3,3] %}
                 {% for color, number in player_data.floor.items() %}
@@ -377,7 +377,7 @@
                     </div>
                     </div>
 
-                    <input type="submit" value="Submit Move" style="margin-top: 1em;">
+                    <input id="submitButton" type="submit" value="Submit Move" style="margin-top: 1em;">
                 </div>
             </form>
             {% endif %}
@@ -409,11 +409,97 @@
     <script>
         console.log('Game ID: {{ game_id }}');
         console.log('Player Name: {{ player_name }}');
-        console.log('Gamestate: {{ gamestate }}');
+        console.log(JSON.parse('{{ gamestate | tojson }}'));
         // refresh the page by listening to websocket events
         game_id = '{{ game_id }}';
         player_name = '{{ player_name }}';
 
+        // if gamestatus ended then redirect to the enscreen
+        if ('{{ gamestate.game_end }}') {
+            window.location.href = '/gametitle/{{ game_id }}';
+        }
+
+        // if local_game is tru change player (comments are not ignored by jinja)
+        //{% if local_game %}
+            current_player = '{{ gamestate.current_player }}';
+            if (player_name != current_player) {
+                window.location.href = '/game/{{ game_id }}/player/' + current_player + '/local/True';
+            }
+
+            //if the market only contains the start tile,
+            market = JSON.parse('{{ gamestate.market | tojson }}'); 
+            if (market['start'] == 1 && market['blue'] == 0 && market['yellow'] == 0 && market['red'] == 0 && market['black'] == 0 && market['white'] == 0) {
+                //if all the factories do not contain any tiles, switch to the next player
+                factories = JSON.parse('{{ gamestate.factories | tojson }}');
+                factory_tile_count = 0;
+                for (var i = 0; i < factories.length; i++) {
+                    for (var color in factories[i]) {
+                        factory_tile_count += factories[i][color];
+                    }
+                }
+                if (factory_tile_count == 0) {
+                    next_player = '{{ gamestate.player_names[(gamestate.player_names.index(gamestate.current_player) + 1) % gamestate.player_names|length] }}';
+                    window.location.href = '/game/{{ game_id }}/player/' + next_player + '/local/True';
+                }
+            }
+
+        //{% endif %}
+
+        // Define the dragstart event handler
+        function handleDragStart(e) {
+            console.log(e);
+            e.dataTransfer.setData('dragged/data', e.target);
+            e.dataTransfer.setData('dragged/color', e.target.className);
+            var source = e.target.parentElement.id;
+            if (source == 'market') {
+                source = 'market';
+            }else {
+                source = source.replace('factory', '');
+            }
+            e.dataTransfer.setData('dragged/source', source);
+        }
+
+        // Define the drop event handler
+        function handleDrop(e) {
+            e.preventDefault(); // This is necessary to prevent the browser's default handling of the data
+            console.log(e);
+            
+            //get element that was dragged
+            var color = e.dataTransfer.getData('dragged/color');
+            var source = e.dataTransfer.getData('dragged/source');
+            destination = e.target.parentElement.getAttribute('value')
+            if (destination == null) {
+                destination = e.target.getAttribute('value');
+            }
+            if (destination == null) {
+                destination = e.target.className;
+            }
+
+            console.log(color);
+            console.log(source);
+            console.log(destination);
+            //TODO: set the form values to the color source and destination
+            var sourceElement = document.getElementById('source');
+            var colorElement = document.getElementById('color');
+            var destinationElement = document.getElementById('destination');
+            var sourceOption = sourceElement.querySelector('option[value="' + source + '"]');
+            var colorOption = colorElement.querySelector('option[value="' + color + '"]');
+            var destinationOption = destinationElement.querySelector('option[value="' + destination + '"]');
+            sourceOption.selected = true;
+            colorOption.selected = true;
+            destinationOption.selected = true;
+            console.log('Dropped tile: ' + color + ' from ' + source + ' to ' + destination);
+            //submit the form by emiting the submit event as if the submit button was clicked
+            document.querySelector('#submitButton').click();
+        }
+
+        function handleDragOver(e) {
+            e.preventDefault();
+            // console.log(e);
+        }
+
+
+
         function selectTile(tile) {
             var source = tile.parentElement.id;
             if (source == 'market') {
@@ -469,13 +555,6 @@
             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 + '/local/True';
-
-            //{% endif %}
-
         });
 
     </script>

src/templates/gametitle.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Game Title</title>
+    <style>
+        #win-screen {
+            display: none;
+            font-size: 2em;
+            text-align: center;
+            margin-top: 20%;
+            color: white;
+        }
+        body {
+            background-color: #2C3235;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2"></script>
+</head>
+<body>
+    <div id="win-screen"></div>
+
+    <script>
+        var gamestate = JSON.parse('{{ gamestate | tojson }}');
+        var winnerpoints = 0
+        var winner = null;
+        console.log(gamestate.players)
+        //for each player in the gamestate object not a list
+        for (player in gamestate.players) {
+            console.log(gamestate.players[player])
+            //if the player's points are greater than the winnerpoints
+            if (gamestate.players[player]['points'] > winnerpoints) {
+                //set the winnerpoints to the player's points
+                winnerpoints = gamestate.players[player]['points'];
+                //set the winner to the player
+                winner = gamestate.players[player];
+                winner['name'] = player;
+            }
+        }
+        var winnerName = winner['name'];
+
+        function showWinScreen() {
+            // Display confetti
+            confetti({
+                particleCount: 200,
+                spread: 80,
+                origin: { y: 0.6 }
+            });
+
+            // Display winner's name
+            var winScreen = document.getElementById('win-screen');
+            winScreen.innerHTML = "<strong>" + winnerName + "</strong> wins!" + "<br>" + "with <strong>" + winnerpoints + "</strong> points";
+            winScreen.style.display = 'block';
+        }
+
+        showWinScreen();
+    </script>
+</body>
+</html>