Merge pull request #3 from GabrielCTroia/preview/fix-flag-insufficient

Preview/fix flag insufficient
movesthatmatter · Dec 20, 2024 · d5a4dfd · d5a4dfd
2 parents a817775 + 8a6aa03
commit d5a4dfd
Show file tree

Hide file tree

Showing 55 changed files with 873 additions and 564 deletions.
diff --git a/apps/chessroulette-web/components/BoardEditor/BoardEditor.tsx b/apps/chessroulette-web/components/BoardEditor/BoardEditor.tsx
@@ -7,7 +7,6 @@ import {
   isBlackColor,
   objectKeys,
   pieceSanToFenBoardPieceSymbol,
-  toShortColor,
 } from '@xmatter/util-kit';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -143,7 +142,7 @@ export const BoardEditor = ({
   }>();
 
   const extraPiecesLayout = useMemo(() => {
-    if (toShortColor(props.boardOrientation || 'w') === 'w') {
+    if (props.boardOrientation || 'w' === 'w') {
       return {
         top: blackPieces.map(renderPiece),
         bottom: whitePieces.map(renderPiece),

diff --git a/apps/chessroulette-web/components/Boards/Playboard/Playboard.stories.tsx b/apps/chessroulette-web/components/Boards/Playboard/Playboard.stories.tsx
@@ -6,7 +6,6 @@ import {
   ShortChessMove,
   getNewChessGame,
   swapColor,
-  toShortColor,
 } from '@xmatter/util-kit';
 import { useEffect, useState } from 'react';
 import { Playboard } from './Playboard';
@@ -61,7 +60,7 @@ export const Main: Story = {
             setState((prev) => ({
               ...prev,
               fen: nextFen,
-              turn: toShortColor(swapColor(state.turn)),
+              turn: swapColor(state.turn),
             }));
           }}
         />
@@ -174,7 +173,7 @@ export const CheckPromotion: Story = {
             setState((prev) => ({
               ...prev,
               fen: nextFen,
-              turn: toShortColor(swapColor(state.turn)),
+              turn: swapColor(state.turn),
             }));
           }}
         />

diff --git a/apps/chessroulette-web/components/Boards/Playboard/Playboard.tsx b/apps/chessroulette-web/components/Boards/Playboard/Playboard.tsx
@@ -3,7 +3,6 @@ import {
   ChessFENBoard,
   DistributiveOmit,
   ShortChessMove,
-  toShortColor,
 } from '@xmatter/util-kit';
 import {
   ChessboardContainer,
@@ -34,7 +33,7 @@ export type PlayboardProps = DistributiveOmit<
 export const Playboard = ({
   fen = ChessFENBoard.STARTING_FEN,
   playingColor,
-  boardOrientation = toShortColor(playingColor),
+  boardOrientation = playingColor,
   onMove,
   canPlay = false,
   turn,
@@ -53,15 +52,15 @@ export const Playboard = ({
         return false;
       }
 
-      return validateMove(move, fen, toShortColor(playingColor)).valid;
+      return validateMove(move, fen, playingColor).valid;
     },
     [canPlay, turn, fen, playingColor]
   );
 
   return (
     <ChessboardContainer
       strict
-      turn={toShortColor(turn)}
+      turn={turn}
       fen={fen}
       boardOrientation={boardOrientation}
       boardTheme={boardTheme}

diff --git a/apps/chessroulette-web/components/Chessboard/ChessboardContainer/ChessboardContainer.tsx b/apps/chessroulette-web/components/Chessboard/ChessboardContainer/ChessboardContainer.tsx
@@ -3,8 +3,7 @@ import {
   ChessFEN,
   PieceSan,
   ShortChessMove,
-  ShortChessColor,
-  toLongColor,
+  ChessColor,
 } from '@xmatter/util-kit';
 import { Square } from 'chess.js';
 import { useArrowAndCircleColor } from '../hooks/useArrowAndCircleColor';
@@ -37,7 +36,7 @@ export type ChessboardContainerProps = Omit<
   circlesMap?: CirclesMap;
   arrowColor?: string;
   lastMove?: ShortChessMove;
-  boardOrientation?: ShortChessColor;
+  boardOrientation?: ChessColor;
   containerClassName?: string;
 
   onPieceDrop?: (from: Square, to: Square, piece: PieceSan) => void;
@@ -62,11 +61,11 @@ export type ChessboardContainerProps = Omit<
     | {
         // When this is true the player can only touch the pieces on her side
         strict: true;
-        turn: ShortChessColor;
+        turn: ChessColor;
       }
     | {
         strict?: false;
-        turn?: ShortChessColor;
+        turn?: ChessColor;
       }
   );
 
@@ -155,7 +154,7 @@ export const ChessboardContainer: React.FC<ChessboardContainerProps> = ({
       fen={fen}
       sizePx={sizePx}
       boardTheme={boardTheme}
-      boardOrientation={toLongColor(boardOrientation)}
+      boardOrientation={boardOrientation}
       // Moves
       onPieceDragBegin={moveActions.onPieceDrag}
       onSquareClick={moveActions.onSquareClick}

diff --git a/apps/chessroulette-web/components/Chessboard/ChessboardContainer/ChessboardDisplay.tsx b/apps/chessroulette-web/components/Chessboard/ChessboardContainer/ChessboardDisplay.tsx
@@ -1,14 +1,19 @@
 import {
+  ChessColor,
   ChessFEN,
   ShortChessMove,
   promotionalPieceSanToFenBoardPromotionalPieceSymbol,
+  toLongChessColor,
 } from '@xmatter/util-kit';
 import { ReactChessBoardProps } from './types';
 import { BoardTheme } from '@app/hooks/useTheme/defaultTheme';
 import { Chessboard as ReactChessboard } from 'react-chessboard';
 import { PromotionDialogLayer } from './PromotionDialogLayer';
 
-export type ChessboardDisplayProps = Omit<ReactChessBoardProps, 'fen'> & {
+export type ChessboardDisplayProps = Omit<
+  ReactChessBoardProps,
+  'fen' | 'boardOrientation'
+> & {
   fen: ChessFEN;
   sizePx: number;
   boardTheme: BoardTheme;
@@ -20,6 +25,7 @@ export type ChessboardDisplayProps = Omit<ReactChessBoardProps, 'fen'> & {
 
   containerClassName?: string;
   overlayComponent?: React.ReactNode;
+  boardOrientation?: ChessColor;
 } & (
     | {
         rightSideComponent: React.ReactNode;
@@ -41,7 +47,7 @@ export const ChessboardDisplay = ({
   containerClassName,
   overlayComponent,
   fen,
-  boardOrientation = 'white',
+  boardOrientation = 'w',
   promoMove,
   boardTheme,
   onCancelPromoMove,
@@ -69,7 +75,7 @@ export const ChessboardDisplay = ({
         position={fen}
         boardWidth={sizePx}
         showBoardNotation
-        boardOrientation={boardOrientation}
+        boardOrientation={toLongChessColor(boardOrientation)}
         snapToCursor={false}
         arePiecesDraggable
         {...boardProps}

diff --git a/apps/chessroulette-web/components/Chessboard/ChessboardContainer/PromotionDialogLayer.tsx b/apps/chessroulette-web/components/Chessboard/ChessboardContainer/PromotionDialogLayer.tsx
@@ -7,7 +7,6 @@ import {
   isBlackColor,
   objectKeys,
   squareToBoardCoards,
-  toShortColor,
 } from '@xmatter/util-kit';
 import { Square } from 'chess.js';
 import React, { useMemo } from 'react';
@@ -51,7 +50,7 @@ export const PromotionDialogLayer: React.FC<PromotionDialogLayerProps> = ({
   const promotingColor: ShortChessColor =
     Number(promotionSquare[1]) === 1 ? 'b' : 'w';
 
-  const isFlipped = promotingColor !== toShortColor(boardOrientation);
+  const isFlipped = promotingColor !== boardOrientation;
 
   const dialogHorizontalPosition = useMemo(() => {
     const rawCoords = squareToBoardCoards(promotionSquare);
@@ -74,7 +73,7 @@ export const PromotionDialogLayer: React.FC<PromotionDialogLayerProps> = ({
             asset: promotablePiecesMapWithDisplayOrder[san],
           } as const)
       )
-      .filter((p) => toShortColor(p.color) === promotingColor)
+      .filter((p) => p.color === promotingColor)
       .sort(
         (a, b) =>
           promotablePiecesMapWithDisplayOrder[a.san] -

diff --git a/apps/chessroulette-web/modules/Game/GameProvider/GameContext.ts b/apps/chessroulette-web/modules/Game/GameProvider/GameContext.ts
@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 import {
+  ChessColor,
   FBHIndex,
   FreeBoardHistory,
-  LongChessColor,
   noop,
 } from '@xmatter/util-kit';
 import { UserId, UsersMap } from '@app/modules/User';
@@ -12,7 +12,7 @@ import { initialPlayState } from '@app/modules/Match/Play/store';
 export type GameContextProps = {
   displayState: GameDisplayState;
   committedState: {
-    turn: LongChessColor;
+    turn: ChessColor;
     game: Game;
   };
   actions: {
@@ -28,10 +28,10 @@ export const initialGameContextState: GameContextProps = {
     fen: '',
     history: [],
     focusedIndex: FreeBoardHistory.getStartingIndex(),
-    turn: 'white',
+    turn: 'w',
   },
   committedState: {
-    turn: 'white',
+    turn: 'w',
     game: initialPlayState,
   },
   actions: {

diff --git a/apps/chessroulette-web/modules/Game/lib/util.ts b/apps/chessroulette-web/modules/Game/lib/util.ts
@@ -1,13 +1,12 @@
 import {
+  ChessColor,
   ChessFEN,
   ChessFENBoard,
   ChessPGN,
   FBHHistory,
   FBHIndex,
   FreeBoardHistory,
-  LongChessColor,
   pgnToFen,
-  toLongColor,
 } from '@xmatter/util-kit';
 import { GameDisplayState } from '../types';
 
@@ -56,8 +55,8 @@ export const getGameDisplayState = ({
   };
 };
 
-export const getTurnFromPgn = (pgn: ChessPGN): LongChessColor =>
+export const getTurnFromPgn = (pgn: ChessPGN): ChessColor =>
   getTurnFromFen(pgnToFen(pgn));
 
-export const getTurnFromFen = (fen: ChessFEN): LongChessColor =>
-  toLongColor(new ChessFENBoard(fen).getFenState().turn);
+export const getTurnFromFen = (fen: ChessFEN): ChessColor =>
+  new ChessFENBoard(fen).getFenState().turn;
diff --git a/apps/chessroulette-web/modules/Game/operations.ts b/apps/chessroulette-web/modules/Game/operations.ts
@@ -18,8 +18,8 @@ export const createPendingGame = ({
     timeClass,
     timeLeft: {
       lastUpdatedAt: null,
-      white: timeLeft,
-      black: timeLeft,
+      w: timeLeft,
+      b: timeLeft,
     },
     players,
   };

diff --git a/apps/chessroulette-web/modules/Game/state.ts b/apps/chessroulette-web/modules/Game/state.ts
@@ -7,10 +7,10 @@ export const PENDING_UNTIMED_GAME: PendingGame = {
   pgn: '',
   timeLeft: {
     lastUpdatedAt: null,
-    white: 0,
-    black: 0,
+    w: 0,
+    b: 0,
   },
-  lastMoveBy: 'black',
+  lastMoveBy: 'b',
   lastMoveAt: null,
   timeClass: 'untimed',
   gameOverReason: null,
@@ -19,7 +19,7 @@ export const PENDING_UNTIMED_GAME: PendingGame = {
   offers: [],
 
   players: {
-    white: 'N/A',
-    black: 'N/A',
+    w: 'N/A',
+    b: 'N/A',
   },
 };