eisvana / eisvana-census

Census management website for Eisvana

Eisvana-Census

Web app for all census-related things in Eisvana.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

How to Adapt for Other Civs

Note

If you want to use this for your own civ, you should be somewhat familiar with coding. You don't need to understand a lot, but you should be comfortable with Git and GitHub to some degree.

You should also have a Discord server in order to receive the census submissions and renewal requests.

Important

You should not do any of this on mobile. Use a computer of some kind.

First, you should fork the repo into your own account.

Things to Change

Site-Breaking Changes

In GitHub, open the repository settings, go to Secrets and variables -> Actions. You need to set 3 secrets:

1. DISCORD_ANNOUNCEMENT_WEBHOOK: This should be a Discord webhook URL to the channel where an announcement will be posted on January 1st that the census has reset.
2. DISCORD_FORM_WEBHOOK: This should be a Discord webhook URL to the channel where census form submissions will be sent to. Ideally, this should not be a public channel.
3. DISCORD_RENEW_WEBHOOK: This should be a Discord webhook URL to the channel where census renewal requests will be sent to. Ideally, this should not be a public channel.

The first webhook is optional if you don't want any announcement, but the site won't function properly without the other two!

You can edit the code directly on GitHub by hitting . on your keyboard while on the main page of the repo.

Open the vite.config.ts file at the root of the project. Uncomment the base property, and set it to the name of your repo (should still be Eisvana-Census if you didn't change it when you forked it).

Go to the .github/workflows/announcements.yml file. You can adjust the sentences after the message=' to fit your liking. Your site will be deployed under <your-username>.github.io/<repo-name>.

Go into the public directory and delete the CNAME file. Otherwise the site cannot be deployed.

Go to src/variables/civilized.ts and set the variable to the name of your civ.

Go to src/variables/regiont.ts and change the keys (the left-hand side of the object) to the region glyphs of your civs, and the values (right-hand side) to the corresponding name of the region.

That should cover the inital setup.

Misc Changes

Use the search tab in the editor to search for Eisvana. Replace all ocurrences with your civ's name.

Use the search tab again to search for Lenni. Don't change the name in the .yml files, that will break the build process! Change the name in all other files to the one of your civ's census manager.

Open the .html files at the root of the project. Search for keywords. Edit the individual keywords accordingly to fit your civ.

Replace the favicon icons in the public directory. You can search online for "favicon generator" for tools for generating them.

Deploying the Page

Commit and push your changes to GitHub by clicking on the "Source Control" tab in the editor, specifying a commit message and then clicking "Commit and Push".

Go back to the GitHub repo itself (not the code editor).

Go to the repository settings and navigate to the Pages tab.

Under Branch, select gh-pages and click Save.

If you click on the Actions tab, you should be able to see your site being built and deployed.

It should now be available under <your-username>.github.io/<repo-name>.

When Problems Arise

You can find me (Lenni) in the Eisvana Discord server. Just send me a message and I'll take a look :)

eisvana-census's Issues

Test dynamic imports for router

This should help with code splitting

Table: Add search bar

Search for player name, social media name, etc.

Use smooth scrolling only when reduced motion is not preferred

Get Version template automatically

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

Form: Add table link

Only add table link if query parameter is given

Table:Experiment: animate card margin

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;
}
}

Table: Update Buttons on the cards

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?

Form: Routing

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.

Form: Updating Page: Rework infobox image

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.

Gallery: Mobile buttons should have type=button

If they don't, they submit the form

Refractor wiki page builder

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

Add a way for people to select another base as their primary base

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.

Form: Display images from queried page

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.

Form: put submitCensus() into try-catch

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

Filesize limit is 25MB per message for bots/webhooks

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.

How to validate data completeness

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.

Form: Check possibility of refactoring image input

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

Census Table like on the wiki

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?

Improve user response UX

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

Try to paginate census table and renewal list

Paginating them should increase performance

Index page

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.

Form

• 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.

Pagination on mobile behaves in an odd way

This is purely cosmetic.

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

Renewal

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

Doc doesn't mention keywords and favicon

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

Form: New Base for existing User

Preload fields:

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

Unchangeable field: Arrival time

Form: Update Base

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

Revision selector doesn't show text on mobile

This might require a media query

Refactor RenewButton

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

Form: Update Base: Don't submit anything if nothing was changed

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

# is an illegal character in cargo queries

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.