42_ft_transcendence/frontend/static/js/views/TicTacToeOnlineView.js

47 lines
1.3 KiB
JavaScript

import AbstractView from "./abstracts/AbstractView.js";
import { lang } from "../index.js";
import { TicTacToe } from "../api/game/tictactoe/TicTacToeGame.js"
export class TicTacToeOnlineView extends AbstractView
{
constructor(params, titleKey)
{
super(params, lang.get('ticTacToeTitle'));
this.params = params;
this.titleKey = titleKey;
this.game_id = params.id;
this.height = 560;
this.width = 560;
}
async postInit()
{
this.Morpion = new TicTacToe(this.height, this.width, 30, 55.5, document.getElementById("Morpion"), this.game_id);
this.Morpion.DrawSuperMorpion();
await this.Morpion.init();
}
async leavePage()
{
this.Morpion.uninit();
}
setTitle()
{
document.title = lang.get(this.titleKey, this.titleKey);
}
async getHtml() {
return `
<link rel="stylesheet" href="/static/css/tictactoe.css">
<div id="canva">
<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>
`
}
}