Gathering resources in one place would emphasizes an inconsistency:

Armor Slots and HP are marked when lost, which is bad.
Stress is marked when gained, which is bad.
Clearing all of these on a rest is good.

Hope is marked when gained, which is good, and cleared when spent.

It's quite silly how your armor might have a feature on the right which refers to your score on the top left, other features that might let you affect your damage threshold will be at the bottom or on your cards, and finally your HP and armor slots aren't side by side. Makes you look all over.

I'd love to hear what others think, but I think it's way more intuitive to leave a gap between the damage categories, with the lower bound written inside the box to convey that it is an inclusive bound. The little ▶ in the original design were particularly counterintuitive to me.

*Red pen in a coat pocket.

Je suis probablement trop habitué au style des premières saisons, j'ai l'impression qu'il y a quelque chose qui cloche. Benno, qu'est-ce qu'ils t'on fait! Tu as l'air aimable! 😂

Je blague un peu, mais je vais sans doute apprécier le changement quand on aura des scènes d'action et des paysages.

A bit of a tangent, but I really wish this was a law everywhere. There's an intersection near my place where people keep turning on red where it's explicitly not allowed, right in front of a school, but I still see a car turn right on red literally every time I walk by.

And more conventions, yes.

Having played the alpha, this project was clearly doomed from the start. Not because there was no fun to be had, but because the majority of their potential buyers already owns Smash, and who would want a worse Smash as a live service?

Oooh! Hope you have a good time.

Final trivia for now: the difference between "Elixir" and "Rest" is that consuming an Elixir fills MP without affecting charge, while stepping on a save point will reset charge if the MP gauge wasn't already full.

This makes it quite an ugly function that involves a bit of trigonometry, but one that can be reused to produce the path for the max HP, max MP, current HP, current MP, and current charge.

A single function is used to compute gauge paths. It takes five arguments: the gauge's inner radius, its outer radius, the value corresponding to a full 3/4 circle, the length of the horizontal gauge when the value is 1 unit above that, and the actual value to display.

A mask is applied to the MP gauge to generate gaps between segments. A line with a stroke-dasharray is used for the horizontal part, but the gaps for the circular part are made of individual line elements because dashes around curved paths are subject to rendering issues.

The gauges are made of multiple layers:
- a path filled with a dark background color
- a circle with a bright radial gradient
- a rectangle with a bright linear gradient
- the background path reused for black outlines

A clip-path is applied to the circle and rectangle to make the gauge fill.

This is an interactive recreation of the gauges in Kingdom Hearts, built to demonstrate the way the gauges expand in a curve before growing horizontally, and the way charge is converted to MP.

The hard part was to come up with the simplest way to create gradients and curved segments in SVG.

CR's awards were were always a big joke, more a measure of engagement with their own platform than a measure of quality or even actual popularity. They allow people to vote multiple times.

I'm using a dasharray of "54 18" and a pathLength of 72 for the HP gauge, and "9 1 9 1 9 1 9 1 9 1 9 1 9 1 9 1 9 1 0 30" for a pathLength of 120 for the MP.

It's way less math generating a dasharray for a circle than computing a path for a sector of a ring, haha. 😅

Rewrote the SVG today using a diameter of 480 units so I never have to use decimal coordinates. It doesn't look quite as good as the mockup I posted above yet, but the code is much simpler. Also I fixed the blue gradient which was the wrong way around.