import { lang } from "../index.js";
import { TicTacToe } from "../api/game/tictactoe/TicTacToeGame.js"
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
import { navigateTo } from "../index.js"
export class TicTacToeOnlineView extends AbstractAuthenticatedView
{
    constructor(params, titleKey)
    {
        super(params, 'ticTacToeTitle');
        this.params = params;
        this.titleKey = titleKey;
		this.game_id = params.id;
        this.height = 510;
        this.width = 510;
    }

    async postInit()
    {
        this.Morpion = new TicTacToe(this.height, this.width, 30, 50, 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>
		<div id ="rule">
			<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>
		`
    }
}