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

added Morpion in dictionary

Browse Source
This commit is contained in:
Namonay
2024-02-24 19:30:47 +01:00
committed by AdrienLSH
parent e477484d49
commit baf4c46bd4
3 changed files with 131 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/static/js/lang/en.json
View File

@ -38,5 +38,5 @@
"profileBlock": "Block",
"gameGoalTaken": "Goal Taken",
"gamePlayersListName": "Players",
"ticTacToe": "Morpion"
"ticTacToe": "TicTacToe"
}

3
frontend/static/js/lang/fr.json
View File

@ -37,5 +37,6 @@
"profileUnblock": "Débloquer",
"profileBlock": "Bloquer",
"gameGoalTaken": "But pris",
"gamePlayersListName": "Joueurs"
"gamePlayersListName": "Joueurs",
"ticTacToe" : "Morpion"
}

142
frontend/static/js/views/TicTacToeView.js
View File

@ -1,6 +1,7 @@
import { lang } from "../index.js";
import AbstractView from "./abstracts/AbstractView.js";
export default class extends AbstractView
{
constructor(params)
@ -8,45 +9,157 @@ export default class extends AbstractView
super(params, lang.get('ticTacToe'));
this.width = 660;
this.height = 660;
this.morpion = [[],[],[],[],[],[],[],[],[]];
this.rectsize = 60;
this.gap = 60;
this.playerTurn = 0;
this.playerOneCurrentTab = 4;
this.playerTwoCurrentTab = 4;
}
async leavePage()
{
this.canvas.removeEventListener("mousedown", this.onClick, false);
}
onClick(event)
{
console.log(this);
let targetTabX, targetTabY, targetTab;
let squareTab;
let x = event.offsetX;
let y = event.offsetY;
function findPlace(x, morpion)
{
if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9)
return -1;
if (x <= morpion.gap + morpion.rectsize * 3)
return 0;
if (x >= morpion.gap + morpion.rectsize * 3 && x <= morpion.gap + morpion.rectsize * 6)
return 1;
if (x >= morpion.gap + morpion.rectsize * 6)
return 2;
return -1;
}
function drawNewCase(targetTab, squareTab, morpion)
{
let targetX = (morpion.gap + targetTab % 3 * morpion.rectsize * 3) + (squareTab % 3 * morpion.rectsize);
let targetY = (morpion.gap + Math.floor(targetTab / 3) * morpion.rectsize * 3) + (Math.floor(squareTab / 3) * morpion.rectsize);
if (!morpion.playerTurn)
{
morpion.ctx.moveTo(targetX + 15, targetY + 15);
morpion.ctx.lineTo(targetX + 45, targetY + 45);
morpion.ctx.stroke();
morpion.ctx.closePath();
morpion.ctx.moveTo(targetX + 45, targetY + 15);
morpion.ctx.lineTo(targetX + 15, targetY + 45);
morpion.ctx.stroke();
morpion.ctx.closePath();
}
else
{
targetX += morpion.rectsize / 2;
targetY += morpion.rectsize / 2;
morpion.ctx.arc(targetX, targetY, 20, 0, 2 * Math.PI);
morpion.ctx.stroke();
morpion.ctx.closePath();
}
}
function updateMorpion(targetTab, squareTab, morpion)
{
console.log("targettab : " + targetTab + " squaretab : " + squareTab + " playerturn : " + morpion.playerTurn);
if (morpion.playerTurn && targetTab != morpion.playerTwoCurrentTab)
return -1;
console.log("targettab : " + targetTab + " squaretab : " + squareTab);
if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab)
return -1;
if (morpion.morpion[targetTab][squareTab] == -1)
morpion.morpion[targetTab][squareTab] = morpion.playerTurn;
else
return -1;
if (morpion.playerTurn)
morpion.playerTwoCurrentTab = squareTab;
else
morpion.playerOneCurrentTab = squareTab;
drawNewCase(targetTab, squareTab, morpion);
morpion.playerTurn = !morpion.playerTurn;
return 0;
}
function findSquare(x, gap, morpion)
{
if (x <= gap + morpion.rectsize)
return 0;
if (x >= gap + morpion.rectsize && x <= gap + morpion.rectsize * 2)
return 1;
if (x >= gap + morpion.rectsize * 2)
return 2;
return -1;
}
targetTabX = findPlace(x, this);
targetTabY = findPlace(y, this);
if (targetTabX < 0 || targetTabY < 0)
return -1;
targetTab = targetTabX + targetTabY * 3;
squareTab = findSquare(x, this.rectsize * 3 * targetTabX + this.gap, this) + findSquare(y, this.rectsize * 3 * targetTabY + this.gap, this) * 3;
updateMorpion(targetTab, squareTab, this);
}
async postInit()
{
let morpion = [[],[],[],[],[],[],[],[],[]];
let currMorpion = 4;
let gap = 30;
for (let i = 0; i < 9; i++)
for (let j = 0; j < 9; j++)
morpion[i].push(-1);
const canvas = document.getElementById("Morpion");
this.ctx = canvas.getContext("2d");
this.morpion[i].push(-1);
this.canvas = document.getElementById("Morpion");
this.ctx = this.canvas.getContext("2d");
this.ctx.fillStyle = "white";
this.ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 1, x = gap, y = gap; i <= 9; i++)
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
for (let i = 1, x = this.gap, y = this.gap; i <= 9; i++)
{
this.DrawMorpion(x, y);
x += 180 + gap;
x += this.rectsize * 3;
if (i % 3 == 0)
{
y += 180 + gap;
x = gap;
y += this.rectsize * 3;
x = this.gap;
}
}
this.ctx.lineWidth = 6;
for (let i = 0; i < 4; i++)
{
this.ctx.beginPath();
this.ctx.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
this.ctx.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
this.ctx.stroke();
};
for (let i = 0; i < 4; i++)
{
this.ctx.beginPath();
this.ctx.moveTo(this.gap, this.gap + i * this.rectsize * 3);
this.ctx.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
this.ctx.stroke();
}
this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
}
DrawMorpion(start_x, start_y)
{
for (let i = 1, x = 0, y = 0; i <= 9; i++)
{
this.ctx.strokeRect(start_x + x, start_y + y, 60, 60);
x += 60;
this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
x += this.rectsize;
if (i % 3 == 0)
{
y += 60;
y += this.rectsize;
x = 0;
}
}
}
async getHtml()
{
return `
@ -55,3 +168,4 @@ export default class extends AbstractView
`;
}
}