Marces/dndmaster
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

lllll

Browse Source
This commit is contained in:
Luca
2025-01-17 14:14:30 +01:00
parent 75d86e8ba4
commit 825ef49398
7 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/header.jsx
+4 -4
View File
@@ -16,21 +16,21 @@ const Header = ({ isLoggedIn }) => {
<nav className="nav"> <nav className="nav">
<ul className="navList"> <ul className="navList">
<li className="navItem"> <li className="navItem">
<Link to="/" className="navLink">Home</Link> <Link to="/" className="navLink">Startseite</Link>
</li> </li>
{!isLoggedIn && ( {!isLoggedIn && (
<> <>
<li className="navItem"> <li className="navItem">
<Link to="/login" className="navLink">Login</Link> <Link to="/login" className="navLink">Anmelden</Link>
</li> </li>
<li className="navItem"> <li className="navItem">
<Link to="/register" className="navLink">Register</Link> <Link to="/register" className="navLink">Registrieren</Link>
</li> </li>
</> </>
)} )}
{isLoggedIn && ( {isLoggedIn && (
<li className="navItem"> <li className="navItem">
<Link to="/profile" className="navLink">Profile</Link> <Link to="/profile" className="navLink">Profil</Link>
</li> </li>
)} )}
</ul> </ul>
frontend/src/pages/createCharacter.jsx
+17 -17
View File
@@ -180,7 +180,7 @@ const CreateCharacter = () => {
'&:hover': { backgroundColor: '#9865f7' } '&:hover': { backgroundColor: '#9865f7' }
}} }}
> >
Upload Character Image Lade Charakterbild hoch
</Button> </Button>
</Box> </Box>
)} )}
@@ -212,7 +212,7 @@ const CreateCharacter = () => {
<Grid2 item xs={5}> <Grid2 item xs={5}>
<TextField <TextField
fullWidth fullWidth
label="Age" label="Alter"
name="age" name="age"
type="number" type="number"
value={formData.age} value={formData.age}
@@ -224,7 +224,7 @@ const CreateCharacter = () => {
<Grid2 item xs={5}> <Grid2 item xs={5}>
<TextField <TextField
fullWidth fullWidth
label="Race" label="Rasse"
name="race" name="race"
value={formData.race} value={formData.race}
onChange={handleChange} onChange={handleChange}
@@ -234,7 +234,7 @@ const CreateCharacter = () => {
</Grid2> </Grid2>
<Grid2 item xs={5}> <Grid2 item xs={5}>
<FormControl fullWidth> <FormControl fullWidth>
<InputLabel sx={{ color: '#fff' }}>Sex</InputLabel> <InputLabel sx={{ color: '#fff' }}>Geschlecht</InputLabel>
<Select <Select
name="sex" name="sex"
value={formData.sex} value={formData.sex}
@@ -247,16 +247,16 @@ const CreateCharacter = () => {
width: '150px' width: '150px'
}} }}
> >
<MenuItem value="Male">Male</MenuItem> <MenuItem value="Male">Männlich</MenuItem>
<MenuItem value="Female">Female</MenuItem> <MenuItem value="Female">Weiblich</MenuItem>
<MenuItem value="Other">Other</MenuItem> <MenuItem value="Other">Divers</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid2> </Grid2>
<Grid2 item xs={5}> <Grid2 item xs={5}>
<TextField <TextField
fullWidth fullWidth
label="Job/Class" label="Klasse"
name="job" name="job"
value={formData.job} value={formData.job}
onChange={handleChange} onChange={handleChange}
@@ -276,7 +276,7 @@ const CreateCharacter = () => {
<Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}> <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}> <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
<HeartIcon sx={{ color: "red" }} /> <HeartIcon sx={{ color: "red" }} />
<span>Max Health</span> <span>Maximale Gesundheit</span>
</Typography> </Typography>
<TextField <TextField
fullWidth fullWidth
@@ -297,7 +297,7 @@ const CreateCharacter = () => {
<Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}> <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}> <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
<WaterDropIcon sx={{ color: 'blue' }} /> <WaterDropIcon sx={{ color: 'blue' }} />
<span>Max Mana</span> <span>Maximales Mana</span>
</Typography> </Typography>
<TextField <TextField
fullWidth fullWidth
@@ -319,7 +319,7 @@ const CreateCharacter = () => {
{/* Description */} {/* Description */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: 4 }}>
<Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Description</Typography> <Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Beschreibung</Typography>
<Box sx={{ backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}> <Box sx={{ backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
<TextField <TextField
fullWidth fullWidth
@@ -341,7 +341,7 @@ const CreateCharacter = () => {
{/* Stats Grid */} {/* Stats Grid */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: 4 }}>
<Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Character Stats</Typography> <Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Charakterwerte</Typography>
<Box sx={{ <Box sx={{
backgroundColor: '#2e2e3f', backgroundColor: '#2e2e3f',
p: 2, p: 2,
@@ -355,7 +355,7 @@ const CreateCharacter = () => {
<Grid2 item xs={10} md={2}> <Grid2 item xs={10} md={2}>
<TextField <TextField
fullWidth fullWidth
label="Strength" label="Stärke"
name="strength" name="strength"
type="number" type="number"
value={formData.strength} value={formData.strength}
@@ -366,7 +366,7 @@ const CreateCharacter = () => {
<Grid2 item xs={10} md={2}> <Grid2 item xs={10} md={2}>
<TextField <TextField
fullWidth fullWidth
label="Dexterity" label="Geschicklichkeit"
name="dexterity" name="dexterity"
type="number" type="number"
value={formData.dexterity} value={formData.dexterity}
@@ -377,7 +377,7 @@ const CreateCharacter = () => {
<Grid2 item xs={10} md={2}> <Grid2 item xs={10} md={2}>
<TextField <TextField
fullWidth fullWidth
label="Agility" label="Agilität"
name="agility" name="agility"
type="number" type="number"
value={formData.agility} value={formData.agility}
@@ -388,7 +388,7 @@ const CreateCharacter = () => {
<Grid2 item xs={10} md={2}> <Grid2 item xs={10} md={2}>
<TextField <TextField
fullWidth fullWidth
label="Endurance" label="Ausdauer"
name="endurance" name="endurance"
type="number" type="number"
value={formData.endurance} value={formData.endurance}
@@ -411,7 +411,7 @@ const CreateCharacter = () => {
mt: 3 mt: 3
}} }}
> >
Create Character Erstelle Charakter
</Button> </Button>
</Grid2> </Grid2>
</Grid2 > </Grid2 >
frontend/src/pages/games.jsx
+18 -18
View File
@@ -114,7 +114,7 @@ const GamesPage = () => {
if (!character) { if (!character) {
return ( return (
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', p: 4 }}> <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', p: 4 }}>
<Typography variant="h4" sx={{ mb: 4 }}>No Character Found</Typography> <Typography variant="h4" sx={{ mb: 4 }}>Keinen Charakter Gefunden</Typography>
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
@@ -126,7 +126,7 @@ const GamesPage = () => {
component={Link} component={Link}
to={`/create-character?gameId=${gameId}`} to={`/create-character?gameId=${gameId}`}
> >
Create New Character Erstelle neuen Charakter
</Button> </Button>
</Box> </Box>
); );
@@ -138,7 +138,7 @@ const GamesPage = () => {
{/* Character Image and Details */} {/* Character Image and Details */}
<Grid2 item xs={12} md={4}> <Grid2 item xs={12} md={4}>
<Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}> <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
<Card sx={{ width: '480px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}> <Card sx={{ width: '530px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
<CardMedia <CardMedia
component="img" component="img"
height="300" height="300"
@@ -160,16 +160,16 @@ const GamesPage = () => {
<Grid2 container spacing={2} sx={{ padding: '8px', borderTop: '1px solid #444' }}> <Grid2 container spacing={2} sx={{ padding: '8px', borderTop: '1px solid #444' }}>
<CardContent sx={{borderRight: '3px solid #444'}}> <CardContent sx={{borderRight: '3px solid #444'}}>
<Typography variant="h6"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography> <Typography variant="h6"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Alter:</strong> {character.Age}</Typography>
<Typography variant="h6"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography> <Typography variant="h6"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Rasse:</strong> {character.Race}</Typography>
<Typography variant="h6"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography> <Typography variant="h6"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Geschlecht:</strong> {character.Sex}</Typography>
<Typography variant="h6"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography> <Typography variant="h6"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Klasse:</strong> {character.Job}</Typography>
</CardContent> </CardContent>
<CardContent> <CardContent>
<Typography variant="h6"><strong>Strength:</strong> {character.Strength}</Typography> <Typography variant="h6"><strong>Stärke:</strong> {character.Strength}</Typography>
<Typography variant="h6"><strong>Dexterity:</strong> {character.Dexterity}</Typography> <Typography variant="h6"><strong>Geschicklichkeit:</strong> {character.Dexterity}</Typography>
<Typography variant="h6"><strong>Agility:</strong> {character.Agility}</Typography> <Typography variant="h6"><strong>Agilität:</strong> {character.Agility}</Typography>
<Typography variant="h6"><strong>Endurance:</strong> {character.Endurance}</Typography> <Typography variant="h6"><strong>Ausdauer:</strong> {character.Endurance}</Typography>
</CardContent> </CardContent>
</Grid2> </Grid2>
</Card> </Card>
@@ -182,7 +182,7 @@ const GamesPage = () => {
<Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}> <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}> <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
<HeartIcon sx={{ color: "red" }} /> <HeartIcon sx={{ color: "red" }} />
<span>Health</span> <span>Gesundheit</span>
<span>{character.currentHealth}/{character.maxHealth}</span> <span>{character.currentHealth}/{character.maxHealth}</span>
</Typography> </Typography>
<Box className="bar-bg-health"> <Box className="bar-bg-health">
@@ -210,7 +210,7 @@ const GamesPage = () => {
{/* Character Info Section */} {/* Character Info Section */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: 4 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
<Typography variant="h5" sx={{ color: '#fff', mr: 1 }}>Description</Typography> <Typography variant="h5" sx={{ color: '#fff', mr: 1 }}>Beschreibung</Typography>
<IconButton <IconButton
onClick={handleEditOpen} onClick={handleEditOpen}
sx={{ sx={{
@@ -235,7 +235,7 @@ const GamesPage = () => {
{/* Inventory */} {/* Inventory */}
<Box sx={{ backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444', width: "850px" }}> <Box sx={{ backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444', width: "850px" }}>
<Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Inventory</Typography> <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Inventar</Typography>
<Grid2 <Grid2
container container
spacing={2} spacing={2}
@@ -310,7 +310,7 @@ const GamesPage = () => {
} }
}} }}
> >
<DialogTitle>Edit Description</DialogTitle> <DialogTitle>Bearbeite Beschreibung</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText sx={{ color: '#bbb' }}> <DialogContentText sx={{ color: '#bbb' }}>
--------------------------------------------------------------------- ---------------------------------------------------------------------
@@ -319,7 +319,7 @@ const GamesPage = () => {
autoFocus autoFocus
margin="dense" margin="dense"
id="description" id="description"
label="Description" label="Beschreibung"
type="text" type="text"
fullWidth fullWidth
variant="standard" variant="standard"
@@ -338,8 +338,8 @@ const GamesPage = () => {
/> />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleEditClose}>Cancel</Button> <Button onClick={handleEditClose}>Abbrechen</Button>
<Button onClick={handleSaveDescription}>Save</Button> <Button onClick={handleSaveDescription}>Speichern</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Box> </Box>
frontend/src/pages/home.jsx
+9 -9
View File
@@ -7,7 +7,7 @@ import './home.css';
function Home({ isLoggedIn, setIsLoggedIn }) { function Home({ isLoggedIn, setIsLoggedIn }) {
const navigate = useNavigate(); const navigate = useNavigate();
const [games, setGames] = useState([]); const [games, setGames] = useState([]);
const { userId } = useContext(UserContext); const { userId, username } = useContext(UserContext);
useEffect(() => { useEffect(() => {
if (isLoggedIn && userId) { if (isLoggedIn && userId) {
@@ -27,27 +27,27 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
return ( return (
<div className="container"> <div className="container">
<h2>Welcome to P&P-Master</h2> <h2>Willkommen zum P&P Manager {username}!</h2>
{!isLoggedIn ? ( {!isLoggedIn ? (
<div className="button-group"> <div className="button-group">
<button className="btn" onClick={() => navigate('/login')}>Login</button> <button className="btn" onClick={() => navigate('/login')}>Anmelden</button>
<button className="btn" onClick={() => navigate('/register')}>Register</button> <button className="btn" onClick={() => navigate('/register')}>Registrieren</button>
</div> </div>
) : ( ) : (
<div className="content"> <div className="content">
<div className="button-group"> <div className="button-group">
<button className="btn" onClick={() => navigate('/startGame')}>Start Game</button> <button className="btn" onClick={() => navigate('/startGame')}>Starte Spiel</button>
<button className="btn" onClick={() => navigate('/joinGame')}>Join Game</button> <button className="btn" onClick={() => navigate('/joinGame')}>Betrete Spiel</button>
<button className="btn" onClick={handleLogout}>Logout</button> <button className="btn" onClick={handleLogout}>Ausloggen</button>
</div> </div>
<div className="table-container"> <div className="table-container">
<h3>Your Games</h3> <h3>Deine Spiele:</h3>
<table className="games-table"> <table className="games-table">
<thead> <thead>
<tr> <tr>
<th>Game ID</th> <th>Game ID</th>
<th>Name</th> <th>Name</th>
<th>Description</th> <th>Beschreibung</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
frontend/src/pages/joinGame.jsx
+3 -3
View File
@@ -33,15 +33,15 @@ const JoinGamePage = () => {
return ( return (
<div className="join-game-container"> <div className="join-game-container">
<h1>Join a Game</h1> <h1>Betrete ein Spiel</h1>
<form onSubmit={handleJoinGame}> <form onSubmit={handleJoinGame}>
<input <input
type="text" type="text"
placeholder="Enter Game Code" placeholder="Füge die Game ID ein"
value={gameCode} value={gameCode}
onChange={(e) => setGameCode(e.target.value)} onChange={(e) => setGameCode(e.target.value)}
/> />
<button type="submit">Join Game</button> <button type="submit">Betrete Spiel</button>
</form> </form>
{error && <p className="error">{error}</p>} {error && <p className="error">{error}</p>}
</div> </div>
frontend/src/pages/profile.jsx
+4 -4
View File
@@ -32,7 +32,7 @@ const Profile = () => {
</Typography> </Typography>
<Typography variant="h5" sx={{ mb: 2, color: '#fff' }}> <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>
Your Characters Deine Charaktere
</Typography> </Typography>
<Grid2 container spacing={3}> <Grid2 container spacing={3}>
@@ -52,13 +52,13 @@ const Profile = () => {
{character.CharName} {character.CharName}
</Typography> </Typography>
<Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}> <Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}>
Race: {character.Race} Rasse: {character.Race}
</Typography> </Typography>
<Typography variant="body2" sx={{ color: '#bbb' }}> <Typography variant="body2" sx={{ color: '#bbb' }}>
Age: {character.Age} Alter: {character.Age}
</Typography> </Typography>
<Typography variant="body2" sx={{ color: '#bbb', mt: 1 }}> <Typography variant="body2" sx={{ color: '#bbb', mt: 1 }}>
Sex: {character.Sex} Geschlecht: {character.Sex}
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
frontend/src/pages/startGame.jsx
+6 -6
View File
@@ -49,32 +49,32 @@ const startGame = () => {
return ( return (
<div className="create-game-page"> <div className="create-game-page">
<h1>Create a New Game</h1> <h1>Erstelle ein neues Spiel</h1>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="form-group"> <div className="form-group">
<label htmlFor="gameName">Game Name</label> <label htmlFor="gameName">Spiel Name</label>
<input <input
type="text" type="text"
id="gameName" id="gameName"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="Enter game name" placeholder="Füge den Spielnamen ein"
required required
/> />
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="gameDescription">Game Description</label> <label htmlFor="gameDescription">Spiel Beschreibung</label>
<textarea <textarea
id="gameDescription" id="gameDescription"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Enter game description" placeholder="Füge eine Beschreibung ein"
required required
/> />
</div> </div>
{error && <p className="error-message">{error}</p>} {error && <p className="error-message">{error}</p>}
{success && <p className="success-message">{success}</p>} {success && <p className="success-message">{success}</p>}
<button type="submit">Create Game</button> <button type="submit">Starte Spiel</button>
</form> </form>
</div> </div>
); );