jtruong04 / SchrodingerCheckers

PnP/Digital card game to simulate quantum computations
1 stars 0 forks source link

Convert to Material, Merge Backend Code, Implemented Redux #33

Closed jtruong04 closed 4 years ago

jtruong04 commented 4 years ago

Overview of all the changes. It's a doozy Matt.

  1. Merged @mjpmorse backend code. Frontend and backend now talk to each other
    1. Registration
    2. Login
    3. Logout
    4. Remember me
      • JWT token is stored in localStorage and is loaded when page loads so user doesn't have to log in every time they refresh the page. Expiration is only 1hr though.
  2. Complete switch from Bootstrap to Material-UI
    1. Directory restructuring because there's a ton of new files
    2. Toggle-able dark mode. Initial state should be determined by the OS but that's a little inconsistent for some reason. It should be looked into.
    3. Home view has been renamed to Lobby view so Home can now become a standard welcome page
    4. New UI Components (Primarily User Auth related)
      • View Port - The main display area
      • Left Drawer - Main Navigation menu, can be opened and closed. This is pretty much the old NavBar
      • Top Bar - Has user button at the top right
        • User Menu - Visible when user is logged in, has link to profile page and to logout
        • Guest Menu - Visible when user is not logged in. Contains buttons to Login and Register
          • Auth Modal - Modal showing either the Login or the Register forms, they can switched back and forth. Having this instead of separate modals lets us quickly and easily switch back and forth.
            • Register - Register form
            • Login - Login form (Still needs a password recovery feature)
  3. Implemented Redux for state management
    • Right now it only controls the user authentication state, stores the most recent auth error message, and fire any alerts. Ideally, we also move game state to it but our implementation works so I'm not gonna mess with it. The premise of Redux is more-or-less the same as our Command pattern. I think it would simplify PubNub integration though because we can then just pass the actions each time.
    • DIrectories
      • Actions: Callback functions that calculate stuff then passes these payloads over to the reducers to commit state changes
      • Reducers: These are what changes the global state, little to no logic here (oldState -> Payloads -> newState).
    • Additional Files
      • /src/store.js: where the global state is stored, all components have access to this.
    • Changes to components
      • Any components that access the store now need to export connect()() instead of just itself (Look at App.js or TopBar.js for an example)
      • They also have a mapStateToProps function which converts states within the store to props passed to the component.

SCREENSHOTS

Screen Shot 2020-06-17 at 12 23 37 AM Screen Shot 2020-06-17 at 12 23 54 AM Screen Shot 2020-06-17 at 12 26 54 AM
MSchiavi commented 4 years ago

@jtruong04 I see there are a bunch of new uiComponents. Can you leave some details above regarding what changed, what these new components are and do? Your PR is a bit "brief" ;)

mjpmorse commented 4 years ago

@jtruong04 you merged my branch into your branch and are now merging into v2?

jtruong04 commented 4 years ago

@jtruong04 you merged my branch into your branch and are now merging into v2?

Yeah. It's kinda hard to have the front and backends talk to each other if they are on separate branches. This PR is pretty much merging everything together now. We're close boys!

MSchiavi commented 4 years ago

LGTM