Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pbranch #24

Merged
merged 4 commits into from
May 14, 2024
Merged

Pbranch #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5a22152
Updated My Trivia page, favicon, and page title
emmanueposu May 14, 2024
36bf1e2
Merge branch 'main' of https://github.com/emmanueposu/Trivia-Forge in…
emmanueposu May 14, 2024
dc9f70a
Added title to pages
emmanueposu May 14, 2024
88bff73
Added navigation for My Trivia and Sign Up button on home page
emmanueposu May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions package-lock.json
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop

This file was deleted.

88 changes: 0 additions & 88 deletions trivia-forge/dist/assets/index-BE7_8Dwe.js
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions trivia-forge/dist/assets/index-DkrhZ241.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion trivia-forge/dist/assets/react-CHdo91hT.svg
View file
Open in desktop

This file was deleted.

17 changes: 0 additions & 17 deletions trivia-forge/dist/index.html
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion trivia-forge/dist/vite.svg
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions trivia-forge/frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/fire.svg" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>

<body>
Expand Down
3 changes: 3 additions & 0 deletions trivia-forge/frontend/public/fire.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion trivia-forge/frontend/public/vite.svg
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions trivia-forge/frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,4 @@ footer {

.card:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/* border: solid;
border-color: darkgrey; */
}
4 changes: 1 addition & 3 deletions trivia-forge/frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/HomePage";
Expand Down Expand Up @@ -30,7 +28,7 @@ function App() {
<Route path="/triviaGen" element={<TriviaGenPage />} />
<Route path="/review" element={<TriviaReviewPage />} />
<Route path="/myTrivia" element={<MyTrivia />} />
<Route path="/SignUpPage" element={<SignUpPage />} />
<Route path="/signUp" element={<SignUpPage />} />
</Routes>

</main>
Expand Down
42 changes: 0 additions & 42 deletions trivia-forge/frontend/src/Components/BootstrapTable.jsx
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions trivia-forge/frontend/src/Components/GameQuestions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ function GameQuestions(game) {

useEffect(() => {
if (categories) {
const data = new Set();
const category_ids = new Set();
for (let i = 0; i < categories.length; i++) {
data.add(categories[i].id)
category_ids.add(categories[i].id)
};

getQuestions(data).then( res => {
getQuestions(category_ids).then( res => {
setQuestions(res);
});
}
Expand Down
12 changes: 6 additions & 6 deletions trivia-forge/frontend/src/Components/Nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React from "react";
import { Navbar } from "react-bootstrap";
import { Nav, Button, Modal, Form } from "react-bootstrap";
import { useState } from 'react';
import { Link } from "react-router-dom"
const loginIcon = "https://yxdrsdfocuonvorowgaa.supabase.co/storage/v1/object/sign/UI%20Assets/Login%20Icon.svg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJVSSBBc3NldHMvTG9naW4gSWNvbi5zdmciLCJpYXQiOjE3MTQwNDQ1NjQsImV4cCI6NDg2NzY0NDU2NH0.-IE25tSqh2pH4EwagAEHzml4lv0mJwZgptA73XO2zpY&t=2024-04-25T11%3A29%3A24.290Z"
import { Link } from "react-router-dom";

function Navigation() {
const [show, setShow] = useState(false);
Expand All @@ -19,9 +18,10 @@ function Navigation() {
<Nav.Link href="/triviaGen">Create New Trivia</Nav.Link>
<Nav.Link href="/myTrivia">My Trivia</Nav.Link>
</Nav>
<Nav>
<img src={loginIcon} id="test"></img>
<Button onClick={handleShow}>Log In</Button>
<Nav style={{marginRight: ".5rem"}}>
<Button onClick={handleShow}>
<i className="bi bi-person-circle" style={{marginRight: ".5rem"}}></i>Log In
</Button>
</Nav>

</Navbar>
Expand All @@ -44,7 +44,7 @@ function Navigation() {
id="inputPassword"
/>
</Form>
<p>Not a member? <Link onClick={handleClose} to="/SignUpPage">Sign Up</Link></p>
<p>Not a member? <Link onClick={handleClose} to="/signUp">Sign Up</Link></p>
</Modal.Body>

<Modal.Footer>
Expand Down
86 changes: 61 additions & 25 deletions trivia-forge/frontend/src/Components/Slideshow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
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"
import Spinner from 'react-bootstrap/Spinner';
import Button from "react-bootstrap/esm/Button";


function Slideshow(game) {
const [loading, setLoading] = useState("border");
const [spinnerVisibility, setSpinnerVisibility] = useState("initial");
const [hintColor, setHintColor] = useState("#240046");
const [categories, setCategories] = useState(null);
const [questions, setQuestions] = useState(null);
const [choices, setChoices] = useState(null);
const [questionsAndChoices, setQuestionsAndChoices] = useState(null);

useEffect(() => {
getCategories(game.data).then( res => {
Expand All @@ -17,44 +21,76 @@ function Slideshow(game) {

useEffect(() => {
if (categories) {
const data = new Set();
let category_ids = new Set();
for (let i = 0; i < categories.length; i++) {
data.add(categories[i].id)
category_ids.add(categories[i].id);
};
getQuestions(data).then( res => {
getQuestions(category_ids).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]);
useEffect(() => {
if (questions) {
const questionObj = {};
for (let i = 0; i < questions.length; i++) {
questionObj[questions[i].id] = questions[i];
questionObj[questions[i].id]["choices"] = [];
};
getChoices(questionObj).then( res => {
let temp = []
for (let key in res) {
temp.push(res[key])
temp.push(res[key].answer)
}
setQuestionsAndChoices(temp);
setLoading(false);
setSpinnerVisibility("none");
});
}
}, [questions]);

function handleShowHint() {
if (hintColor == "#240046") {
setHintColor("white")
} else {
setHintColor("#240046")
}
}



return (
<>
{questions &&(
<Carousel data-bs-theme="dark" className="h-100">
{questions.map((q, index) => (
<Carousel.Item key={index}>
<img src={slideshowBackground} className="d-block"/>
<div className="h-100 d-flex align-items-center justify-content-center" style={{backgroundColor: "#240046" }}>
<Spinner animation={loading} role="status" variant="light" className="" style={{ height: "9rem", width: "9rem", display: spinnerVisibility }} />
{questionsAndChoices &&(
<Carousel className="flex-grow-1 h-100" interval={null}>
{questionsAndChoices.map((item, i) => (
<Carousel.Item key={i} className="" >
<div className="" style={{ height: "65vh" }}>
</div>
<Carousel.Caption>
<h3>{q.problem}</h3>
{typeof item === 'string' ? (
<h1 className="p-4 mb-5">{item}</h1>
) : (
<div className="d-flex flex-column align-items-center">
<h1 className="p-4">{item.problem}</h1>
<div className="w-75">
{item.choices.map((c, j) => (
<h4 key={j} className="rounded-5 p-2 w-25 m-auto mt-4" style={{border: "2px solid orange", backgroundColor: "", color: ""}}>{c}</h4>
))}
</div>
<Button onClick={() => handleShowHint()} className="mt-5" style={{backgroundColor: "turquoise", border:"none", color:"#240046" }}>Hint</Button>
<h4 style={{color: hintColor}} className="mt-3">{item.hint}</h4>
</div>
)}
</Carousel.Caption>
</Carousel.Item>
</Carousel.Item>
))}
</Carousel>
)}
</>
</div>
)

}
Expand Down
9 changes: 5 additions & 4 deletions trivia-forge/frontend/src/Pages/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,19 @@ function Home() {

return (
<Container className="homepage-container">
<title>Home</title>
<Row>
<Col>
<svg class="header-animation">
<text x="50%" y="50%" dy=".35em" text-anchor="middle">
<svg className="header-animation">
<text x="50%" y="50%" dy=".35em" textAnchor="middle">
Trivia Forge
</text>
</svg>
</Col >
</Row>
<Row>
<Col>
<Button variant="primary"> <FaRegFolderOpen /> My Trivia Games </Button>
<Button variant="primary" onClick={() => navigate('/myTrivia')}> <FaRegFolderOpen /> My Trivia Games </Button>
</Col>
</Row>
<Row>
Expand All @@ -35,7 +36,7 @@ function Home() {
</Row>
<Row>
<Col>
<Button variant="primary"> <FaUserPlus /> Sign Up </Button>
<Button variant="primary" onClick={() => navigate('/signUp')}> <FaUserPlus /> Sign Up </Button>
</Col>
</Row>
</Container>
Expand Down
Loading