diff --git a/CHANGELOG.md b/CHANGELOG.md index 132dc9e..83aeb9c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [Unreleased] +## [0.8.0] - 2021-12-27 ### Added diff --git a/docs/api/interfaces/APRenderRep.html b/docs/api/interfaces/APRenderRep.html index b992841..7bbf044 100644 --- a/docs/api/interfaces/APRenderRep.html +++ b/docs/api/interfaces/APRenderRep.html @@ -1,8 +1,8 @@ APRenderRep | @abstractplay/renderer
Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface APRenderRep

Games on the Abstract Play service must produce representations of the play area based on this schema. The front-end renderer will then translate that into various forms. Detailed documentation is difficult within a JSON document (e.g., no multi-line strings allowed), so see the website for standalone documentation.

-

Hierarchy

  • APRenderRep

Indexable

[k: string]: unknown

Index

Properties

Properties

Optional annotations

annotations?: ({ arrow?: boolean; colour?: string; opacity?: number; player?: number; style?: "solid" | "dashed"; targets: [{ col: number; row: number }, ...{ col: number; row: number }[]]; type: "dots" | "move" | "eject" | "enter" | "exit" } | { action: number; system: string })[]
+

Hierarchy

  • APRenderRep

Indexable

[k: string]: unknown

Index

Properties

Properties

Optional annotations

annotations?: ({ arrow?: boolean; colour?: string; opacity?: number; player?: number; static?: undefined; style?: "solid" | "dashed"; targets: [{ col: number; row: number }, ...{ col: number; row: number }[]]; type: "dots" | "move" | "eject" | "enter" | "exit" } | { action: number; system: string })[]

Instruct the renderer how to show any changes to the game state. See the docs for details. For the entropy renderer, the pieces are theoretically laid out on a grid 14 cells wide. So to show annotations on the second board, you will reference column indexes starting at 7. The number of rows does not change.

-

Optional areas

areas?: ({ B: string; G: string; R: string; Y: string; type: "globalStash" } | { cell?: string; stack: string[]; type: "expandedColumn" } | { label: string; stash: string[][]; type: "localStash" })[]
+

Optional areas

areas?: ({ B: string; G: string; R: string; Y: string; type: "globalStash" } | { cell?: string; stack: string[]; type: "expandedColumn" } | { label: string; stash: string[][]; type: "localStash" } | { buffer?: number; buttons: [{ attributes?: [{ name: string; value: string }, ...{ name: string; value: string }[]]; label: string; value?: string }, ...{ attributes?: [{ name: string; value: string }, ...{ name: string; value: string }[]]; label: string; value?: string }[]]; colour?: string; height?: number; minWidth?: number; position?: "left" | "right"; type: "buttonBar" } | { buffer?: number; height?: number; list: { name: string; piece: string }[]; noclick?: boolean; position?: "left" | "right"; type?: "key" })[]

Areas are renderer-specific elements that are used and rendered in various ways.

board

board: null | { buffer?: { pattern?: string; show?: ("N" | "E" | "S" | "W")[]; width: number }; height?: number; markers?: ({ points: [{ col: number; row: number }, ...{ col: number; row: number }[]]; type: "dots" } | { colour?: string | number; opacity?: number; points: [{ col: number; row: number }, { col: number; row: number }, { col: number; row: number }, ...{ col: number; row: number }[]]; type: "shading" } | { colour: string | number; edge: "N" | "E" | "S" | "W" | "NE" | "SE" | "SW" | "NW"; type: "edge" } | { cell: { col: number; row: number }; colour?: string | number; side: "N" | "E" | "S" | "W"; type: "fence" } | { glyph: string; points: [{ col: number; row: number }, ...{ col: number; row: number }[]]; type: "glyph" })[]; maxWidth?: number; minWidth?: number; stackOffset?: number; strokeColour?: string; strokeOpacity?: number; strokeWeight?: number; style: "squares" | "squares-checkered" | "squares-beveled" | "vertex" | "vertex-cross" | "go" | "hex-odd-p" | "hex-even-p" | "hex-odd-f" | "hex-even-f" | "hex-of-hex" | "hex-of-tri" | "hex-of-cir" | "snubsquare"; tileHeight?: number; tileSpacing?: number; tileWidth?: number; width?: number } | { name: string; seat?: "N" | "E" | "S" | "W"; stars: [string, string] | [string] }[] | { boardOne?: { label?: string; occluded?: boolean }; boardTwo?: { label?: string; occluded?: boolean }; orientation?: "horizontal" | "vertical"; strokeColour?: string; strokeOpacity?: number; strokeWeight?: number; style: "entropy" }

This is the game board itself.

diff --git a/docs/api/interfaces/Glyph.html b/docs/api/interfaces/Glyph.html index 71a4757..4958089 100644 --- a/docs/api/interfaces/Glyph.html +++ b/docs/api/interfaces/Glyph.html @@ -1,23 +1,23 @@ Glyph | @abstractplay/renderer
Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface Glyph

An individual glyph with options, used in the legend property.

-

Hierarchy

  • Glyph

Index

Properties

Properties

Optional colour

colour?: string
+

Hierarchy

  • Glyph

Index

Properties

Properties

Optional colour

colour?: string

A 3- or 6-digit hex colour value. Do not use this to assign player colours! This should only be used for tweaking composite pieces. Ignored if player is also defined.

-

Optional name

name?: string
+

Optional name

name?: string

The name of the actual glyph. It may not contain any whitespace.

-

Optional nudge

nudge?: { dx?: number; dy?: number }
+

Optional nudge

nudge?: { dx?: number; dy?: number }

The number of units to nudge the glyph from centre.

Type declaration

  • Optional dx?: number

    Negative values move the glyph to the left.

  • Optional dy?: number

    Negative values move the glyph up.

    -

Optional opacity

opacity?: number
+

Optional opacity

opacity?: number

A number between 0 and 1 indicating how opaque to render the glyph. A value of 0 means completely transparent.

-

Optional player

player?: number
+

Optional player

player?: number

A positive integer pointing to a player position. Based on user settings, an appropriate background fill colour will be chosen.

-

Optional rotate

rotate?: number
+

Optional rotate

rotate?: number

A number between -360 and 360 representing the degrees to rotate the glyph. Negative values rotate counterclockwise.

-

Optional scale

scale?: number
+

Optional scale

scale?: number

A number representing how you want the glyph proportionately scaled. Numbers <1 will shrink the glyph. Numbers >1 will enlarge it.

-

Optional text

text?: string
+

Optional text

text?: string

Mutually exclusive with name. In this case, the glyph is plain text, shrunk down to the appropriate size to fit in a cell. This is intended for very short strings, like numbers.

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/renderer.api.md b/docs/renderer.api.md index a469893..fa71681 100644 --- a/docs/renderer.api.md +++ b/docs/renderer.api.md @@ -31,6 +31,7 @@ export interface APRenderRep { colour?: string; player?: number; arrow?: boolean; + static?: boolean & string; [k: string]: unknown; } | { @@ -46,7 +47,6 @@ export interface APRenderRep { G: Stashstrings; B: Stashstrings; Y: Stashstrings; - [k: string]: unknown; } | { type: "expandedColumn"; @@ -57,7 +57,57 @@ export interface APRenderRep { type: "localStash"; label: string; stash: string[][]; - [k: string]: unknown; + } + | { + type: "buttonBar"; + buttons: [ + { + label: string; + value?: string; + attributes?: [ + { + name: string; + value: string; + }, + ...{ + name: string; + value: string; + }[] + ]; + [k: string]: unknown; + }, + ...{ + label: string; + value?: string; + attributes?: [ + { + name: string; + value: string; + }, + ...{ + name: string; + value: string; + }[] + ]; + [k: string]: unknown; + }[] + ]; + position?: "left" | "right"; + height?: number; + minWidth?: number; + buffer?: number; + colour?: string; + } + | { + type?: "key"; + list: { + piece: string; + name: string; + }[]; + height?: number; + buffer?: number; + position?: "left" | "right"; + noclick?: boolean; } )[]; board: diff --git a/docs/schema.adoc b/docs/schema.adoc index 0143e5b..608b58d 100644 --- a/docs/schema.adoc +++ b/docs/schema.adoc @@ -117,12 +117,17 @@ For the Homeworlds renderer, this is an array of arrays of ships. Ships must des === `areas` -This section is unique to different renderers. The default renderer ignores it. +This section is unique to different renderers. The Homewords renderer uses this for the global stash. Provide the stash contents of each of the four colours. The `stacking-expanding` renderer uses this to display an expanded column of pieces in a stack when requested. +There are two generic areas available to most renderers: + +buttonBar:: This lets you place a clickable bar of buttons next to the board. The text of the buttons can be styled using CSS. Used in Alfred's Wyke. See the playground for an example. +key:: This places a list of glyphs next to the board with a text label. Used to aid in move entry or to convey some other useful state information. Used in Volcano. See the playground for an example. + === `annotations` This is how a game tells the renderer how to illustrate state changes. The following annotations are available: diff --git a/package.json b/package.json index aaa6749..e4e2a44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@abstractplay/renderer", - "version": "0.7.0", + "version": "0.8.0", "description": "Renders Abstract Play game states graphically", "repository": { "type": "git", diff --git a/src/renderers/stackingExpanding.ts b/src/renderers/stackingExpanding.ts index 00d473d..5d38784 100644 --- a/src/renderers/stackingExpanding.ts +++ b/src/renderers/stackingExpanding.ts @@ -68,7 +68,7 @@ export class StackingExpandingRenderer extends RendererBase { // Add cell name if ( ("cell" in area) && (area.cell !== undefined) ) { - const txt = nested.text(`Cell ${area.cell as string}`); + const txt = nested.text(`Cell ${area.cell }`); txt.font("size", "50%"); txt.move(0, (this.cellsize / 4) * -1).fill("#000"); } @@ -210,7 +210,7 @@ export class StackingExpandingRenderer extends RendererBase { // Add cell name if ( ("cell" in area) && (area.cell !== undefined) ) { - const txt = nested.text(`Cell ${area.cell as string}`); + const txt = nested.text(`Cell ${area.cell }`); txt.font("size", "50%"); txt.move(0, (this.cellsize / 4) * -1).fill("#000"); } diff --git a/test/playground.html b/test/playground.html index b085b6b..84f46d8 100644 --- a/test/playground.html +++ b/test/playground.html @@ -175,7 +175,7 @@ "niche-areas-bbar": { "name": "Niche: Areas - Button Bar", "description": "The `areas` property also supports a button bar, which places a vertical bar of buttons to the left or right of the game board, usually for use by the click handler.", - "render": "{\"board\":{\"style\":\"squares-checkered\",\"width\":8,\"height\":8},\"legend\":{\"A\":{\"name\":\"piece\",\"player\":1},\"B\":{\"name\":\"piece\",\"player\":2}},\"pieces\":\"BBBBBBBB\\nBBBBBBBB\\n_\\n_\\n_\\n_\\nAAAAAAAA\\nAAAAAAAA\",\"areas\":[{\"type\":\"buttonBar\",\"buttons\":[{\"label\":\"This\"},{\"label\":\"is\"},{\"label\":\"a\"},{\"label\":\"really long\",\"value\":\"long\"},{\"label\":\"test\"}],\"position\":\"right\",\"buffer\":0.1}]}" + "render": "{\"board\":{\"style\":\"vertex\",\"width\":4,\"height\":4,\"tileHeight\":1,\"tileWidth\":1,\"tileSpacing\":0.5},\"legend\":{\"B\":{\"name\":\"piece-square\",\"player\":1},\"D\":{\"name\":\"piece-square\",\"player\":2},\"W1\":\"wyke-1\",\"W2\":\"wyke-2\",\"W3\":\"wyke-3\",\"W4\":\"wyke-4\",\"W5\":\"wyke-5\",\"W6\":\"wyke-6\",\"W7\":\"wyke-7\"},\"pieces\":\"W3,W6,W4,W4\\nW5,W5,W4,W4\\nW4,W4,W5,W3\\nW4,W4,W3,D\",\"annotations\":[{\"type\":\"enter\",\"targets\":[{\"row\":2,\"col\":3}]},{\"type\":\"enter\",\"targets\":[{\"row\":3,\"col\":2}]},{\"type\":\"enter\",\"targets\":[{\"row\":2,\"col\":2}]},{\"type\":\"enter\",\"targets\":[{\"row\":1,\"col\":1}]},{\"type\":\"enter\",\"targets\":[{\"row\":0,\"col\":0}]}],\"areas\":[{\"type\":\"buttonBar\",\"position\":\"left\",\"buttons\":[{\"label\":\"1-1-1-1-1\",\"attributes\":[{\"name\":\"text-decoration\",\"value\":\"line-through\"}]},{\"label\":\"2-1-1\",\"attributes\":[{\"name\":\"text-decoration\",\"value\":\"line-through\"}]},{\"label\":\"2-2\"},{\"label\":\"3-1\"},{\"label\":\"4\"}]}]}" }, "niche-areas-key": { "name": "Niche: Areas - Legend Key", @@ -243,7 +243,7 @@

Abstract Play: Renderer Playground

This is a public place for people to interact and experiment with the Abstract Play rendering engine. Use the drop-down menu to select from a list of samples, and then tweak them to your heart's content. See the GitHub page for documentation and a list of available glyphs. It should work correctly in Chrome, Firefox, Opera, and Edge. If you encounter issues, please let us know on the GitHub page.

-

Updated to version 0.7.0.

+

Updated to version 0.8.0.

JSON Input