249 lines
7.6 KiB
JavaScript
249 lines
7.6 KiB
JavaScript
import { lang } from "../index.js";
|
|
import AbstractView from "./abstracts/AbstractView.js";
|
|
|
|
|
|
export default class extends AbstractView
|
|
{
|
|
constructor(params)
|
|
{
|
|
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;
|
|
this.Winner = -1;
|
|
}
|
|
|
|
async leavePage()
|
|
{
|
|
this.canvas.removeEventListener("mousedown", this.onClick, false);
|
|
}
|
|
|
|
onClick(event)
|
|
{
|
|
let targetTabX, targetTabY, targetTab;
|
|
let squareTab;
|
|
let x = event.offsetX;
|
|
let y = event.offsetY;
|
|
|
|
if (this.Winner != -1)
|
|
return;
|
|
|
|
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.beginPath();
|
|
morpion.ctx.strokeStyle = "green";
|
|
morpion.ctx.moveTo(targetX + 15, targetY + 15);
|
|
morpion.ctx.lineTo(targetX + 45, targetY + 45);
|
|
morpion.ctx.moveTo(targetX + 45, targetY + 15);
|
|
morpion.ctx.lineTo(targetX + 15, targetY + 45);
|
|
morpion.ctx.stroke();
|
|
morpion.ctx.closePath();
|
|
}
|
|
else
|
|
{
|
|
morpion.ctx.beginPath();
|
|
morpion.ctx.strokeStyle = "red";
|
|
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 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 : O" : "Winner is : X", morpion.width / 2 - 30, morpion.height - morpion.gap / 2, 140);
|
|
morpion.ctx.closePath();
|
|
}
|
|
|
|
function updateMorpion(targetTab, squareTab, morpion)
|
|
{
|
|
if (morpion.playerTurn && targetTab != morpion.playerTwoCurrentTab)
|
|
return -1;
|
|
if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab)
|
|
return -1;
|
|
if (morpion.morpion[targetTab][squareTab] == -1)
|
|
morpion.morpion[targetTab][squareTab] = (morpion.playerTurn) ? 1 : 0;
|
|
else
|
|
return -1;
|
|
drawNewCase(targetTab, squareTab, morpion);
|
|
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)
|
|
{
|
|
paintWinningNotification(morpion);
|
|
return;
|
|
}
|
|
highlightNewTab(morpion);
|
|
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()
|
|
{
|
|
for (let i = 0; i < 9; i++)
|
|
for (let j = 0; j < 9; j++)
|
|
this.morpion[i].push(-1);
|
|
this.canvas = document.getElementById("Morpion");
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.ctx.fillStyle = "black";
|
|
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 += this.rectsize * 3;
|
|
if (i % 3 == 0)
|
|
{
|
|
y += this.rectsize * 3;
|
|
x = this.gap;
|
|
}
|
|
}
|
|
this.ctx.lineWidth = 6;
|
|
for (let i = 0; i < 4; i++)
|
|
{
|
|
this.ctx.beginPath();
|
|
this.ctx.strokeStyle = `rgb(230 230 230)`;
|
|
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();
|
|
this.ctx.closePath();
|
|
};
|
|
for (let i = 0; i < 4; i++)
|
|
{
|
|
this.ctx.beginPath();
|
|
this.ctx.strokeStyle = `rgb(230 230 230)`;
|
|
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.ctx.closePath();
|
|
}
|
|
this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
|
|
}
|
|
|
|
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++)
|
|
{
|
|
this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
|
|
x += this.rectsize;
|
|
if (i % 3 == 0)
|
|
{
|
|
y += this.rectsize;
|
|
x = 0;
|
|
}
|
|
}
|
|
this.ctx.closePath();
|
|
}
|
|
|
|
async getHtml()
|
|
{
|
|
return `
|
|
<h1>${lang.get('ticTacToe')}</h1>
|
|
<div style="display: flex">
|
|
<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
|
|
<h2 style="margin-left: 5%">J'arrive a ecrire du html a droite 🤓🤓🤓🤓</h2>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|