game: add: PADDLE CAN MOVE

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

@@ -1,5 +1,6 @@
 import { Ball } from "./Ball.js";
 import { GameConfig } from "./GameConfig.js"
+import { MyPlayer } from "./MyPlayer.js";
 import { Player } from "./Player.js";
 
 class Game
@@ -14,6 +15,7 @@ class Game
 		 */
         this.client = client;
         this.id = id;
+        this.keys_pressed = [];
     }
 
     async init()
@@ -31,9 +33,7 @@ class Game
         this.finished = response_data.finished;
         this.winner_id = this.finished ? response_data.winner_id : undefined;
 
-        //TODO invert line
-        if (false)
-        //if (this.finished === true || this.started === false)
+        if (this.finished === true || this.started === false)
             return 0;
 
         this.config = new GameConfig(this.client);
@@ -43,8 +43,8 @@ class Game
             return ret;
 
         this.players = [];
-        response_data.players.forEach(player_data => {
-            let player = new Player(player_data.id, player_data.pos, player_data.nb_goal);
+        response_data.players_id.forEach(player_id => {
+            let player = new Player(player_id, 0.5, 0, this);
             this.players.push(player);
         });
 
@@ -55,12 +55,20 @@ class Game
 
     _send(data)
     {
-        this._socket.send(JSON.stringify(data));
+        if (this._socket === undefined)
+            return;
+        const loop_id = setInterval(() => {
+            if (this._socket.readyState === WebSocket.OPEN)
+            {
+                this._socket.send(JSON.stringify(data));
+                clearInterval(loop_id);
+            }
+        }, 500);
     }
 
-    _send_paddle()
+    _send_paddle(my_player)
     {
-        this._send({"detail": "update_my_paddle_pos", "pos": this.players.find(player => player.id === this.client.me.id).pos});        
+        this._send({"detail": "update_my_paddle_pos", "position": my_player.pos});        
     }
 
     _update_paddles(data)
@@ -91,7 +99,7 @@ class Game
         if (data.detail === "update_paddles")
             this._update_paddles(data);
         else if (data.detail === "update_ball")
-            this._
+            this._update_ball(data);
     }
 
     join()
@@ -104,7 +112,7 @@ class Game
 
         let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/games/${this.id}`;
 
-        this._socket = WebSocket(url);
+        this._socket = new WebSocket(url);
 
         this._socket.onmessage = (event) => {
 			const data = JSON.parse(event.data);

frontend/static/js/api/game/GameConfig.js

@@ -27,6 +27,7 @@ class GameConfig
         this.center_y = this.size_y / 2;
 
         this.paddle_ratio = response_data.PADDLE_RATIO;
+        this.paddle_speed_per_second_max = response_data.PADDLE_SPEED_PER_SECOND_MAX;
         this.wall_ratio = response_data.WALL_RATIO;
 
         this.ball_speed_inc = response_data.BALL_SPEED_INC;

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

@@ -1,9 +1,30 @@
-import { Player } from "./Player";
+import { Player } from "./Player.js";
 
 
 class MyPlayer extends Player
 {
-    
+    constructor(client, pos, nb_goal, game, time)
+    {
+        super(client.me.id, pos, nb_goal, game);
+        this.time = time;
+        this.client = client;
+    }    
+
+    update_paddle(keys_pressed)
+    {
+        let new_pos = this.pos;
+
+        if (keys_pressed.includes("s"))
+            new_pos -= this.game.config.paddle_speed_per_second_max * this.time.deltaTimeSecond();
+        if (keys_pressed.includes("w"))
+            new_pos += this.game.config.paddle_speed_per_second_max * this.time.deltaTimeSecond();
+        new_pos = Math.max(0 + this.game.config.paddle_ratio / 2, new_pos);
+        new_pos = Math.min(1 - this.game.config.paddle_ratio / 2, new_pos);
+
+        this.pos = new_pos;
+
+        this.game._send_paddle(this);
+    }
 }
 
-export {MyPlayer }
+export { MyPlayer }

frontend/static/js/api/game/Time.js

@@ -0,0 +1,33 @@
+
+
+class Time
+{
+    constructor()
+    {
+        this._last_frame = undefined;
+        this._current_frame = undefined;
+    }
+
+    deltaTime()
+    {
+        return (this._current_frame - this._last_frame) !== NaN ? this._current_frame - this._last_frame : 0; 
+    }
+
+    deltaTimeSecond()
+    {
+        return this.deltaTime() / 1000;
+    }
+
+    get_fps()
+    {
+        return 1 / this.deltaTimeSecond();
+    }
+
+    new_frame()
+    {
+        this._last_frame = this._current_frame;
+        this._current_frame = Date.now();
+    }
+}
+
+export { Time }