Add hold text.

Author: tesseralis

src/nodes/HoldArea.ts

@@ -1,10 +1,11 @@
-import { Container, Graphics } from "pixi.js";
+import { Container, Graphics, HTMLText } from "pixi.js";
 import { container } from "../util";
 import GameNode from "./GameNode";
 import type { Piece } from "./Deck";
 import QubitPair from "./QubitPair";
-import { CELL_SIZE } from "../constants";
+import { CELL_SIZE, TEXT_FONT, theme } from "../constants";
 
+const header = 75;
 const width = 200;
 const height = 200;
 export default class HoldArea extends GameNode {
@@ -14,11 +15,24 @@ export default class HoldArea extends GameNode {
     super();
     this.view.scale = 0.75;
     this.view.addChild(
-      container(new Graphics().roundRect(0, 0, width, height))
+      container(new Graphics().roundRect(0, 0, width, header + height))
     );
 
     this.view.addChild(this.container);
-    this.container.position = { x: 100, y: 100 };
+    const text = new HTMLText({
+      text: "HOLD",
+      style: {
+        fill: theme.colors.primary,
+        stroke: { color: theme.colors.background, width: 10 },
+        fontFamily: TEXT_FONT,
+        fontWeight: "bold",
+        fontSize: 48,
+      },
+    });
+    text.anchor = { x: 0.5, y: 0.5 };
+    text.position = { x: width / 2, y: header / 2 };
+    this.view.addChild(text);
+    this.container.position = { x: width / 2, y: header + height / 2 };
   }
 
   setHold(piece: Piece) {