From 5a46333bfd14470c8ae07e2bde4f7e0c5a382609 Mon Sep 17 00:00:00 2001 From: Marces Zastrow Date: Thu, 19 Dec 2024 11:08:22 +0100 Subject: [PATCH] + Added functionallity to start a new Game --- backend/database.db | Bin 24576 -> 28672 bytes backend/server.js | 19 ++++++- frontend/src/App.jsx | 9 +++- frontend/src/pages/startGame.css | 56 +++++++++++++++++++++ frontend/src/pages/startGame.jsx | 83 +++++++++++++++++++++++++++++++ 5 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/startGame.css diff --git a/backend/database.db b/backend/database.db index 086534c9acd96ef12228baf4efe941f3f59500d0..5586df932472ed87c6a19307b21634f923440d05 100644 GIT binary patch delta 327 zcmZoTz}WDBae_P}`$Po~0XE*p4E(J8XZaWLZRUN<*RioNo0qFmiIrVkT%55P^5ylYvklez9=S5w#n!DWq3hqisKEz6#M4Qe1VK? zjQqb{FYa9 zvIW1^WD~xS&71iG89A8vy&3qI@p}VR+Ve+8GO;m8>Nm0`rsQVk8G%WMoc!d(96d0p zVw9v}XrPiBXs++1my#4{oaL3{o#bceY>|@gpYI$}Ugl-um6lbRt(Oy4W|5fhlIR_p zZc=98Uha`Nd6~SbV{t%Geu$HvQ&my8NpY@$Q)QB2N^WUpp^1f=UvW`ph)HT-c!jA! zeqeZ|b4i#}cx1YncO@4C0|OKP8wURG{BJf3Dm>s<;9{0!ggB9jgISyt%!H`A%E14c z|0+<`Nq#X=W_^e%WG^sHer+$!@|A)AD^Srh{)qvsf}D)Z;*6!msYS(1yg;iM1RydK FL;xuXWS#&3 diff --git a/backend/server.js b/backend/server.js index f6b62aa..1927423 100644 --- a/backend/server.js +++ b/backend/server.js @@ -31,8 +31,7 @@ db.run(`CREATE TABLE IF NOT EXISTS users ( // Create games table if it doesn't exist db.run(`CREATE TABLE IF NOT EXISTS games ( - id INTEGER PRIMARY KEY AUTOINCREMENT, - game_id TEXT, + game_id TEXT PRIMARY KEY, name TEXT, description TEXT, game_master_id INTEGER, @@ -88,6 +87,22 @@ app.get('/games/:userId', (req, res) => { ); }); +//Join Game +app.post('/joinGame/:gameId', (req, res) => { + const gameId = req.params.gameId; + const userId = req.body.userId; + + const stmt = db.prepare('INSERT INTO games (participants) VALUES (?) WHERE game_id IS (?)'); + stmt.run([gameId, userId], function(err) { + if (err) { + return res.status(400).json({ error: 'Failed to create game.' }); + } + res.status(201).json({message: "User joined Game!", gameId: this.gameId}) + }) +stmt.finalize(); +}); + + // Create a new game app.post('/games', (req, res) => { const { name, description, gameMasterId, participants } = req.body; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 92cd532..944ff02 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,11 +1,12 @@ import React, { useState } from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // Use Routes here +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import './App.css'; -import Header from './components/header'; // Make sure the import path is correct +import Header from './components/header'; import Home from './pages/home'; import Login from './pages/login'; import Register from './pages/register'; import JoinGame from './pages/joinGame'; +import StartGame from './pages/startGame'; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); @@ -44,6 +45,10 @@ function App() { path="joinGame" element={} /> + } + /> diff --git a/frontend/src/pages/startGame.css b/frontend/src/pages/startGame.css new file mode 100644 index 0000000..49f1aa8 --- /dev/null +++ b/frontend/src/pages/startGame.css @@ -0,0 +1,56 @@ +.create-game-page { + max-width: 600px; + margin: 0 auto; + padding: 20px; + background: #2e2e3f; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.create-game-page h1 { + text-align: center; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +input, +textarea { + width: calc(100% - 22px); + padding: 10px; + border-radius: 4px; + resize: none; +} + +button { + display: block; + width: 100%; + padding: 10px; + background-color: #007bff; + color: white; + font-size: 16px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +.error-message { + color: red; + font-weight: bold; +} + +.success-message { + color: green; + font-weight: bold; +} diff --git a/frontend/src/pages/startGame.jsx b/frontend/src/pages/startGame.jsx index e69de29..4028de5 100644 --- a/frontend/src/pages/startGame.jsx +++ b/frontend/src/pages/startGame.jsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import './startGame.css'; + +const startGame = () => { + const [name, setName] = useState(''); + const [description, setDescription] = useState(''); + const [error, setError] = useState(''); + const [success, setSuccess] = useState(''); + const navigate = useNavigate(); + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(''); + setSuccess(''); + + if (!name || !description) { + setError('Game name and description are required.'); + return; + } + + try { + const response = await fetch('http://localhost:5000/createGame', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + name, + description, + gameMasterId: 1, // Placeholder for game master ID; replace with dynamic value if needed + participants: [], // Default empty participants array + }), + }); + + if (!response.ok) { + const errorData = await response.json(); + setError(errorData.error || 'Failed to create game.'); + return; + } + + const data = await response.json(); + setSuccess('Game created successfully!'); + navigate(`/games/${data.gameId}`); // Redirect to the game details page + } catch (err) { + setError('Something went wrong. Please try again.'); + } + }; + + return ( +
+

Create a New Game

+
+
+ + setName(e.target.value)} + placeholder="Enter game name" + required + /> +
+
+ +