game: core: use draw method instead draw_CLASSNAME

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

@@ -2,7 +2,46 @@
 
 class Ball
 {
-    constructor (position_x, position_y, velocity_x, velocity_y)
+    constructor(game)
+    {
+        this.game = game;
+        this.position_x = game.config.size_x / 2;
+        this.position_y = game.config.size_y / 2;
+        this.velocity_x = game.config.ball_speed_start;
+        this.velocity_y = game.config.ball_speed_start; 
+    }
+
+    _collision(old_pos_x, old_pos_y, new_pos_x, new_pos_y)
+    {
+
+        return 0;
+    }
+
+    draw(ctx)
+    {
+        ctx.rect(this.position_x, this.position_y, this.game.config.ball_size, this.game.config.ball_size);
+    }
+
+    render()
+    {
+        new_pos_x = this.position_x + this.velocity_x * this.game.time.deltaTime();
+        new_pos_y = this.position_y + this.velocity_y * this.game.time.deltaTime();
+
+        if (this._collision(this.position_x, this.position_y, new_pos_x, new_pos_y))
+        {
+            this.velocity_x = -this.velocity_x;
+            this.velocity_y = -this.velocity_y;
+            new_pos_x = this.position_x + this.velocity_x * this.game.time.deltaTime();
+            new_pos_y = this.position_y + this.velocity_y * this.game.time.deltaTime();
+        }
+        this.position_x = new_pos_x
+        this.position_y = new_pos_y
+
+        this.velocity_x = this.velocity_x + this.game.config.ball_speed_inc;
+        this.velocity_y = this.velocity_y + this.game.config.ball_speed_inc;
+    }
+
+    update (position_x, position_y, velocity_x, velocity_y)
     {
         this.position_x = position_x;
         this.position_y = position_y;

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

@@ -45,15 +45,60 @@ class Game
 
         this.players = [];
         response_data.players_id.forEach(player_id => {
-            let player = new Player(player_id, 0.5, 0, this);
+            let player = new Player(player_id, 0.5, 0, this, 0, 0, 0, 0);
             this.players.push(player);
         });
 
-        this.ball = new Ball(response_data.ball_pos_x, response_data.ball_pos_y, response_data.ball_vel_x, response_data.ball_vel_y);
+        this.ball = new Ball(this);
 
         return 0;
     }
 
+    draw_wall(ctx, stop_x, stop_y)
+    {
+        ctx.lineTo(stop_x, stop_y);
+    }
+
+    draw_sides(ctx, nb_sides)
+    {
+        let start_x,
+            start_y,
+            stop_x,
+            stop_y;
+        
+        let radius = Math.min(this.config.size_x, this.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.config.center_x + radius * Math.cos(angle);
+            stop_y = this.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.players[(i - 1) / 2].draw(ctx);
+            start_x = stop_x;
+            start_y = stop_y;
+        }
+    }
+
+    draw(ctx)
+    {
+        ctx.beginPath()
+
+        ctx.clearRect(0, 0, this.config.size_x, this.config.size_y);
+        this.draw_sides(ctx, (this.players_id.length) * 2);
+        this.ball.draw(ctx);
+
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 10;
+        ctx.stroke();
+    }
+
     _send(data)
     {
         if (this._socket === undefined)

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

@@ -3,9 +3,9 @@ import { Player } from "./Player.js";
 
 class MyPlayer extends Player
 {
-    constructor(client, pos, nb_goal, game, time)
+    constructor(client, pos, nb_goal, game, time, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y)
     {
-        super(client.me.id, pos, nb_goal, game);
+        super(client.me.id, pos, nb_goal, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y);
         this.time = time;
         this.client = client;
     }    

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

@@ -1,18 +1,51 @@
 
 class Player
 {
-    constructor(id, pos, nb_goal, game)
+    constructor(id, pos, nb_goal, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y)
     {
         this.id = id;
         this.pos = pos;
         this.nb_goal = nb_goal;
         this.game = game;
+
+        this.rail_start_x = rail_start_x;
+        this.rail_start_y = rail_start_y;
+        this.rail_stop_x = rail_stop_x;
+        this.rail_stop_y = rail_stop_y;
+
+        this.rail_size = Math.abs(this.rail_stop_x - this.rail_start_x) + Math.abs(this.rail_stop_y - this.rail_start_y) 
+        
+        this.paddle_size = this.rail_size * this.game.config.paddle_ratio;
+
+        this.diff_x = this.rail_stop_x - this.rail_start_x,
+        this.diff_y = this.rail_stop_y - this.rail_start_y;
     }
 
     update_pos(new_position, time)
     {
         this.pos = new_position;
     }
+
+    draw(ctx)
+    {        
+        let paddle_pos_x = this.rail_start_x + this.diff_x * this.pos,
+            paddle_pos_y = this.rail_start_y + this.diff_y * this.pos;
+        
+        console.log(this)
+
+        let start_x = paddle_pos_x - (this.diff_x * (this.paddle_size / 2 / this.rail_size)),
+            start_y = paddle_pos_y - (this.diff_y * (this.paddle_size / 2 / this.rail_size)),
+            stop_x = paddle_pos_x + (this.diff_x * (this.paddle_size / 2 / this.rail_size)),
+            stop_y = paddle_pos_y + (this.diff_y * (this.paddle_size / 2 / this.rail_size));
+
+        console.log(start_x, stop_x);
+        console.log(start_y, stop_y)
+
+        ctx.moveTo(start_x, start_y);
+        ctx.lineTo(stop_x, stop_y);
+
+        ctx.moveTo(this.rail_stop_x, this.rail_stop_y);
+    }
 }
 
 export { Player }

frontend/static/js/views/GameView.js

@@ -3,6 +3,7 @@ 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";
+import { Ball } from "../api/game/Ball.js";
 
 export default class extends AbstractView
 {
@@ -11,38 +12,10 @@ export default class extends AbstractView
         super(params, "Game");
         this.game = new Game(client, params.id);
         this.keys_pressed = [];
-        this.time = new Time()
+        this.time = new Time();
         this.my_player = undefined;
     }
 
-    draw_wall(ctx, stop_x, stop_y)
-    {
-        ctx.lineTo(stop_x, stop_y);
-    }
-
-    draw_paddle(ctx, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, pos)
-    {
-        let rail_size = Math.abs(rail_stop_x - rail_start_x) + Math.abs(rail_stop_y - rail_start_y) 
-        
-        let paddle_size = rail_size * this.game.config.paddle_ratio;
-
-        let diff_x = rail_stop_x - rail_start_x,
-            diff_y = rail_stop_y - rail_start_y;
-        
-        let paddle_pos_x = rail_start_x + diff_x * pos,
-            paddle_pos_y = rail_start_y + diff_y * pos;
-        
-        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));
-
-        ctx.moveTo(start_x, start_y);
-        ctx.lineTo(stop_x, stop_y);
-
-        ctx.moveTo(rail_stop_x, rail_stop_y);
-    }
-
 	keyStretchHandler(event)
     {
 		const idx = this.keys_pressed.indexOf(event.key);
@@ -56,51 +29,11 @@ export default class extends AbstractView
 			this.keys_pressed.push(event.key);
 	}
 
-    draw_ball(ctx, x, y)
+    draw()
-    {
-        ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size);
-    }
-
-    draw_sides(ctx, nb_sides)
-    {
-        let start_x,
-            start_y,
-            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 + 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, this.game.players[(i - 1) / 2].pos);
-            start_x = stop_x;
-            start_y = stop_y;
-        }
-    }
-
-    draw_game()
     {
         let ctx = document.getElementById('canva').getContext('2d');
 
-        ctx.beginPath()
+        this.game.draw(ctx);
-
-        ctx.clearRect(0, 0, this.game.config.size_x, this.game.config.size_y);
-        this.draw_sides(ctx, (this.game.players_id.length) * 2);
-        this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y);
-
-        ctx.strokeStyle = "#000000";
-        ctx.lineWidth = 10;
-        ctx.stroke();
     }
 
     render_game()
@@ -108,7 +41,7 @@ export default class extends AbstractView
         let loop_id = setInterval(() => {
             if (this.my_player)
                 this.my_player.update_paddle(this.keys_pressed);
-            this.draw_game();
+            this.draw();
             this.time.new_frame();
             //clearInterval(loop_id);
         // 1 sec  fps