Demo

Dice

A die is the other kind of piece a game puts on the board. It goes in a pile, it arrives with the state, and a click on it is reported the way a click on a card is - so a dice game is played on the same board as everything else. What is new is the die, the tray it lands in, and the throw.

Throw some

The only demo on the site you can press, because the movement is the point. These are the board's own dice: clicking one picks it, which is the click a game gets. The rolling is not the board's - on a table the dice are the server's and arrive with the state, because a browser that rolled its own could roll whatever it liked.

Click a die to pick it, Keep to set it aside. Set-aside dice stay where they are when the rest are thrown again.

The six faces

Pips on a three by three grid, which is where they have been since dice were cut. Six is the only face that uses the middle row - on a real die it is the crowded one too. This is a die as a game gets one without asking for anything.

1roll: 1
2roll: 2
3roll: 3
4roll: 4
5roll: 5
6roll: 6

Flat, or the cube

The same die, the same pips, the same states - drawn two ways. Flat is what a game gets by default: it is legible at any size, it costs nothing to draw a table of them, and on a phone it is the only one of the two that is honestly readable. The cube is six faces turned in three dimensions, resting a few degrees off square so that two of them stay in view, and a game asks for it with one word on its dice.

Flatthe default - nothing has to be said
The cubelook: '3d'
Flat, set asidethe states are the same either way
The cube, set asidethe states are the same either way

What a die is doing

Three states, and all three are the server's. A die that has just been thrown is anybody's; a picked one has been chosen and can still be put back; a die set aside belongs to an earlier throw and is not the player's to change. The difference between the last two is what a turn is spent on, so they are not the same colour and not the same size.

Thrownin the throw, nobody's yet
Pickeddata-selected - can be put back
Set asidedata-kept - it counts, and it stays

The other dice

Every die cards-lib knows. Only the d6 has pips, so the rest are drawn as the number they came up, cut to the shape of the solid they belong to - which is how a player tells at a glance what is being thrown. There is nothing to choose about how these look: a d20 has no cube to be drawn as either way. A game says which die it plays with in its own rules block, and one that says nothing is playing with the d6.

cointwo faces, and it flips
d4no face to land on - it reads off the point
d6the cube, and the only one with pips
d10percentile, in pairs
d12the dodecahedron
d20the one everybody means by "roll"

The tray

A shallow tray sunk into the table, so dice sitting in one read as having landed there rather than as having been placed. It is an ordinary pile with the class on it, which is why the caption, the seat and the score can be hung off it by the game exactly as they are on any other pile.

Idle - nobody is throwing
is-active - whose turn it is
Empty - a seat waiting its turn

A turn

There is one set of dice and they are in front of whoever is playing, so every other tray on the table is empty. A row per player, read the way a table is: who they are, then what is in front of them, then what it is worth. Waiting your turn is most of a dice game, and a column of name plates is what everybody is watching while they do it.

Rummy 5000 · first to 5,000500 to get on the board
AdaWaiting3,050
YouyouPlaying2,400
350 this turn
BoWaiting4,775

Actions

A dice game's moves are its own - they are declared by the game and drawn into the bar, so nothing about the interface knows what Bank means. Drawn here from the classes GameBar uses; on this page they do nothing.

Roll
Primarythe move the game is waiting for
Keep
Defaultavailable, not urgent
Bank
Defaulttakes the turn's points and passes on
End turn
Dangerends something

What a die is on the wire

The whole of it. A pile item saying type: 'die' is drawn as a die, so a game that mixes the two - dice on a card table - gets both without anything else being told.

uuid
what a click reports
roll
what it came up; 0 for a die not thrown
sides
optional - which die this is. Absent means d6
look
optional - '3d' for the cube. Absent means flat
selected
picked out of the throw, and still changeable
kept
set aside in an earlier throw of this turn
type
'die' - this is what makes it a die and not a card
revealed
true, always: an unrevealed item goes out as a bare uuid

Measurements

Everything about a die is a share of one number, which is what makes a tray of them shrink evenly on a small screen rather than piece by piece.

Die size
calc(40px * var(--scale-size))
Die size, under 640px
calc(30px * var(--scale-size))
Tray gap
held while the dice shrink - a finger does not
Face radius
22% flat, 16% on a cube
Pip grid
3 x 3, 14% padding
Pip
74% of its square
Set aside
scaled to 78%
The throw
620ms

How the cube is built

Only for a die asking to be one. Six faces nailed to the sides of a box half its own width out from the middle, and the box turned so the face that came up is the one pointing at you. Nothing is drawn twice and no face is a special case, which is what lets a die land on any of them.

Cube edge
74% of the box it sits in
Why smaller
tilted, a cube projects wider than its own edge
Face offset
half the edge, along its own axis
Opposite faces
1-6, 2-5, 3-4 - each pair sums to seven
Resting tilt
rotateX(-18deg) rotateY(26deg)
Why tilted
square-on, a cube is a square
Perspective
5 die-widths
Turn to a new face
350ms
No filter on the cube
a filter would flatten it into a pile of faces

Why the throw is two elements

The tumble and the face are two different movements happening at once, and putting them on one element is the mistake that is easy to make.

Outer
tumbles, and finishes where it started
Inner
turned to the face that came up, and stays there
If they were one
a die could only land on the face it began on
What restarts a throw
a new uuid - which is what a game sends anyway
A die set aside
does not tumble; it landed some time ago
Reduced motion
the result, and nothing else

Colours

Three per die - face, side and pip - so a state is one change rather than a rule per piece of it.

Face#f6f2e7--die-face, ivory, the lit side
Side#d8d1bd--die-side, the side turned away
Pip#1f2937--die-pip, cut into the face
Picked, face#ecfccbchosen out of the throw
Picked, side#bef264chosen out of the throw
Set aside, face#a3e635the accent; it counts now
Set aside, side#65a30dthe accent; it counts now
Trayrgba(0, 0, 0, .32)sunk into the felt
Tray, active#a3e635whose turn it is