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

game: add: goal statistic

Browse Source
This commit is contained in:
starnakin
2024-02-26 17:11:31 +01:00
committed by AdrienLSH
parent d961130de3
commit b9de0f3619
15 changed files with 335 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,10 @@ import { client, reloadView } from "../index.js";
import { Game } from "../api/game/Game.js";
import AbstractView from "./abstracts/AbstractView.js";
import { MyPlayer } from "../api/game/MyPlayer.js";
import { Player } from "../api/game/Player.js";
import { lang } from "../index.js";
import "https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"
import { get_labels, transformData } from "../utils/graph.js";
export default class extends AbstractView
{
@ -14,12 +17,6 @@ export default class extends AbstractView
this.my_player = undefined;
}
on_finish(data)
{
console.log(data)
reloadView()
}
keyReleaseHandler(event)
{
const idx = this.keys_pressed.indexOf(event.key);
@ -55,11 +52,21 @@ export default class extends AbstractView
}
/**
* @param {Object} data
* @param {Player} player
* @returns { Promise }
*/
on_goal(data)
async on_goal(player)
{
document.getElementById(`goal-${data.player}`).innerText = data.nb_goal;
document.getElementById(`goal-${player.id}`).innerText = player.score.length;
}
/**
* @param {*} data
* @returns { Promise }
*/
async on_finish(data)
{
await reloadView();
}
render()
@ -67,8 +74,7 @@ export default class extends AbstractView
let loop_id = setInterval(() => {
if (this.game === undefined)
clearInterval(loop_id);
if (this.my_player)
this.my_player.update_paddle(this.keys_pressed);
this.my_player?.update_paddle(this.keys_pressed);
this.render_game();
this.game?.time.new_frame();
//clearInterval(loop_id);
@ -90,10 +96,8 @@ export default class extends AbstractView
document.removeEventListener('keyup', this.keyReleaseHandler);
}
async join_game()
createGameBoard()
{
await this.game.join();
let canva = document.createElement("canvas");
canva.height = this.game.config.size_x;
@ -101,19 +105,34 @@ export default class extends AbstractView
canva.id = "canva";
document.getElementById("app").appendChild(canva);
}
createMyPlayer()
{
let index = this.game.players.findIndex((player) => player.id === client.me.id);
if (index !== -1)
{
let my_player = this.game.players[index];
this.my_player = new MyPlayer(client,
this.game,
my_player.score,
my_player.rail,
my_player.nb_goal,
my_player.position,
);
);
this.game.players[index] = this.my_player;
}
}
async join_game()
{
await this.game.join();
this.createGameBoard();
this.createMyPlayer();
this.displayPlayersList()
this.register_key();
@ -126,11 +145,73 @@ export default class extends AbstractView
if (this.game.finished === false)
await this.join_game();
else
this.createGraph();
}
display_players_list()
createGraph()
{
let players_list = document.getElementById("players_list");
let graph = document.createElement("canvas");
graph.height = 450;
graph.width = 800;
graph.id = "graph";
document.getElementById("app").appendChild(graph);
if (graph === null)
return
let datasets = [];
this.game.players.forEach(player => {
let data = transformData(player.score);
data = [{x: 0, y: 0}, ...data]
console.log(data)
data.push({x: Math.round((this.game.stop_timestamp - this.game.start_timestamp) / 1000),
y: data[data.length - 1].y});
datasets.push({
data: data,
label: player.username,
borderColor: `#${Math.floor(Math.random()*16777215).toString(16)}`,
fill: false,
});
});
this.chart = new Chart(graph, {
type: "line",
data: {
labels: get_labels(datasets),
datasets: datasets,
}
});
}
displayPlayersList()
{
let table = document.createElement("table"),
thead = document.createElement("thead"),
tr = document.createElement("tr"),
usernameTitle = document.createElement("th"),
goalTitle = document.createElement("th"),
playersList = document.createElement("tbody")
;
usernameTitle.innerText = lang.get("gamePlayersListName");
goalTitle.innerText = lang.get("gameGoalTaken");
tr.appendChild(usernameTitle);
tr.appendChild(goalTitle);
table.appendChild(thead);
table.appendChild(playersList);
document.getElementById("app").appendChild(table);
this.game.players.forEach(player => {
@ -139,23 +220,18 @@ export default class extends AbstractView
let goal = document.createElement("td");
name.id = `username-${player.id}`;
goal.id = `goal-${player.id}`;
name.innerText = player.username;
goal.innerText = player.nb_goal;
goal.id = `goal-${player.id}`;
goal.innerText = player.score.length;
tr.appendChild(name);
tr.appendChild(goal);
players_list.appendChild(tr);
playersList.appendChild(tr);
});
}
toggle3D()
{
window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/1");
}
async postInit()
{
let error_code = await this.game.init();
@ -164,8 +240,6 @@ export default class extends AbstractView
return error_code;
await this.update_game_state();
this.display_players_list();
document.getElementById("game-mode").onclick = this.toggle3D;
}
async leavePage()
@ -181,20 +255,9 @@ export default class extends AbstractView
async getHtml()
{
return /* HTML */ `
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<link rel="stylesheet" href="/static/css/game.css">
<h2 id="game-state"></h2>
<input type="button" value="3D" id="game-mode">
<table>
<thead>
<tr>
<th scope="col">${lang.get("gamePlayersListName")}</th>
<th scope="col">${lang.get("gameGoalTaken")}</th>
</tr>
</thead>
<tbody id="players_list">
</tbody>
</table>
`;
}
}

2
frontend/static/js/views/GameView3D.js
View File

@ -75,7 +75,7 @@ export default class extends AbstractView
async join_game()
{
await this.game.join()
await this.game.join();
let canvas = document.createElement("canvas");