Category Counts Awards Block for React

Edit CATEGORIES at the top of the file. Each category has an id, a name, a glyph and years: one number for each award it won, each a fixed year. The counts, the total in the header, the shares, the bars and the outlined tile are all counted from those lists. A category with one more win just needs one more year in its list.

They use the largest-remainder method. Each share is rounded down first, then the points still missing go to the categories whose shares lost the most in rounding, the larger count first on a tie. A plain Math.round on each tile can add to 99 or 101; this can't. The bar is a different measure: it's the count over the largest count, so the busiest category's bar is full.

GLYPHS holds each glyph as a few stroked paths in a 24 by 24 box. Add a key to the Glyph type and a list of paths, then give a category that glyph. They're drawn in your theme's foreground and hidden from assistive technology: the category's name is the label.

The grid is three columns from sm, so a multiple of three fills every row (six or twelve), and two columns on a phone, where an odd last tile takes the full row. For another count, adjust the columns in the list's class; the tiles share a single hairline, so no cell is left showing the border colour.

The tiles are a list named "Awards by category". Each opens with the category as a heading, then the count, then the base and share written out ("8 of 40 awards, 20%"). The glyph and the bar are drawings hidden from assistive technology and carry nothing the text doesn't. Counts sit in bdi elements so they keep their order in a right-to-left layout.

No. The Glenwell Awards and the counts are made up, and Fieldday is a made-up product. Replace them with your own tally, using a real programme's name in text only.