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

Made the game work, made it more intuitive and ends when someone wins

Browse Source
This commit is contained in:
Namonay 2024-02-25 00:07:42 +01:00 committed by AdrienLSH
parent baf4c46bd4
commit d56b367c45
1 changed files with 91 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ export default class extends AbstractView
this.playerTurn = 0; this.playerTurn = 0;
this.playerOneCurrentTab = 4; this.playerOneCurrentTab = 4;
this.playerTwoCurrentTab = 4; this.playerTwoCurrentTab = 4;
this.Winner = -1;
} }
async leavePage() async leavePage()
@ -30,6 +31,12 @@ export default class extends AbstractView
let x = event.offsetX; let x = event.offsetX;
let y = event.offsetY; let y = event.offsetY;
if (this.Winner != -1)
{
console.log("end of game, Winner is : " + this.Winner);
return;
}
function findPlace(x, morpion) function findPlace(x, morpion)
{ {
if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9) if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9)
@ -49,10 +56,10 @@ export default class extends AbstractView
let targetY = (morpion.gap + Math.floor(targetTab / 3) * morpion.rectsize * 3) + (Math.floor(squareTab / 3) * morpion.rectsize); let targetY = (morpion.gap + Math.floor(targetTab / 3) * morpion.rectsize * 3) + (Math.floor(squareTab / 3) * morpion.rectsize);
if (!morpion.playerTurn) if (!morpion.playerTurn)
{ {
morpion.ctx.beginPath();
morpion.ctx.strokeStyle = "green";
morpion.ctx.moveTo(targetX + 15, targetY + 15); morpion.ctx.moveTo(targetX + 15, targetY + 15);
morpion.ctx.lineTo(targetX + 45, targetY + 45); morpion.ctx.lineTo(targetX + 45, targetY + 45);
morpion.ctx.stroke();
morpion.ctx.closePath();
morpion.ctx.moveTo(targetX + 45, targetY + 15); morpion.ctx.moveTo(targetX + 45, targetY + 15);
morpion.ctx.lineTo(targetX + 15, targetY + 45); morpion.ctx.lineTo(targetX + 15, targetY + 45);
morpion.ctx.stroke(); morpion.ctx.stroke();
@ -60,6 +67,8 @@ export default class extends AbstractView
} }
else else
{ {
morpion.ctx.beginPath();
morpion.ctx.strokeStyle = "red";
targetX += morpion.rectsize / 2; targetX += morpion.rectsize / 2;
targetY += morpion.rectsize / 2; targetY += morpion.rectsize / 2;
morpion.ctx.arc(targetX, targetY, 20, 0, 2 * Math.PI); morpion.ctx.arc(targetX, targetY, 20, 0, 2 * Math.PI);
@ -68,6 +77,62 @@ export default class extends AbstractView
} }
} }
function PaintCurrentTab(morpion, currentTab, color)
{
let targetX = (morpion.gap + currentTab % 3 * morpion.rectsize * 3);
let targetY = (morpion.gap + Math.floor(currentTab / 3) * morpion.rectsize * 3);
morpion.ctx.beginPath();
morpion.ctx.strokeStyle = color;
morpion.ctx.lineWidth = 6;
morpion.ctx.strokeRect(targetX, targetY, morpion.rectsize * 3, morpion.rectsize * 3);
morpion.ctx.closePath();
}
function highlightNewTab(morpion)
{
if (!morpion.playerTurn)
PaintCurrentTab(morpion, morpion.playerOneCurrentTab, "green");
else
PaintCurrentTab(morpion, morpion.playerTwoCurrentTab, "red");
}
function checkForWinningMove(morpion, targetTab)
{
let count = 0;
for (let i = 0; i < 3; i++)
{
if (morpion.morpion[targetTab][i] != -1 && (morpion.morpion[targetTab][i] === morpion.morpion[targetTab][i + 3] && morpion.morpion[targetTab][i + 3] === morpion.morpion[targetTab][i + 6]))
morpion.Winner = !morpion.playerTurn;
}
for (let i = 0; i < morpion.morpion.length; i += 3)
{
if (morpion.morpion[targetTab][i] != -1 && (morpion.morpion[targetTab][i] === morpion.morpion[targetTab][i + 1] && morpion.morpion[targetTab][i + 1] === morpion.morpion[targetTab][i + 2]))
morpion.Winner = !morpion.playerTurn;
}
if (morpion.morpion[targetTab][0] != -1 && (morpion.morpion[targetTab][0] === morpion.morpion[targetTab][4] && morpion.morpion[targetTab][4] === morpion.morpion[targetTab][8]))
morpion.Winner = !morpion.playerTurn;
if (morpion.morpion[targetTab][2] != -1 && (morpion.morpion[targetTab][2] === morpion.morpion[targetTab][4] && morpion.morpion[targetTab][4] === morpion.morpion[targetTab][6]))
morpion.Winner = !morpion.playerTurn;
morpion.morpion[targetTab].forEach((v) => (v !== -1 && count++));
if (count == 9 && morpion.Winner == -1)
morpion.Winner = morpion.playerTurn;
}
function paintWinningNotification(morpion)
{
morpion.ctx.beginPath();
morpion.ctx.fillStyle = "white";
morpion.ctx.fillRect(morpion.width / 2 - 200, morpion.height - morpion.gap + 10, 400, 80);
morpion.ctx.closePath();
morpion.ctx.beginPath();
morpion.ctx.fillStyle = "black";
morpion.ctx.fillText((morpion.Winner) ? "Winner is : X" : "Winner is : O", morpion.width / 2 - 30, morpion.height - morpion.gap / 2, 140);
morpion.ctx.closePath();
}
function updateMorpion(targetTab, squareTab, morpion) function updateMorpion(targetTab, squareTab, morpion)
{ {
console.log("targettab : " + targetTab + " squaretab : " + squareTab + " playerturn : " + morpion.playerTurn); console.log("targettab : " + targetTab + " squaretab : " + squareTab + " playerturn : " + morpion.playerTurn);
@ -76,16 +141,25 @@ export default class extends AbstractView
console.log("targettab : " + targetTab + " squaretab : " + squareTab); console.log("targettab : " + targetTab + " squaretab : " + squareTab);
if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab) if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab)
return -1; return -1;
if (morpion.morpion[targetTab][squareTab] == -1) if (morpion.morpion[targetTab][squareTab] == -1)
morpion.morpion[targetTab][squareTab] = morpion.playerTurn; morpion.morpion[targetTab][squareTab] = (morpion.playerTurn) ? 1 : 0;
else else
return -1; return -1;
if (morpion.playerTurn)
morpion.playerTwoCurrentTab = squareTab;
else
morpion.playerOneCurrentTab = squareTab;
drawNewCase(targetTab, squareTab, morpion); drawNewCase(targetTab, squareTab, morpion);
morpion.playerTurn = !morpion.playerTurn; morpion.playerTurn = !morpion.playerTurn;
PaintCurrentTab(morpion, targetTab, "white");
if (!morpion.playerTurn)
morpion.playerTwoCurrentTab = squareTab;
else
morpion.playerOneCurrentTab = squareTab;
checkForWinningMove(morpion, targetTab);
if (morpion.Winner != -1)
{
console.log((morpion.Winner) ? "Winner is O" : "Winner is X");
paintWinningNotification(morpion);
return;
}
highlightNewTab(morpion);
return 0; return 0;
} }
@ -116,7 +190,7 @@ export default class extends AbstractView
this.morpion[i].push(-1); this.morpion[i].push(-1);
this.canvas = document.getElementById("Morpion"); this.canvas = document.getElementById("Morpion");
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.ctx.fillStyle = "white"; this.ctx.fillStyle = "black";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
for (let i = 1, x = this.gap, y = this.gap; i <= 9; i++) for (let i = 1, x = this.gap, y = this.gap; i <= 9; i++)
{ {
@ -132,22 +206,28 @@ export default class extends AbstractView
for (let i = 0; i < 4; i++) for (let i = 0; i < 4; i++)
{ {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = `rgb(230 230 230)`;
this.ctx.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3); 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.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath();
}; };
for (let i = 0; i < 4; i++) for (let i = 0; i < 4; i++)
{ {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = `rgb(230 230 230)`;
this.ctx.moveTo(this.gap, this.gap + i * this.rectsize * 3); 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.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath();
} }
this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false); this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
} }
DrawMorpion(start_x, start_y) DrawMorpion(start_x, start_y)
{ {
this.ctx.beginPath();
this.ctx.strokeStyle = `rgb(200 200 200)`;
for (let i = 1, x = 0, y = 0; i <= 9; i++) for (let i = 1, x = 0, y = 0; i <= 9; i++)
{ {
this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize); this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
@ -158,6 +238,7 @@ export default class extends AbstractView
x = 0; x = 0;
} }
} }
this.ctx.closePath();
} }
async getHtml() async getHtml()