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

css patch tiktaktoe

Browse Source
This commit is contained in:
Xamora 2024-05-13 18:28:37 +02:00
parent a961e03ce8
commit 60a976f238
3 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/static/css/tictactoe.css
View File

@ -1,5 +1,14 @@
#canva { #canva {
width: 660px; width: 510px;
height:660px; height:510px;
margin: 0px auto; margin: 0px auto;
} }
#Morpion {
margin: 0px auto;
}
#rule {
text-align: center;
margin: 0px auto;
}

11
frontend/static/js/views/TicTacToeOfflineView.js
View File

@ -236,14 +236,17 @@ export class TicTacToeOfflineView extends AbstractView
async getHtml() async getHtml()
{ {
return ` return `
<link rel="stylesheet" href="/static/css/tictactoe.css">
<h1>${lang.get('ticTacToe')}</h1> <h1>${lang.get('ticTacToe')}</h1>
<div style="display: flex"> <div style="display: flex">
<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas> <canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
</div> </div>
<h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2> <div id="rule">
<h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5> <h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2>
<h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5> <h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5>
<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5> <h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5>
<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5>
</div>
`; `;
} }
} }

10
frontend/static/js/views/TicTacToeOnlineView.js
View File

@ -37,10 +37,12 @@ export class TicTacToeOnlineView extends AbstractView
<div id="canva"> <div id="canva">
<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas> <canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
</div> </div>
<h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2> <div id ="rule">
<h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5> <h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2>
<h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5> <h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5>
<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5> <h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5>
<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5>
</div>
` `
} }
} }