From c164f10c55e6679f1b60646dccaf706748bd5711 Mon Sep 17 00:00:00 2001 From: Beyzanur Bektan Date: Sun, 24 Dec 2023 18:24:16 +0300 Subject: [PATCH 1/7] changed game forum style --- .../src/assets/img/game_place_holder.jpg | Bin 0 -> 11449 bytes app/frontend/src/pages/GameForum/GameForum.js | 106 ++++++++++++++---- app/frontend/src/pages/HomePage/HomePage.js | 2 +- 3 files changed, 87 insertions(+), 21 deletions(-) create mode 100644 app/frontend/src/assets/img/game_place_holder.jpg diff --git a/app/frontend/src/assets/img/game_place_holder.jpg b/app/frontend/src/assets/img/game_place_holder.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c9f63da32e36dd982028663dc2a8a3cd5b878f21 GIT binary patch literal 11449 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 { const [games, setGames] = useState([]) const [isLoading, setIsLoading] = useState(true) + const [searchQuery, setSearchQuery] = useState(''); + const [filteredGames, setFilteredGames] = useState([]); useEffect(() => { - const fetchGames = async () => { - setIsLoading(true) - try { - const response = await getAllGames() - setGames(response.data) - } catch (error) { - console.error(error) - } finally { - setIsLoading(false) + const fetchGames = async () => { + setIsLoading(true) + try { + const response = await getAllGames() + setGames(response.data) + } catch (error) { + console.error(error) + } finally { + setIsLoading(false) + } } - } - fetchGames() - }, []) + fetchGames() + }, []) + + const handleImageError = (event) => { + event.target.src = gamePlaceHolder; + }; + + const handleSearchInputChange = (event) => { + const query = event.target.value.toLowerCase(); + setSearchQuery(query); + + if (query === '') { + setFilteredGames([]); + } else { + const filtered = games.filter((game) => game.title.toLowerCase().includes(query)); + setFilteredGames(filtered); + } + }; if (isLoading) { return
Loading...
@@ -35,15 +58,57 @@ const GameForum = () => {
-
+

Games

+
-
-
- {games.filter(game => game.status === 'APPROVED').map((game) => ( - - ))} -
+ +
+
+ + {searchQuery + ? filteredGames + .filter((game) => game.status === 'APPROVED') + .map((game) => ( + + {game.title} + {game.title}} + actionIcon={ + + + + } + /> + + )) + : games + .filter((game) => game.status === 'APPROVED') + .map((game) => ( + + {game.title} + {game.title}} + actionIcon={ + + + + } + /> + + ))} +
@@ -56,3 +121,4 @@ const GameForum = () => { } export default GameForum + diff --git a/app/frontend/src/pages/HomePage/HomePage.js b/app/frontend/src/pages/HomePage/HomePage.js index 63da92f4..cd3ed512 100644 --- a/app/frontend/src/pages/HomePage/HomePage.js +++ b/app/frontend/src/pages/HomePage/HomePage.js @@ -135,7 +135,7 @@ export default function HomePage() {

Games

{/* Take 1/2 width of the screen, flex elements in a column, add margin on the left and right */}
- {gamesData.map((game) => ( + {gamesData.filter(game => game.status === 'APPROVED').map((game) => ( ))}
From 44f76662cb53dc06235c8fe458ceaa9d325a785d Mon Sep 17 00:00:00 2001 From: Beyzanur Bektan Date: Sun, 24 Dec 2023 22:36:14 +0300 Subject: [PATCH 2/7] button for going to game page --- app/frontend/src/pages/GameForum/GameForum.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/frontend/src/pages/GameForum/GameForum.js b/app/frontend/src/pages/GameForum/GameForum.js index 545c8894..2ddace9b 100644 --- a/app/frontend/src/pages/GameForum/GameForum.js +++ b/app/frontend/src/pages/GameForum/GameForum.js @@ -99,11 +99,13 @@ const GameForum = () => { {game.title} {game.title}} + title={{game.title}} actionIcon={ - - - + + + + + } /> From e325c2f300bc1788aaa03d369396c832bcbee143 Mon Sep 17 00:00:00 2001 From: Beyzanur Bektan Date: Sun, 24 Dec 2023 23:20:44 +0300 Subject: [PATCH 3/7] change color --- app/frontend/src/components/navbar/Navbar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/frontend/src/components/navbar/Navbar.js b/app/frontend/src/components/navbar/Navbar.js index 900fdbb9..3c3b7241 100644 --- a/app/frontend/src/components/navbar/Navbar.js +++ b/app/frontend/src/components/navbar/Navbar.js @@ -153,7 +153,7 @@ const Navbarx = () => { isBordered as='button' className='transition-transform' - color='secondary' + color='default' name='Jason Hughes' size='sm' src={userImage} @@ -192,15 +192,15 @@ const Navbarx = () => { ) : windowWidth < 768 ? ( - ) : (
- -
From aba5c87cd341145b25bf75799660528257bd41a0 Mon Sep 17 00:00:00 2001 From: Beyzanur Bektan Date: Sun, 24 Dec 2023 23:27:13 +0300 Subject: [PATCH 4/7] change color --- app/frontend/src/components/PostCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/frontend/src/components/PostCard.js b/app/frontend/src/components/PostCard.js index 7dcf5bfc..df3aebbe 100644 --- a/app/frontend/src/components/PostCard.js +++ b/app/frontend/src/components/PostCard.js @@ -32,7 +32,7 @@ const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => { {params.postId && ( )} diff --git a/app/frontend/src/pages/AdminPanel/AdminPanel.js b/app/frontend/src/pages/AdminPanel/AdminPanel.js index b3399587..2dcf33d2 100644 --- a/app/frontend/src/pages/AdminPanel/AdminPanel.js +++ b/app/frontend/src/pages/AdminPanel/AdminPanel.js @@ -61,8 +61,8 @@ const AdminPanel = () => {
Description: {game.description}
Player Number: {game.playerNumber}
Release Year: {game.releaseYear}
-
Genre: {game.genre}
-
Platform: {game.platform}
+
Genre: {game.genres}
+
Platform: {game.platforms}
Universe: {game.universe}
Mechanics: {game.mechanics}
Playtime: {game.playtime}
diff --git a/app/frontend/src/pages/GameForum/CreateGame.js b/app/frontend/src/pages/GameForum/CreateGame.js index 006d639d..77055028 100644 --- a/app/frontend/src/pages/GameForum/CreateGame.js +++ b/app/frontend/src/pages/GameForum/CreateGame.js @@ -27,8 +27,8 @@ export default function CreateGame() { const [gameData, setGameData] = useState({ title: '', description: '', - genre: [], - platform: [], + genres: [], + platforms: [], playerNumber: '', releaseYear: 0, universe: '', @@ -57,11 +57,18 @@ export default function CreateGame() { document.getElementById('imageInput').click() } - const predefinedGenres = ['Action', 'Adventure', 'Role-playing (RPG)', 'Simulation', 'Strategy', 'Sports', 'Horror'] - const predefinedPlatforms = ['PC', 'PlayStation', 'Xbox', 'Nintendo Switch', 'Mobile'] + + const predefinedGenres = ['RGP', 'Strategy', 'Shooter', 'Sports', 'Fighting', 'MOBA', 'Action', 'Adventure', 'Simulation', 'Horror', 'Empty']; + const predefinedPlatforms = ['XBOX', 'Computer', 'PS', 'Onboard', 'Mobile', 'Empty']; + const predefinedPlayerNumber = ['Single', 'Teams', 'Multiplayer', 'MMO', 'Empty']; + const predefinedUniverseInfo = ['Medieval', 'Fantasy', 'SciFi', 'Cyberpunk', 'Historical', 'Contemporary', 'PostApocalyptic', 'AlternateReality', 'Empty']; + const predefinedGameMechanics = ['TurnBased', 'ChangeBased', 'RealTime', 'Empty']; const [selectedGenres, setSelectedGenres] = useState([]) const [selectedPlatforms, setSelectedPlatforms] = useState([]) + const [selectedPlayerNumber, setSelectedPlayerNumber] = useState(''); + const [selectedUniverseInfo, setSelectedUniverseInfo] = useState(''); + const [selectedGameMechanics, setSelectedGameMechanics] = useState(''); const handleClickOpen = () => { setOpen(true) @@ -76,8 +83,11 @@ export default function CreateGame() { const postData = { ...gameData, - genre: selectedGenres.toString(), - platform: selectedPlatforms.toString(), + genres: selectedGenres, + platforms: selectedPlatforms, + playerNumber: selectedPlayerNumber, + universe: selectedUniverseInfo, + mechanics: selectedGameMechanics, image: selectedImage } // // if (postData.characters.length != 0) { @@ -92,11 +102,11 @@ export default function CreateGame() { // }) // } delete postData.characters - const { title, description, genre, platform, playerNumber, releaseYear, universe, mechanics, playtime, image } = postData - const request = { title, description, genre, platform, playerNumber, releaseYear, universe, mechanics, playtime, image } - const formDataToSend = new FormData() + const { title, description, genres, platforms, playerNumber, releaseYear, universe, mechanics, playtime, image } = postData + const request = { title, description, genres, platforms, playerNumber, releaseYear, universe, mechanics, playtime, image } + let formDataToSend = new FormData() - formDataToSend.append('request', new Blob([JSON.stringify(request)], { type: 'application/json' })) + formDataToSend.append('request', new Blob([JSON.stringify(request)], { type: 'application/json' })); if (selectedImage) { const file = new File([selectedImage], 'image.png', { type: 'image/png' }) formDataToSend.append('image', file) @@ -121,8 +131,8 @@ export default function CreateGame() { setGameData({ title: '', description: '', - genre: [], - platform: [], + genres: [], + platforms: [], playerNumber: '', releaseYear: 0, universe: '', @@ -139,14 +149,26 @@ export default function CreateGame() { setGameData((prevData) => ({ ...prevData, [property]: value })) } - const handleGenreChange = (event) => { + const handleGenresChange = (event) => { setSelectedGenres(event.target.value) } - const handlePlatformChange = (event) => { + const handlePlatformsChange = (event) => { setSelectedPlatforms(event.target.value) } + const handlePlayerNumberChange = (event) => { + setSelectedPlayerNumber(event.target.value); + }; + + const handleUniverseInfoChange = (event) => { + setSelectedUniverseInfo(event.target.value); + }; + + const handleGameMechanicsChange = (event) => { + setSelectedGameMechanics(event.target.value); + }; + const handleAddCharacter = () => { setGameData((prevData) => ({ ...prevData, @@ -186,18 +208,18 @@ export default function CreateGame() { fullWidth margin='normal' multiline - rowsMax={10} + rowsmax={10} value={value} onChange={(event) => handleChange(property, event.target.value)} /> - ) : property === 'genre' ? ( + ) : property === 'genres' ? ( - Genres + Genres - ) : property === 'platform' ? ( + ) : property === 'platforms' ? ( Platforms + ) : property === 'playerNumber' ? ( + + Number of Players + + + ) : property === 'universe' ? ( + + Universe Info + + + ) : property === 'mechanics' ? ( + + Game Mechanics + + ) : property === 'image' ? (
- - - Create Game - - - - - - - {Object.entries(gameData).map(([property, value]) => ( -
- {property === 'description' ? ( - handleChange(property, event.target.value)} - /> - ) : property === 'genre' ? ( - - Genres - - - ) : property === 'platform' ? ( - - Platforms - - - ) : property === 'image' ? ( -
- - - {selectedImage &&
Selected Image: {selectedImage.name}
} -
- ) : property === 'characters' ? ( - <> - {gameData.characters.map((character, index) => ( -
- { - const updatedCharacters = [...gameData.characters] - updatedCharacters[index].name = event.target.value - setGameData((prevData) => ({ ...prevData, characters: updatedCharacters })) - }} - /> - { - const updatedCharacters = [...gameData.characters] - updatedCharacters[index].description = event.target.value - setGameData((prevData) => ({ ...prevData, characters: updatedCharacters })) - }} - /> -
- ))} - - ) : ( - handleChange(property, event.target.value)} - /> - )} -
- ))} - - - - - - -
- ) -} diff --git a/app/frontend/src/services/lfgService.js b/app/frontend/src/services/lfgService.js index 10af3927..1916380c 100644 --- a/app/frontend/src/services/lfgService.js +++ b/app/frontend/src/services/lfgService.js @@ -1,37 +1,37 @@ import axios from 'axios' const axiosInstance = axios.create({ - baseURL: process.env.REACT_APP_API_URL + baseURL: process.env.REACT_APP_API_URL }) axiosInstance.defaults.withCredentials = true export const getAllGroups = () => { - return axiosInstance.get('/lfg/all') + return axiosInstance.get('/lfg/all') } export const createLfg = (lfgData) => { - return axiosInstance.post('/lfg', lfgData, { - withCredentials: true - }) + return axiosInstance.post('/lfg', lfgData, { + withCredentials: true + }) } export const getGroupById = (lfgId) => { - return axiosInstance.get(`/lfg/${lfgId}`) + return axiosInstance.get(`/lfg/${lfgId}`) } export const updateLfg = (lfgId, lfgData, sessionId) => { - return axiosInstance.put(`/lfg/${lfgId}`, lfgData, { - headers: { Cookie: `SESSIONID=${sessionId}` } - }) + return axiosInstance.put(`/lfg/${lfgId}`, lfgData, { + headers: { Cookie: `SESSIONID=${sessionId}` } + }) } export const deleteLfg = (lfgId, sessionId) => { - return axiosInstance.delete(`/lfg/${lfgId}`, { - headers: { Cookie: `SESSIONID=${sessionId}` } - }) + return axiosInstance.delete(`/lfg/${lfgId}`, { + headers: { Cookie: `SESSIONID=${sessionId}` } + }) } export const getRecommendedGroups = () => { - return axiosInstance.get('/lfg/recommended') + return axiosInstance.get('/lfg/recommended') } From 5793e71f743c486d56215df639c3d63771f3e96e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=96mer=20Talip=20Akal=C4=B1n?= Date: Mon, 25 Dec 2023 02:10:42 +0300 Subject: [PATCH 6/7] Update game page based for changes --- app/frontend/src/pages/GamePage/GamePage.js | 172 +++++++------------- 1 file changed, 58 insertions(+), 114 deletions(-) diff --git a/app/frontend/src/pages/GamePage/GamePage.js b/app/frontend/src/pages/GamePage/GamePage.js index 248365dd..1f3f6797 100644 --- a/app/frontend/src/pages/GamePage/GamePage.js +++ b/app/frontend/src/pages/GamePage/GamePage.js @@ -1,129 +1,71 @@ -import React from 'react' -import 'tailwindcss/tailwind.css' -import { Link } from 'react-router-dom' -import Navbarx from '../../components/navbar/Navbar' -import { useState, useEffect } from 'react' -import { getGame, rateGame } from '../../services/gameServise' -import { useParams } from 'react-router-dom' -import { getAllGames } from '../../services/gameService' -import { useNavigate } from 'react-router-dom' +import React, { useState, useEffect } from 'react'; +import 'tailwindcss/tailwind.css'; +import { useParams, useNavigate } from 'react-router-dom'; +import Navbarx from '../../components/navbar/Navbar'; +import { getGame, rateGame } from '../../services/gameService'; +// import { getAllGames } from '../../services/gameService'; const GamePage = () => { - const navigate = useNavigate() // Use useNavigate instead of useHistory + const navigate = useNavigate(); + const { gameId } = useParams(); - const { gameId } = useParams() - console.log(gameId) + const [game, setGame] = useState(null); + const [rating, setRating] = useState(null); + const [hasRated, setHasRated] = useState(false); + const [similarGames, setSimilarGames] = useState([]); - const [game, setGames] = useState({ - gameId: 0, - title: 'string', - description: 'string', - genre: 'string', - platform: 'string', - characters: [ - { - characterId: 0, - name: 'string', - description: 'string', - gameID: 0 - } - ], - playerNumber: 'string', - releaseYear: 0, - universe: 'string', - mechanics: 'string', - playtime: 'string', - totalRating: 0, - countRating: 0, - averageRating: 0, - creationDate: '2023-11-27T15:17:41.937Z', - tags: [ - { - tagId: 0, - name: 'string' - } - ], - gamePicture: 'string' - }) - useEffect(() => { - const game = async () => { + const fetchGame = async () => { try { - const response = await getGame(gameId) - setGames(response.data); - console.log(response.data) + const response = await getGame(gameId); + setGame(response.data); + setSimilarGames(response.data.similarGames); } catch (error) { - console.error(error) - } finally { - console.log(game) + console.error(error); } - } - game() - }, [gameId]) - - const [rating, setRating] = useState(null) - const [hasRated, setHasRated] = useState(false) + }; + fetchGame(); + }, [gameId]); const handleRatingChange = (selectedRating) => { - setRating(selectedRating) - } + setRating(selectedRating); + }; const handleRateGame = async () => { if (!hasRated && rating !== null) { try { - await rateGame(gameId, rating) // Assuming gameId is 1, replace with actual gameId if necessary - setHasRated(true) - } catch (error) { - if (error.response && error.response.status === 403) { - alert('You cannot vote more than once.') - } else { - console.error('Error rating game:', error) - } - } - } - } - const [gamesmyliked, setGamesMyLiked] = useState([]) - useEffect(() => { - const fetchGames = async () => { - try { - const response = await getAllGames() - setGamesMyLiked(response.data.slice(0, 4)) + await rateGame(gameId, rating); + setHasRated(true); } catch (error) { - console.error(error) - } finally { - console.log('all games') + console.error('Error rating game:', error); } } - - fetchGames() - }, []) - - console.log(game); + }; return ( <> - +
-

Page created on: October 15, 2023 by @fifaloverr

+

Page created on: {new Date(game?.creationDate).toLocaleDateString()}

- Game Cover + Game Cover
-

{game.title}

+

{game?.title}


Description

-

{game.description}

+

{game?.description}


-

{game.releaseYear}

+

Release Year: {game?.releaseYear}

@@ -131,7 +73,7 @@ const GamePage = () => {

Rating:

-

{game.averageRating}

+

{game?.averageRating}


@@ -146,16 +88,18 @@ const GamePage = () => { /> ))}
-

Genre:

- - {game.genre} - + {game?.genres.map((genre, index) => ( +

+ {genre} +

+ ))}
@@ -163,31 +107,32 @@ const GamePage = () => {

Features:

-

Mechanics: {game.mechanics}

-

Universe : {game.universe}

-

Playtime: {game.playtime}

-

Player number : {game.playerNumber}

+

Mechanics: {game?.mechanics}

+

Universe : {game?.universe}

+

Playtime: {game?.playtime}

+

Player number : {game?.playerNumber}

Platform:

-

{game.platform}

-

Game Details:

- - {game.characters.map((character) => ( -
+
+ {game?.platforms.map((platform, index) => ( +

{platform}

+ ))} +
+ {/*

Game Details:

*/} + {/* {game?.characters.map((character, index) => ( +

{character.name}

{character.description}

- ))} + ))} */}

Games You May Like:

- {gamesmyliked.map((game) => ( -
  • + {similarGames.map((game) => ( +
    • -

    @2023 Game Lounge, All rights reserved.

    - ) -} + ); +}; -export default GamePage +export default GamePage; From e9b5254ad31ee3f1c55de0424c3b0cdb42296a64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=96mer=20Talip=20Akal=C4=B1n?= Date: Mon, 25 Dec 2023 03:05:29 +0300 Subject: [PATCH 7/7] Implement game filtering at game page --- app/frontend/src/pages/GameForum/GameForum.js | 257 ++++++++++-------- 1 file changed, 145 insertions(+), 112 deletions(-) diff --git a/app/frontend/src/pages/GameForum/GameForum.js b/app/frontend/src/pages/GameForum/GameForum.js index 44f708b8..ef4bec9a 100644 --- a/app/frontend/src/pages/GameForum/GameForum.js +++ b/app/frontend/src/pages/GameForum/GameForum.js @@ -1,126 +1,159 @@ -import React from 'react' -import 'tailwindcss/tailwind.css' -import Navbarx from '../../components/navbar/Navbar' -import { useState, useEffect } from 'react' -import { getAllGames } from '../../services/gameService' -import CreateGame from './CreateGame' -import ImageList from '@mui/material/ImageList' -import ImageListItem from '@mui/material/ImageListItem' -import ImageListItemBar from '@mui/material/ImageListItemBar' +import React, { useState, useEffect } from 'react'; +import Navbarx from '../../components/navbar/Navbar'; +import { getAllGames } from '../../services/gameService'; +import CreateGame from './CreateGame'; +import ImageList from '@mui/material/ImageList'; +import ImageListItem from '@mui/material/ImageListItem'; +import ImageListItemBar from '@mui/material/ImageListItemBar'; import IconButton from '@mui/material/IconButton'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; -import gamePlaceHolder from '../../assets/img/game_place_holder.jpg' +import gamePlaceHolder from '../../assets/img/game_place_holder.jpg'; const GameForum = () => { - const [games, setGames] = useState([]) - const [isLoading, setIsLoading] = useState(true) - const [searchQuery, setSearchQuery] = useState(''); - const [filteredGames, setFilteredGames] = useState([]); + const [games, setGames] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [searchQuery, setSearchQuery] = useState(''); + const [selectedGenre, setSelectedGenre] = useState(''); + const [selectedPlatform, setSelectedPlatform] = useState(''); + const [selectedPlayerNumber, setSelectedPlayerNumber] = useState(''); + const [selectedUniverseInfo, setSelectedUniverseInfo] = useState(''); + const [selectedGameMechanics, setSelectedGameMechanics] = useState(''); - useEffect(() => { - const fetchGames = async () => { - setIsLoading(true) - try { - const response = await getAllGames() - setGames(response.data) - } catch (error) { - console.error(error) - } finally { - setIsLoading(false) - } - } + const predefinedGenres = ['RGP', 'Strategy', 'Shooter', 'Sports', 'Fighting', 'MOBA', 'Action', 'Adventure', 'Simulation', 'Horror', 'Empty']; + const predefinedPlatforms = ['XBOX', 'Computer', 'PS', 'Onboard', 'Mobile', 'Empty']; + const predefinedPlayerNumber = ['Single', 'Teams', 'Multiplayer', 'MMO', 'Empty']; + const predefinedUniverseInfo = ['Medieval', 'Fantasy', 'SciFi', 'Cyberpunk', 'Historical', 'Contemporary', 'PostApocalyptic', 'AlternateReality', 'Empty']; + const predefinedGameMechanics = ['TurnBased', 'ChangeBased', 'RealTime', 'Empty']; - fetchGames() - }, []) + useEffect(() => { + const fetchGames = async () => { + setIsLoading(true); + try { + const response = await getAllGames(); + setGames(response.data); + } catch (error) { + console.error(error); + } finally { + setIsLoading(false); + } + }; + fetchGames(); + }, []); - const handleImageError = (event) => { - event.target.src = gamePlaceHolder; + const handleGenreChange = (event) => { + setSelectedGenre(event.target.value); }; - const handleSearchInputChange = (event) => { - const query = event.target.value.toLowerCase(); - setSearchQuery(query); + const handlePlatformChange = (event) => { + setSelectedPlatform(event.target.value); + }; - if (query === '') { - setFilteredGames([]); - } else { - const filtered = games.filter((game) => game.title.toLowerCase().includes(query)); - setFilteredGames(filtered); - } - }; + const handlePlayerNumberChange = (event) => { + setSelectedPlayerNumber(event.target.value); + }; - if (isLoading) { - return
    Loading...
    - } + const handleUniverseInfoChange = (event) => { + setSelectedUniverseInfo(event.target.value); + }; - return ( - <> - -     - - ) -} + const handleGameMechanicsChange = (event) => { + setSelectedGameMechanics(event.target.value); + }; -export default GameForum + const handleImageError = (event) => { + event.target.src = gamePlaceHolder; + }; + + const handleSearchInputChange = (event) => { + setSearchQuery(event.target.value.toLowerCase()); + }; + + if (isLoading) { + return
    Loading...
    ; + } + + return ( + <> + +
    +
    +
    +

    Games

    + +
    + + + + + + +
    + + {console.log(games)} + {games + .filter((game) => selectedGenre === '' || game.genres.includes(selectedGenre)) + .filter((game) => selectedPlatform === '' || game.platforms.includes(selectedPlatform)) + .filter((game) => selectedPlayerNumber === '' || game.playerNumber.includes(selectedPlayerNumber)) + .filter((game) => selectedUniverseInfo === '' || game.universe.includes(selectedUniverseInfo)) + .filter((game) => selectedGameMechanics === '' || game.mechanics.includes(selectedGameMechanics)) + .filter((game) => searchQuery === '' || game.title.toLowerCase().includes(searchQuery)) + .map((game) => ( + + {game.title} + {game.title}} + actionIcon={ + + + + + + } + /> + + ))} + +
    +
    +
    + + ); +}; +export default GameForum; \ No newline at end of file