Gameapp UI update4

deploy/web/gameapp/package.json

@@ -5,6 +5,17 @@
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.9",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-redux": "^7.1.18",
+    "@types/react-router-dom": "^5.1.8",
+    "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "emoji-mart": "^2.11.1",
     "eslint-plugin-react-hooks": "^1.6.1",
@@ -14,12 +25,15 @@
     "react-icons": "^4.2.0",
     "react-leaflet": "2.2.1",
     "react-onclickoutside": "^6.8.0",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "2.1.8",
-    "react-tippy": "^1.2.3"
+    "react-tippy": "^1.2.3",
+    "typescript": "^4.4.2",
+    "web-vitals": "^1.1.2"
   },
   "devDependencies": {
-    "typescript": "3.3.3"
+    "typescript": "^3.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

deploy/web/gameapp/public/index.html

@@ -8,17 +8,12 @@
     />
     <meta name="theme-color" content="#000000" />
 
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/scribe.png" />
     <link
       href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
       rel="stylesheet"
     />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/[email protected]/dist/leaflet.css"
-      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
-      crossorigin=""
-    />
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -27,10 +22,6 @@
     <style>
       body {
         font-family: "Lora", serif;
-        margin: 0;
-        padding: 0;
-        background-color: rgb(247, 247, 247);
-        overflow: hidden;
       }
     </style>
     <!--

deploy/web/gameapp/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

deploy/web/gameapp/src/App.tsx

@@ -0,0 +1,16 @@
+/* REACT */
+import React from "react";
+//ROUTES
+import Routes from "./GameRouter";
+//STYLES
+import "./styles.css";
+
+function App() {
+  return (
+    <div className="App">
+      <Routes />
+    </div>
+  );
+}
+
+export default App;

deploy/web/gameapp/src/GameRouter/index.tsx

@@ -0,0 +1,20 @@
+/* REACT */
+import React from "react";
+//ROUTER COMPONENTS
+import { HashRouter, Route, Redirect, Switch } from "react-router-dom";
+//PAGES
+import GamePage from "../pages/GamePage";
+
+// GameRouter - manages routes of react app
+const GameRouter = () => {
+  return (
+    <HashRouter>
+      <Switch>
+        <Route path="/" component={GamePage} exact />
+        <Route path="/_=_" component={GamePage} exact />
+      </Switch>
+    </HashRouter>
+  );
+};
+
+export default GameRouter;

deploy/web/gameapp/src/Logo.js

@@ -1,11 +1,12 @@
 import React from "react";
+import Scribe from "./assets/images/scribe.png";
 
 export default function Logo() {
   const builder_url =
     window.location.protocol + "//" + window.location.host + "/builder/";
   return (
     <div className="header">
-      <img alt="logo" src="/scribe.png" />
+      <img alt="logo" src={Scribe} />
       <div>
         <h1>LIGHT</h1>
         <span>Learning in Interactive Games with Humans and Text</span>