+

Stuff Design

backend/server.js

@@ -238,16 +238,19 @@ app.put('/games/:gameId/:userId/character', (req, res) => {
 });
 
 // Fetch Player Items
-app.get('/games/:charId/items', (req, res) => {
+app.get('/games/:gameId/:charId/items', (req, res) => {
     const gameId = req.params.gameId;
     const charId = req.params.charId;
-    db.get('SELECT * FROM Item WHERE GameID = ? AND OwnerID = ?', [gameId, charId], (err, row) => {
+    console.log(`Fetching Items for GameID: ${gameId}, CharID: ${charId}`);
+    db.all('SELECT * FROM Item WHERE GameID = ? AND OwnerID = ?', [gameId, charId], (err, rows) => {
         if (err) {
+            console.error('Database error:', err); // Debug output
             return res.status(500).json({ error: 'Internal server error' });
         }
-        res.json(row);
+        console.log(rows); // Debug output
+        res.json(rows);
+    });
 });
-})
 
 // Item Part
 // Set Item Owner

frontend/src/pages/games.css

@@ -0,0 +1,21 @@
+.bar-bg {
+  width: 100%;
+  background-color: #333;
+  border-radius: 4px;
+  height: 10px;
+  overflow: hidden;
+}
+
+.bar-fg {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease-in-out;
+}
+
+.bar-fg-red {
+  background-color: red;
+}
+
+.bar-fg-blue {
+  background-color: blue;
+}

frontend/src/pages/games.jsx

@@ -3,17 +3,26 @@ import { Link, useParams } from 'react-router-dom';
 import axios from 'axios';
 import { UserContext } from '../context/UserContext';
 import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material';
+
 import EditIcon from '@mui/icons-material/Edit';
+import PaidIcon from '@mui/icons-material/Paid';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import PetsIcon from '@mui/icons-material/Pets';
+import WcIcon from '@mui/icons-material/Wc';
+import WorkIcon from '@mui/icons-material/Work';
+
 import defaultCharacterImage from '../assets/default-character.png';
+import defaultItemImage from '../assets/default-item.png';
+import './games.css';
 
 const GamesPage = () => {
   const { userId } = useContext(UserContext);
   const { gameId } = useParams();
   const [character, setCharacter] = useState(null);
+  const [inventory, setInventory] = useState([]);
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [newDescription, setNewDescription] = useState('');
 
-  useEffect(() => {
   const fetchCharacter = async () => {
     try {
       console.log(`Fetching character for gameId: ${gameId}, userId: ${userId}`); // Debug output
@@ -25,11 +34,37 @@ const GamesPage = () => {
     }
   };
 
+  const fetchInventory = async (charId) => {
+    try {
+      const response = await axios.get(`http://localhost:5000/games/${gameId}/${charId}/items`);
+      setInventory(response.data ? [response.data].flat() : []);
+    } catch (error) {
+      console.error('Error fetching inventory:', error);
+    }
+  };
+
+  useEffect(() => {
     if (userId) {
       fetchCharacter();
     }
   }, [userId, gameId]);
 
+  useEffect(() => {
+    if (character?.CharID) {
+      fetchInventory(character.CharID);
+    }
+  }, [character]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (character?.CharID) {
+        fetchCharacter();
+        fetchInventory(character.CharID);
+      }
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [character]);
+
   const handleEditOpen = () => {
     setNewDescription(character.description);
     setIsEditOpen(true);
@@ -66,7 +101,6 @@ const GamesPage = () => {
   }
 
   return (
-
     <Box sx={{ p: 3, color: '#fff' }}>
       <Grid2 container spacing={3}>
         {/* Character Image and Details */}
@@ -82,25 +116,29 @@ const GamesPage = () => {
               />
               <CardContent>
                 <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
-                <Typography variant="h5"><strong>Age:</strong> {character.Age}</Typography>
-                <Typography variant="h5"><strong>Race:</strong> {character.Race}</Typography>
-                <Typography variant="h5"><strong>Sex:</strong> {character.Sex}</Typography>
-                <Typography variant="h5"><strong>Job:</strong> {character.Job}</Typography>
+                <Typography variant="h5"><PaidIcon sx={{color: 'gold'}}/> <strong>Gold:</strong> {character.Gold}</Typography>
+                <Typography variant="h5"><CalendarTodayIcon sx={{}}/> <strong>Age:</strong> {character.Age}</Typography>
+                <Typography variant="h5"><PetsIcon sx={{}}/> <strong>Race:</strong> {character.Race}</Typography>
+                <Typography variant="h5"><WcIcon sx={{}}/> <strong>Sex:</strong> {character.Sex}</Typography>
+                <Typography variant="h5"><WorkIcon sx={{}}/> <strong>Job:</strong> {character.Job}</Typography>
               </CardContent>
             </Card>
           </Box>
         </Grid2>
 
-        {/* CharName, Health and Mana Bars */}
+        {/* Health and Mana Bars */}
         <Grid2 item xs={12} md={8}>
-          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '800px' }}>
+          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '885px' }}>
             <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' }}>
                 <span>Health</span>
                 <span>{character.currentHealth}/{character.maxHealth}</span>
               </Typography>
-              <Box sx={{ width: '100%', backgroundColor: '#333', borderRadius: '4px', height: '10px' }}>
-                <Box sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%`, backgroundColor: 'red', height: '100%', borderRadius: '4px' }}></Box>
+              <Box className="bar-bg">
+                <Box
+                  className="bar-fg bar-fg-red"
+                  sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%` }}
+                ></Box>
               </Box>
             </Box>
             <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
@@ -108,8 +146,11 @@ const GamesPage = () => {
                 <span>Mana</span>
                 <span>{character.currentMana}/{character.maxMana}</span>
               </Typography>
-              <Box sx={{ width: '100%', backgroundColor: '#333', borderRadius: '4px', height: '10px' }}>
-                <Box sx={{ width: `${(character.currentMana / character.maxMana) * 100}%`, backgroundColor: 'blue', height: '100%', borderRadius: '4px' }}></Box>
+              <Box className="bar-bg">
+                <Box
+                  className="bar-fg bar-fg-blue"
+                  sx={{ width: `${(character.currentMana / character.maxMana) * 100}%` }}
+                ></Box>
               </Box>
             </Box>
           </Box>
@@ -122,21 +163,46 @@ const GamesPage = () => {
                 <EditIcon />
               </IconButton>
             </Box>
-            <Box sx={{ maxHeight: '200px', maxWidth: '770px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
+            <Box sx={{ maxHeight: '200px', maxWidth: '850px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
             </Box>
           </Box>
 
           {/* Inventory */}
-          <Box>
+          <Box sx={{ backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444', width: "850px" }}>
             <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Inventory</Typography>
-            <Grid2 container spacing={2}>
-              {character.inventory?.map((item, index) => (
-                <Grid2 item xs={6} sm={4} md={3} key={index}>
+            <Grid2
+              container
+              spacing={2}
+              wrap="wrap"
+              sx={{
+                maxHeight: '340px', // Height for 2 rows (128px image + ~40px text) * 2 + spacing
+                overflowY: 'auto',
+                '&::-webkit-scrollbar': {
+                  width: '8px'
+                },
+                '&::-webkit-scrollbar-track': {
+                  background: '#1e1e2f'
+                },
+                '&::-webkit-scrollbar-thumb': {
+                  background: '#444',
+                  borderRadius: '4px'
+                }
+              }}
+            >
+              {inventory.map((item, index) => (
+                <Grid2 item xs={12} sm={4} md={2} key={index}>
                   <Card sx={{ backgroundColor: '#1e1e2f', color: '#fff' }}>
+                    <CardMedia
+                      component="img"
+                      height="128px"
+                      image={item.Img || defaultItemImage}
+                      alt={item.ItemName}
+                      sx={{ borderRadius: '3px' }}
+                    />
                     <CardContent>
-                      <Typography variant="h6">{item.name}</Typography>
-                      <Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography>
+                      <Typography variant="h6" color="#fff">{item.ItemName}</Typography>
+                      <Typography variant="body2" color="#fff">Value: {item.GoldValue}</Typography>
                     </CardContent>
                   </Card>
                 </Grid2>