Skip to content

Commit

Permalink
Merge pull request #685 from bounswe/frontend/enhancement/related-games
Browse files Browse the repository at this point in the history 
Frontend/enhancement/related games
  • Loading branch information
@beyzabektan
beyzabektan authored Dec 26, 2023
2 parents 338201a + ff37845 commit 744b176
Showing 1 changed file with 93 additions and 37 deletions.
130 changes: 93 additions & 37 deletions app/frontend/src/pages/GameForum/CreateGame.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
import CloseIcon from '@mui/icons-material/Close'
import { useForm } from 'react-hook-form'
import axios from 'axios'
import { useEffect } from 'react'
import { getAllGames } from '../../services/gameService'
//import { postChar } from '../../services/gameServise'

export default function CreateGame() {
Expand Down Expand Up @@ -57,18 +59,52 @@ export default function CreateGame() {
document.getElementById('imageInput').click()
}

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 [gamesData, setGamesData] = useState([])
useEffect(() => {
const fetchGames = async () => {
try {
const response = await getAllGames()
setGamesData(response.data)
} catch (error) {
console.log(error)
}
}

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()
}, [])
const [selectedGenres, setSelectedGenres] = useState([])
const [selectedPlatforms, setSelectedPlatforms] = useState([])
const [selectedPlayerNumber, setSelectedPlayerNumber] = useState('');
const [selectedUniverseInfo, setSelectedUniverseInfo] = useState('');
const [selectedGameMechanics, setSelectedGameMechanics] = useState('');
const [selectedPlayerNumber, setSelectedPlayerNumber] = useState('')
const [selectedUniverseInfo, setSelectedUniverseInfo] = useState('')
const [selectedGameMechanics, setSelectedGameMechanics] = useState('')
const [selectedGames, setSelectedGames] = useState([])

const handleClickOpen = () => {
setOpen(true)
Expand All @@ -87,7 +123,7 @@ export default function CreateGame() {
platforms: selectedPlatforms,
playerNumber: selectedPlayerNumber,
universe: selectedUniverseInfo,
mechanics: selectedGameMechanics,
mechanics: selectedGameMechanics,
image: selectedImage
}
// // if (postData.characters.length != 0) {
Expand All @@ -106,7 +142,7 @@ export default function CreateGame() {
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)
Expand Down Expand Up @@ -143,6 +179,7 @@ export default function CreateGame() {
})
setSelectedGenres([])
setSelectedPlatforms([])
setSelectedGames([])
}

const handleChange = (property, value) => {
Expand All @@ -152,22 +189,26 @@ export default function CreateGame() {
const handleGenresChange = (event) => {
setSelectedGenres(event.target.value)
}
const handleGamesChange = (event) => {
setSelectedGames(event.target.value)
console.log(event.target.value)
}

const handlePlatformsChange = (event) => {
setSelectedPlatforms(event.target.value)
}

const handlePlayerNumberChange = (event) => {
setSelectedPlayerNumber(event.target.value);
};
setSelectedPlayerNumber(event.target.value)
}

const handleUniverseInfoChange = (event) => {
setSelectedUniverseInfo(event.target.value);
};
setSelectedUniverseInfo(event.target.value)
}

const handleGameMechanicsChange = (event) => {
setSelectedGameMechanics(event.target.value);
};
setSelectedGameMechanics(event.target.value)
}

const handleAddCharacter = () => {
setGameData((prevData) => ({
Expand All @@ -178,10 +219,19 @@ export default function CreateGame() {

return (
<div>
<Button variant='outlined' onClick={handleClickOpen}
sx={{ color: 'white', backgroundColor: '#b46161', border: 'none', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)', '&:hover': { backgroundColor: '#6e4141', border: 'none'} }}>
Create Game
</Button>
<Button
variant='outlined'
onClick={handleClickOpen}
sx={{
color: 'white',
backgroundColor: '#b46161',
border: 'none',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
'&:hover': { backgroundColor: '#6e4141', border: 'none' }
}}
>
Create Game
</Button>
<Dialog open={open} onClose={handleClose} fullWidth>
<DialogTitle>
Create Game
Expand Down Expand Up @@ -253,11 +303,7 @@ export default function CreateGame() {
) : property === 'playerNumber' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='playerNumber-label'>Number of Players</InputLabel>
<Select
label='Number of Players'
value={selectedPlayerNumber}
onChange={handlePlayerNumberChange}
>
<Select label='Number of Players' value={selectedPlayerNumber} onChange={handlePlayerNumberChange}>
{predefinedPlayerNumber.map((playerNumber) => (
<MenuItem key={playerNumber} value={playerNumber}>
{playerNumber}
Expand All @@ -268,11 +314,7 @@ export default function CreateGame() {
) : property === 'universe' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='universeInfo-label'>Universe Info</InputLabel>
<Select
label='Universe Info'
value={selectedUniverseInfo}
onChange={handleUniverseInfoChange}
>
<Select label='Universe Info' value={selectedUniverseInfo} onChange={handleUniverseInfoChange}>
{predefinedUniverseInfo.map((universeInfo) => (
<MenuItem key={universeInfo} value={universeInfo}>
{universeInfo}
Expand All @@ -283,11 +325,7 @@ export default function CreateGame() {
) : property === 'mechanics' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='gameMechanics-label'>Game Mechanics</InputLabel>
<Select
label='Game Mechanics'
value={selectedGameMechanics}
onChange={handleGameMechanicsChange}
>
<Select label='Game Mechanics' value={selectedGameMechanics} onChange={handleGameMechanicsChange}>
{predefinedGameMechanics.map((gameMechanics) => (
<MenuItem key={gameMechanics} value={gameMechanics}>
{gameMechanics}
Expand Down Expand Up @@ -350,6 +388,24 @@ export default function CreateGame() {
)}
</div>
))}
<FormControl fullWidth margin='normal'>
<InputLabel id='gSimilar Games'>Similar Games</InputLabel>
<Select
label='Similar Games'
multiple
value={selectedGames}
onChange={handleGamesChange}
input={<OutlinedInput label='Similar Games' />}
renderValue={(selected) => selected.join(', ')}
>
{gamesData.map((game) => (
<MenuItem key={game.title} value={game.title}>
<Checkbox checked={selectedGames.indexOf(game.title) > -1} />
<ListItemText primary={game.title} />
</MenuItem>
))}
</Select>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
Expand Down

0 comments on commit 744b176

Please sign in to comment.