94 lines
2.3 KiB
JavaScript
94 lines
2.3 KiB
JavaScript
import { lang } from "../index.js";
|
|
import AbstractView from "./abstracts/AbstractView.js";
|
|
|
|
export default class extends AbstractView
|
|
{
|
|
constructor(params)
|
|
{
|
|
super(params, lang.get('ticTacToeOnline'));
|
|
this.width = 660;
|
|
this.height = 660;
|
|
this.rectsize = 60;
|
|
this.gap = 60;
|
|
}
|
|
|
|
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 postInit()
|
|
{
|
|
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();
|
|
}
|
|
}
|
|
|
|
async leavePage()
|
|
{
|
|
|
|
}
|
|
|
|
setTitle()
|
|
{
|
|
document.title = lang.get(this.titleKey, this.titleKey);
|
|
}
|
|
|
|
async getHtml()
|
|
{
|
|
return `
|
|
<h1>${lang.get('ticTacToeOnline')}</h1>
|
|
<div style="display: flex">
|
|
<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
|
|
<div>
|
|
<h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2>
|
|
<h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5>
|
|
<h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5>
|
|
<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
} |