implement gameboard v1

webclient/src/components/Game/CardRegistry/CardRegistryContext.ts

@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext } from 'react';
+
+export type CardKey = string;
+
+export function makeCardKey(playerId: number, zone: string, cardId: number): CardKey {
+  return `${playerId}-${zone}-${cardId}`;
+}
+
+export interface CardRegistry {
+  register(key: CardKey, el: HTMLElement): void;
+  unregister(key: CardKey): void;
+  get(key: CardKey): HTMLElement | undefined;
+  subscribe(listener: () => void): () => void;
+}
+
+export const CardRegistryContext = createContext<CardRegistry | null>(null);
+
+export function useCardRegistry(): CardRegistry | null {
+  return useContext(CardRegistryContext);
+}
+
+export function useRegisterCardRef(key: CardKey | null) {
+  const registry = useCardRegistry();
+  return useCallback(
+    (el: HTMLElement | null) => {
+      if (!registry || key == null) {
+        return;
+      }
+      if (el) {
+        registry.register(key, el);
+      } else {
+        registry.unregister(key);
+      }
+    },
+    [registry, key],
+  );
+}
+
+export function createCardRegistry(): CardRegistry {
+  const map = new Map<CardKey, HTMLElement>();
+  const listeners = new Set<() => void>();
+  const notify = () => {
+    listeners.forEach((l) => l());
+  };
+  return {
+    register(key, el) {
+      map.set(key, el);
+      notify();
+    },
+    unregister(key) {
+      map.delete(key);
+      notify();
+    },
+    get(key) {
+      return map.get(key);
+    },
+    subscribe(l) {
+      listeners.add(l);
+      return () => {
+        listeners.delete(l);
+      };
+    },
+  };
+}