Skip to content
This repository has been archived by the owner on Oct 11, 2023. It is now read-only.

Gameapp UI update4 #265

Merged
merged 35 commits into from
Sep 27, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
7fa6605
added say and do buttons added documentation
JustinPinero Aug 20, 2021
6e53c89
removed unused code and added more documentation to chatdisplay compo…
JustinPinero Aug 20, 2021
118a438
adding mobile style fixes to progress bar and level display
JustinPinero Aug 23, 2021
33868e8
wired tell feature
JustinPinero Aug 24, 2021
ae54785
fixed repsonsive styling of player info icons on mobile
JustinPinero Aug 24, 2021
66244c4
adding redux
JustinPinero Aug 25, 2021
d902725
added redux and redux toolkit
JustinPinero Aug 31, 2021
e93bf67
added typescript to game app
JustinPinero Aug 31, 2021
c83984e
added redux foundation, added personal info slices, added xp, giftxp,…
JustinPinero Sep 8, 2021
65746ea
added increaseXp and decrementGiftXp to reducer actions
JustinPinero Sep 8, 2021
e9d4f2f
added foundation for redux websocket integration
JustinPinero Sep 9, 2021
13a8a70
added documentation to slices, wired xp and giftxp redux state into e…
JustinPinero Sep 10, 2021
13b8a2e
removed passed props from experience info components
JustinPinero Sep 10, 2021
12506bd
added sessioninfo section to features, added session xp slice, added …
JustinPinero Sep 10, 2021
4547328
removed xp props from sidebar
JustinPinero Sep 10, 2021
5c42499
fixed emoji picker redux action, added view slice
JustinPinero Sep 13, 2021
9cc7403
Added documentation to GamePage for new state and useEffects, removed…
JustinPinero Sep 13, 2021
f4496b0
added chatInput Slice
JustinPinero Sep 13, 2021
90f79e1
restructured messages and types, restyling messages
JustinPinero Sep 13, 2021
fc69fed
fixed overlapping system messages
JustinPinero Sep 13, 2021
eb89633
restructured message types and styles, fixed help message overlap bug…
JustinPinero Sep 14, 2021
a6d2e00
restyled help message for both mobile and desktop
JustinPinero Sep 14, 2021
519f3cb
removed console logs, unused code, added substantial documentation, r…
JustinPinero Sep 14, 2021
6cfcb03
added styling for safari browser, added styling for mobile, fixed mai…
JustinPinero Sep 14, 2021
2b9ddb7
building tutorial popover
JustinPinero Sep 16, 2021
32f15cb
added info button
JustinPinero Sep 16, 2021
c369b33
added tutorial popover component, added gamecopy file with tutorial c…
JustinPinero Sep 16, 2021
f5a42d5
added tooltips to both chat display and sidebar
JustinPinero Sep 16, 2021
9b4f8c9
added help mode, added on click tool tips to playerinfo, Character i…
JustinPinero Sep 22, 2021
9713b81
added tooltips and animations to quest message, status message, agent…
JustinPinero Sep 22, 2021
ea63ee3
added tooltips and animations for inventory, send button, chat input,…
JustinPinero Sep 22, 2021
7d14f99
added infobutton component, added render condition to infobutton in s…
JustinPinero Sep 24, 2021
0350863
fixed toggle to clear tooltips during switch when in help mode
JustinPinero Sep 24, 2021
be8a582
added and styled final tool tips, fixed cycle tooltips on chat bar, f…
JustinPinero Sep 24, 2021
79eeed9
Merge pull request #267 from facebookresearch/help-mode
JustinPinero Sep 24, 2021
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
1,834 changes: 1,824 additions & 10 deletions deploy/web/gameapp/package-lock.json

Large diffs are not rendered by default.

18 changes: 16 additions & 2 deletions deploy/web/gameapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
13 changes: 2 additions & 11 deletions deploy/web/gameapp/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -27,10 +22,6 @@
<style>
body {
font-family: "Lora", serif;
margin: 0;
padding: 0;
background-color: rgb(247, 247, 247);
overflow: hidden;
}
</style>
<!--
Expand Down
9 changes: 9 additions & 0 deletions deploy/web/gameapp/src/App.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
JackUrb marked this conversation as resolved.
Show resolved Hide resolved
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
21 changes: 21 additions & 0 deletions deploy/web/gameapp/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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;
42 changes: 0 additions & 42 deletions deploy/web/gameapp/src/DungeonLayer.js

This file was deleted.

117 changes: 117 additions & 0 deletions deploy/web/gameapp/src/GameCopy/index.js
Original file line number Diff line number Diff line change
@@ -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;
23 changes: 0 additions & 23 deletions deploy/web/gameapp/src/GameRouter.js

This file was deleted.

20 changes: 20 additions & 0 deletions deploy/web/gameapp/src/GameRouter/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/* REACT */
JackUrb marked this conversation as resolved.
Show resolved Hide resolved
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;
65 changes: 0 additions & 65 deletions deploy/web/gameapp/src/LoadingScreen.js

This file was deleted.

3 changes: 2 additions & 1 deletion deploy/web/gameapp/src/Logo.js
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading