Pulled from main

trivia-forge/frontend/src/App.css

@@ -104,9 +104,21 @@
   background-color: white;
 }
 
+h2 {
+  text-align: center;
+}
+
+.CardPadding {
+  margin: 20px;
+  padding: 10px;
+  background-color: bisque;
+}
+
 footer {
-  position: absolute;
+  position: fixed;
   bottom: 0;
+  background-color: #282c34;
+  color: white;
   text-align: center;
   width: 100%;
 }

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

@@ -0,0 +1,17 @@
+import React from "react";
+import Questions from "../Components/Questions";
+
+function Categories({ category }) {
+    let questions = category.questions;
+    return (
+        <div>
+            <h2>{category.name}</h2>
+            {questions.map((question, index) => {
+                return (
+                    <Questions key={index} data={question} />
+                );
+            })}
+        </div>
+    );
+}
+export default Categories;

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

@@ -0,0 +1,17 @@
+import React from "react";
+
+
+function Choices({ choices }) {
+    return (
+        <div>
+            {choices.map((choice, index) => {
+                return (
+                    <div className="card-body" key={index}>
+                        <textarea className="form-control" defaultValue={choice.choice}></textarea>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+export default Choices;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import Choices from "../Components/Choices";
+import { Card } from "react-bootstrap";
+
+import { Question } from "../Model/Question";
+
+function Questions({ data }) {
+    let choices = data.choices;
+    return (
+        <div>
+            <Card className="CardPadding">
+                <h2 className="centered">Question</h2>
+                <div className="card-body">
+                    <textarea className="form-control" defaultValue={data.question}></textarea>
+                </div>
+                <h2>Choices</h2>
+                <Choices choices={choices} />
+                <h2>Answer</h2>
+                <div className="card-body">
+                    <textarea className="form-control" defaultValue={data.answer}></textarea>
+                </div>
+                <h2>Hint</h2>
+                <div className="card-body">
+                    <textarea className="form-control" defaultValue={data.hint}></textarea>
+                </div>
+            </Card>
+
+        </div >
+    )
+}
+export default Questions;

trivia-forge/frontend/src/Models/Category.jsx

@@ -1,11 +1,15 @@
-export default class Category {
-    constructor(id, name, gameID) {
-        this.id = id;
+export class Category {
+    constructor(name, gameID = null) {
+        this.id = null;
         this.name = name;
         this.gameID = gameID
         this.questions = [];
     }
 
+    addQuestion(question) {
+        this.questions.push(question);
+    }
+
     toJsonObject() {
         return {
             id: this.id,

trivia-forge/frontend/src/Models/Choice.jsx

@@ -1,6 +1,6 @@
-export default class Choice {
-    constructor(id, choice, questionID) {
-        this.id = id;
+export class Choice {
+    constructor(choice, questionID = null) {
+        this.id = null;
         this.choice = choice;
         this.questionID = questionID;
     }

trivia-forge/frontend/src/Models/Game.jsx

@@ -1,21 +1,20 @@
-export default class Game {
-    constructor(id, userID, date, name, questions) {
-        this.id = id;
-        this.date = date;
+export class Game {
+    constructor(name, theme, userID = null) {
+        this.id = null;
         this.name = name;
-        this.questions = [];
+        this.theme = theme;
+        this.categories = [];
         this.userID = userID;
     }
 
-    addGame(question) {
-        this.questions.push(question);
+    addCategory(category) {
+        this.categories.push(category);
     }
 
     toJsonObject() {
         return {
-            id: this.id,
-            date: this.date,
             name: this.name,
+            theme: this.theme,
             userID: this.userID
         }
     }

trivia-forge/frontend/src/Models/Question.jsx

@@ -1,8 +1,9 @@
-export default class Question {
-    constructor(id, question, answer, categoryID) {
-        this.id = id;
+export class Question {
+    constructor(question, answer, hint, categoryID = null) {
+        this.id = null;
         this.question = question;
         this.answer = answer;
+        this.hint = hint;
         this.categoryID = categoryID;
         this.choices = [];
     }

trivia-forge/frontend/src/Models/User.jsx

@@ -1,7 +1,7 @@
-export default class User {
-    constructor(id, date, email, password, profilePic) {
-        this.id = id;
-        this.date = date;
+import datetime from 'node-datetime';
+export class User {
+    constructor(date, email, password, profilePic = null) {
+        this.id = null;
         this.email = email;
         this.password = password;
         this.profilePic = profilePic;
@@ -14,7 +14,6 @@ export default class User {
     toJsonObject() {
         return {
             id: this.id,
-            date: this.date,
             email: this.email,
             password: this.password,
             profilePic: this.profilePic