board diagrams

docs/game/actions.md

@@ -37,7 +37,7 @@ Think of actions like function calls. An action for a chess move would be like a
 function named `move` that takes two arguments `piece` and `space`. This is a
 single action, not two. The player's client would essentially make a call like:
 
-<img style="align:center" src="/img/move.png"/>
+<div style="text-align:center"><img src="/img/move.png"/></div>
 
 For this reason, you will sometimes see the values selected by the players
 called "arguments".

docs/game/board.md

@@ -39,8 +39,16 @@ graph TD;
     `"];
 ```
 
-Spaces can contain other spaces and pieces. Pieces can even contain other
-pieces, e.g. as when placing tokens onto a card.
+In the context of an actual game board, the Spaces and Pieces in this diagram
+might look something like this:
+
+<img src="/img/board.png"/>
+
+Here the <span style="color: #666"><b>Spaces</b></span> are grey and the <span
+style="color: #009"><b>Pieces</b></span> are blue. Spaces can contain other
+spaces and pieces. For example the Tableau here contains the Hand and the Hand
+contains the Cards. Pieces can also contain other pieces, e.g. as when placing
+tokens onto a card.
 
 ## Subclassing
 
@@ -155,6 +163,8 @@ elements can be queried using the `owner` property.
 Rememeber the difference between `player` and `owner`. They are related but distinct.
 - `player` is a property you set that assigns a game element to that player, and is usually permanent. Think of it like a name tag, or the color of the element.
 - `owner` is a read-only property that indicates where the piece currently resides. A Card might be owned by a player while they hold it, but the card "doesn't have their name on it" so to speak, and may change hands.
+
+<div style="text-align:center"><img src="/img/owner.png"/></div>
 :::
 
 The Player object also conveniently has methods for retrieving these elements:

docs/game/players.md

@@ -84,7 +84,7 @@ or many owned elements.
 ## Profile badge
 
 It is generally good practice to place the
-[<ProfileBadge>](../api/modules#profilebadge) component into the UI to mark the
+[&lt;ProfileBadge/&gt;](../api/modules#profilebadge) component into the UI to mark the
 player's area of the board and show information about the player, such as
 score. This automatically displays if it's the player's turn, whether they're
 online, and links to their profile, if any. It can be further customized with

docs/ui/layout.md

@@ -3,11 +3,12 @@ sidebar_position: 3
 ---
 # Layout
 
-A layout is basically just a strategy for how items are visually placed inside
-other items. A layout might say that items should be laid out in a row, or a
-stack, or a grid. When many items enter the same space, it might say that they
-should scale down to fit, should squish together, or that only a certain number
-should actually be visible.
+Customizing the game UI probably requires declaring several layouts. Each layout
+provides a strategy for a given game element about how items should be visually
+placed inside it. A layout might declare that for a given area, items should be
+laid out in a row, or a stack, or a grid. When many items enter the same space,
+it might declare whether they should scale down to fit, should squish together,
+or whether only a certain number of them should actually be visible.
 
 All layout declarations go in the `layout` of the main
 [`render`](../api/modules#render) function, e.g.:
@@ -16,9 +17,7 @@ All layout declarations go in the `layout` of the main
   render(setup, {
     ...
     layout: (board) => {
-      board.layout('mat', {
-        area: { top: 5, height: 90, left: 5, width: 90 },
-      });
+      // layout declarations go here
       ...
     }
 

src/components/Layout.jsx

@@ -142,7 +142,7 @@ const Layout = () => {
             <div className={styles.label}>gap<div className={styles.helper}>gap size is absolute to board size</div></div>
             <div className={styles.value}>
               <div className={styles.xyrange}>
-                <div>X: <nobr><input type="range" min={0} max={50} step={0.5} value={gapX} onChange={e => setGapX(parseFloat(e.target.value))}/> {gapX}%</nobr></div>
+                <div>X: <br/><nobr><input type="range" min={0} max={50} step={0.5} value={gapX} onChange={e => setGapX(parseFloat(e.target.value))}/> {gapX}%</nobr></div>
                 Y: <input orient="vertical" className={styles.vertical} type="range" min={0} max={50} step={0.5} value={gapY} onChange={e => setGapY(parseFloat(e.target.value))}/> {gapY}%
               </div>
             </div>