Character Creator
Added the character creation page.
This commit is contained in:
Marces Zastrow
Binary file not shown.
@@ -192,7 +192,44 @@ app.get('/games/:gameId/items', (req, res) => {
|
|||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
// Player Part
|
// Player Part
|
||||||
|
|
||||||
|
// Create Player Character
|
||||||
|
app.post('/games/character/create', upload.single('image'), (req, res) => {
|
||||||
|
const {
|
||||||
|
charName, race, sex, age, job, description,
|
||||||
|
maxHealth, maxMana, strength, dexterity, agility, endurance,
|
||||||
|
gameId, playerId
|
||||||
|
} = req.body;
|
||||||
|
|
||||||
|
const imageBuffer = req.file ? req.file.buffer : null;
|
||||||
|
|
||||||
|
const stmt = db.prepare(`
|
||||||
|
INSERT INTO PlayerCharacter (
|
||||||
|
GameID, PlayerID, CharName, Race, Sex, Age, Job,
|
||||||
|
description, maxHealth, currentHealth, maxMana, currentMana,
|
||||||
|
Strength, Dexterity, Agility, Endurance, Level, Gold, Img
|
||||||
|
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, 0, ?)
|
||||||
|
`);
|
||||||
|
|
||||||
|
stmt.run([
|
||||||
|
gameId, playerId, charName, race, sex, age, job,
|
||||||
|
description, maxHealth, maxHealth, maxMana, maxMana,
|
||||||
|
strength, dexterity, agility, endurance, imageBuffer
|
||||||
|
], function(err) {
|
||||||
|
if (err) {
|
||||||
|
console.error('Database error:', err);
|
||||||
|
return res.status(500).json({ error: 'Internal server error' });
|
||||||
|
}
|
||||||
|
res.status(201).json({
|
||||||
|
message: 'Character created successfully!',
|
||||||
|
characterId: this.lastID
|
||||||
|
});
|
||||||
|
});
|
||||||
|
stmt.finalize();
|
||||||
|
});
|
||||||
|
|
||||||
// Fetch all Player Characters of Player
|
// Fetch all Player Characters of Player
|
||||||
app.get('/games/:userId/characters', (req, res) => {
|
app.get('/games/:userId/characters', (req, res) => {
|
||||||
const userId = req.params.userId;
|
const userId = req.params.userId;
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
@@ -2,17 +2,19 @@ import React, { useState, useContext } from 'react';
|
|||||||
import { useNavigate, useLocation } from 'react-router-dom';
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||||||
import { UserContext } from '../context/UserContext';
|
import { UserContext } from '../context/UserContext';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import {
|
import { Box, TextField, Button, Typography, Select, MenuItem, FormControl, InputLabel, Grid2, Card, CardContent, CardMedia, Menu } from '@mui/material';
|
||||||
Box,
|
|
||||||
TextField,
|
// Import the same icons as in games.jsx
|
||||||
Button,
|
import PaidIcon from '@mui/icons-material/Paid';
|
||||||
Typography,
|
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
|
||||||
Select,
|
import PetsIcon from '@mui/icons-material/Pets';
|
||||||
MenuItem,
|
import WcIcon from '@mui/icons-material/Wc';
|
||||||
FormControl,
|
import WorkIcon from '@mui/icons-material/Work';
|
||||||
InputLabel,
|
import HeartIcon from '@mui/icons-material/Favorite';
|
||||||
Grid2
|
import WaterDropIcon from '@mui/icons-material/WaterDrop';
|
||||||
} from '@mui/material';
|
import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
|
||||||
|
|
||||||
|
import defaultCharacterImage from '../assets/default-character.png';
|
||||||
|
|
||||||
const CreateCharacter = () => {
|
const CreateCharacter = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -57,362 +59,364 @@ const CreateCharacter = () => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const formDataToSend = new FormData();
|
const formDataToSend = new FormData();
|
||||||
|
|
||||||
// Append all form data
|
// Add all form data
|
||||||
Object.keys(formData).forEach(key => {
|
Object.keys(formData).forEach(key => {
|
||||||
formDataToSend.append(key, formData[key]);
|
formDataToSend.append(key, formData[key]);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Append image if exists
|
// Add image if selected
|
||||||
if (selectedImage) {
|
if (selectedImage) {
|
||||||
formDataToSend.append('image', selectedImage);
|
formDataToSend.append('image', selectedImage);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add gameId and playerId
|
||||||
|
formDataToSend.append('gameId', gameId);
|
||||||
|
formDataToSend.append('playerId', userId);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await axios.post('http://localhost:5000/games/character/create',
|
const response = await axios.post(
|
||||||
formDataToSend,
|
'http://localhost:5000/games/character/create',
|
||||||
{
|
formDataToSend,
|
||||||
headers: {
|
{
|
||||||
'Content-Type': 'multipart/form-data'
|
headers: {
|
||||||
}
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.status === 201) {
|
||||||
|
// Redirect to the game page after successful character creation
|
||||||
|
navigate(`/games/${gameId}`);
|
||||||
}
|
}
|
||||||
);
|
|
||||||
navigate(`/games/${gameId}`);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error creating character:', error);
|
console.error('Error creating character:', error);
|
||||||
|
// You might want to show an error message to the user here
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputStyles = {
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'& fieldset': { borderColor: '#444' },
|
||||||
|
'&:hover fieldset': { borderColor: '#764ACB' },
|
||||||
|
'&.Mui-focused fieldset': { borderColor: '#764ACB' },
|
||||||
|
},
|
||||||
|
'& .MuiInputLabel-root': { color: '#fff' },
|
||||||
|
'& .MuiInputBase-input': { color: '#fff' }
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{
|
<Box sx={{ p: 3, background: 'rgba(30, 30, 47, 0.9)', borderRadius: '8px', marginTop: '40px' }}>
|
||||||
p: 3,
|
|
||||||
background: 'rgba(30, 30, 47, 0.9)',
|
|
||||||
borderRadius: '8px',
|
|
||||||
marginTop: '40px',
|
|
||||||
maxWidth: '800px',
|
|
||||||
margin: '40px auto'
|
|
||||||
}}>
|
|
||||||
<Typography variant="h4" sx={{ mb: 4, color: '#fff', textAlign: 'center' }}>
|
|
||||||
Create New Character
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Grid2 container spacing={2}>
|
<Grid2 container spacing={3}>
|
||||||
{/* Basic Info */}
|
{/* Character Image and Details */}
|
||||||
<Grid2 item xs={12}>
|
<Grid2 item xs={12} md={4}>
|
||||||
<TextField
|
<Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
|
||||||
fullWidth
|
<Card sx={{ width: '400px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
|
||||||
label="Character Name"
|
{imagePreview ? (
|
||||||
name="charName"
|
<Box
|
||||||
value={formData.charName}
|
component="label"
|
||||||
onChange={handleChange}
|
htmlFor="image-upload"
|
||||||
required
|
sx={{
|
||||||
sx={{
|
cursor: 'pointer',
|
||||||
'& .MuiOutlinedInput-root': {
|
position: 'relative',
|
||||||
'& fieldset': {
|
'&:hover::after': {
|
||||||
borderColor: '#444',
|
content: '"Change Image"',
|
||||||
},
|
position: 'absolute',
|
||||||
'&:hover fieldset': {
|
top: 0,
|
||||||
borderColor: '#764ACB',
|
left: 0,
|
||||||
},
|
right: 0,
|
||||||
'&.Mui-focused fieldset': {
|
bottom: 0,
|
||||||
borderColor: '#764ACB',
|
display: 'flex',
|
||||||
},
|
alignItems: 'center',
|
||||||
},
|
justifyContent: 'center',
|
||||||
'& .MuiInputLabel-root': {
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
fontSize: '1.2rem',
|
||||||
'& .MuiInputBase-input': {
|
borderRadius: '3px'
|
||||||
color: '#fff',
|
}
|
||||||
}
|
}}
|
||||||
}}
|
>
|
||||||
/>
|
<input
|
||||||
</Grid2>
|
accept="image/*"
|
||||||
|
type="file"
|
||||||
|
id="image-upload"
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={handleImageChange}
|
||||||
|
/>
|
||||||
|
<CardMedia
|
||||||
|
component="img"
|
||||||
|
height="300"
|
||||||
|
image={imagePreview}
|
||||||
|
alt="Character Preview"
|
||||||
|
sx={{ borderRadius: '3px', objectFit: 'cover', margin: '0 auto' }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: 300,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: '#2e2e3f',
|
||||||
|
borderRadius: '3px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
component="label"
|
||||||
|
htmlFor="image-upload"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
accept="image/*"
|
||||||
|
type="file"
|
||||||
|
id="image-upload"
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={handleImageChange}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
component="span"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#764ACB',
|
||||||
|
'&:hover': { backgroundColor: '#9865f7' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Upload Character Image
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
<CardContent sx={{
|
||||||
|
padding: '4px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
|
<TextField
|
||||||
|
label="Character Name"
|
||||||
|
name="charName"
|
||||||
|
value={formData.charName}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
sx={{
|
||||||
|
mb: 4,
|
||||||
|
width: '315px',
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
'& fieldset': { borderColor: '#444' },
|
||||||
|
'&:hover fieldset': { borderColor: '#764ACB' },
|
||||||
|
},
|
||||||
|
'& .MuiInputLabel-root': { color: '#fff' },
|
||||||
|
'& .MuiInputBase-input': { color: '#fff', textAlign: 'center' }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Image Upload */}
|
<Grid2 container spacing={2} sx={{ maxWidth: '600px', justifyContent: 'center' }}>
|
||||||
<Grid2 item xs={12}>
|
<Grid2 item xs={5}>
|
||||||
<input
|
<TextField
|
||||||
accept="image/*"
|
fullWidth
|
||||||
type="file"
|
label="Age"
|
||||||
id="image-upload"
|
name="age"
|
||||||
style={{ display: 'none' }}
|
type="number"
|
||||||
onChange={handleImageChange}
|
value={formData.age}
|
||||||
/>
|
onChange={handleChange}
|
||||||
<label htmlFor="image-upload">
|
required
|
||||||
<Button
|
sx={{ ...inputStyles, width: '150px' }}
|
||||||
variant="contained"
|
/>
|
||||||
component="span"
|
</Grid2>
|
||||||
sx={{
|
<Grid2 item xs={5}>
|
||||||
backgroundColor: '#764ACB',
|
<TextField
|
||||||
'&:hover': { backgroundColor: '#9865f7' },
|
fullWidth
|
||||||
mb: 2
|
label="Race"
|
||||||
}}
|
name="race"
|
||||||
>
|
value={formData.race}
|
||||||
Upload Character Image
|
onChange={handleChange}
|
||||||
</Button>
|
required
|
||||||
</label>
|
sx={{ ...inputStyles, width: '150px' }}
|
||||||
{imagePreview && (
|
/>
|
||||||
<Box sx={{ mt: 2, mb: 2 }}>
|
</Grid2>
|
||||||
<img
|
<Grid2 item xs={5}>
|
||||||
src={imagePreview}
|
<FormControl fullWidth>
|
||||||
alt="Preview"
|
<InputLabel sx={{ color: '#fff' }}>Sex</InputLabel>
|
||||||
style={{
|
<Select
|
||||||
maxWidth: '200px',
|
name="sex"
|
||||||
borderRadius: '4px',
|
value={formData.sex}
|
||||||
border: '1px solid #444'
|
onChange={handleChange}
|
||||||
}}
|
required
|
||||||
/>
|
sx={{
|
||||||
</Box>
|
color: '#fff',
|
||||||
)}
|
'& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
|
||||||
</Grid2>
|
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: '#764ACB' },
|
||||||
|
width: '150px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="Male">Male</MenuItem>
|
||||||
|
<MenuItem value="Female">Female</MenuItem>
|
||||||
|
<MenuItem value="Other">Other</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Grid2>
|
||||||
|
<Grid2 item xs={5}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Job/Class"
|
||||||
|
name="job"
|
||||||
|
value={formData.job}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
sx={{ ...inputStyles, width: '150px' }}
|
||||||
|
/>
|
||||||
|
</Grid2>
|
||||||
|
</Grid2>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
</Grid2 >
|
||||||
|
|
||||||
{/* Character Details */}
|
<Grid2 item xs={12} md={8}>
|
||||||
<Grid2 container item spacing={2}>
|
{/* Health/Mana Bars - Keep existing */}
|
||||||
<Grid2 item xs={12} md={6}>
|
<Box sx={{ display: 'flex', gap: 2, mb: 4, width: '885px' }}>
|
||||||
<FormControl fullWidth sx={{ mb: 2 }}>
|
<Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
|
||||||
<InputLabel sx={{ color: '#fff' }}>Race</InputLabel>
|
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
|
||||||
<Select
|
<HeartIcon sx={{ color: "red" }} />
|
||||||
name="race"
|
<span>Max Health</span>
|
||||||
value={formData.race}
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
name="maxHealth"
|
||||||
|
type="number"
|
||||||
|
value={formData.maxHealth}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
required
|
||||||
sx={{
|
sx={{
|
||||||
color: '#fff',
|
'& .MuiOutlinedInput-root': {
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
'& fieldset': { borderColor: '#444' },
|
||||||
borderColor: '#444',
|
'&:hover fieldset': { borderColor: '#764ACB' },
|
||||||
},
|
},
|
||||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
'& .MuiInputBase-input': { color: '#fff' }
|
||||||
borderColor: '#764ACB',
|
|
||||||
},
|
|
||||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: '#764ACB',
|
|
||||||
},
|
|
||||||
'& .MuiSelect-icon': {
|
|
||||||
color: '#fff',
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<MenuItem value="Human">Human</MenuItem>
|
</Box>
|
||||||
<MenuItem value="Elf">Elf</MenuItem>
|
<Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
|
||||||
<MenuItem value="Dwarf">Dwarf</MenuItem>
|
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
|
||||||
<MenuItem value="Orc">Orc</MenuItem>
|
<WaterDropIcon sx={{ color: 'blue' }} />
|
||||||
</Select>
|
<span>Max Mana</span>
|
||||||
</FormControl>
|
</Typography>
|
||||||
</Grid2>
|
<TextField
|
||||||
|
fullWidth
|
||||||
<Grid2 item xs={12} md={6}>
|
name="maxMana"
|
||||||
<FormControl fullWidth>
|
type="number"
|
||||||
<InputLabel sx={{ color: '#fff' }}>Sex</InputLabel>
|
value={formData.maxMana}
|
||||||
<Select
|
|
||||||
name="sex"
|
|
||||||
value={formData.sex}
|
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
required
|
||||||
sx={{ color: '#fff', '& fieldset': { borderColor: '#444' } }}
|
sx={{
|
||||||
>
|
'& .MuiOutlinedInput-root': {
|
||||||
<MenuItem value="Male">Male</MenuItem>
|
'& fieldset': { borderColor: '#444' },
|
||||||
<MenuItem value="Female">Female</MenuItem>
|
'&:hover fieldset': { borderColor: '#764ACB' },
|
||||||
<MenuItem value="Other">Other</MenuItem>
|
},
|
||||||
</Select>
|
'& .MuiInputBase-input': { color: '#fff' }
|
||||||
</FormControl>
|
}}
|
||||||
</Grid2>
|
/>
|
||||||
|
</Box>
|
||||||
<Grid2 item xs={12} md={6}>
|
</Box>
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Age"
|
|
||||||
name="age"
|
|
||||||
type="number"
|
|
||||||
value={formData.age}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Job/Class"
|
|
||||||
name="job"
|
|
||||||
value={formData.job}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
{/* Stats */}
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Max Health"
|
|
||||||
name="maxHealth"
|
|
||||||
type="number"
|
|
||||||
value={formData.maxHealth}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Max Mana"
|
|
||||||
name="maxMana"
|
|
||||||
type="number"
|
|
||||||
value={formData.maxMana}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Strength"
|
|
||||||
name="strength"
|
|
||||||
type="number"
|
|
||||||
value={formData.strength}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Dexterity"
|
|
||||||
name="dexterity"
|
|
||||||
type="number"
|
|
||||||
value={formData.dexterity}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Agility"
|
|
||||||
name="agility"
|
|
||||||
type="number"
|
|
||||||
value={formData.agility}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Grid2 item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Endurance"
|
|
||||||
name="endurance"
|
|
||||||
type="number"
|
|
||||||
value={formData.endurance}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': { borderColor: '#444' },
|
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<Grid2 item xs={12}>
|
<Box sx={{ mb: 4 }}>
|
||||||
<TextField
|
<Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Description</Typography>
|
||||||
fullWidth
|
<Box sx={{ backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
|
||||||
label="Description"
|
<TextField
|
||||||
name="description"
|
fullWidth
|
||||||
multiline
|
multiline
|
||||||
rows={4}
|
rows={4}
|
||||||
value={formData.description}
|
name="description"
|
||||||
onChange={handleChange}
|
value={formData.description}
|
||||||
sx={{
|
onChange={handleChange}
|
||||||
'& .MuiOutlinedInput-root': {
|
sx={{
|
||||||
'& fieldset': { borderColor: '#444' },
|
'& .MuiOutlinedInput-root': {
|
||||||
'&:hover fieldset': { borderColor: '#764ACB' },
|
'& fieldset': { borderColor: '#444' },
|
||||||
},
|
'&:hover fieldset': { borderColor: '#764ACB' },
|
||||||
'& .MuiInputLabel-root': { color: '#fff' },
|
},
|
||||||
'& .MuiInputBase-input': { color: '#fff' }
|
'& .MuiInputBase-input': { color: '#fff' }
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Grid2>
|
</Box>
|
||||||
</Grid2>
|
</Box>
|
||||||
</Grid2>
|
|
||||||
|
|
||||||
<Button
|
{/* Stats Grid */}
|
||||||
type="submit"
|
<Box sx={{ mb: 4 }}>
|
||||||
variant="contained"
|
<Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Character Stats</Typography>
|
||||||
fullWidth
|
<Box sx={{
|
||||||
sx={{
|
backgroundColor: '#2e2e3f',
|
||||||
backgroundColor: '#764ACB',
|
p: 2,
|
||||||
'&:hover': { backgroundColor: '#9865f7' },
|
borderRadius: '8px',
|
||||||
mt: 3
|
border: '1px solid #444',
|
||||||
}}
|
maxWidth: '800px',
|
||||||
>
|
margin: '0 auto'
|
||||||
Create Character
|
}}>
|
||||||
</Button>
|
<Grid2 container spacing={3} justifyContent="center">
|
||||||
</form>
|
|
||||||
</Box>
|
<Grid2 item xs={10} md={2}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Strength"
|
||||||
|
name="strength"
|
||||||
|
type="number"
|
||||||
|
value={formData.strength}
|
||||||
|
onChange={handleChange}
|
||||||
|
sx={{ ...inputStyles }}
|
||||||
|
/>
|
||||||
|
</Grid2>
|
||||||
|
<Grid2 item xs={10} md={2}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Dexterity"
|
||||||
|
name="dexterity"
|
||||||
|
type="number"
|
||||||
|
value={formData.dexterity}
|
||||||
|
onChange={handleChange}
|
||||||
|
sx={{ ...inputStyles }}
|
||||||
|
/>
|
||||||
|
</Grid2>
|
||||||
|
<Grid2 item xs={10} md={2}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Agility"
|
||||||
|
name="agility"
|
||||||
|
type="number"
|
||||||
|
value={formData.agility}
|
||||||
|
onChange={handleChange}
|
||||||
|
sx={{ ...inputStyles }}
|
||||||
|
/>
|
||||||
|
</Grid2>
|
||||||
|
<Grid2 item xs={10} md={2}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Endurance"
|
||||||
|
name="endurance"
|
||||||
|
type="number"
|
||||||
|
value={formData.endurance}
|
||||||
|
onChange={handleChange}
|
||||||
|
sx={{ ...inputStyles }}
|
||||||
|
/>
|
||||||
|
</Grid2>
|
||||||
|
</Grid2>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
fullWidth
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#764ACB',
|
||||||
|
'&:hover': { backgroundColor: '#9865f7' },
|
||||||
|
mt: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Create Character
|
||||||
|
</Button>
|
||||||
|
</Grid2>
|
||||||
|
</Grid2 >
|
||||||
|
</form >
|
||||||
|
</Box >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
+2
-2
@@ -27,8 +27,8 @@ async function uploadImage(imagePath, gameId, userId) {
|
|||||||
|
|
||||||
// Example usage:
|
// Example usage:
|
||||||
// Replace these values with your actual gameId and userId
|
// Replace these values with your actual gameId and userId
|
||||||
const gameId = 'eb82723d';
|
const gameId = 'd7997cfd';
|
||||||
const userId = '1';
|
const userId = '1';
|
||||||
const imagePath = './female-char.png';
|
const imagePath = './catiana.png';
|
||||||
|
|
||||||
uploadImage(imagePath, gameId, userId);
|
uploadImage(imagePath, gameId, userId);
|
||||||
Reference in New Issue
Block a user