add: home: Added cards to select game

django/frontend/static/js/lang/cr.json

@@ -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",

django/frontend/static/js/lang/en.json

@@ -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",

django/frontend/static/js/lang/fr.json

@@ -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",

django/frontend/static/js/lang/tp.json

@@ -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",

django/frontend/static/js/views/HomeView.js

@@ -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>
+			<div class="d-flex flex-row" style="justify-content: center">
-			<a href="/games/pong/offline" data-link>${lang.get('homePongOffline')}</a>
+				<div class="row">
-			<a href="/games/tictactoe/offline" data-link>${lang.get('homeTicTacToeOffline')}</a>
+					<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>
 			`;
 	}
 }