@dxos/react-ui-gameboard 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/Gameboard/Gameboard.tsx

@@ -8,13 +8,13 @@ import React, { type PropsWithChildren, forwardRef, useCallback, useEffect, useS
 
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { Piece, type PieceProps } from './Piece';
 import { Square, type SquareProps } from './Square';
 import { type GameboardModel, type Move, type PieceRecord, isLocation, isPiece } from './types';
 
-export type GameboardContextValue<M extends GameboardModel> = {
+export type GameboardContextValue<M extends GameboardModel<any>> = {
   model: M;
   dragging?: boolean; // TODO(burdon): Change to PieceRecord.
   promoting?: PieceRecord;
@@ -23,7 +23,7 @@ export type GameboardContextValue<M extends GameboardModel> = {
 
 const [GameboardContextProvider, useRadixGameboardContext] = createContext<GameboardContextValue<any>>('Gameboard');
 
-const useGameboardContext = <M extends GameboardModel>(consumerName: string): GameboardContextValue<M> => {
+const useGameboardContext = <M extends GameboardModel<any>>(consumerName: string): GameboardContextValue<M> => {
   return useRadixGameboardContext(consumerName);
 };
 
@@ -31,7 +31,7 @@ const useGameboardContext = <M extends GameboardModel>(consumerName: string): Ga
 // Root
 //
 
-type GameboardRootProps<M extends GameboardModel> = PropsWithChildren<{
+type GameboardRootProps<M extends GameboardModel<any>> = PropsWithChildren<{
   model?: M;
   onDrop?: (move: Move) => boolean;
 }>;
@@ -39,11 +39,11 @@ type GameboardRootProps<M extends GameboardModel> = PropsWithChildren<{
 /**
  * Generic board container.
  */
-const GameboardRoot = <M extends GameboardModel>({ children, model, onDrop }: GameboardRootProps<M>) => {
+const GameboardRoot = <M extends GameboardModel<any>>({ children, model, onDrop }: GameboardRootProps<M>) => {
   const [dragging, setDragging] = useState(false);
   const [promoting, setPromoting] = useState<PieceRecord | undefined>();
 
-  const handlePromotion = useCallback<GameboardContextValue<M>['onPromotion']>((move) => {
+  const handlePromotion = useCallback<GameboardContextValue<GameboardModel<any>>['onPromotion']>((move) => {
     log('onPromotion', { move });
     setPromoting(undefined);
     onDrop?.(move);
@@ -106,11 +106,10 @@ const GameboardContent = forwardRef<HTMLDivElement, GameboardContentProps>(
   ({ children, classNames, grow, contain }, forwardedRef) => {
     return (
       <div
-        role='none'
-        className={mx(grow && 'grid is-full bs-full size-container place-content-center', classNames)}
+        className={mx(grow && 'dx-size-container dx-expander grid place-content-center', classNames)}
         ref={forwardedRef}
       >
-        {contain ? <div className='is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]'>{children}</div> : children}
+        {contain ? <div className='w-[min(100cqw,100cqh)] h-[min(100cqw,100cqh)]'>{children}</div> : children}
       </div>
     );
   },

package/src/components/Gameboard/Piece.tsx

@@ -10,8 +10,8 @@ import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { type ThemedClassName, useDynamicRef, useTrackProps } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { type ThemedClassName, useDynamicRef } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { useGameboardContext } from './Gameboard';
 import { type Location, type PieceRecord, type Player, isEqualLocation, isLocation } from './types';
@@ -26,9 +26,10 @@ export type PieceProps = ThemedClassName<{
   onClick?: () => void;
 }>;
 
-export const Piece = memo(({ classNames, Component, piece, orientation, bounds, label, onClick }: PieceProps) => {
-  useTrackProps({ classNames, Component, piece, orientation, bounds, label }, Piece.displayName, false);
-  const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName!);
+const PIECE_NAME = 'Piece';
+
+export const Piece = memo(({ classNames, Component, piece, bounds, label, onClick }: PieceProps) => {
+  const { model, dragging: isDragging, promoting } = useGameboardContext(PIECE_NAME);
   const promotingRef = useDynamicRef(promoting);
   const [dragging, setDragging] = useState(false);
   const [preview, setPreview] = useState<HTMLElement>();
@@ -38,6 +39,10 @@ export const Piece = memo(({ classNames, Component, piece, orientation, bounds,
 
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
+    if (!model) {
+      return;
+    }
+
     const el = ref.current;
     invariant(el);
 
@@ -60,7 +65,7 @@ export const Piece = memo(({ classNames, Component, piece, orientation, bounds,
           nativeSetDragImage,
         });
       },
-      canDrag: () => !promotingRef.current && model?.turn === piece.side,
+      canDrag: () => !promotingRef.current && !model.readonly && model.turn === piece.side,
       onDragStart: () => setDragging(true),
       onDrop: ({ location: { current } }) => {
         // TODO(burdon): Create wrapper function to catch errors.
@@ -87,7 +92,7 @@ export const Piece = memo(({ classNames, Component, piece, orientation, bounds,
 
       // Check if piece moved.
       if (!current.location || !isEqualLocation(current.location, piece.location)) {
-        ref.current.style.transition = 'top 400ms ease-out, left 400ms ease-out';
+        ref.current.style.transition = 'top 250ms ease-out, left 250ms ease-out';
         ref.current.style.top = bounds.top + 'px';
         ref.current.style.left = bounds.left + 'px';
         setCurrent({ location: piece.location, bounds });
@@ -131,4 +136,4 @@ export const Piece = memo(({ classNames, Component, piece, orientation, bounds,
   );
 });
 
-Piece.displayName = 'Piece';
+Piece.displayName = PIECE_NAME;

package/src/components/Gameboard/Square.tsx

@@ -8,7 +8,7 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useGameboardContext } from './Gameboard';
 import { type Location, isPiece } from './types';
@@ -22,10 +22,12 @@ export type SquareProps = ThemedClassName<{
   label?: string;
 }>;
 
+const SQUARE_NAME = 'Square';
+
 export const Square = memo(({ location, bounds, label, classNames }: SquareProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<HoveredState>('idle');
-  const { model } = useGameboardContext(Square.displayName!);
+  const { model } = useGameboardContext(SQUARE_NAME);
 
   useEffect(() => {
     const el = ref.current;
@@ -71,4 +73,4 @@ export const Square = memo(({ location, bounds, label, classNames }: SquareProps
   );
 });
 
-Square.displayName = 'Square';
+Square.displayName = SQUARE_NAME;

package/src/components/Gameboard/types.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ReadonlySignal } from '@preact/signals-core';
+import { type Atom } from '@effect-atom/atom-react';
 
 // TODO(burdon): Don't make this assumption.
 export type Player = 'black' | 'white';
@@ -52,9 +52,9 @@ export const isEqualLocation = (l1: Location, l2: Location): boolean => l1[0] ==
  * Generic board model.
  */
 export interface GameboardModel<T extends PieceType = PieceType> {
+  readonly: boolean;
   turn: Player;
-  /** @reactive */
-  pieces: ReadonlySignal<PieceMap<T>>;
+  pieces: Atom.Atom<PieceMap<T>>;
   isValidMove: (move: Move) => boolean;
   canPromote?: (move: Move) => boolean;
 }