eisvana / eisvana-census Goto Github PK

The infobox image is required for new bases, but isn't for existing bases.

We cannot input files into the file input like we can with other input types.

This means that if you don't upload a new file, it will be flagged as invalid.

-> There should be some form of visualisation of what you uploaded -> Take inspiration from https://www.nmswikiboilerplate.com/civ

The image property in the state should be replaced with a FileItem (or similar). This allows us to have a file or just a URL. The URL can also be used for the image element to show the uploaded image.

Instead of "Update", use "Update Base" and "New Base".

• "New Base" should autofill the player data
• "Update Base" should only give the textblocks and the checkboxes for Arena, farm, etc.

Open questions and potential blockers:

• How can we convert a MW API response to the proper input fields?
• What can we use to get a full page from MW? Parse?

When querying for bases of a specific player, replace all # with _. This is a wildcard in SQL that matches a single character.

The query would of course need to be adjusted to use LIKE.

https://nomanssky.fandom.com/api.php?action=parse&format=json&origin=*&summary=%5B%5BMedia%3AEisvanaFlag.png%5D%5D&prop=

summary is [[Media:EisvanaFlag.png]].

This returns:

{
    "parse": {
        "title": "API",
        "pageid": 0,
        "parsedsummary": {
            "*": "<a href=\"https://static.wikia.nocookie.net/nomanssky_gamepedia/images/8/83/EisvanaFlag.png/revision/latest?cb=20231105120302\" class=\"internal\" title=\"EisvanaFlag.png\">Media:EisvanaFlag.png</a>"
        }
    }
}

The parsedsummary can be parsed with a DOMParser, and then the URLs extracted and put into the src attributes of img elements.

This might require a media query

Try animating the card margin when expanding the actions.
When actions are collapsed, leave the margin as-is.
When actions are expanded, set margin to 5rem or smth like that.
Use :has() for that.

Something like

.census-table article {
transition: margin-block-end var(--pico-transition); 

&:has(details[open]) {
  margin-block-end: 5rem;
}
}

Currently, we assume the limit is 25MB per file. This is not the case, it is 25MB per message (see https://discord.com/developers/docs/reference#uploading-files)

So we need to do extra pagination to squeeze the files into chunks as efficiently as possible.

Since we mostly have required fields, and only few optional fields, we can simply grab all the fields, then filter for those that are empty, and then check whether any of these do not match an array of optional fields.

This should help with code splitting

Query all bases of a user from the wiki that were built in Eisvana
Display that list
Give user the option to choose one
Let them give a reason (in case they deleted the old one)

Don't show the button if there is only one base available.

The button could be on the census table page. The request should only fired when they actively click on the button, otherwise we end up spamming the API.

Query the section 0 of the base preload, then extract the version template and read its first parameter.

Ideally the table should fit on one page.

Current issues:

• wikitext cannot be parsed -> MW API?

fetch(`https://nomanssky.fandom.com/api.php?action=parse&format=json&origin=*&summary=Some%20%5B%5Blink%5D%5D`).then(r => r.json()).then(j => document.body.innerHTML = j.parse.parsedsummary['*'])

https://nomanssky.fandom.com/wiki/Special:ApiSandbox#action=parse&format=json&origin=*&summary=Some%20%5B%5Blink%5D%5D&prop=

Doesn't seem to be able to parse external links

• scaling -> smaller font size? Leaving out columns?

The two image inputs share a lot of similar code, check whether that can be extracted somehow

Add an index page with links to the other 3 sub-pages.
The links and a small description should be in cards that are aligned horizontally with a flexbox.

The How to Adapt documentation doesn't mention to change the HTML keywords or the favicon.

Give an error message if sending details failed. Otherwise clear form and give success message

Search for player name, social media name, etc.

Preload fields:

• Userdata
  • Username
  • Discord name
  • Friend code
  • Social media name, etc.

Unchangeable field: Arrival time

Only add table link if query parameter is given

How should user routing work?

Google has a page-reload. That enables going to the previous form by clicking the "back" button. This is good UX.

Maybe https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event would be something to consider.

Other links:
https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Also add a check that the user actually completed the first form. If the first form is not completed, the second one must not load.

The hash for the second one should be automatically removed if the first form hasn't been completed.

Instead of relying on a whole file with inserted variables, take an array of section objects.

Each section object has a heading and a body.

• Heading represents h2
• Body is all text below that, including sub-headings
• First section should omit the heading

• Should mirror the google form.

Should also be able to accept data from localstorage or sessionstorage (needs testing whether sessionstorage persists a page reload/route change)

Data is stored with username as key in storage. Key is given in URL query parameter. If no key is given in URL -> no preload.
Table should stringify the json data when the link is clicked. If that is not possible, store the data on pageload.

Could also request fresh data based on query param -> slower

• Submission text (and ideally colour) should make it clear whether this is a new or an updated submission.
• Take multiple images, compress them to < 10MB.
  • Make sure infobox image is not repeated in gallery.
• send txt file to Bridge with formatted wikitext
• images as zip? -> Better not, just send them as-is. No need for more complexity which is rarely needed.

This is purely cosmetic.

Click on "2". Notice "3" getting highlighted as well. Seems like some weird hover state issue

The RenewButton component should be made dumb.

Requirements:

• Takes a userobject -> contains base name and user name
• Should not contain any internal state whether someone was renewed or not -> renew whenever it is clicked

Basically already done. Make sure the code gets properly reused for the renew button on the table page.

This would require that we somehow set a "current" state, which can then be compared to the new state

The buttons don't fill the entire space occupied by the icon

i. e. [https://x.com/Lilac_Chicky Lilac Chicky] in the wikitext gets parsed back as just Lilac instead of Lilac Chicky. It should split on the space, then shift the first item and concat the rest again with spaces

• Add some green to the success screens
• When having changed the active base, display that as requested, like it is with renewals

If they don't, they submit the form

Paginating them should increase performance

Editable fields:

• Everything buildable
  • Name
  • Image
  • Type
  • Arena
  • Exocraft
  • Landingpad, etc.
  • Layout
  • Features
  • Additional info
• User specific fields
  • Username -> synced with Builder
  • If Builder is null, show Builderlink
  • Discord name
  • Friend Code
  • Social Media links, etc.

Unchangeable fields:

• Everything related to location
  • Glyphs, Coords
  • Geo Coords
  • Planet, System, Region, Galaxy
  • Civilized
  • Mode
  • Platform