42_ft_transcendence/frontend/static/js/views/TicTacToeView.js
2024-02-20 18:52:14 +01:00

58 lines
1.2 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;
}
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.ctx.fillStyle = "white";
this.ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 1, x = gap, y = gap; i <= 9; i++)
{
this.DrawMorpion(x, y);
x += 180 + gap;
if (i % 3 == 0)
{
y += 180 + gap;
x = gap;
}
}
}
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;
if (i % 3 == 0)
{
y += 60;
x = 0;
}
}
}
async getHtml()
{
return `
<h1>${lang.get('ticTacToe')}</h1>
<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
`;
}
}