refactor game into components

game/gameservice/queries/CreateGame.js

@@ -2,12 +2,13 @@ const Game = require("../game-model")
 const mongoose = require('mongoose');
 const uuid = require('uuid')
 
-async function createGame(questions, users) {
+async function createGame(questions, players) {
     try {
         // Create a new Game instance
+        console.log(players)
         const game = new Game({
           uuid: uuid.v4(),
-          players: users.map(user => user.uuid),
+          players: players.map(user => user.uuid),
           questions: questions.map(question => question.uuid),
         });
         // Save the game to the database

webapp/src/components/GameLayout.tsx

@@ -1,7 +1,7 @@
 
 
 import { useState } from "react";
-import Game from "./Game";
+import Game from "./game/Game";
 import Group from "./Group";
 import Scoreboard from "./Scoreboard";
 

webapp/src/components/Login.tsx

@@ -23,10 +23,16 @@ const Login = (props: ActionProps) => {
 
   const loginUser = async () => {
     try {
+      console.log("aqui")
       const user = await axios.post(`${apiEndpoint}/login`, { username, password });
+      console.log("aqui2")
 
       // Extract data from the response
-      localStorage.setItem('user', user.data);
+      localStorage.setItem('userUUID', user.data.uuid);
+      localStorage.setItem('username', user.data.username);
+      console.log(user.data.uuid)
+      console.log(user.data.username)
+
       setLoginSuccess(true);
 
       setOpenSnackbar(true);

webapp/src/components/game/Game.tsx

@@ -0,0 +1,90 @@
+import axios from 'axios';
+import { useState } from 'react';
+import MenuGame from './MenuGame';
+import LobbyGame from './LobbyGame';
+import PlayingGame from './PlayingGame';
+import ScoreboardGame from './ScoreboardGame';
+export interface Question4Answers {
+    question: string;
+    correctAnswer: string;
+    incorrectAnswer1: string;
+    incorrectAnswer2: string;
+    incorrectAnswer3: string;
+}
+
+export interface User {
+  createdAt: string;
+  nCorrectAnswers: number;
+  nWins: number;
+  nWrongAnswers: number;
+  totalScore: number;
+  username: string;
+  uuid: string;
+}
+
+export interface Player {
+  // can be a real player or bot
+  username: string;
+  points: number;
+}
+
+
+const Game = () => {
+
+    const [questions, setQuestions] = useState<Question4Answers[]>([]);
+    const [currentStage, setCurrentStage] = useState(1);
+    const [players, setPlayers] = useState<Player[]>([]);
+
+    // const userUUID = localStorage.getItem("userUUID");
+    const username = localStorage.getItem("username");
+    if(!username) return <p>error</p>;
+
+
+
+    const createGame = async () => {
+
+      const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+        try {
+          setPlayers([
+            {
+              username: username,
+              points: 0
+            }
+          ])
+          const requestData = {
+            players: players,
+          };
+
+          const response = await axios.post(`${apiEndpoint}/createGame`, requestData);
+
+          const createdGame = response.data;
+
+          setQuestions(createdGame.questions);
+          console.log('Juego creado:', createdGame);
+
+
+          setCurrentStage(1);
+          return createdGame;
+        } catch (error) {
+          console.error('Error al crear el juego:', error);
+          throw error;
+        }
+      };
+      const handlePlayers = () => {
+        return setPlayers;
+      }
+
+      createGame();
+    return (
+      <div>
+        {currentStage === 1 && (<MenuGame />)}
+        {currentStage === 2 && (<LobbyGame players={players} setPlayers={handlePlayers}/>)}
+        {currentStage === 3 && (<PlayingGame questions={questions}/>)}
+        {currentStage === 4 && (<ScoreboardGame players={players}/>)}
+      </div>
+
+    )
+}
+
+export default Game;

webapp/src/components/game/LobbyGame.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react'
+import { Player } from './Game';
+
+interface LobbyGameProps {
+  setPlayers: () => void;
+  players: Player[]
+}
+
+const LobbyGame: FC<LobbyGameProps> = ({}) => {
+  return <div>LobbyGame</div>
+}
+
+export default LobbyGame

webapp/src/components/game/MenuGame.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+interface MenuGameProps {
+
+}
+
+const MenuGame: FC<MenuGameProps> = ({}) => {
+  return <div>MenuGame</div>
+}
+
+export default MenuGame

webapp/src/components/game/PlayingGame.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react'
+import { Question4Answers } from './Game'
+
+interface PlayingGameProps {
+  questions: Question4Answers[]
+}
+
+const PlayingGame: FC<PlayingGameProps> = ({questions}) => {
+    console.log(questions)
+  return <div>PlayingGame</div>
+}
+
+export default PlayingGame

webapp/src/components/game/ScoreboardGame.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react'
+import { Player} from './Game'
+
+interface ScoreboardGameProps {
+  players?: Player[];
+}
+
+const ScoreboardGame: FC<ScoreboardGameProps> = ({players}) => {
+    console.log(players)
+  return <div>ScoreboardGame</div>
+}
+
+export default ScoreboardGame

webapp/src/pages/game/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Game from "../../components/Game";
+import Game from "../../components/game/Game";
 import { Container } from "@mui/material";
 
 export const GamePage: React.FC<{}> = () => {