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

3D working

Browse Source
This commit is contained in:
Kbz-8 2024-02-22 06:01:56 +01:00
parent 81355bf7b5
commit a7fff2f1a2
13 changed files with 71 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/static/js/3D/cube.js
View File

@ -14,7 +14,7 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
modelMatrix,
modelMatrix,
angle,
[0, 1, 1],
[0, 1, 0],
);
mat4.scale(
@ -23,6 +23,12 @@ function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
[sx, sy, sz]
);
mat4.translate(
modelMatrix,
modelMatrix,
[-1, 0, 0] // wtf, this works ?
);
const normalMatrix = mat4.create();
mat4.invert(normalMatrix, modelMatrix);
mat4.transpose(normalMatrix, normalMatrix);

2
frontend/static/js/3D/shaders.js
View File

@ -15,7 +15,7 @@ const vertex_shader_source = `
highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
highp vec3 directionalLightColor = vec3(1, 1, 1);
highp vec3 directionalVector = normalize(vec3(1, 15, -1.75));
highp vec3 directionalVector = vec3(-10, 2, -10);
highp vec4 transformedNormal = uNormalMat * vec4(aNormal, 1.0);

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

@ -52,9 +52,10 @@ class Ball
}
else if(ctx instanceof WebGLRenderingContext)
{
const posx = (this.position.x - this.size / 2) / 2;
const posy = (this.position.y - this.size / 2) / 2;
renderCube(ctx, posx, 0, posy, 0, this.size * 5, this.size * 5, this.size * 5);
const size = this.size * 3;
const posx = (this.position.x - this.size / 2) - this.game.config.size_x / 2;
const posy = (this.position.y - this.size / 2) - this.game.config.size_y / 2;
renderCube(ctx, posx, 0, posy, 0, size, size, size);
}
else
{
@ -76,7 +77,7 @@ class Ball
this.draw(ctx);
}
from_json (data)
from_json(data)
{
this.position = this.position.from_json(data.position);
this.size = data.size;

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

@ -186,7 +186,7 @@ class Game
this.walls = [];
const walls_data = data.walls;
walls_data.forEach((wall_data) => {
this.walls.push(new Wall().from_json(wall_data));
this.walls.push(new Wall(this).from_json(wall_data));
});
/**

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

@ -1,7 +1,6 @@
import { Game } from "./Game.js";
import { Point } from "./Point.js";
import { Segment } from "./Segment.js";
import { renderCube } from "../../3D/cube.js"
class Player
{
@ -44,7 +43,7 @@ class Player
/**
* @type {Segment}
*/
this.rail = rail === undefined ? new Segment() : rail;
this.rail = rail === undefined ? new Segment(game) : rail;
/**
* @type {String}
@ -93,7 +92,7 @@ class Player
let paddle_start = new Point(paddle_start_x, paddle_start_y),
paddle_stop = new Point (paddle_stop_x, paddle_stop_y);
let paddle = new Segment(paddle_start, paddle_stop);
let paddle = new Segment(this.game, paddle_start, paddle_stop);
paddle.draw(ctx);
}

2
frontend/static/js/api/game/Point.js
View File

@ -1,5 +1,3 @@
class Point
{
/**

13
frontend/static/js/api/game/Segment.js
View File

@ -7,13 +7,15 @@ class Segment
* @param {Point} start
* @param {Point} stop
*/
constructor(start, stop)
constructor(game, start, stop)
{
/**
* @type {Point}
*/
this.start = start === undefined ? new Point() : start;
this.game = game;
/**
* @type {Point}
*/
@ -37,9 +39,6 @@ class Segment
return (x ** 2 + y ** 2) ** (1 / 2);
}
/**
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx)
{
if(ctx instanceof CanvasRenderingContext2D)
@ -49,7 +48,11 @@ class Segment
}
else if(ctx instanceof WebGLRenderingContext)
{
renderCube(ctx, this.start.x, -3, this.start.y, 0, 0.5, 0.5, 0.5);
const size = this.game.config.ball_size * 2;
const sizex = this.len() / 2;
const posx = (this.start.x - this.game.config.center_x);
const posy = (this.start.y - this.game.config.center_y);
renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
}
else
{

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

@ -5,12 +5,12 @@ class Wall
/**
* @param {Segment} start
*/
constructor (rail)
constructor (game, rail)
{
/**
* @type {Segment}
*/
this.rail = rail === undefined ? new Segment() : rail;
this.rail = rail === undefined ? new Segment(game) : rail;
}
draw(ctx)

4
frontend/static/js/index.js
View File

@ -90,8 +90,8 @@ const router = async(uri) => {
{ path: "/matchmaking", view: MatchMakingView },
{ path: "/games/offline", view: GameOfflineView },
{ path: "/tictactoe", view: TicTacToeView },
{ path: "/games/0/:id", view: GameView2D },
{ path: "/games/1/:id", view: GameView3D },
{ path: "/games/:id/0", view: GameView2D },
{ path: "/games/:id/1", view: GameView3D },
];
// Test each route for potential match

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

@ -145,6 +145,11 @@ export default class extends AbstractView
});
}
toggle3D()
{
window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/1");
}
async postInit()
{
let error_code = await this.game.init();
@ -154,6 +159,7 @@ export default class extends AbstractView
await this.update_game_state();
this.display_players_list();
document.getElementById("game-mode").onclick = this.toggle3D;
}
async leavePage()
@ -171,6 +177,7 @@ export default class extends AbstractView
return /* HTML */ `
<link rel="stylesheet" href="/static/css/game.css">
<h2 id="game-state"></h2>
<input type="button" value="3D" id="game-mode">
<table>
<thead>

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

@ -4,24 +4,24 @@ import AbstractView from "./abstracts/AbstractView.js";
import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
import { initBuffers } from "../3D/buffers.js"
import "../3D/maths/gl-matrix-min.js"
import { renderCube } from "../3D/cube.js"
import { MyPlayer } from "../api/game/MyPlayer.js";
import { lang } from "../index.js";
import { navigateTo } from "../index.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.update_goal);
this.keys_pressed = [];
this.my_player = undefined;
this.gl = null;
this.shader_prog = null;
this.buffers = null;
this.cam_pos = [0, 500, 0];
this.cam_pos = [0, 400, 0];
this.cam_target = [0, 0, 0];
this.cam_up = [1, 0, 0];
this.cam_up = [0, 0, -1];
}
keyReleaseHandler(event)
@ -39,7 +39,7 @@ export default class extends AbstractView
initGL()
{
const canvas = document.getElementById('glcanva');
const canvas = document.getElementById('canva');
this.gl = canvas.getContext("webgl");
if(this.gl === null)
@ -51,8 +51,8 @@ export default class extends AbstractView
this.shader_prog = initShaderProgram(this.gl);
this.buffers = initBuffers(this.gl);
this.gl.enable(this.gl.CULL_FACE);
this.gl.cullFace(this.gl.BACK);
//this.gl.enable(this.gl.CULL_FACE);
//this.gl.cullFace(this.gl.BACK);
}
update_goal(data)
@ -82,7 +82,7 @@ export default class extends AbstractView
canvas.height = this.game.config.size_x;
canvas.width = this.game.config.size_y;
canvas.id = "glcanva";
canvas.id = "canva";
document.getElementById("app").appendChild(canvas);
@ -108,7 +108,7 @@ export default class extends AbstractView
draw()
{
const canvas = document.getElementById('glcanva');
const canvas = document.getElementById('canva');
if(canvas === null)
return 1;
@ -217,6 +217,11 @@ export default class extends AbstractView
});
}
toggle2D()
{
window.location.replace(location.href.substring(0, location.href.lastIndexOf('/')) + "/0");
}
async postInit()
{
let error_code = await this.game.init();
@ -225,7 +230,8 @@ export default class extends AbstractView
return error_code;
await this.update_game_state();
await this.update_game_state();
this.display_players_list();
document.getElementById("game-mode").onclick = this.toggle2D;
}
async leavePage()
@ -243,6 +249,7 @@ export default class extends AbstractView
return /* HTML */ `
<link rel="stylesheet" href="/static/css/game.css">
<h2 id="game-state"></h2>
<input type="button" value="2D" id="game-mode">
<table>
<thead>

4
frontend/static/js/views/MatchMakingView.js
View File

@ -51,7 +51,7 @@ export default class extends AbstractAuthenticatedView {
{
if (data.detail === "game_found")
{
navigateTo(`/games/${this.game_mode}/${data.game_id}`);
navigateTo(`/games/${data.game_id}/${this.game_mode}`);
return;
}
this.display_data(data);
@ -95,7 +95,7 @@ export default class extends AbstractAuthenticatedView {
["change", "oninput"].forEach((event_name) => {
input.addEventListener(event_name, update);
});
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this)
document.getElementById("game-mode").onclick = this.press_button_game_mode.bind(this);
}
async getHtml() {