add go-stone-marker element

README.md

@@ -52,6 +52,16 @@ Being form associated also means that you can send data to your own servers with
 </form>
 ```
 
+Stones can be decorated with markers. The `go-stone-marker` element can be passed as a child to `go-stone` and you can add any icon or html entity that you like.
+
+```html
+<go-board>
+  <go-stone slot="Q4" color="black">
+    <go-stone-marker>&check;</go-stone-marker>
+  </go-stone>
+</go-board>
+```
+
 ## Attributes
 
 | Item              | description                                                           |

dev.html

@@ -33,7 +33,11 @@
     </style>
 
     <form action="/save-game">
-      <go-board name="board" sfx="/assets/sfx" disablelastmarker></go-board>
+      <go-board name="board" sfx="/assets/sfx" disablelastmarker>
+        <go-stone slot="Q4" color="black">
+          <go-stone-marker>&#10005;</go-stone-marker>
+        </go-stone>
+      </go-board>
     </form>
   </body>
 </html>

src/lib.ts

@@ -1,2 +1,3 @@
 export { GoBoardElement } from "./lib/board.js";
 export { GoStoneElement } from "./lib/stone.js";
+export { GoStoneMarkerElement } from "./lib/marker.js";

src/lib/marker.ts

@@ -0,0 +1,18 @@
+import { css, element, html, shadow, tagName } from "@joist/element";
+
+@element
+export class GoStoneMarkerElement extends HTMLElement {
+  @tagName static tag = "go-stone-marker";
+
+  @shadow styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50px;
+      width: 50px;
+    }
+  `;
+
+  @shadow dom = html`<slot></slot>`;
+}

src/lib/stone.ts

@@ -1,4 +1,4 @@
-import { attr, css, tagName, shadow, element } from "@joist/element";
+import { attr, css, tagName, shadow, element, html } from "@joist/element";
 
 import { GoBoardElement } from "./board.js";
 
@@ -27,6 +27,7 @@ export class GoStoneElement extends HTMLElement {
     }
 
     :host([color="black"]) {
+      color: #fff;
       background: black;
       background-image: radial-gradient(
         circle at center,
@@ -36,6 +37,7 @@ export class GoStoneElement extends HTMLElement {
     }
 
     :host([color="white"]) {
+      color: #000;
       background: #fff;
       background-image: radial-gradient(
         circle at center,
@@ -45,6 +47,8 @@ export class GoStoneElement extends HTMLElement {
     }
   `;
 
+  @shadow dom = html`<slot></slot>`;
+
   @attr accessor color: StoneColor = "black";
 
   #parent: GoBoardElement | null = null;

src/register.ts

@@ -1,20 +1,24 @@
 import "./lib/board.js";
 import "./lib/board.js";
 import "./lib/stone.js";
+import "./lib/marker.js";
 
 import { GoBoardElement } from "./lib/board.js";
 import { GoStoneElement } from "./lib/stone.js";
+import { GoStoneMarkerElement } from "./lib/marker.js";
 
 declare global {
   interface HTMLElementTagNameMap {
     "go-board": GoBoardElement;
     "go-stone": GoStoneElement;
+    "go-marker": GoStoneMarkerElement;
   }
 
   namespace JSX {
     interface IntrinsicElements {
       ["go-board"]: any;
       ["go-stone"]: any;
+      ["go-marker"]: any;
     }
   }
 }