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);
         });
 
@@ -54,13 +54,21 @@ class Game
     }
 
     _send(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 }

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 }

frontend/static/js/views/GameView.js

@@ -1,6 +1,8 @@
 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
 {
@@ -8,6 +10,9 @@ export default class extends AbstractView
 	{
         super(params, "Game");
         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,24 +29,31 @@ 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,7 +158,20 @@ 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()

games/config.py

@@ -1,8 +1,8 @@
-PADDLE_SPEED_PER_SECOND_MAX = 0.5
-PADDLE_RATIO = 0.1
+PADDLE_SPEED_PER_SECOND_MAX = 0.2
+PADDLE_RATIO = 0.3
 
-MAP_SIZE_X = 900
-MAP_SIZE_Y = 900
+MAP_SIZE_X = 700
+MAP_SIZE_Y = 700
 
 WALL_RATIO = 1
 

games/consumers.py

@@ -1,14 +1,15 @@
-from channels.generic.websocket import AsyncWebsocketConsumer
+from channels.generic.websocket import WebsocketConsumer
 
 from django.contrib.auth.models import User
 
 import json
 
 from .objects.GameRoomManager import GameRoomManager
+from .objects.GameMember import GameMember
 
 game_room_manager: GameRoomManager = GameRoomManager()
 
-class GameWebSocket(AsyncWebsocketConsumer):
+class GameWebSocket(WebsocketConsumer):
 
 	def __init__(self, *args, **kwargs):
 		super().__init__(*args, **kwargs)
@@ -31,10 +32,12 @@ class GameWebSocket(AsyncWebsocketConsumer):
 			self.send("Game not found.")
 			self.disconnect(1017)
    
+		self.member = GameMember(self.user.pk, self)	
+ 
 		self.room.append(self.member)
 
 	def receive(self, text_data: str = None, bytes_data: bytes = None):
-		self.member.receive(text_data, bytes_data)
+		self.member.receive(text_data)
 
 	def disconnect(self, close_code):
 		member = self.room.get_member_by_socket(self)

games/objects/GameRoomManager.py

@@ -1,7 +1,7 @@
 from transcendence.abstract.AbstractRoomManager import AbstractRoomManager
 
 from ..models import GameModel
-from . import GameRoom
+from .GameRoom import GameRoom
 
 class GameRoomManager(AbstractRoomManager):