Merge pull request #265 from facebookresearch/gameapp-ui-update4

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,21 @@
+/* REACT */
+import React from "react";
+/* REDUX */
+import { useAppSelector } from "./app/hooks";
+//ROUTES
+import Routes from "./GameRouter";
+//STYLES
+import "./styles.css";
+
+function App() {
+  /* ----REDUX STATE---- */
+  //TUTORIAL;
+  const inHelpMode = useAppSelector((state) => state.tutorials.inHelpMode);
+  return (
+    <div id={`${inHelpMode ? "helpmode" : ""}`} className={"App"}>
+      <Routes />
+    </div>
+  );
+}
+
+export default App;

deploy/web/gameapp/src/GameCopy/index.js

@@ -0,0 +1,117 @@
+const GameCopy = {
+  tutorialTips: [
+    {
+      tipId: 0,
+      title: "Help Mode",
+      description:
+        "You have entered help mode, click on whatever you have a question about and you can view a brief explanation.",
+    },
+    //SIDE BAR TIPS
+    {
+      tipId: 1,
+      title: "Player Info",
+      description:
+        "You character's experience, level, gift experience, and progress can be tracked here.  You character will level up based on how well you role play.  If you roleplay well enough you can also be awarded gift xp which you can award to other players.",
+    },
+    {
+      tipId: 2,
+      title: "Character Info",
+      description:
+        "In this section you can view your current character's description to help you roleplay.",
+    },
+    {
+      tipId: 3,
+      title: "Mission Info",
+      description:
+        "Here is where missions and quests you have recieved will be listed.  You can review the description to decide how to complete the quest.",
+    },
+    {
+      tipId: 4,
+      title: "Location Info",
+      description:
+        "Here the details of the area in your immediate vicinity will be described.  Here you may find objects you can pick up or directions you may travel in the description.",
+    },
+    //CHAT INPUT UI TIPS
+    {
+      tipId: 5,
+      title: "Interaction Mode",
+      description:
+        "With this button (or by using the ` key) you can toggle between saying and doing things.  You can use this button to toggle away from a tell target.",
+    },
+    {
+      tipId: 6,
+      title: "Chat Bar",
+      description:
+        "Here is where you can input text to interact with the world of light.",
+    },
+    {
+      tipId: 7,
+      title: "Send Button",
+      description:
+        "You can send your interactions with this button or by hitting the enter key.",
+    },
+    {
+      tipId: 8,
+      title: "Quick Tell Buttons",
+      description:
+        "Clicking one of these speech bubbles will target them for direct communication.",
+    },
+    //CHAT MESSAGE TIPS
+    {
+      tipId: 9,
+      title: "Soul Spawn Message",
+      description:
+        "This message details your spawn information telling you about your character and their ambitions.",
+    },
+    {
+      tipId: 10,
+      title: "Help Message",
+      description:
+        "This message lists commands available to you in the chat input.",
+    },
+    {
+      tipId: 11,
+      title: "Inventory Message",
+      description:
+        "This message shows everything you have in you characters inventory.",
+    },
+    {
+      tipId: 12,
+      title: "Status Message",
+      description:
+        "This message shows your character's status.  This includes their experience and gift points, strength, size, physical toughness, and physical dexterity.",
+    },
+    {
+      tipId: 13,
+      title: "Quest Message",
+      description:
+        "This message shows your current persona, mission objectives, and any other quests you may have.",
+    },
+
+    {
+      tipId: 14,
+      title: "Quest Completion Message",
+      description:
+        "This message notifies you you have successfully completed a quest and details your experience rewards.",
+    },
+    {
+      tipId: 15,
+      title: "Location Message",
+      description:
+        "This message give a description of an area when you first enter.",
+    },
+    {
+      tipId: 16,
+      title: "Character Message",
+      description:
+        "This message is produced by other characters in the world.  You can see the name of the character and their message as well as award them experience by clicking the star, reply to them clicking on the arrow, or report the message by clicking on the flag.",
+    },
+    {
+      tipId: 17,
+      title: "Player Message",
+      description:
+        "This message shows your interactions with the world and any experience awarded will be shown as a number next to a star in the bottom left corner of the message.",
+    },
+  ],
+};
+export default GameCopy;

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>