diff --git a/backend/database.db b/backend/database.db
index aa34431..b8b1466 100644
Binary files a/backend/database.db and b/backend/database.db differ
diff --git a/backend/server.js b/backend/server.js
index 66896a6..1669b2f 100644
--- a/backend/server.js
+++ b/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
diff --git a/frontend/src/assets/default-item.png b/frontend/src/assets/default-item.png
new file mode 100644
index 0000000..5919039
Binary files /dev/null and b/frontend/src/assets/default-item.png differ
diff --git a/frontend/src/pages/games.css b/frontend/src/pages/games.css
index e69de29..7318251 100644
--- a/frontend/src/pages/games.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/games.jsx b/frontend/src/pages/games.jsx
index 0ab738f..b74d18f 100644
--- a/frontend/src/pages/games.jsx
+++ b/frontend/src/pages/games.jsx
@@ -3,33 +3,68 @@ 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
- const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`);
- console.log('Character data:', response.data); // Debug output
- setCharacter(response.data);
- } catch (error) {
- console.error('Error fetching character:', error);
- }
- };
+ const fetchCharacter = async () => {
+ try {
+ console.log(`Fetching character for gameId: ${gameId}, userId: ${userId}`); // Debug output
+ const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`);
+ console.log('Character data:', response.data); // Debug output
+ setCharacter(response.data);
+ } catch (error) {
+ console.error('Error fetching character:', error);
+ }
+ };
+ 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 (
-
{/* Character Image and Details */}
@@ -82,25 +116,29 @@ const GamesPage = () => {
/>
{character.CharName}
- Age: {character.Age}
- Race: {character.Race}
- Sex: {character.Sex}
- Job: {character.Job}
+ Gold: {character.Gold}
+ Age: {character.Age}
+ Race: {character.Race}
+ Sex: {character.Sex}
+ Job: {character.Job}
- {/* CharName, Health and Mana Bars */}
+ {/* Health and Mana Bars */}
-
+
Health
{character.currentHealth}/{character.maxHealth}
-
-
+
+
@@ -108,8 +146,11 @@ const GamesPage = () => {
Mana
{character.currentMana}/{character.maxMana}
-
-
+
+
@@ -122,21 +163,46 @@ const GamesPage = () => {
-
+
{character.description}
{/* Inventory */}
-
+
Inventory
-
- {character.inventory?.map((item, index) => (
-
+
+ {inventory.map((item, index) => (
+
+
- {item.name}
- Quantity: {item.quantity}
+ {item.ItemName}
+ Value: {item.GoldValue}
@@ -196,4 +262,4 @@ const GamesPage = () => {
);
};
-export default GamesPage;
\ No newline at end of file
+export default GamesPage;