Goal Rings Team Block for React

Edit GOALS and QUARTER at the top of the file. A goal is a name, an owner, its progress (0 to 100), a state (active, blocked or done) and, for a blocked one, what it waits for in blockedOn. The pace words, the tick's angle and the three counts in the band are computed from those; the tick sits at the share of the quarter that has gone, so changing QUARTER.week moves it on every ring.

By the gap between a goal's progress and the quarter's pace (62% in week 8 of 13). Five points or more past the pace is Ahead of pace, five or more short is Behind pace, anything between is On pace, and a goal at Done says Done. Change SLACK to widen or narrow the middle. The word comes with an icon (an arrow up, an arrow down, a dash or a check), so the pace never depends on colour.

It's the catalog's Circular Progress (Ark UI's progress on every base), with the arc in the foreground colour; the tick is a small box turned to the pace's angle. The drawing is hidden from assistive technology and the same facts are in the text under it: each goal's pace line carries a hidden sentence ("78% done, ahead of pace"), and the goal's name is a heading.

Each arc sweeps in from empty once when the page loads, and the three counts roll to their numbers once when they come into view. With reduced motion the rings are drawn at their values and the counts show their final numbers; the cells' entrance fade is off too.

Its ring is the same, so you still see how far it got; the cell adds a Badge with a "no entry" icon and the words "Blocked on" and the reason, and the band under the grid counts it under Blocked. A blocked goal also gets a pace word, so it's clear how far behind it is.

The four cells are two across below lg, two rows of two, still sharing their hairlines, with no empty slot. The ring is the same size at every width, the counts band stays three across, and the page never scrolls sideways at 320 pixels.