starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

game: add: class: point and segment, add: type docstring

Browse Source
This commit is contained in:
starnakin
2024-01-21 00:33:30 +01:00
parent 6f8768e149
commit 8da7e09af7
19 changed files with 478 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/static/js/api/game/Ball.js
View File

@ -1,22 +1,45 @@
import { Game } from "./Game.js";
import { Point } from "./Point.js";
class Ball
{
/**
*
* @param {Game} game
* @param {Number} position_x
* @param {Number} position_y
* @param {Number} velocity_x
* @param {Number} velocity_y
*/
constructor(game, position_x, position_y, velocity_x, velocity_y)
{
/**
* @type {Game}
*/
this.game = game;
/**
* @type {Number}
*/
this.position_x = position_x;
/**
* @type {Number}
*/
this.position_y = position_y;
/**
* @type {Number}
*/
this.velocity_x = velocity_x;
/**
* @type {Number}
*/
this.velocity_y = velocity_y;
}
_collision(old_pos_x, old_pos_y, new_pos_x, new_pos_y)
{
return 0;
}
/**
*
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx)
{
ctx.rect(this.position_x, this.position_y, this.game.config.ball_size, this.game.config.ball_size);
@ -24,8 +47,14 @@ class Ball
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();
/**
* @type {Number}
*/
let new_pos_x = this.position_x + this.velocity_x * this.game.time.deltaTime();
/**
* @type {Number}
*/
let new_pos_y = position_y + this.velocity_y * this.game.time.deltaTime();
if (this._collision(this.position_x, this.position_y, new_pos_x, new_pos_y))
{

36
frontend/static/js/api/game/Game.js
View File

@ -1,7 +1,6 @@
import { sleep } from "../../utils/sleep.js";
import { Ball } from "./Ball.js";
import { GameConfig } from "./GameConfig.js"
import { MyPlayer } from "./MyPlayer.js";
import { Player } from "./Player.js";
import { Time } from "./Time.js";
import { Wall } from "./Wall.js";
@ -20,6 +19,10 @@ class Game
this.id = id;
}
/**
*
* @returns {Number}
*/
async init()
{
let response = await this.client._get(`/api/games/${this.id}`);
@ -35,7 +38,7 @@ class Game
this.finished = response_data.finished;
this.winner_id = this.finished ? response_data.winner_id : undefined;
if (this.finished === true || this.started === false)
if (this.finished === true)
return 0;
this.config = new GameConfig(this.client);
@ -51,6 +54,10 @@ class Game
return 0;
}
/**
*
* @param {CanvasRenderingContext2D} ctx
*/
draw_sides(ctx)
{
this.walls.forEach(wall => {
@ -61,6 +68,10 @@ class Game
});
}
/**
*
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx)
{
ctx.clearRect(0, 0, this.config.size_x, this.config.size_y);
@ -91,6 +102,7 @@ class Game
_receive_player_join(player_data)
{
console.log(player_data)
let index = this.players.indexOf((player) => player.id === player_data.user_id);
this.players[index].is_connected = true;
@ -126,7 +138,6 @@ class Game
_receive(data)
{
console.log(data)
if (data.detail === "update_paddle")
this._receive_update_paddle(data);
else if (data.detail === "update_ball")
@ -147,26 +158,13 @@ class Game
this.walls = [];
const walls_data = data.walls;
walls_data.forEach((wall_data) => {
this.walls.push(new Wall(wall_data.rail_start_x,
wall_data.rail_start_y,
wall_data.rail_stop_x,
wall_data.rail_stop_y));
this.walls.push(new Wall().from_json(wall_data));
});
this.players = []
const players_data = data.players;
players_data.forEach((player_data) => {
this.players.push(new Player(player_data.user_id,
this,
player_data.rail_start_x,
player_data.rail_start_y,
player_data.rail_stop_x,
player_data.rail_stop_y,
player_data.nb_goal,
player_data.position.position,
player_data.is_connected,
));
this.players.push(new Player(this).from_json(player_data));
});
this._inited = true;
@ -180,7 +178,7 @@ class Game
async join()
{
if (this.started !== true || this.finished === true)
if (this.finished === true)
{
console.error("The Game is not currently ongoing.");
return;

37
frontend/static/js/api/game/GameConfig.js
View File

@ -20,21 +20,56 @@ class GameConfig
let response_data = await response.json();
/**
* @type {Number}
*/
this.size_x = response_data.MAP_SIZE_X;
/**
* @type {Number}
*/
this.size_y = response_data.MAP_SIZE_Y;
/**
* @type {Number}
*/
this.center_x = this.size_x / 2;
/**
* @type {Number}
*/
this.center_y = this.size_y / 2;
/**
* @type {Number}
*/
this.paddle_ratio = response_data.PADDLE_RATIO;
/**
* @type {Number}
*/
this.paddle_speed_per_second_max = response_data.PADDLE_SPEED_PER_SECOND_MAX;
/**
* @type {Number}
*/
this.wall_ratio = response_data.WALL_RATIO;
/**
* @type {Number}
*/
this.ball_speed_inc = response_data.BALL_SPEED_INC;
/**
* @type {Number}
*/
this.ball_speed_start = response_data.BALL_SPEED_START;
/**
* @type {Number}
*/
this.ball_size = response_data.BALL_SIZE;
/**
* @type {Number}
*/
this.ball_spawn_x = this.center_x;
/**
* @type {Number}
*/
this.ball_spawn_y = this.center_y;
return 0;

41
frontend/static/js/api/game/MyPlayer.js
View File

@ -1,17 +1,35 @@
import { Player } from "./Player.js";
import { Client } from "../client.js"
import { Game } from "./Game.js";
import { Segment } from "./Segment.js";
class MyPlayer extends Player
{
constructor(client, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, nb_goal, positon)
/**
*
* @param {Client} client
* @param {Game} game
* @param {Segment} rail
* @param {Number} nb_goal
* @param {Number} position
*/
constructor(client, game, rail, nb_goal, position)
{
super(client.me.id, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, nb_goal, positon, true);
super(game, client.me.id, rail, nb_goal, position, true);
/**
* @type {Client}
*/
this.client = client;
}
/**
*
* @param {[string]} keys_pressed
* @returns
*/
update_paddle(keys_pressed)
{
let new_pos = this.positon;
let new_pos = this.position;
if (keys_pressed.includes("s"))
new_pos -= this.game.config.paddle_speed_per_second_max * this.game.time.deltaTimeSecond() * 1.0;
@ -20,14 +38,19 @@ class MyPlayer extends Player
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);
if (this.positon === new_pos)
if (this.position === new_pos)
return;
this.positon = new_pos;
this.position = new_pos;
this.game._send_paddle_position(this.positon, this.game.time._current_frame);
this.game._send_paddle_position(this.position, this.game.time._current_frame);
}
/**
*
* @param {Number} new_position
* @param {Number} time
*/
update_pos(new_position, time)
{
let position_verified = new_position;
@ -36,14 +59,14 @@ class MyPlayer extends Player
let sign = this - new_position >= 0 ? 1 : -1;
let distance = Math.abs(this.positon - new_position);
let distance = Math.abs(this.position - new_position);
let distance_max = time_diff * this.game.config.paddle_speed_per_second_max;
if (distance > distance_max)
position_verified = distance_max * sign;
this.positon = position_verified;
this.position = position_verified;
}
}

145
frontend/static/js/api/game/Player.js
View File

@ -1,52 +1,153 @@
import { Game } from "./Game.js";
import { Point } from "./Point.js";
import { Segment } from "./Segment.js";
class Player
{
constructor(id, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, nb_goal, positon, is_connected)
/**
*
* @param {Number} id
* @param {Game} game
* @param {Segment} rail
* @param {Number} nb_goal
* @param {Number} position
* @param {Boolean} is_connected
*/
constructor(game, id, rail, nb_goal, position, is_connected)
{
this.is_connected = is_connected;
this.id = id;
this.positon = positon;
this.nb_goal = nb_goal;
/**
* @type {Game}
*/
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;
/**
* @type {Boolean}
*/
this.is_connected = is_connected;
this.rail_size = Math.abs(this.rail_stop_x - this.rail_start_x) + Math.abs(this.rail_stop_y - this.rail_start_y)
/**
* @type {Number}
*/
this.id = id;
/**
* @type {Number}
*/
this.position = position;
/**
* @type {Number}
*/
this.nb_goal = nb_goal;
/**
* @type {Segment}
*/
this.rail = rail === undefined ? new Segment() : rail;
/**
* @type {Number}
*/
this.rail_size = Math.abs(this.rail.stop.x - this.rail.start.x) + Math.abs(this.rail.stop.y - this.rail.start.y);
/**
* @type {Number}
*/
this.paddle_size = this.rail_size * this.game.config.paddle_ratio;
/**
* @type {Number}
*/
this.diff_x = this.rail.stop.x - this.rail.start.x;
this.diff_x = this.rail_stop_x - this.rail_start_x,
this.diff_y = this.rail_stop_y - this.rail_start_y;
/**
* @type {Number}
*/
this.diff_y = this.rail.stop.y - this.rail.start.y;
}
/**
*
* @param {Number} new_position
*/
update_pos(new_position, time)
{
this.positon = new_position;
this.position = new_position;
}
/**
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx)
{
if (this.is_connected === false)
{
ctx.moveTo(this.rail_start_x, this.rail_start_y);
ctx.lineTo(this.rail_stop_x, this.rail_stop_y);
ctx.moveTo(this.rail.start.x, this.rail.start.y);
ctx.lineTo(this.rail.stop.x, this.rail.stop.y);
return;
}
let paddle_pos_x = this.rail_start_x + this.diff_x * this.positon,
paddle_pos_y = this.rail_start_y + this.diff_y * this.positon;
let paddle_pos = new Point(this.rail.start.x + this.diff_x * this.position,
this.rail.start.y + this.diff_y * this.position);
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));
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));
ctx.moveTo(start_x, start_y);
ctx.lineTo(stop_x, stop_y);
}
from_json(data)
{
/**
* @type {Boolean}
*/
this.is_connected = data.is_connected;
/**
* @type {Number}
*/
this.id = data.user_id;
/**
* @type {Number}
*/
this.position = data.position.position ;
/**
* @type {Number}
*/
this.nb_goal = data.nb_goal;
/**
* @type {Segment}
*/
this.rail = this.rail.from_json(data.rail);
/**
* @type {Number}
*/
this.rail_size = Math.abs(this.rail.stop.x - this.rail.start.x) + Math.abs(this.rail.stop.y - this.rail.start.y);
/**
* @type {Number}
*/
this.paddle_size = this.rail_size * this.game.config.paddle_ratio;
/**
* @type {Number}
*/
this.diff_x = this.rail.stop.x - this.rail.start.x;
/**
* @type {Number}
*/
this.diff_y = this.rail.stop.y - this.rail.start.y;
return this
}
}
export { Player }

30
frontend/static/js/api/game/Point.js Normal file
View File

@ -0,0 +1,30 @@
class Point
{
/**
* @param {Number} x
* @param {Number} y
*/
constructor(x, y)
{
/**
* @type {Number}
*/
this.x = x;
/**
* @type {Number}
*/
this.y = y;
}
from_json(data)
{
this.x = data.x
this.y = data.y
return this
}
}
export { Point }

33
frontend/static/js/api/game/Segment.js Normal file
View File

@ -0,0 +1,33 @@
import { Point } from "./Point.js"
class Segment
{
/**
* @param {Point} start
* @param {Point} stop
*/
constructor(start, stop)
{
this.start = start === undefined ? new Point() : start;
this.stop = stop === undefined ? new Point() : stop;
}
/**
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx)
{
ctx.moveTo(this.start.x, this.start.y);
ctx.lineTo(this.stop.x, this.stop.y);
}
from_json(data)
{
this.start = this.start.from_json(data.start);
this.stop = this.stop.from_json(data.stop);
return this;
}
}
export { Segment }

7
frontend/static/js/api/game/Time.js
View File

@ -4,7 +4,14 @@ class Time
{
constructor()
{
/**
* @type {Number}
*/
this._last_frame = undefined;
/**
* @type {Number}
*/
this._current_frame = undefined;
}

25
frontend/static/js/api/game/Wall.js
View File

@ -1,19 +1,28 @@
import { Segment } from "./Segment.js";
class Wall
{
constructor (rail_start_x, rail_start_y, rail_stop_x, rail_stop_y)
/**
* @param {Segment} start
*/
constructor (rail)
{
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;
/**
* @type {Segment}
*/
this.rail = rail === undefined ? new Segment() : rail;
}
draw(ctx)
{
ctx.moveTo(this.rail_start_x, this.rail_start_y);
ctx.lineTo(this.rail_stop_x, this.rail_stop_y);
this.rail.draw(ctx);
}
from_json(data)
{
this.rail = this.rail.from_json(data.rail)
return this
}
}

24
frontend/static/js/views/GameView.js
View File

@ -1,9 +1,7 @@
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";
import { Ball } from "../api/game/Ball.js";
export default class extends AbstractView
{
@ -35,6 +33,9 @@ export default class extends AbstractView
if (canva === null)
return 1;
/**
* @type {CanvasRenderingContext2D}
*/
let ctx = canva.getContext('2d');
ctx.beginPath();
@ -71,7 +72,7 @@ export default class extends AbstractView
document.removeEventListener('keyup', this.keyStretchHandler);
}
async start_game()
async join_game()
{
await this.game.join()
@ -89,16 +90,13 @@ export default class extends AbstractView
let my_player = this.game.players[index];
this.my_player = new MyPlayer(client,
this.game,
my_player.rail_start_x,
my_player.rail_start_y,
my_player.rail_stop_x,
my_player.rail_stop_y,
my_player.nb_goal,
my_player.positon,
my_player.rail,
my_player.nb_gool,
my_player.position,
);
this.game.players[index] = this.my_player;
}
this.register_key()
this.render_game();
@ -108,8 +106,8 @@ export default class extends AbstractView
{
document.getElementById("game-state").innerText = this.game.state;
if (this.game.started === true && this.game.finished === false)
await this.start_game();
if (this.game.finished === false)
await this.join_game();
}
async postInit()
@ -124,7 +122,7 @@ export default class extends AbstractView
async leavePage()
{
if (this.game.started === true && this.game.finished === false)
if (this.game.finished === false)
{
this.game.leave();
this.game = undefined;