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

Gameapp UI update4 #265

merged 35 commits into from
Sep 27, 2021

Conversation

JustinPinero
Copy link
Contributor

Overview

  1. Integrated Redux and Typescript to handle state management and cut passed properties by more than half
  2. Added more mobile specific styles and broke message types down into even smaller components provide better Mobile UI
    a. Fixed text sizing issues on message name plates

Simulator Screen Shot - iPhone 11 Pro - 2021-09-14 at 16 37 38

Simulator Screen Shot - iPhone 11 Pro - 2021-09-14 at 16 37 48

Simulator Screen Shot - iPhone 11 Pro - 2021-09-14 at 16 37 31

 b.  Resolved overlapping system messages on mobile

Simulator Screen Shot - iPhone 11 Pro - 2021-09-14 at 16 44 11

Simulator Screen Shot - iPhone 11 Pro - 2021-09-14 at 16 44 16

Simulator Screen Shot - iPhone 11 Pro - 2021-09-14 at 16 44 28

  1. Added Say, Do, Tell system to chat allowing players to "switch modes" by either clicking speech button or press ` button. Players can target other characters for tells and "lock on to them" by either clicking the quick tell speech bubbles or clicking the reply arrow on an individual message.

Screen Shot 2021-09-14 at 4 36 57 PM

Screen Shot 2021-09-14 at 4 36 31 PM

Screen Shot 2021-09-14 at 4 36 20 PM

  1. Added Browser specific styling for Safari to improve UI

Screen Shot 2021-09-14 at 4 37 10 PM

  1. Resolved numerous small bugs eg:
    a Fixed star animation and alignment on mobile
    b. Fixed awkward "multi scrolling" on mobile
    c. Properly sized various icons across devices.
    d. Removed unused legacy code.
  2. Added much more documentation to all components on application.
  3. Laid foundation for help mode.
  4. Added feature: Users can now scroll up and down through previous submitted messages using the up and down arrows.

Testing

All features were tested in local dev environment. Mobile features were tested on Xcode Simulator. PC features and styling were tested on both Chrome and Safari.

Todos

  1. Complete "Help Mode" feature allowing users to cycle through tool tips that highlight and explain various parts of the UI in more detail.
  2. Add more safari specific styling
  3. Test Application on Tablet Simulator and style accordingly.
  4. Update LandingApp Styles ASAP.

… local state in game page, sidebar, mobile header
…, restyling help message copy, removed legacy styles for all message types aside from setting, player message, and agent message
…estyled award stars for both mobile and PC, connected sessionspentgiftxp to AgentMessage component
…npage scrolling on refresh bug, fixed text sizing, added scrolling to each message time, added mobile specific styling to setting message
@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 14, 2021
Copy link
Contributor

@JackUrb JackUrb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall I'm really excited to be moving to this redux-based setup, the code flow looks like it should be clearer in the future. I have a number of questions on this one, just because I still have a lot to learn with TS/Redux myself.

deploy/web/gameapp/src/App.test.tsx Show resolved Hide resolved
deploy/web/gameapp/src/GameRouter/index.tsx Show resolved Hide resolved
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we have the react logo?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry about that, when I built the template it came along with a fresh create react app and I forgot to delete it.

deploy/web/gameapp/src/reportWebVitals.ts Show resolved Hide resolved
Copy link
Contributor

@JackUrb JackUrb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the answers here - I think this is good to merge as is (and we can revisit testing/metrics after world building is done).

@JustinPinero JustinPinero merged commit 73a0935 into main Sep 27, 2021
@JackUrb JackUrb deleted the gameapp-ui-update4 branch December 10, 2022 00:25
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants