Add a "shifting background" effect on mousemove
#369
Conversation
This file contains 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
… new value, correct formatting
DRAFT: Menu added for B2 configuration
- Tweaks to fullscreen mode - ChartJS 4. - Various package updates
Walkthru changes
* Move the `simdata` dir from `src/assets` to `public`. * Rename var and clarify comment. * Fix simdata dir in `run.sh`. Co-authored-by: Grant <50287275+granawkins@users.noreply.github.com> --------- Co-authored-by: Grant <50287275+granawkins@users.noreply.github.com>
Fix background image for B2
Add `public/simdata` to `.gitignore`.
|
That's a really cool effect! Wish we could do it omnidirectionally, but I'm not sure how much extra work that would be. RE loading the background onto , the issue I was seeing is that clicking into B2 then going back into the main menu causes the B2 background to persist until Mars is selected. Not a huge deal, but I avoided it by using the option. If we want to load it onto , I think there's a way to set up a listener for any back-button presses and reset the image.
|
- AgentExplorer only shows agents with subfields - update preset text - add detail on biomes to reference page - add links to wikipedia for crew, and note on calorie restriction - validate the total biomes area
small fixes to frontend:
Load a default preset when opening the config wizard
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 is a proof-of-concept/experiment that adds a "shifting background" effect on
mousemove.Since both background images show Mars and Earth as seen from space, I thought it would be cool to add a subtle shifting effect (tied to the mouse movement) as if the user was floating in space.
This is implemented by adding a
mousemovecallback at the top level (meaning that it will be active in all pages) and that might be expensive, even though it didn't seem to affect performances on my machine.The shifting is also limited to one axis at a time. Currently the background image is set to cover the whole background and clipping part of the image if the viewport ratio doesn't match the image ratio. This basically means that the background image is automatically scaled to either have the same width or the same height of the viewport, with the longer side overflowing. This means that the shifting can only happen on the overflowing side and not on both sides at the same time.
I tried a few different approaches to make it work on both axis, but there doesn't seem to be an easy solution that covers all cases (in theory it could be done with some extra js).
While working on this I also noticed that after Mars or B2 are selected from the main menu, the new background doesn't replace the original one (which is applied to the
<body>) but is added on top of it to the main content<div>. Even though this seems "wrong", it has the advantage that the top bar doesn't cover the upper part of the background image, so the current implementation might be ok (setting it inmountedmight be better though). To keep the code simple in this PR, I changed the current implementation to always set the background on the<body>. (cc @merigrey)This was just a quick late-night experiment, so I don't expect this PR to be merged, but if you like it I could address the aforementioned issues and merge it.