garrettgsb · ryanstew95 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/react-front-end/package-lock.json b/react-front-end/package-lock.json
diff --git a/react-front-end/package.json b/react-front-end/package.json
@@ -6,6 +6,7 @@
     "axios": "^0.18.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "2.1.8"
   },
   "scripts": {

diff --git a/react-front-end/public/index.html b/react-front-end/public/index.html
@@ -2,12 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Pixelify+Sans:wght@600&family=Source+Sans+3:ital,wght@0,300;0,600;1,300;1,600&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      name="description"
+      content="Web site created using create-react-app"
     />
-    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/react-front-end/src/App.css b/react-front-end/src/App.css
diff --git a/react-front-end/src/App.js b/react-front-end/src/App.js
@@ -1,38 +1,19 @@
-import React, { Component } from 'react';
-import axios from 'axios';
-import './App.css';
+import "./style/App.css";
+import React from 'react';
+import { Routes, Route, BrowserRouter } from 'react-router-dom';
+import Home from './components/home';
+import Instruction from './components/instruction';
 
-class App extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      message: 'Click the button to load data!'
-    }
-  }
-
-  fetchData = () => {
-    axios.get('/api/data') // You can simply make your requests to "/api/whatever you want"
-    .then((response) => {
-      // handle success
-      console.log(response.data) // The entire response from the Rails API
-
-      console.log(response.data.message) // Just the message
-      this.setState({
-        message: response.data.message
-      });
-    }) 
-  }
-
-  render() {
-    return (
-      <div className="App">
-        <h1>{ this.state.message }</h1>
-        <button onClick={this.fetchData} >
-          Fetch Data
-        </button>        
-      </div>
-    );
-  }
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route path="/instructions" element={<Instruction />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
 export default App;
+
diff --git a/react-front-end/src/asset/THELOGO.png b/react-front-end/src/asset/THELOGO.png
diff --git a/react-front-end/src/asset/instruction.png b/react-front-end/src/asset/instruction.png
diff --git a/react-front-end/src/components/home.js b/react-front-end/src/components/home.js
@@ -0,0 +1,42 @@
+import "../style/App.css";
+import React from "react";
+import data from "../data.json";
+import Quiz from "../asset/THELOGO.png";
+import { useNavigate } from "react-router-dom";
+
+
+
+function Home() {
+
+  const navigate = useNavigate();
+  function handleStartClick() { }
+  function handleInstructionsClick() {
+    navigate("instructions")
+   }
+
+  return (
+    <div className="div-style">
+      <img src={Quiz} alt="quizjs" />
+      <button className="rectangle-button" onClick={handleStartClick}>
+        START
+      </button>
+      <button
+        className="rectangle-button" onClick={handleInstructionsClick}>
+        INSTRUCTIONS
+      </button>
+      <div className="score-box">
+        <h2>High Score</h2>
+        <div className="score-columns">
+          {data.highScores.map((score, index) => (
+            <div key={index} className="score-row">
+              <span className="player-name">{score.name}</span>
+              <span className="player-score">{score.score}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/react-front-end/src/components/instruction.js b/react-front-end/src/components/instruction.js
@@ -0,0 +1,31 @@
+import "../style/instruction.css";
+import React from "react";
+import InstructionImage from "../asset/instruction.png";
+import { useNavigate } from "react-router-dom";
+
+
+
+function Instruction() {
+
+  const navigate = useNavigate();
+
+  function handleBackClick() {
+    navigate("/")
+  }
+  return (
+    <div className="div-style">
+      <div className="center-top">
+        <img src={InstructionImage} alt="quizjs" className="instruction-image" />
+      </div>
+      <div className="instruction-container">
+        <p>instructions Go Here.</p>
+      </div>
+      <div class="button-container">
+        <button className="rectangle-button" id="start-button" onClick={handleBackClick}>Go Back</button>
+        <button className="rectangle-button" id="menu-button">Play</button>
+      </div>
+    </div>
+  );
+}
+
+export default Instruction;
diff --git a/react-front-end/src/data.json b/react-front-end/src/data.json
@@ -0,0 +1,19 @@
+{
+  "highScores": [
+    { "name": "Player 1", "score": 100 },
+    { "name": "Player 2", "score": 85 },
+    { "name": "Player 3", "score": 33 },
+    { "name": "Player 4", "score": 50 },
+    { "name": "Player 5", "score": 76 },
+    { "name": "Player 6", "score": 76 },
+    { "name": "Player 7", "score": 76 },
+    { "name": "Player 8", "score": 76 },
+    { "name": "Player 9", "score": 76 },
+    { "name": "Player 10", "score": 76 },
+    { "name": "Player 11", "score": 76 },
+    { "name": "Player 12", "score": 76 },
+    { "name": "Player 13", "score": 76 },
+    { "name": "Player 14", "score": 76 },
+    { "name": "Player 15", "score": 76 }
+  ]
+}
diff --git a/react-front-end/src/index.js b/react-front-end/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './style/index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

diff --git a/react-front-end/src/style/App.css b/react-front-end/src/style/App.css
@@ -0,0 +1,67 @@
+.rectangle-button {
+  width: 300px;
+  height: 100px;
+  background-color: #ffff00;
+  color: #000000;
+  border: 8px solid #000000;
+  border-radius: 5px;
+  font-size: 30px;
+  font-family: "Pixelify Sans", sans-serif;
+  margin: 10px;
+  cursor: pointer;
+}
+
+.rectangle-button:hover {
+  background-color: #e0e000;
+}
+
+.score-box {
+  background-color: #ffff00;
+  color: #000000;
+  border: 8px solid #000000;
+  border-radius: 5px; /* Add rounded corners */
+  width: 800px;
+  padding: 40px;
+  font-family: "YourFontFamily", sans-serif;
+  font-size: 18px;
+  text-align: center;
+}
+
+.score-columns {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  flex-direction: column;
+  flex-wrap: wrap;
+  max-height: 140px;
+  gap: 5px;
+}
+
+.score-column {
+  width: 30%;
+}
+
+.score-row {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.player-name {
+  /* width: 50%; */
+  text-align: left;
+}
+
+.player-score {
+  /* width: 40%; */
+  text-align: right;
+}
+
+.div-style {
+  background-color: purple;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/react-front-end/src/index.css → react-front-end/src/style/index.css b/react-front-end/src/index.css → react-front-end/src/style/index.css
diff --git a/react-front-end/src/style/instruction.css b/react-front-end/src/style/instruction.css
@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100vh;
+}
+
+.center-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height : 20%;
+}
+
+.instruction-image {
+  margin-bottom: 100px;
+}
+
+.instruction-container {
+  width: 600px; /* Adjust the width as needed */
+  border: 10px solid black;
+  text-align: center;
+  padding: 100px;
+  margin-top: 20px; /* Adjust the margin as needed */
+  height: 300px;
+}