Hi-Score view only (data-view="hi-score"). The rows are the existing game row; this page adds the header, loading, empty and footer.

Ranking table

Header and rows share one column grid. The ranked column follows the metric tab; the column after the tree shows Fruit, or Playing now when the list is ranked by fruit.

Header, per metric

RankGamePlaying nowIts treeFruit

Ranked by Playing now

RankGameFruitIts treePlaying now

Ranked by Most fruit

RankGamePlaysIts treeFruit

Ranked by Most played (added)

RankGameAddedIts treeFruit

Ranked by Newest (added)

Row states

RankGamePlaying nowIts treeFruit

SnakeJacobHolst13

29Open the tree

#1: rank in ink

Broadside BattleJacobHolst9

8Open the tree

Hover / the row you came from: tone-2

Chimp Claimyousef-boat7

7Open the tree

Focus: 3px mint-bright ring

Loading

RankGamePlaying nowIts treeFruit

Flat tone-2 blocks in the row grid; they pulse tone-2 to tone-3 only when motion is allowed.

Empty (a metric with nothing to rank yet)

RankGamePlaying nowIts treeFruit

Nobody is playing right now

Every game is idle. Rank by Most fruit to see which trees grew most, or start a game yourself.

Pick a game

Footer: open slots and paging (from the concept)

Open slotsSubmit a game