[WIP] Frontend Refector/Advanced Information #11
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
This splits the main JS off into js/core.js, switches the doctype to be modern HTML (instead of xhtml, which is basically dead :-( ), fixes the indentation (some parts were 1-space indented, others were not), and re-indents to a more-visible 2-space indent.
Net-new CSS is in css/new.css to make it easier to find parts that are no longer needed. Spacing is a *tad* bit off, but otherwise this should look identical. - Remove uses of <br/> and for layout - Split into logical chunks with backwards-compatible HTML semantic tags (header, section, footer, address) - use ::before for address - clean up CSS a bit
Instead of manually setting display characteristics in JS, we now have a class in CSS for "closed". The button simply toggles the presence of this class. Furthermore, we can use CSS3 animations to remove the need for JS-based animations, and let the browser handle the tricky bits of canceling animations, etc.
This reworks seed fetching to use the fetch API (a polyfill will be needed for IE), but no more jQuery. It also adds an error bar, which allows us to display fetch errors (and others, in the future).
Seed generation is simply generating a random number in the range [1, 2**32), and then base36 encoding it. This is fairly trivial in JS, so we move it client-side.
This commit reworks sector-gen layout. The tabs are now displayed via a custom element, and don't require jquery. Fetching and display of the various tables now use custom elements, as does the sector display. This commit does not touch starmap display, which will thus not work properly. TODO: - add waiting dialog back in
This introduces an SVG hex grid for the starmap. This does not implement the stars themselves.
We no longer depend on anything jQuery-related, so we can remove all of the last vestiges of it.
This displays worlds on the starmap overview (with some nice CSS tricks to have them orbit), and lays the groundwork for more advanced data views.
This extracts the grid position and the corresponding SVG generation into its own classes, following the StarSystem pattern. This makes the code a bit cleaner and easier to read and update.
We now use a virtually-sized SVG canvas of [columns*100, rows*100], set the viewBox on the SVG element to the actual size of the grid that fits in that canvas (automatically determining the cell size), and let the browser handle the scaling. Additionally, the items inside each star are positioned relative to its group, and not globally, and then the group itself it translated around.
This displays the sector info pane. It does little other than display the system at a larger view, currently. TODO: - clean up the code a bit - fix up the styles a bit
These are some temporary changes to SectorGen to get things working while hacking. Expect them to go away in favor of something a bit more elegant (`tag_names` will be replaced by a "view", most likely, and `systems` will be the only thing sent).
DirectXMan12
changed the title
|
P.S. From a front-end perspective, these changes make #9 basically complete -- you'd just need backend changes. If you want to play around, change the |
ghost
suggested changes
Feb 25, 2020
| @@ -13,7 +13,7 @@ use CGI qw(:standard); | |||
| use Data::Dumper; | |||
| use DBI; | |||
| use JSON; | |||
| use SWN2WIKI; | |||
| #use SWN2WIKI; | |||
There was a problem hiding this comment.
Would it be better to just leave this out than include it commented-out?
| -Content_Disposition => 'attachment;filename=SWN_Generator_'.$token.'.zip', | ||
| ); | ||
| print $zipfile; | ||
| #$sector->{npcs} = $npcs; |
There was a problem hiding this comment.
Should these be commented or removed also?
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 completely refactors the frontend, and stars adding some of the information available on the wiki version to the frontend. Many of the features used are only available in "evergreen" browsers (Chrome, Firefox, FF, Edge), but they should all be either transpilable or polyfill-able if it's desired to support older browsers.
NB: this (currently) won't work on FF (and maybe Edge, haven't checked) due to missing polyfills. Should work fine in Chrome, and probably Safari. Let me know if it looks weird on your browser.
TODO:
Strech Goals:
these would allow replacing the wiki versions without losing functionality