Merge pull request #22 from emmanueposu/pbranch

Pbranch

trivia-forge/backend/main.py

@@ -1,8 +1,10 @@
 from flask import Flask, request, jsonify
 from endpoints import home, user, game, category, question, choice
+from flask_cors import CORS
 
 
 app = Flask(__name__)
+CORS(app)
 app.register_blueprint(home.bp)
 app.register_blueprint(user.bp)
 app.register_blueprint(game.bp)

trivia-forge/frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
+    "node-datetime": "^2.1.2",
     "openai": "^4.38.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",

trivia-forge/frontend/src/App.css

@@ -238,3 +238,10 @@ footer {
   flex: 0 0 auto;
   text-align: center;
 }
+
+
+.card:hover {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  /* border: solid;
+  border-color: darkgrey; */
+}

trivia-forge/frontend/src/Components/GameCategories.jsx

@@ -0,0 +1,24 @@
+import { React, useState, useEffect } from "react";
+import { getCategories } from "../Services/TF-db_services";
+
+function GameCategories(game) {
+    const [categories, setCategories] = useState(null);
+
+    useEffect(() => {
+        getCategories(game.data).then( res => {
+            setCategories(res);
+        });
+    }, []);
+
+    return (
+        <>
+            {categories && (
+                categories.map((category, index) => (
+                    <span key={index}> • {category.title}</span>
+                ))
+            )}
+        </>
+    )
+}
+
+export default GameCategories;

trivia-forge/frontend/src/Components/GameQuestions.jsx

@@ -0,0 +1,37 @@
+import { React, useState, useEffect } from "react";
+import { getCategories, getQuestions } from "../Services/TF-db_services";
+
+function GameQuestions(game) {
+    const [categories, setCategories] = useState(null);
+    const [questions, setQuestions] = useState(null);
+
+
+    useEffect(() => {
+        getCategories(game.data).then( res => {
+            setCategories(res);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (categories) {
+            const data = new Set();
+            for (let i = 0; i < categories.length; i++) {
+                data.add(categories[i].id)
+            };
+
+            getQuestions(data).then( res => {
+                setQuestions(res);
+            });
+        }
+    }, [categories]);
+
+    return (
+        <>
+            {questions && (
+                <span>{questions.length}</span>
+            )}
+        </>
+    )
+}
+
+export default GameQuestions;

trivia-forge/frontend/src/Components/Questions.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Choices from "../Components/Choices";
 import { Card } from "react-bootstrap";
 
-import { Question } from "../Model/Question";
+import { Question } from "../Models/Question";
 
 function Questions({ data }) {
     let choices = data.choices;

trivia-forge/frontend/src/Components/Slideshow.jsx

@@ -0,0 +1,62 @@
+import { React, useState, useEffect } from "react";
+import Carousel from 'react-bootstrap/Carousel';
+import { getCategories, getQuestions ,getChoices } from "../Services/TF-db_services";
+const slideshowBackground = "https://yxdrsdfocuonvorowgaa.supabase.co/storage/v1/object/sign/UI%20Assets/white-solid-color-background?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJVSSBBc3NldHMvd2hpdGUtc29saWQtY29sb3ItYmFja2dyb3VuZCIsImlhdCI6MTcxNTE3MDQ0NywiZXhwIjo0ODY4NzcwNDQ3fQ.dPaQP-yvK0-k6wBJWrI6FqrXGEqv6Vv-a8Th99zGSyA&t=2024-05-08T12%3A14%3A08.001Z"
+
+
+function Slideshow(game) {
+    const [categories, setCategories] = useState(null);
+    const [questions, setQuestions] = useState(null);
+    const [choices, setChoices] = useState(null);
+
+    useEffect(() => {
+        getCategories(game.data).then( res => {
+            setCategories(res);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (categories) {
+            const data = new Set();
+            for (let i = 0; i < categories.length; i++) {
+                data.add(categories[i].id)
+            };
+            getQuestions(data).then( res => {
+                setQuestions(res);
+            });
+        }
+    }, [categories]);
+
+    // useEffect(() => {
+    //     if (questions) {
+    //         const data = new Set();
+    //         for (let i = 0; i < categories.length; i++) {
+    //             data.add(categories[i].id)
+    //         };
+    //         getQuestions(data).then( res => {
+    //             setQuestions(res);
+    //         });
+    //     }
+    // }, [questions]);
+
+
+    return (
+        <>
+            {questions &&(
+                <Carousel data-bs-theme="dark" className="h-100">
+                    {questions.map((q, index) => (
+                        <Carousel.Item key={index}>
+                            <img src={slideshowBackground} className="d-block"/>
+                            <Carousel.Caption>
+                                <h3>{q.problem}</h3>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                    ))}
+                </Carousel>   
+            )}
+        </>       
+    )
+
+}
+
+export default Slideshow;

trivia-forge/frontend/src/Pages/MyTrivia.jsx

@@ -1,16 +1,96 @@
-import React from "react";
-import BootstrapTable from '../Components/BootstrapTable';
+import { React, useState, useEffect } from "react";
+import { getGames } from "../Services/TF-db_services";
+import Card from 'react-bootstrap/Card';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Button from 'react-bootstrap/Button';
+import GameCategories from "../Components/GameCategories";
+import GameQuestions from "../Components/GameQuestions";
+import Slideshow from "../Components/Slideshow";
+import Modal from 'react-bootstrap/Modal';
+// import BootstrapTable from '../Components/BootstrapTable';
 
 function MyTrivia() {
-    return (
-        <>
-            <p>
-                My Trivia Page test
+    const [games, setGames] = useState(null);
+    const [show, setShow] = useState(false);
+    const [currentGame, setCurrentGame] = useState(null)
+
+    useEffect(() => {
+        getGames().then( res => {
+            setGames(res);
+        });
+    }, []);
+
+    useEffect(() => {
+        if(currentGame) {
+            setShow(true);
+        }
+    }, [currentGame]);
+
+    function handleClose() {
+        setShow(false);
+        setCurrentGame(null);
+    }
+
+    function handleShow(game) {
+        setCurrentGame(game);
+    }
 
-            </p>
-            <BootstrapTable />
+
+    return (
+        <>  
+            {games &&(
+                games.length > 0 ? (
+                    <Row xs={2} md={4} className="g-4 m-4">
+                        {games.map((game, index) => (
+                            <Col key={index}>
+                                <Card>
+                                    <Card.Header as="h4">{game.title}</Card.Header>
+                                    <Card.Body>
+                                        <Card.Title as="h6">Category:</Card.Title>
+                                        <Card.Text>
+                                            <GameCategories data={game}/>
+                                        </Card.Text>
+                                        <Card.Title as="h6">Number of Questions:</Card.Title>
+                                        <Card.Text>
+                                            <GameQuestions data={game}/>
+                                        </Card.Text>
+                                        <div className="text-center">
+                                            <Button variant="success" onClick={() => handleShow(game)}>Play Game</Button>
+                                        </div>
+                                    </Card.Body>
+                                </Card>    
+                            </Col>               
+                        ))}                    
+                    </Row>
+                    ) : (
+                        <p>No games to display.</p>
+                )
+            )}
+            <Modal show={show} onHide={handleClose} fullscreen={true}>
+                <Modal.Header closeButton>
+                </Modal.Header>
+                <Modal.Body>
+                    <Slideshow data={currentGame}/>
+                </Modal.Body>
+                <Modal.Footer>
+                </Modal.Footer>
+            </Modal>
         </>
     );
 
 }
-export default MyTrivia;
+export default MyTrivia;
+// function MyTrivia() {
+//     return (
+//         <>
+//             <p>
+//                 My Trivia Page test
+
+//             </p>
+//             <BootstrapTable />
+//         </>
+//     );
+
+// }
+// export default MyTrivia;

trivia-forge/frontend/src/Pages/TriviaGenPage.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react"; // variables that cause the component to re-render when they change
 import OpenAI from "openai";
-import { Game } from "../Model/Game";
+import { Game } from "../Models/Game";
 import { useNavigate } from "react-router-dom";
-import { Question } from "../Model/Question";
-import { Choice } from "../Model/Choice";
-import { Category } from "../Model/Category";
+import { Question } from "../Models/Question";
+import { Choice } from "../Models/Choice";
+import { Category } from "../Models/Category";
 import { Card } from "react-bootstrap";