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

add: Morpion class & matchmaking

Browse Source
This commit is contained in:
Namonay 2024-03-22 16:28:49 +01:00 committed by AdrienLSH
parent 0a61c8ecd9
commit 9a24c3b813
2 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/static/js/api/Matchmaking.js
View File

@ -21,11 +21,12 @@ class MatchMaking
* @param {Number} mode The number of players in a game
* @returns {Promise<?>}
*/
async start(receive_func, disconnect_func, mode)
async start(receive_func, disconnect_func, mode, gamemode)
{
if (!await this.client.isAuthenticated())
return null;
this.gamemode = gamemode
let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
this._socket = new WebSocket(url);

74
frontend/static/js/api/game/TicTacToeGame.js Normal file
View File

@ -0,0 +1,74 @@
class TicTacToe
{
constructor(height, width, gap, rectsize, canvas)
{
this.height = height;
this.width = width;
this.gap = gap;
this.rectsize = rectsize;
this.game = [[],[],[],[],[],[],[],[],[]];
for (let i = 0; i < 9; i++)
for (let j = 0; j < 9; j++)
this.game[i].push(-1);
this.canvas = canvas
this.context = this.canvas.getContext("2d");
}
DrawSuperMorpion()
{
this.context.fillStyle = "#1a1a1d";
this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 20);
this.context.fill();
for (let i = 1, x = this.gap, y = this.gap; i <= 9; i++)
{
this.DrawMorpion(x, y);
x += this.rectsize * 3;
if (i % 3 == 0)
{
y += this.rectsize * 3;
x = this.gap;
}
}
this.context.lineWidth = 6;
for (let i = 0; i < 4; i++)
{
this.context.beginPath();
this.context.strokeStyle = `rgb(230 230 230)`;
this.context.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
this.context.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
this.context.stroke();
this.context.closePath();
};
for (let i = 0; i < 4; i++)
{
this.context.beginPath();
this.context.strokeStyle = `rgb(230 230 230)`;
this.context.moveTo(this.gap, this.gap + i * this.rectsize * 3);
this.context.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
this.context.stroke();
this.context.closePath();
}
}
DrawMorpion(start_x, start_y)
{
this.context.beginPath();
this.context.strokeStyle = `rgb(200 200 200)`;
for (let i = 1, x = 0, y = 0; i <= 9; i++)
{
this.context.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
x += this.rectsize;
if (i % 3 == 0)
{
y += this.rectsize;
x = 0;
}
}
this.context.closePath();
}
}
export { TicTacToe };