commit

src/assets/Game.jsx

@@ -1,4 +1,5 @@
 import Helpers from "./Helpers"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 export default function Game({game, token, user}) {
     function getCode(id) {
@@ -17,7 +18,13 @@ export default function Game({game, token, user}) {
         <div className='game'>
             <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} className='game-image'/>
             <div className='game-right'>
-                <h1 className='game-title'>{game.title}</h1>
+                <h1 className='game-title'>{game.title}{game.subtitle ? `, ${game.subtitle}` : null}</h1>
+                <div className="tags">
+                    {game.type == "extension" ? <div className="tag extension"><FontAwesomeIcon icon="fa-solid fa-plus" />  Extension</div> : <div className="tag basegame"><FontAwesomeIcon icon="fa-solid fa-puzzle-piece" /> Jeu de base</div>}
+                    <div className="tag players"><FontAwesomeIcon icon="fa-solid fa-user-group" /> {game.players}</div>
+                    <div className="tag duration"><FontAwesomeIcon icon="fa-regular fa-clock" /> {game.duration}</div>
+                    <div className="tag ages"><FontAwesomeIcon icon="fa-solid fa-child" /> {game.ages}</div>
+                </div>
                 <div className='game-bottom'>
                     <Helpers gameid={game.id} user={user} token={token} />
                 </div>

src/pages/Home.css

@@ -24,6 +24,10 @@ body {
 
 .search {
     margin: 20px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
 }
 
 .search-input {
@@ -70,6 +74,9 @@ body {
 }
 
 .game-right {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
     width: 55vw;
     margin-right: 10vw;
 }
@@ -81,6 +88,41 @@ body {
     gap: 15px;
 }
 
+.tags {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.tag {
+    background-color: #b4d666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+.basegame {
+    background-color: #66d6bf;
+}
+
+.extension {
+    background-color: #e99731;
+}
+
+.players {
+    background-color: #fae294;
+}
+
+.duration {
+    background-color: #c892c4;
+}
+
+.ages {
+    background-color: #92c8b5;
+}
+
 .helpers {
     justify-content: center;
     align-items: center;
@@ -139,6 +181,10 @@ body {
         font-size: 17px;
     }
 
+    .tags{
+        flex-direction: column;
+    }
+
     .helpers {
         flex-direction: column;
     }

src/pages/Home.jsx

@@ -48,6 +48,7 @@ export default function Home() {
 
 	function handleSearchChange(event) {
 		setName(event.target.value);
+		setCurrentPage(1);
 	};
 
 	const filteredGames = games.filter((game) =>
@@ -64,6 +65,10 @@ export default function Home() {
 		}
 	}
 
+	function resetSearch() {
+		setName("");
+	}
+
 	const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
 
 	if (userloading) {
@@ -84,6 +89,7 @@ export default function Home() {
 			</div>
 			<div className='search'>
 				<input type="text" value={name} onChange={handleSearchChange} className='search-input' placeholder='Chercher un jeu' />
+				<button className='button' onClick={resetSearch}><FontAwesomeIcon icon="fa-solid fa-xmark" /></button>
 			</div>
 			<div className="pagination">
 				<button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">