From 0924b4ee45fbf7dedcebbbb212be604c00b7966c Mon Sep 17 00:00:00 2001
From: Adrian Gunnar Lauterer <adrian@lauterer.it>
Date: Sun, 25 Feb 2024 20:41:38 +0100
Subject: [PATCH] header cleanup + fixes + websocket moves

---
 main.py                  | 118 ++++++++++++++++++++++++---------------
 static/azul-flake.png    | Bin 0 -> 5540 bytes
 templates/create.html    |   8 ++-
 templates/game.html      |  63 +++++++++++++++------
 templates/home.html      |   3 +-
 templates/join.html      |  16 +++++-
 templates/join_game.html |   4 ++
 7 files changed, 143 insertions(+), 69 deletions(-)
 create mode 100644 static/azul-flake.png

diff --git a/main.py b/main.py
index d432833..230072a 100644
--- a/main.py
+++ b/main.py
@@ -1,25 +1,34 @@
 # Python
 from flask import Flask, render_template, request
+from flask_socketio import SocketIO, join_room
 import requests
 
 ozai_url = 'http://localhost:8000/api/'
 app = Flask(__name__)
+socketio = SocketIO(app)
 
-# @app.route('/azul.webp')
-# def background():
-#     #return the background image
-#     return app.send_static_file('azul.webp')
+#get tis from env variable
+import os
+app.config['SECRET_KEY'] = os.environ.get('OZAI_WEBUI_SECRET_KEY')
 
+
+#home page
 @app.route('/')
 def home():
     return render_template('home.html')
 
-
+#static files
 @app.route('/azul.webp')
 def background():
     #return the background image
     return app.send_static_file('azul.webp')
+@app.route('/azul-flake.png')
+def logo():
+    #return the background image
+    return app.send_static_file('azul-flake.png')
 
+
+#game creation page
 @app.route('/create', methods=['GET', 'POST'])
 def create():
     if request.method == 'POST':
@@ -57,6 +66,7 @@ def create():
     return render_template('create.html')
 
 
+#join page, for when the user has gotten a game id.
 @app.route('/join', methods=['GET', 'POST'])
 def join():
     if request.method == 'POST':
@@ -65,7 +75,7 @@ def join():
         return render_template('join.html', game_id=game_id)
     return render_template('join.html')
 
-
+#select player name page
 @app.route('/join_game/<game_id>/', methods=['GET','POST'])
 def join_game(game_id):
     
@@ -85,49 +95,67 @@ def join_game(game_id):
     return render_template('join_game.html', game_id=game_id, players=players)
 
 
-@app.route('/game/<game_id>/player/<player_name>', methods=['GET', 'POST'])
+#play game page
+@app.route('/game/<game_id>/player/<player_name>', methods=['GET'])
 def game(game_id, player_name):
     gamestate = requests.get(ozai_url + 'game/' + game_id).json()
-    move_status = False
+    #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)
+    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)
+    else:
+        return 'Player not found', 404
+
+
+@socketio.on('connect')
+def ws_connect(message):
+    print('Client connected' + str(message))
+    pass
+
+@socketio.on('join')
+def ws_message(message):
+    print('Client message' + str(message))
+    game_id = message['game_id']
+    print('Game ID: ', game_id)
+    join_room(game_id)
+
+@socketio.on('move')
+def ws_message(data):
+    print('Client move' + str(data))
+    
+    game_id = data['game_id']
+    player_name = data['player_name']
     
     #if a move was made.
-    if request.method == 'POST':
-        
-        source = request.form['source']
-        color = request.form['color']
-        destination = request.form['destination']
-        
-        if source != "market":
-            source = int(source)-1
-        if destination != "floor":
-            destination = int(destination)-1
+    source = data['move']['source']
+    color = data['move']['color']
+    destination = data['move']['destination']
+    if source != "market":
+        source = int(source)-1
+    if destination != "floor":
+        destination = int(destination)-1
+    move = {
+        'player': str(player_name),
+        'policy': 'strict',  # or 'loose' depending on your needs
+        'color': str(color),
+        'source': source,
+        'destination': destination
+    }
+    print(move)
+    response = requests.put(ozai_url + 'game/' + game_id, json=move)
+    if response.status_code == 200:
+        socketio.emit('move', data, room=game_id)
+        #send message to the other players, that the move was made
+        socketio.emit('move_status', 'sucsess', room=game_id)
+    else:
+        #send message to the player that the move was invalid
+        socketio.emit('move_status', response.text, room=game_id)
 
-        move = {
-            'player': str(player_name),
-            'policy': 'strict',  # or 'loose' depending on your needs
-            'color': str(color),
-            'source': source,
-            'destination': destination
-        }
-        
-        print(move)
-        response = requests.put(ozai_url + 'game/' + game_id, json=move)
-        if response.status_code == 200:
-            move_status = "Move Successful" 
-        else:
-            move_status = response.text
-    
-    #dont send player parameter if the player is a spectator
-    while True:
-        if player_name == 'spectator':
-            gamestate = requests.get(ozai_url + 'game/' + game_id).json()
-            return render_template('game.html', game_id=game_id, gamestate=gamestate)
-        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, move_status=move_status)
-        else:
-            return 'Player not found', 404
-    return 'Player not found', 404
 
 if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=5000)
\ No newline at end of file
+    # app.run(debug=True, host='0.0.0.0', port=5000,ssl_context='adhoc')
+    
+    socketio.run(app, debug=True, host='0.0.0.0', port=5000)
\ No newline at end of file
diff --git a/static/azul-flake.png b/static/azul-flake.png
new file mode 100644
index 0000000000000000000000000000000000000000..80402f1282d115aa0bcf52aa418b3443a15a90b5
GIT binary patch
literal 5540
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

literal 0
HcmV?d00001

diff --git a/templates/create.html b/templates/create.html
index 7bc69ec..646a69f 100644
--- a/templates/create.html
+++ b/templates/create.html
@@ -2,7 +2,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Create Game</title>
+    <title>Ozai:create</title>
+    <link rel="icon" type="image/png" href="/azul-flake.png">
     <style>
         body {
             display: flex;
@@ -11,11 +12,12 @@
             align-items: center;
             margin-left: 20vw;
             width: 60vw;
-            background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; 
+            /* removed due to low visibility */
+            /* background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; 
             -webkit-background-size: cover;
             -moz-background-size: cover;
             -o-background-size: cover;
-            background-size: cover;
+            background-size: cover; */
         }
 
         form {
diff --git a/templates/game.html b/templates/game.html
index 45a7f82..949979b 100644
--- a/templates/game.html
+++ b/templates/game.html
@@ -2,7 +2,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Game</title>
+    <title>Ozai:game</title>
+    <link rel="icon" type="image/png" href="/azul-flake.png">
     <style>
         a {
             display: inline-block;
@@ -233,13 +234,13 @@
                 <div class="flex-col">
                     <!-- <h3>Pattern Lines</h3> -->
                     {% for line in player_data.pattern_lines %}
-                    <div class="pattern_line">
+                    <div class="pattern_line" onclick="selectPatternLine(this)" value="{{loop.index}}">
                         <!-- TODO: Fix this to not fill empty spaces. -->
                         {% for i in range(0, loop.index) %}
                             {% if line.number > i %}
-                                <div class="{{ line.color }}">{{ line.color[:1] }}</div>
+                                <div  class="{{ line.color }}" >{{ line.color[:1] }}</div>
                             {% else %}
-                                <div>_</div>
+                                <div >_</div>
                             {% endif %}
                         {% endfor %}
                     </div>
@@ -269,7 +270,7 @@
                 <div style="width: 0.7em;">3</div>
                 <div style="width: 0.7em;">3</div>
             </div>
-            <div class="floor">
+            <div class="floor" onclick="selectPatternLine(this)" value="floor">
                 {% set floor_count = 0 %}
                 {% for color, number in player_data.floor.items() %}
                     {% if number > 0 %}
@@ -298,12 +299,12 @@
         <h1>Play area</h1>
         <p>Playing as: {{ player_name }}</p>
         <!-- form for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to.  -->
-        <form action="/game/{{ game_id }}/player/{{ player_name }}" method="POST">
+        <form id='moveForm'</form>>
             <label for="source">Source:</label>
             <select id="source" name="source">
-                <option value="market">Market {{ gamestate.market }}</option>
+                <option value="market">Market</option>
                 {% for factory in gamestate.factories %}
-                <option value="{{ loop.index }}">Factory {{ loop.index }} ({{ factory }})</option>
+                <option value="{{ loop.index }}">Factory {{ loop.index }}</option>
                 {% endfor %}
             </select>
 
@@ -333,14 +334,12 @@
         {% 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>
 
-        {% if move_status %}
-        <div>{{ move_status }}</div>
-        {% endif %}
     
     {% endif %}
 
 
-
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script>
     <script>
         console.log('Game ID: {{ game_id }}');
         console.log('Player Name: {{ player_name }}');
@@ -370,18 +369,46 @@
             //set the selected attribute to true
             sourceOption.selected = true;
             colorOption.selected = true;
-
         }
 
-        function select_pattern_line(pattern_line) {
-            pattern_line = pattern_line.getAttribute('pattern_line');
-            console.log('Selected pattern line: ' + pattern_line);
+        function selectPatternLine(pattern_line) {
+            //get the value of the pattern line element
+            value = pattern_line.getAttribute('value');
+            console.log('Selected pattern line: ' + pattern_line + ' with value: ' + value);
             var destinationElement = document.getElementById('destination');
-            var destinationOption = destinationElement.querySelector('option[value="' + pattern_line + '"]');
+            var destinationOption = destinationElement.querySelector('option[value="' + value + '"]');
             destinationOption.selected = true;
-
         }
 
+        // refresh the page by listening to websocket events
+        
+        game_id = '{{ game_id }}';
+        player_name = '{{ player_name }}';
+
+        var socket = io();
+
+        // send a message to the server in the message name space
+        socket.emit('join', {game_id: game_id});
+        
+        socket.addEventListener('move', function (event) {
+            console.log('Game update received: ' + event);
+            window.location.reload();
+        });
+        
+        // if we wana go over to using websocket entirely to send the move 
+        let form = document.querySelector('#moveForm');
+        form.addEventListener('submit', function(event) {
+            // Prevent the form from being submitted normally
+            event.preventDefault();
+            // Create a FormData object from the form
+            let formData = new FormData(form);
+            // Convert the FormData to a plain object
+            let data = {};
+            formData.forEach((value, key) => data[key] = value);
+            console.log(data);
+            socket.emit('move', {game_id: game_id, player_name, move: data});
+        });
+
     </script>
 
 
diff --git a/templates/home.html b/templates/home.html
index ed82c54..7bfd74d 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Ozai webui:home</title>
+    <title>Ozai:home</title>
+    <link rel="icon" type="image/png" href="/azul-flake.png">
     <style>
         body {
             display: flex;
diff --git a/templates/join.html b/templates/join.html
index e611001..af57aec 100644
--- a/templates/join.html
+++ b/templates/join.html
@@ -2,9 +2,21 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Ozai webui:Join Game</title>
+    <title>Ozai:Join</title>
+    <link rel="icon" type="image/png" href="/azul-flake.png">
     <style>
-        
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            padding: 10px;
+            background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; 
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+        }
     </style>
 </head>
 <body>
diff --git a/templates/join_game.html b/templates/join_game.html
index 11633e8..acd1135 100644
--- a/templates/join_game.html
+++ b/templates/join_game.html
@@ -12,6 +12,10 @@
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
         }
         
         ul {