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

Oupsie

Browse Source
This commit is contained in:
Xamora
2024-01-11 17:34:44 +01:00
parent 4c114a34df 134f1a8bd1
commit 09f3c92153
55 changed files with 44767 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { client } from "../index.js";
import { Game } from "../api/Game.js";
import { Game } from "../api/game/Game.js";
import AbstractView from "./abstracts/AbstractView.js";
export default class extends AbstractView
@ -10,24 +10,137 @@ export default class extends AbstractView
this.game = new Game(client, params.id);
}
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 pos_x = rail_start_x + diff_x * pos,
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));
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()
{
pl
}
draw_ball(ctx, x, y)
{
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;
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);
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);
start_x = stop_x;
start_y = stop_y;
}
}
draw_game()
{
let ctx = document.getElementById('canva').getContext('2d');
ctx.beginPath()
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);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 10;
ctx.stroke();
}
render_game()
{
while (true)
{
this.draw_game();
// TODO remove the line below
break;
}
}
start_game()
{
let canva = document.createElement("canvas");
canva.height = this.game.config.size_x;
canva.width = this.game.config.size_y;
canva.id = "canva";
document.getElementById("app").appendChild(canva);
this.game.join()
this.render_game();
}
async 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)
this.start_game();
}
async postInit()
{
let error_code = await this.game.init();
if (error_code)
return error_code;
await this.update_game_state();
}
async getHtml()
{
return `
<h1>Welcome back, Dom</h1>
<p>
Fugiat voluptate et nisi Lorem cillum anim sit do eiusmod occaecat irure do. Reprehenderit anim fugiat sint exercitation consequat. Sit anim laborum sit amet Lorem adipisicing ullamco duis. Anim in do magna ea pariatur et.
</p>
<p>
<a href="/posts" data-link>View recent posts</a>.
</p>
return /* HTML */ `
<link rel="stylesheet" href="/static/css/game.css">
<h2 id="game-state"></h2>
<div id="player_list"></div>
`;
}
}

27
frontend/static/js/views/accounts/LoginView.js
View File

@ -7,16 +7,14 @@ async function login()
let username = document.getElementById("username-input").value;
let password = document.getElementById("password-input").value;
let response_data = await client.login(username, password);
let response = await client.login(username, password);
if (response_data == null)
{
if (response.status == 200) {
navigateTo("/home");
return;
} else {
let error = await response.json();
fill_errors(error, "innerHTML");
}
clear("innerHTML", ["username", "user", "password"]);
fill_errors(response_data, "innerHTML");
}
export default class extends AbstractNonAuthentifiedView {
@ -26,6 +24,17 @@ export default class extends AbstractNonAuthentifiedView {
async postInit()
{
let usernameField = document.getElementById('username-input');
usernameField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
login();
});
usernameField.focus();
let passwordField = document.getElementById('password-input');
passwordField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
login();
});
document.getElementById("login-button").onclick = login;
}
@ -35,11 +44,9 @@ export default class extends AbstractNonAuthentifiedView {
<label>Login</label>
<link rel="stylesheet" href="/static/css/accounts/login.css">
<input type="text" id="username-input" placeholder="username">
<span id="username"></span>
<input type="password" id="password-input" placeholder="password">
<span id="password"></span>
<input type="button" value="Login" id="login-button">
<span id="user"></span>
<span id="error"></span>
<a href="/register" class="nav__link" data-link>Register</a>
</div>
`;

5
frontend/static/js/views/accounts/LogoutView.js
View File

@ -5,7 +5,10 @@ export default class extends AbstractAuthentifiedView
{
constructor(params) {
super(params, "Logout");
client.logout();
}
async postInit() {
await client.logout();
navigateTo("/login")
}
}

21
frontend/static/js/views/accounts/RegisterView.js
View File

@ -6,7 +6,15 @@ async function register()
{
let username = document.getElementById("username-input").value;
let password = document.getElementById("password-input").value;
if (username === '' || password === '') {
clear("innerHTML", ["username", "password"]);
if (username === '')
document.getElementById('username').innerHTML = 'This field may not be blank.';
if (password === '')
document.getElementById('password').innerHTML = 'This field may not be blank.';
return;
}
let response_data = await client.account.create(username, password);
if (response_data == null)
@ -26,6 +34,17 @@ export default class extends AbstractNonAuthentifiedView {
async postInit()
{
let usernameField = document.getElementById('username-input');
usernameField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
register();
});
usernameField.focus();
let passwordField = document.getElementById('password-input');
passwordField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
register();
});
document.getElementById("register-button").onclick = register;
}