Merge branch 'Translation-German'

frontend/src/components/header.jsx

@@ -16,21 +16,21 @@ const Header = ({ isLoggedIn }) => {
       <nav className="nav">
         <ul className="navList">
           <li className="navItem">
-            <Link to="/" className="navLink">Home</Link>
+            <Link to="/" className="navLink">Startseite</Link>
           </li>
           {!isLoggedIn && (
             <>
               <li className="navItem">
-                <Link to="/login" className="navLink">Login</Link>
+                <Link to="/login" className="navLink">Anmelden</Link>
               </li>
               <li className="navItem">
-                <Link to="/register" className="navLink">Register</Link>
+                <Link to="/register" className="navLink">Registrieren</Link>
               </li>
             </>
           )}
           {isLoggedIn && (
             <li className="navItem">
-              <Link to="/profile" className="navLink">Profile</Link>
+              <Link to="/profile" className="navLink">Profil</Link>
             </li>
           )}
         </ul>

frontend/src/pages/createCharacter.jsx

@@ -180,7 +180,7 @@ const CreateCharacter = () => {
                         '&:hover': { backgroundColor: '#9865f7' }
                       }}
                     >
-                      Upload Character Image
+                      Lade Charakterbild hoch
                     </Button>
                   </Box>
                 )}
@@ -212,7 +212,7 @@ const CreateCharacter = () => {
                     <Grid2 item xs={5}>
                       <TextField
                         fullWidth
-                        label="Age"
+                        label="Alter"
                         name="age"
                         type="number"
                         value={formData.age}
@@ -224,7 +224,7 @@ const CreateCharacter = () => {
                     <Grid2 item xs={5}>
                       <TextField
                         fullWidth
-                        label="Race"
+                        label="Rasse"
                         name="race"
                         value={formData.race}
                         onChange={handleChange}
@@ -234,7 +234,7 @@ const CreateCharacter = () => {
                     </Grid2>
                     <Grid2 item xs={5}>
                       <FormControl fullWidth>
-                        <InputLabel sx={{ color: '#fff' }}>Sex</InputLabel>
+                        <InputLabel sx={{ color: '#fff' }}>Geschlecht</InputLabel>
                         <Select
                           name="sex"
                           value={formData.sex}
@@ -247,16 +247,16 @@ const CreateCharacter = () => {
                             width: '150px'
                           }}
                         >
-                          <MenuItem value="Male">Male</MenuItem>
-                          <MenuItem value="Female">Female</MenuItem>
-                          <MenuItem value="Other">Other</MenuItem>
+                          <MenuItem value="Male">Männlich</MenuItem>
+                          <MenuItem value="Female">Weiblich</MenuItem>
+                          <MenuItem value="Other">Divers</MenuItem>
                         </Select>
                       </FormControl>
                     </Grid2>
                     <Grid2 item xs={5}>
                       <TextField
                         fullWidth
-                        label="Job/Class"
+                        label="Klasse"
                         name="job"
                         value={formData.job}
                         onChange={handleChange}
@@ -276,7 +276,7 @@ const CreateCharacter = () => {
               <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' }}>
                   <HeartIcon sx={{ color: "red" }} />
-                  <span>Max Health</span>
+                  <span>Maximale Gesundheit</span>
                 </Typography>
                 <TextField
                   fullWidth
@@ -297,7 +297,7 @@ const CreateCharacter = () => {
               <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' }}>
                   <WaterDropIcon sx={{ color: 'blue' }} />
-                  <span>Max Mana</span>
+                  <span>Maximales Mana</span>
                 </Typography>
                 <TextField
                   fullWidth
@@ -319,7 +319,7 @@ const CreateCharacter = () => {
 
             {/* Description */}
             <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' }}>
                 <TextField
                   fullWidth
@@ -341,7 +341,7 @@ const CreateCharacter = () => {
 
             {/* Stats Grid */}
             <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={{
                 backgroundColor: '#2e2e3f',
                 p: 2,
@@ -355,7 +355,7 @@ const CreateCharacter = () => {
                   <Grid2 item xs={10} md={2}>
                     <TextField
                       fullWidth
-                      label="Strength"
+                      label="Stärke"
                       name="strength"
                       type="number"
                       value={formData.strength}
@@ -366,7 +366,7 @@ const CreateCharacter = () => {
                   <Grid2 item xs={10} md={2}>
                     <TextField
                       fullWidth
-                      label="Dexterity"
+                      label="Geschicklichkeit"
                       name="dexterity"
                       type="number"
                       value={formData.dexterity}
@@ -377,7 +377,7 @@ const CreateCharacter = () => {
                   <Grid2 item xs={10} md={2}>
                     <TextField
                       fullWidth
-                      label="Agility"
+                      label="Agilität"
                       name="agility"
                       type="number"
                       value={formData.agility}
@@ -388,7 +388,7 @@ const CreateCharacter = () => {
                   <Grid2 item xs={10} md={2}>
                     <TextField
                       fullWidth
-                      label="Endurance"
+                      label="Ausdauer"
                       name="endurance"
                       type="number"
                       value={formData.endurance}
@@ -411,7 +411,7 @@ const CreateCharacter = () => {
                 mt: 3
               }}
             >
-              Create Character
+              Erstelle Charakter
             </Button>
           </Grid2>
         </Grid2 >

frontend/src/pages/games.jsx

@@ -114,7 +114,7 @@ const GamesPage = () => {
   if (!character) {
     return (
       <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
           variant="contained"
           sx={{
@@ -126,7 +126,7 @@ const GamesPage = () => {
           component={Link}
           to={`/create-character?gameId=${gameId}`}
         >
-          Create New Character
+          Erstelle neuen Charakter
         </Button>
       </Box>
     );
@@ -138,7 +138,7 @@ const GamesPage = () => {
         {/* Character Image and Details */}
         <Grid2 item xs={12} md={4}>
           <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
                 component="img"
                 height="300"
@@ -160,16 +160,16 @@ const GamesPage = () => {
               
               <Grid2 container spacing={2} sx={{ padding: '8px', borderTop: '1px solid #444' }}>
                 <CardContent sx={{borderRight: '3px solid #444'}}>
-                  <Typography variant="h6"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography>
-                  <Typography variant="h6"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography>
-                  <Typography variant="h6"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography>
-                  <Typography variant="h6"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography>
+                  <Typography variant="h6"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Alter:</strong> {character.Age}</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>Geschlecht:</strong> {character.Sex}</Typography>
+                  <Typography variant="h6"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Klasse:</strong> {character.Job}</Typography>
                 </CardContent>
                 <CardContent>
-                  <Typography variant="h6"><strong>Strength:</strong> {character.Strength}</Typography>
-                  <Typography variant="h6"><strong>Dexterity:</strong> {character.Dexterity}</Typography>
-                  <Typography variant="h6"><strong>Agility:</strong> {character.Agility}</Typography>
-                  <Typography variant="h6"><strong>Endurance:</strong> {character.Endurance}</Typography>
+                  <Typography variant="h6"><strong>Stärke:</strong> {character.Strength}</Typography>
+                  <Typography variant="h6"><strong>Geschicklichkeit:</strong> {character.Dexterity}</Typography>
+                  <Typography variant="h6"><strong>Agilität:</strong> {character.Agility}</Typography>
+                  <Typography variant="h6"><strong>Ausdauer:</strong> {character.Endurance}</Typography>
                 </CardContent>
               </Grid2>
             </Card>
@@ -182,7 +182,7 @@ const GamesPage = () => {
             <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' }}>
                 <HeartIcon sx={{ color: "red" }} />
-                <span>Health</span>
+                <span>Gesundheit</span>
                 <span>{character.currentHealth}/{character.maxHealth}</span>
               </Typography>
               <Box className="bar-bg-health">
@@ -210,12 +210,12 @@ const GamesPage = () => {
           {/* Character Info Section */}
           <Box sx={{ mb: 4 }}>
             <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
                 onClick={handleEditOpen}
                 sx={{
                   marginLeft: '10px',
-                  color: '#fff',
+                  color: '#fff', 
                   backgroundColor: '#764ACB',
                   borderRadius: '4px',
                   p: 1,
@@ -235,7 +235,7 @@ const GamesPage = () => {
 
           {/* Inventory */}
           <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
               container
               spacing={2}
@@ -310,7 +310,7 @@ const GamesPage = () => {
           }
         }}
       >
-        <DialogTitle>Edit Description</DialogTitle>
+        <DialogTitle>Bearbeite Beschreibung</DialogTitle>
         <DialogContent>
           <DialogContentText sx={{ color: '#bbb' }}>
             ---------------------------------------------------------------------
@@ -319,7 +319,7 @@ const GamesPage = () => {
             autoFocus
             margin="dense"
             id="description"
-            label="Description"
+            label="Beschreibung"
             type="text"
             fullWidth
             variant="standard"
@@ -338,8 +338,8 @@ const GamesPage = () => {
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleEditClose}>Cancel</Button>
-          <Button onClick={handleSaveDescription}>Save</Button>
+          <Button onClick={handleEditClose}>Abbrechen</Button>
+          <Button onClick={handleSaveDescription}>Speichern</Button>
         </DialogActions>
       </Dialog>
     </Box>

frontend/src/pages/home.jsx

@@ -7,7 +7,7 @@ import './home.css';
 function Home({ isLoggedIn, setIsLoggedIn }) {
     const navigate = useNavigate();
     const [games, setGames] = useState([]);
-    const { userId } = useContext(UserContext);
+    const { userId, username } = useContext(UserContext);
 
     useEffect(() => {
         if (isLoggedIn && userId) {
@@ -27,27 +27,27 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
 
     return (
         <div className="container">
-            <h2>Welcome to P&P-Master</h2>
+            <h2>Willkommen zum P&P Manager {username}!</h2>
             {!isLoggedIn ? (
                 <div className="button-group">
-                    <button className="btn" onClick={() => navigate('/login')}>Login</button>
-                    <button className="btn" onClick={() => navigate('/register')}>Register</button>
+                    <button className="btn" onClick={() => navigate('/login')}>Anmelden</button>
+                    <button className="btn" onClick={() => navigate('/register')}>Registrieren</button>
                 </div>
             ) : (
                 <div className="content">
                     <div className="button-group">
-                        <button className="btn" onClick={() => navigate('/startGame')}>Start Game</button>
-                        <button className="btn" onClick={() => navigate('/joinGame')}>Join Game</button>
-                        <button className="btn" onClick={handleLogout}>Logout</button>
+                        <button className="btn" onClick={() => navigate('/startGame')}>Starte Spiel</button>
+                        <button className="btn" onClick={() => navigate('/joinGame')}>Betrete Spiel</button>
+                        <button className="btn" onClick={handleLogout}>Ausloggen</button>
                     </div>
                     <div className="table-container">
-                        <h3>Your Games</h3>
+                        <h3>Deine Spiele:</h3>
                         <table className="games-table">
                             <thead>
                                 <tr>
                                     <th>Game ID</th>
                                     <th>Name</th>
-                                    <th>Description</th>
+                                    <th>Beschreibung</th>
                                 </tr>
                             </thead>
                             <tbody>

frontend/src/pages/joinGame.jsx

@@ -33,15 +33,15 @@ const JoinGamePage = () => {
 
   return (
     <div className="join-game-container">
-      <h1>Join a Game</h1>
+      <h1>Betrete ein Spiel</h1>
       <form onSubmit={handleJoinGame}>
         <input
           type="text"
-          placeholder="Enter Game Code"
+          placeholder="Füge die Game ID ein"
           value={gameCode}
           onChange={(e) => setGameCode(e.target.value)}
         />
-        <button type="submit">Join Game</button>
+        <button type="submit">Betrete Spiel</button>
       </form>
       {error && <p className="error">{error}</p>}
     </div>

frontend/src/pages/profile.jsx

@@ -32,7 +32,7 @@ const Profile = () => {
       </Typography>
 
       <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>
-        Your Characters
+        Deine Charaktere
       </Typography>
 
       <Grid2 container spacing={3}>
@@ -52,13 +52,13 @@ const Profile = () => {
                     {character.CharName}
                   </Typography>
                   <Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}>
-                    Race: {character.Race}
+                    Rasse: {character.Race}
                   </Typography>
                   <Typography variant="body2" sx={{ color: '#bbb' }}>
-                    Age: {character.Age}
+                    Alter: {character.Age}
                   </Typography>
                   <Typography variant="body2" sx={{ color: '#bbb', mt: 1 }}>
-                    Sex: {character.Sex}
+                    Geschlecht: {character.Sex}
                   </Typography>
                 </CardContent>
               </Card>

frontend/src/pages/startGame.jsx

@@ -59,32 +59,32 @@ const StartGame = () => {
 
   return (
     <div className="create-game-page">
-      <h1>Create a New Game</h1>
+      <h1>Erstelle ein neues Spiel</h1>
       <form onSubmit={handleSubmit}>
         <div className="form-group">
-          <label htmlFor="gameName">Game Name</label>
+          <label htmlFor="gameName">Spiel Name</label>
           <input
             type="text"
             id="gameName"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            placeholder="Enter game name"
+            placeholder="Füge den Spielnamen ein"
             required
           />
         </div>
         <div className="form-group">
-          <label htmlFor="gameDescription">Game Description</label>
+          <label htmlFor="gameDescription">Spiel Beschreibung</label>
           <textarea
             id="gameDescription"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            placeholder="Enter game description"
+            placeholder="Füge eine Beschreibung ein"
             required
           />
         </div>
         {error && <p className="error-message">{error}</p>}
         {success && <p className="success-message">{success}</p>}
-        <button type="submit">Create Game</button>
+        <button type="submit">Starte Spiel</button>
       </form>
     </div>
   );