Simplified UI in React #105
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Beginnings of a model in which we keep the app running with its own state machine, rendering to a couple canvases at full frame rate, using its own model classes... but with React used to draw the HTML-based UI on top of it, for headers, footers, and the body of the app. This first attempt just tells React to re-render 10 times per second. In this first commit, the first scene is rendered with both its original UI and a React-render duplicate UI on top. The React UI doesn't yet shrink text below certain widths, though.
Now, the legacy UI is drawn semi-opaque so that the new React UI drawn over the top is more clear.
We are showing the legacy non-React UI below, for comparison.
Conflicts: public/index.html
This adds the ability to set a callback handler with the state manager which will be called when state is set.
Use ?words=small or ?words=large to specify which set of words to show.
breville
changed the title
| imgName = 'underwater'; | ||
| } | ||
|
|
||
| // Temporarily show background for every mode. |
Contributor
There was a problem hiding this comment.
Why is this necessary?
Member
Author
There was a problem hiding this comment.
I wanted to see how UI elements looked on a background other than plain white, since I presume we will have some kind of background for each scene.
Contributor
bethanyaconnor
left a comment
bethanyaconnor
left a comment
There was a problem hiding this comment.
Yay thanks for doing this!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR converts all the HTML-based UI from jQuery to React. It also simplifies some of the UI as we start to think about driving the progression via a https://studio.code.org script, rather than doing everything in this app.
Some notable changes:
?words=smallor?words=largeto specify which words list to use. We will expand the use of parameterisation to specify fish vs. non-fish mode, and maybe other things like how many items we expect the user to train on, as the progression design requires.