Skip to content

Commit

Permalink
Merge pull request #653 from bounswe/frontend/enhancement/improve-gam…
Browse files Browse the repository at this point in the history 
…e-forum-629

Improve Game Forum - Fix Create Game
  • Loading branch information
@nikodrates
nikodrates authored Dec 25, 2023
2 parents 173d05d + f190716 commit c2b7422
Show file tree
Hide file tree
Showing 10 changed files with 320 additions and 491 deletions.
Binary file added app/frontend/src/assets/img/game_place_holder.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/frontend/src/components/PostCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
{params.postId && (
<button
onClick={() => handleDeletePost(post.postId)}
className='btn btn-circle btn-sm bg-red-600 text-white hover:bg-red-800'
className='btn btn-sm bg-neutral-200 border-none hover:bg-neutral-300'
title='Delete Post'
>
🗑️
Expand Down
8 changes: 4 additions & 4 deletions app/frontend/src/components/navbar/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const Navbarx = () => {
isBordered
as='button'
className='transition-transform'
color='secondary'
color='default'
name='Jason Hughes'
size='sm'
src={userImage}
Expand Down Expand Up @@ -192,15 +192,15 @@ const Navbarx = () => {
</DropdownMenu>
</Dropdown>
) : windowWidth < 768 ? (
<Button color='primary' variant='shadow' size='md' onClick={navigateToLogin}>
<Button color='default' variant='faded' size='md' onClick={navigateToLogin}>
Log In
</Button>
) : (
<div className='flex'>
<Button color='primary' variant='shadow' size='md' onClick={navigateToLogin}>
<Button color='default' variant='faded' size='md' onClick={navigateToLogin}>
Log In
</Button>
<Button color='primary' variant='faded' size='md' style={{ marginLeft: 12 }} onClick={navigateToSignup}>
<Button color='default' variant='faded' size='md' style={{ marginLeft: 12 }} onClick={navigateToSignup}>
Sign Up
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/frontend/src/pages/AdminPanel/AdminPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ const AdminPanel = () => {
<div>Description: {game.description}</div>
<div>Player Number: {game.playerNumber}</div>
<div>Release Year: {game.releaseYear}</div>
<div>Genre: {game.genre}</div>
<div>Platform: {game.platform}</div>
<div>Genre: {game.genres}</div>
<div>Platform: {game.platforms}</div>
<div>Universe: {game.universe}</div>
<div>Mechanics: {game.mechanics}</div>
<div>Playtime: {game.playtime}</div>
Expand Down
107 changes: 87 additions & 20 deletions app/frontend/src/pages/GameForum/CreateGame.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ export default function CreateGame() {
const [gameData, setGameData] = useState({
title: '',
description: '',
genre: [],
platform: [],
genres: [],
platforms: [],
playerNumber: '',
releaseYear: 0,
universe: '',
Expand Down Expand Up @@ -57,11 +57,18 @@ export default function CreateGame() {
document.getElementById('imageInput').click()
}

const predefinedGenres = ['MOBA', 'FIGHTING', 'STRATEGY', 'SPORTS_AND_RACING', 'RPG', 'SHOOTER']
const predefinedPlatforms = ['PS', '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)
Expand All @@ -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) {
Expand All @@ -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)
Expand All @@ -121,8 +131,8 @@ export default function CreateGame() {
setGameData({
title: '',
description: '',
genre: [],
platform: [],
genres: [],
platforms: [],
playerNumber: '',
releaseYear: 0,
universe: '',
Expand All @@ -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,
Expand Down Expand Up @@ -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' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='genre-label'>Genres</InputLabel>
<InputLabel id='genres-label'>Genres</InputLabel>
<Select
label='Genres'
multiple
value={selectedGenres}
onChange={handleGenreChange}
onChange={handleGenresChange}
input={<OutlinedInput label='Genres' />}
renderValue={(selected) => selected.join(', ')}
>
Expand All @@ -209,14 +231,14 @@ export default function CreateGame() {
))}
</Select>
</FormControl>
) : property === 'platform' ? (
) : property === 'platforms' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='platform-label'>Platforms</InputLabel>
<Select
label='Platforms'
multiple
value={selectedPlatforms}
onChange={handlePlatformChange}
onChange={handlePlatformsChange}
input={<OutlinedInput label='Platforms' />}
renderValue={(selected) => selected.join(', ')}
>
Expand All @@ -228,6 +250,51 @@ export default function CreateGame() {
))}
</Select>
</FormControl>
) : property === 'playerNumber' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='playerNumber-label'>Number of Players</InputLabel>
<Select
label='Number of Players'
value={selectedPlayerNumber}
onChange={handlePlayerNumberChange}
>
{predefinedPlayerNumber.map((playerNumber) => (
<MenuItem key={playerNumber} value={playerNumber}>
{playerNumber}
</MenuItem>
))}
</Select>
</FormControl>
) : property === 'universe' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='universeInfo-label'>Universe Info</InputLabel>
<Select
label='Universe Info'
value={selectedUniverseInfo}
onChange={handleUniverseInfoChange}
>
{predefinedUniverseInfo.map((universeInfo) => (
<MenuItem key={universeInfo} value={universeInfo}>
{universeInfo}
</MenuItem>
))}
</Select>
</FormControl>
) : property === 'mechanics' ? (
<FormControl fullWidth margin='normal'>
<InputLabel id='gameMechanics-label'>Game Mechanics</InputLabel>
<Select
label='Game Mechanics'
value={selectedGameMechanics}
onChange={handleGameMechanicsChange}
>
{predefinedGameMechanics.map((gameMechanics) => (
<MenuItem key={gameMechanics} value={gameMechanics}>
{gameMechanics}
</MenuItem>
))}
</Select>
</FormControl>
) : property === 'image' ? (
<div>
<Button variant='outlined' onClick={handleUploadButtonClick}>
Expand Down
Loading

0 comments on commit c2b7422

Please sign in to comment.