add: home: Added cards to select game

This commit is contained in:
Namonay 2024-05-14 22:11:36 +02:00
parent 6a92dd67c1
commit 399c4a3d07
8 changed files with 46 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -50,6 +50,9 @@
"matchmakingStartSearch": "Cramptrouver une partie",
"matchmakingStopSearch": "Crampter le matchmaking",
"matchmakingNbPlayers": "Nombre de crampteurs",
"offlinePongPresentation" : "Cramptjouez au Quoicoupong a deux crampteurs sur un seul ordinateur",
"matchmakingPresentation" : "Cramptjouez au Cramption ou au Quoicoupong a plusieurs crampteurs",
"offlineTicTacToePresentation" : "Cramptjouez au Quoicoumorpion a deux crampteurs sur un seul ordinateur",
"TournamentCreateTitle": "Créer un cramptournoi",
"TournamentCreateButton": "Créer le cramptournoi",
"TournamentCreateTournamentName": "Nom du cramptournoi",

View File

@ -49,6 +49,9 @@
"matchmakingStartSearch": "Find a game",
"matchmakingStopSearch": "Stop matchmaking",
"matchmakingNbPlayers": "Number of players",
"offlinePongPresentation" : "Play Pong with two player on the same computer",
"offlineTicTacToePresentation" : "Play TicTacToe with two player on the same computer",
"matchmakingPresentation" : "Play TicTacToe or Pong with multiple players online.",
"TournamentCreateTitle": "Create tournament",
"TournamentCreateButton": "Create tournament",
"TournamentCreateTournamentName": "Tournament Name",

View File

@ -50,6 +50,9 @@
"matchmakingStartSearch": "Trouver une partie",
"matchmakingStopSearch": "Arrêter le matchmaking",
"matchmakingNbPlayers": "Nombre de joueurs",
"matchmakingPresentation" : "Jouez au Morpion ou au Pong avec plusieurs joueurs en ligne",
"offlinePongPresentation" : "Jouez au Pong a deux joueurs sur un seul ordinateur",
"offlineTicTacToePresentation" : "Jouez au Morpion a deux joueurs sur un seul ordinateur",
"TournamentCreateTitle": "Créer un tournoi",
"TournamentCreateButton": "Créer le tournoi",
"TournamentCreateTournamentName": "Nom du tournoi",

View File

@ -49,6 +49,9 @@
"matchmakingStartSearch": "lukin e ilo musi",
"matchmakingStopSearch": "o pini e pana sona e jan pi pana sona e jan ante.",
"matchmakingNbPlayers": "nanpa pi jan ante",
"offlinePongPresentation" : "o pana e poki tawa suli taso tawa jan tu wan lon ilo sona sama.",
"offlineTicTacToePresentation" : "o pali e ilo lipu tawa tu wan tawa tu pona pi jan lili.",
"matchmakingPresentation" : "o kama jo e poki pona tawa pona pona tawa pona pi jan mute lon sewi anu lon sewi.",
"TournamentCreateTitle": "o pana e musi ante e musi",
"TournamentCreateButton": "jo ala pona li jo e ijo li pali e ijo li pana e ijo li toki e ijo li kama jo e ijo li kama pali e ijo li kama pana e ijo li kama toki e ijo li kama jo e ijo li kama pali e ijo li kama pana e ijo",
"TournamentCreateTournamentName": "ilo kipisi",

View File

@ -9,9 +9,40 @@ export default class extends AbstractView {
async getHtml() {
return /* HTML */ `
<h1>${lang.get('homeTitle', 'Home')}</h1>
<a href="/matchmaking" data-link>${lang.get('homeOnline')}</a>
<a href="/games/pong/offline" data-link>${lang.get('homePongOffline')}</a>
<a href="/games/tictactoe/offline" data-link>${lang.get('homeTicTacToeOffline')}</a>
<div class="d-flex flex-row" style="justify-content: center">
<div class="row">
<div class="col">
<div class="card" style="width: 25rem;">
<img src="/static/js/imgs/morpion.png" class="card-img-top" alt="Screenshot of Pong">
<div class="card-body">
<h5 class="card-title">${lang.get('homeTicTacToeOffline')}</h5>
<p class="card-text">${lang.get('matchmakingPresentation')}</p>
<a href="/games/tictactoe/offline" class="btn btn-primary">${lang.get('homeTicTacToeOffline')}</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 25rem;">
<img src="/static/js/imgs/morpong.png" class="card-img-top" alt="Screenshot of Pong">
<div class="card-body">
<h5 class="card-title">${lang.get('homeOnline')}</h5>
<p class="card-text">${lang.get('matchmakingPresentation')}</p>
<a href="/matchmaking" class="btn btn-primary">${lang.get('homeOnline')}</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 25rem;">
<img src="/static/js/imgs/pongee.png" class="card-img-top" alt="Screenshot of Pong">
<div class="card-body">
<h5 class="card-title">${lang.get('homePongOffline')}</h5>
<p class="card-text">${lang.get('offlinePongPresentation')}</p>
<a href="/games/pong/offline" class="btn btn-primary">${lang.get('homePongOffline')}</a>
</div>
</div>
</div>
</div>
</div>
`;
}
}