game: add: PADDLE CAN MOVE

frontend/static/js/views/GameView.js

@@ -1,13 +1,18 @@
 import { client } from "../index.js";
 import { Game } from "../api/game/Game.js";
 import AbstractView from "./abstracts/AbstractView.js";
+import { Time } from "../api/game/Time.js";
+import { MyPlayer } from "../api/game/MyPlayer.js";
 
 export default class extends AbstractView
 {
     constructor(params)
 	{
         super(params, "Game");
-		this.game = new Game(client, params.id);
+        this.game = new Game(client, params.id);
+        this.keys_pressed = [];
+        this.time = new Time()
+        this.my_player = undefined;
     }
 
     draw_wall(ctx, stop_x, stop_y)
@@ -24,25 +29,32 @@ export default class extends AbstractView
         let diff_x = rail_stop_x - rail_start_x,
             diff_y = rail_stop_y - rail_start_y;
         
-        let pos_x = rail_start_x + diff_x * pos,
-            pos_y = rail_start_y + diff_y * pos;
+        let paddle_pos_x = rail_start_x + diff_x * pos,
+            paddle_pos_y = rail_start_y + diff_y * pos;
         
-        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));
+        let start_x = paddle_pos_x - (diff_x * (paddle_size / 2 / rail_size)),
+            start_y = paddle_pos_y - (diff_y * (paddle_size / 2 / rail_size)),
+            stop_x = paddle_pos_x + (diff_x * (paddle_size / 2 / rail_size)),
+            stop_y = paddle_pos_y + (diff_y * (paddle_size / 2 / rail_size));
 
-        console.log(start_x, start_y, stop_x, stop_y);
         ctx.moveTo(start_x, start_y);
         ctx.lineTo(stop_x, stop_y);
 
         ctx.moveTo(rail_stop_x, rail_stop_y);
     }
 
-    _down()
+	keyStretchHandler(event)
     {
-        pl
-    }
+		const idx = this.keys_pressed.indexOf(event.key);
+		if (idx != -1)
+			this.keys_pressed.splice(idx, 1);
+	}
+
+    keyPressHandler(event)
+    {
+		if (!this.keys_pressed.includes(event.key))
+			this.keys_pressed.push(event.key);
+	}
 
     draw_ball(ctx, x, y)
     {
@@ -56,20 +68,21 @@ export default class extends AbstractView
             stop_x,
             stop_y;
         
+        let radius = Math.min(this.game.config.size_x, this.game.config.size_y) / 2 - 10; 
+
         for (let i = 0; i <= nb_sides; i++)
         {
             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);
+            stop_x = this.game.config.center_x + radius * Math.cos(angle);
+            stop_y = this.game.config.center_y + radius * 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
-                this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, 0.5);
-
+                this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, this.game.players[(i - 1) / 2].pos);
             start_x = stop_x;
             start_y = stop_y;
         }
@@ -81,6 +94,7 @@ export default class extends AbstractView
 
         ctx.beginPath()
 
+        ctx.clearRect(0, 0, this.game.config.size_x, this.game.config.size_y);
         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);
 
@@ -91,12 +105,25 @@ export default class extends AbstractView
 
     render_game()
     {
-        while (true)
-        {
+        let loop_id = setInterval(() => {
+            if (this.my_player)
+                this.my_player.update_paddle(this.keys_pressed);
             this.draw_game();
-            // TODO remove the line below
-            break;
-        }
+            this.time.new_frame()
+            //clearInterval(loop_id);
+        }, 1000 / 50);
+    }
+
+    register_key()
+    {
+        document.addEventListener('keydown', this.keyPressHandler.bind(this));
+		document.addEventListener('keyup', this.keyStretchHandler.bind(this));
+    }
+
+    unregister_key()
+    {
+        document.removeEventListener('keydown', this.keyPressHandler);
+		document.removeEventListener('keyup', this.keyStretchHandler);
     }
 
     start_game()
@@ -110,18 +137,17 @@ export default class extends AbstractView
         document.getElementById("app").appendChild(canva);
 
         this.game.join()
+
+        this.register_key()
+
         this.render_game();
     }
 
-    async update_game_state()
+    update_game_state()
     {
-        await this.game.init();
-
         document.getElementById("game-state").innerText = this.game.state;
 
-        //TODO invert line
-        //if (this.game.started === true && this.game.finished === false)
-        if (true)
+        if (this.game.started === true && this.game.finished === false)
             this.start_game();
     }
 
@@ -132,9 +158,22 @@ export default class extends AbstractView
         if (error_code)
             return error_code;
 
-        await this.update_game_state();
+        let index = this.game.players.findIndex((player) => player.id);
+        if (index !== -1)
+        {
+            let my_player = this.game.players[index];
+            this.my_player = new MyPlayer(client, my_player.pos, my_player.nb_goal, my_player.game, this.time);
+            this.game.players[index] = this.my_player;
+        }
+
+        this.update_game_state();
 	}
 
+    async leavePage()
+    {
+        this.unregister_key();
+    }
+
     async getHtml()
 	{
         return /* HTML */ `