====== Customizing Abstract Play ======

Abstract Play lets you tune how games look on your account: player piece colours, board drawing colours, optional board layout tweaks, and (advanced) per-game CSS. Settings are saved to your profile and follow you across devices when you are logged in.

Questions? Join [[https://discord.abstractplay.com|Discord]] in **#customization** (pinned posts have extra links).

===== Opening the Customize screen =====

  * From a **game page**, click the **paintbrush** icon on the board toolbar.
  * Or open **https://play.abstractplay.com/customize/GAMEUID** (replace ''GAMEUID'' with the game’s meta id, e.g. ''complica'').

The page shows a **live preview** of a sample board for that game (loaded from the site’s thumbnail JSON when available).

===== Global defaults vs this game =====

Use the scope control at the top:

  * **Global Defaults** — applies to every game that does **not** have its own saved customization. Good for a default preferred colour or shared board colours; not every option works globally (board **style** is per game type).
  * **This game** — overrides global defaults for one meta game only.

===== Player colours =====

Build a **palette** of colours used for player pieces:

  * Pick a colour, then **Add Colour**, or click a **default swatch**.
  * Quick fills: **Select default colours**, **Select colour blind colours**, or **Select patterns** (pattern fills for pieces).
  * **Clear colours** removes your palette; the game’s built-in defaults are used again.

Some games show **Developer hints** under the palette (which slot maps to which player). Those come from the game author, not from wiki palette tables.

===== My preferred colour =====

Choose **My preferred colour** so your pieces use that slot when the game allows. You can set a global default or override it for the current game only.

===== Board colours =====

Under **Board Colours**, pick a property (background, board, strokes, borders, labels, annotations, fill) and set its colour. Help text under each property explains what it affects in the renderer.

These map to the drawing **colour context** used when the board is rendered.

===== Board and pieces (advanced) =====

Expand **Board and pieces** for renderer overrides:

  * **Board style** — when the game supports it, swap among compatible styles (e.g. checkered squares vs vertex grid). Stacked boards cannot take incompatible styles; the UI will block invalid saves.
  * **Line weight** and **Coordinate label size** — adjust grid lines and row/column labels (prefer label size over hacking label CSS).
  * **Render options** — e.g. hide coordinate labels or star points, when supported by the preview.
  * **Glyph replacements** — replace one piece glyph with another from the contact sheet, optionally at a scale.

Fix any **preflight errors** before saving. The saved render block has a size limit (~8 KiB); trim glyph maps if save is rejected.

**Reset board layout overrides** clears render overrides for the current scope without deleting your colours.

===== Custom CSS (advanced) =====

Expand **Custom CSS** on the Customize screen to add CSS scoped to this game’s board. Saved CSS is stored on your **account** when you click **Save Settings**. Scope selectors to the board wrapper, e.g. ''div.board._meta_complica'' (replace ''complica'' with the game’s meta id).

  * CSS from the old **board toolbar** (device-only) may be **imported** into this editor the first time you open Customize; save to move it to your account.
  * Toggle **Active** to turn account CSS on or off without deleting it.

//Audience:// You should already be comfortable with HTML/CSS and your browser’s developer tools. The board DOM is **not a stable API** — class names, ids, and SVG structure can change as the renderer evolves. Prefer **Player colours**, **Board colours**, **coordinate label size**, and **glyph replacements** on the Customize screen before reaching for CSS.

===== Before you write CSS =====

  * For **piece colours**, use the **palette** on Customize (especially games with many glyphs, e.g. Looney Pyramid games). Let the renderer assign player colours, then use CSS only for fine tuning.
  * Each **board type** is different; some styles (e.g. plain ''squares'' boards) do not expose separate light/dark cell targets like checkered boards.
  * Boards are mostly **SVG**. Typical top-level groups inside ''svg#theBoardSVG'':
    * ''defs'' / ''symbol'' — reusable glyphs (ids like ''aprender-glyph-…''; opaque but stable per glyph). Customize **used** piece instances in ''g#pieces''; to restyle a glyph everywhere, target the ''symbol''.
    * ''g#labels'' — row/column labels (often easier to adjust with **Coordinate label size** on Customize).
    * ''g#gridlines'' — grid lines and some markers.
    * ''g#tiles'' — tile-based boards.
    * ''g#pieces'' — piece instances (usually ''use'' elements pointing at symbols).
    * Markers/annotations use ''class'' names like ''aprender-marker-…'' / ''aprender-annotation-…''.
  * Elements meant to follow **player colour** often have ''data-playerfill=true'' and/or ''data-playerstroke=true'' — target those when overriding fills/strokes on complex glyphs.

A second SVG (''svg#theStackSVG'') appears for some stacking renderers; most games only use ''theBoardSVG''.

**CSS variables** you may set on the board container (names may change over time):

  * ''--svg-label-color'' — label and some chrome text/lines
  * ''--svg-gridline-color'' — gridlines and related strokes
  * ''--svg-default-fill'' — default filled cells (e.g. blocked squares)
  * ''--svg-volcano-caps'' — Volcano cap colour (dark-mode visibility)

//Do not paste CSS you do not understand.// Abstract Play is not responsible for broken layouts from custom CSS. For help, use #customization on Discord.

===== Custom CSS examples =====

Paste snippets into the **Custom CSS** box on Customize, then **Save Settings**. Adjust selectors for your game and inspect the live board if something does not match.

**Change a piece colour** (find the ''symbol'' id via devtools — inspect a piece → follow ''href'' to ''defs''):

<code>
symbol#aprender-glyph-82ae1f37b40e1 *[data-playerfill=true] {
    fill: #0f0;
}
</code>

**Labels** (prefer **Coordinate label size** when opacity/font size is enough):

<code>
g#labels text {
    opacity: 0.5;
    stroke: black;
    fill: white;
    font-family: cursive;
}
</code>

**Gridlines**:

<code>
g#gridlines line {
    stroke: red;
    stroke-width: 3;
}
</code>

**Background image** (on the board wrapper or the SVG — test which fits your layout):

<code>
div.board._meta_complica {
    background-image: url(https://example.com/your-texture.jpg);
}
</code>

<code>
svg#theBoardSVG {
    background-image: url(https://example.com/your-texture.jpg);
}
</code>

This is separate from **site theme** colours (light/dark chrome), which you can adjust from the **navbar** theme control — that changes page chrome, not the game board palette.

**Implementation details** (how CSS is loaded in React, account vs localStorage, renderer wiring): **https://docs.abstractplay.com/front/subsystems/customize/**

===== Saving and sharing settings =====

  * **Save Settings** — writes to your account (requires login).
  * **Reset to Defaults** — removes your customization for this scope.
  * **Delete Customization** — removes the saved blob for this game (or global entry).
  * **Apply to other games…** — after saving, copy selected sections (player colours, board colours, renderer, preferred colour, custom CSS) to other games you pick.

Power users can edit **Settings JSON** directly (including ''render.board'', ''render.glyphmap'', ''render.options'') and paste a full blob, then save.