Inspired by the NieR Automata Reliquary System whereby upon the player's defeat, a "body" is left along with a message composed of three different parts chosen from lists of fixed phrases.
Here each message is only assignable to a single person which is managed by logging in via Twitter.
- 54 options
- 123 options
- 69 options
54 * 123 * 69 = 458,298 possible unique messages
Based on the UI design from NieR Automata.
Some components aren't as accessible as they should be. Specific known issues include:
- Colour contrast on the buttons on the homepage and "choose message" page - only AA complaint for large text
- Colour contrast of the selected state for the "choose message" part - not compliant at all
Ideally the everything would be AAA accessible but this would involve deviating from the intended aesthetic. In this instance I've left as-is due to the niche nature of the audience but small tweaks to the colours could make a huge difference.
Some elements have been changed from the original UI design for ease or to ensure they work within a web context:
- All selectable interface elements should have the "spaceship" selector appear when focused / active; the options on the "choose message" screen do not have this due to how overflow visibility works in CSS, i.e. if you set Y overflow to scroll but X to be visible, X is changed to "auto". This makes the effect tricky to implement without restructuring the entire modal
- No background shapes; the background should have abstract outline shapes in the top left and bottom right but don't as ensuring these don't overlap at different screen sizes and orientations was unmanageable
- No grid overlay over certain elements; the grid effect is set as a background on the page and then left as-is but should overlay elements like the modal or buttons when present. This was too difficult to achieve quickly: as an overlay this would interfere with the interactive elements, and making elements transparent to "show" the grid messed with the colours
- Disable options that aren't usable as they have already been assigned - a tough problem as you'd need to keep three different sets: one that holds all the used keys if you select part 1 and part 2, one for all the keys if you select part 1 and part 3, and one for all the keys if you select part 2 and part 3. This becomes difficult to manage as at the moment there's no need to remove anything if someone changes their message. This also only becomes useful as the number of available messages becomes small
- Multiple languages - I'm not sure how different versions of the game handle the 3-part message structure and whether that would need to be tweaked, apart from the interface though this should just be a case of updating two files
All of the code is released under the MIT License. If you make use of the code, it would be great to hear from you.