diff --git a/frontend/static/js/api/game/Game.js b/frontend/static/js/api/game/Game.js index ba482c1..d55b390 100644 --- a/frontend/static/js/api/game/Game.js +++ b/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); diff --git a/frontend/static/js/api/game/GameConfig.js b/frontend/static/js/api/game/GameConfig.js index 8c0e9f4..ebf8116 100644 --- a/frontend/static/js/api/game/GameConfig.js +++ b/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; diff --git a/frontend/static/js/api/game/MyPlayer.js b/frontend/static/js/api/game/MyPlayer.js index 898dadd..715fe82 100644 --- a/frontend/static/js/api/game/MyPlayer.js +++ b/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 } \ No newline at end of file +export { MyPlayer } \ No newline at end of file diff --git a/frontend/static/js/api/game/Time.js b/frontend/static/js/api/game/Time.js new file mode 100644 index 0000000..da180f8 --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/frontend/static/js/views/GameView.js b/frontend/static/js/views/GameView.js index 71662e9..f66fa31 100644 --- a/frontend/static/js/views/GameView.js +++ b/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 */ ` diff --git a/games/config.py b/games/config.py index 9a710a5..6257a5c 100644 --- a/games/config.py +++ b/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 diff --git a/games/consumers.py b/games/consumers.py index 7d3cd5c..4969e6f 100644 --- a/games/consumers.py +++ b/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) @@ -30,11 +31,13 @@ class GameWebSocket(AsyncWebsocketConsumer): if (self.room is None): 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) diff --git a/games/objects/GameRoomManager.py b/games/objects/GameRoomManager.py index 26a43b8..01780ae 100644 --- a/games/objects/GameRoomManager.py +++ b/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):