Fun Ranking

Tier list maker

Not yet placed 0
Everything is in a tier.

Tap an item to pick it up.

Built in your browser · nothing is uploaded

Local · tap to place, works on touch
Advertisement
320 × 100

Build an S-to-F tier list from any set of items and save it as an image. Tap an item, tap a tier; no dragging, so it works the same on a phone as on a desktop.

How to use the tier list maker

1 Add your items, one per line.
2 Tap an item, then tap a tier to place it.
3 Save the board as a PNG.

Placement is tap-then-tap rather than drag-and-drop, and that is a deliberate choice rather than a shortcut. HTML’s native drag-and-drop does not fire on touch devices at all: a tier list built on it simply does not work on a phone, which is where most of them are made. Reimplementing dragging with pointer events works but is fiddly to get right and remains unusable with a keyboard. Tapping works everywhere and can be operated entirely by keyboard.

The S tier is a Japanese convention that arrived through fighting games and gacha: S sits above A and originally stood for shu or "special", a grade above the top of a conventional A-to-F scale. That is why the scale looks odd to anyone meeting it for the first time. It is an A-to-F school grading with an extra rank bolted on top.

The board is drawn to a canvas by hand rather than screenshotting the page, because there is no browser API that turns an element into an image. The usual trick. Wrapping the HTML in an SVG foreignObject. Is blocked by the content security policy this site runs, and would be a poor trade anyway: drawing directly gives a fixed, predictable output rather than one that changes with your font settings and window width.

Questions

Native drag-and-drop does not work on touch at all, and a tier list is mostly made on a phone. Tapping works everywhere and with a keyboard.

MDN, CanvasRenderingContext2D.drawImage()
Advertisement
300 × 250
Was this tool any good?
Internal signal only · I use it to find the tools worth rebuilding