game: advent to online

frontend/static/js/api/game/Ball.js

@@ -0,0 +1,14 @@
+
+
+class Ball
+{
+    constructor (position_x, position_y, velocity_x, velocity_y)
+    {
+        this.position_x = position_x;
+        this.position_y = position_y;
+        this.velocity_x = velocity_x;
+        this.velocity_y = velocity_y; 
+    }
+}
+
+export { Ball }

frontend/static/js/api/game/Game.js

@@ -1,4 +1,6 @@
+import { Ball } from "./Ball.js";
 import { GameConfig } from "./GameConfig.js"
+import { Player } from "./Player.js";
 
 class Game
 {
@@ -37,16 +39,84 @@ class Game
         this.config = new GameConfig(this.client);
         
         let ret = await this.config.init();
-        if (ret)
+        if (ret !== 0)
             return ret;
 
-        this.players = response_data.players;
+        this.players = [];
+        response_data.players.forEach(player_data => {
+            let player = new Player(player_data.id, player_data.pos, player_data.nb_goal);
+            this.players.push(player);
+        });
 
-        this.ball_pos_x = this.config.ball_spawn_x;
-        this.ball_pos_y = this.config.ball_spawn_y;
+        this.ball = new Ball(response_data.ball_pos_x, response_data.ball_pos_y, response_data.ball_vel_x, response_data.ball_vel_y);
 
         return 0;
     }
+
+    _send(data)
+    {
+        this._socket.send(JSON.stringify(data));
+    }
+
+    _send_paddle()
+    {
+        this._send({"detail": "update_my_paddle_pos", "pos": this.players.find(player => player.id === this.client.me.id).pos});        
+    }
+
+    _update_paddles(data)
+    {
+        data.forEach(player_data => {
+            let player = this.players.find(player_data2 => player_data2.id === player_data)
+            
+            if (player === null)
+            {
+                console.error("error 1000: je ne comprends pas");
+                return;
+            }
+
+            player.pos = player_data.pos;
+        });
+    }
+
+    _update_ball(data)
+    {
+        this.ball.position_x = data.position_x;
+        this.ball.position_y = data.position_y;
+        this.ball.velocity_x = data.velocity_x;
+        this.ball.velocity_y = data.velocity_y; 
+    }
+
+    _update(data)
+    {
+        if (data.detail === "update_paddles")
+            this._update_paddles(data);
+        else if (data.detail === "update_ball")
+            this._
+    }
+
+    join()
+    {
+        if (this.started !== true || this.finished === true)
+        {
+            console.error("The Game is not currently ongoing.");
+            return;
+        }
+
+        let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/games/${this.id}`;
+
+        this._socket = WebSocket(url);
+
+        this._socket.onmessage = (event) => {
+			const data = JSON.parse(event.data);
+			this._update(data);
+		};
+    }
+
+    leave()
+    {
+        this._socket.close();
+        this._socket = undefined;
+    }
 }
 
 export { Game }

frontend/static/js/api/game/MyPlayer.js

@@ -0,0 +1,7 @@
+import { Player } from "./Player";
+
+
+class MyPlayer extends Player
+{
+    
+}

frontend/static/js/api/game/Player.js

@@ -0,0 +1,12 @@
+
+class Player
+{
+    constructor(id, pos, nb_goal)
+    {
+        this.id = id;
+        this.pos = pos;
+        this.nb_goal = nb_goal;
+    }
+}
+
+export { Player }

frontend/static/js/views/GameView.js

@@ -21,22 +21,16 @@ export default class extends AbstractView
         
         let paddle_size = rail_size * this.game.config.paddle_ratio;
 
-        console.log(paddle_size)
-
         let diff_x = rail_stop_x - rail_start_x,
             diff_y = rail_stop_y - rail_start_y;
         
-        console.log("diff", diff_x, diff_y)
-
         let pos_x = rail_start_x + diff_x * pos,
             pos_y = rail_start_y + diff_y * pos;
         
-        console.log("pos", pos_x, pos_y)
-
-        let start_x = pos_x - paddle_size * (diff_x * (paddle_size / rail_size)),
-            start_y = pos_y - paddle_size * (diff_y * (paddle_size / rail_size)),
-            stop_x = pos_x + paddle_size * (diff_x * (paddle_size / rail_size)),
-            stop_y = pos_y + paddle_size * (diff_y * (paddle_size / rail_size));
+        let start_x = pos_x - (diff_x * (paddle_size / rail_size)),
+            start_y = pos_y - (diff_y * (paddle_size / rail_size)),
+            stop_x = pos_x + (diff_x * (paddle_size / rail_size)),
+            stop_y = pos_y + (diff_y * (paddle_size / rail_size));
 
         console.log(start_x, start_y, stop_x, stop_y);
         ctx.moveTo(start_x, start_y);
@@ -45,6 +39,11 @@ export default class extends AbstractView
         ctx.moveTo(rail_stop_x, rail_stop_y);
     }
 
+    _down()
+    {
+        pl
+    }
+
     draw_ball(ctx, x, y)
     {
         ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size);
@@ -59,14 +58,13 @@ export default class extends AbstractView
         
         for (let i = 0; i <= nb_sides; i++)
         {
-            let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI / 4);
+            let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI * 3 / 4);
 
             stop_x = this.game.config.center_x + 400 * Math.cos(angle);
             stop_y = this.game.config.center_y + 400 * Math.sin(angle);
 
             if (i == 0)
                 ctx.moveTo(stop_x, start_y);
-
             if (i % 2 == 0)
                 this.draw_wall(ctx, stop_x, stop_y);
             else
@@ -83,11 +81,11 @@ export default class extends AbstractView
 
         ctx.beginPath()
 
-        this.draw_sides(ctx, (this.game.players_id.length +10) * 2);
+        this.draw_sides(ctx, (this.game.players_id.length +0) * 2);
         this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y);
 
         ctx.strokeStyle = "#000000";
-        ctx.lineWidth = 4;
+        ctx.lineWidth = 10;
         ctx.stroke();
     }
 
@@ -96,6 +94,7 @@ export default class extends AbstractView
         while (true)
         {
             this.draw_game();
+            // TODO remove the line below
             break;
         }
     }
@@ -110,6 +109,7 @@ export default class extends AbstractView
 
         document.getElementById("app").appendChild(canva);
 
+        this.game.join()
         this.render_game();
     }