starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

view: Removed old view and added base new one

Browse Source
This commit is contained in:
Namonay 2024-03-22 13:37:29 +01:00 committed by AdrienLSH
parent 0ea07200fd
commit e21c00e930
2 changed files with 30 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/static/js/views/TicTacToeOnlineView.js Normal file
View File

@ -0,0 +1,30 @@
import AbstractView from "./abstracts/AbstractView.js";
export default class extends AbstractView
{
constructor(params, titleKey)
{
this.params = params;
this.titleKey = titleKey;
}
async postInit()
{
}
async leavePage()
{
}
setTitle()
{
document.title = lang.get(this.titleKey, this.titleKey);
}
async getHtml() {
return `<h1>Work in progress bozo</h1>
<img src="https://cdn.discordapp.com/attachments/1089527100681240716/1219360784224616498/Snapinsta.app_424926392_1109913580191337_8974514051687331181_n_1080.jpg?ex=660b0539&is=65f89039&hm=25dbcab44e50ec8ca3019dab476293a1001c224c6b6312bd9e30fba1f72667b5&">`;
}
}

94
frontend/static/js/views/TicTacToeViewOnline.js
View File

@ -1,94 +0,0 @@
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>
`;
}
}