Finish implementation of first tactics test

jackstenglein · Apr 7, 2024 · a937297 · a937297
1 parent 914dbd0
commit a937297
Show file tree

Hide file tree

Showing 9 changed files with 431 additions and 158 deletions.
diff --git a/frontend/src/board/Board.tsx b/frontend/src/board/Board.tsx
@@ -176,7 +176,6 @@ interface BoardProps {
 const promotionPieces = ['q', 'n', 'r', 'b'];
 
 const Board: React.FC<BoardProps> = ({ config, onInitialize, onMove }) => {
-    // const chess = useState(new Chess())[0];
     const { chess } = useChess();
     const [board, setBoard] = useState<BoardApi | null>(null);
     const boardRef = useRef<HTMLDivElement>(null);

diff --git a/frontend/src/board/pgn/PgnBoard.tsx b/frontend/src/board/pgn/PgnBoard.tsx
@@ -46,6 +46,7 @@ export interface PgnBoardApi {
 
 interface PgnBoardProps {
     underboardTabs: UnderboardTab[];
+    initialUnderboardTab?: string;
     pgn?: string;
     fen?: string;
     showPlayerHeaders?: boolean;
@@ -57,6 +58,7 @@ const PgnBoard = forwardRef<PgnBoardApi, PgnBoardProps>(
     (
         {
             underboardTabs,
+            initialUnderboardTab,
             pgn,
             fen,
             showPlayerHeaders = true,
@@ -132,7 +134,6 @@ const PgnBoard = forwardRef<PgnBoardApi, PgnBoardProps>(
             () => {
                 return {
                     getPgn() {
-                        console.log('History: ', chess.history());
                         return chess.renderPgn() || '';
                     },
                 };
@@ -160,6 +161,7 @@ const PgnBoard = forwardRef<PgnBoardApi, PgnBoardProps>(
                         <ResizableContainer
                             {...{
                                 underboardTabs,
+                                initialUnderboardTab,
                                 showPlayerHeaders,
                                 pgn,
                                 fen,

diff --git a/frontend/src/board/pgn/ResizableContainer.tsx b/frontend/src/board/pgn/ResizableContainer.tsx
@@ -18,6 +18,7 @@ export const CONTAINER_ID = 'resize-container';
 
 interface ResizableContainerProps {
     underboardTabs: UnderboardTab[];
+    initialUnderboardTab?: string;
 
     pgn?: string;
     fen?: string;
@@ -30,6 +31,7 @@ interface ResizableContainerProps {
 
 const ResizableContainer: React.FC<ResizableContainerProps> = ({
     underboardTabs,
+    initialUnderboardTab,
     showPlayerHeaders,
     pgn,
     fen,
@@ -92,6 +94,7 @@ const ResizableContainer: React.FC<ResizableContainerProps> = ({
                 <Underboard
                     ref={underboardRef}
                     tabs={underboardTabs}
+                    initialTab={initialUnderboardTab}
                     resizeData={sizes.underboard}
                     onResize={onResize('underboard')}
                 />

diff --git a/frontend/src/board/pgn/boardTools/underboard/Underboard.tsx b/frontend/src/board/pgn/boardTools/underboard/Underboard.tsx
@@ -98,23 +98,26 @@ export interface UnderboardApi {
 
 interface UnderboardProps {
     tabs: UnderboardTab[];
+    initialTab?: string;
     resizeData: ResizableData;
     onResize: (width: number, height: number) => void;
 }
 
 const Underboard = forwardRef<UnderboardApi, UnderboardProps>(
-    ({ tabs, resizeData, onResize }, ref) => {
+    ({ tabs, initialTab, resizeData, onResize }, ref) => {
         const { chess } = useChess();
         const { game, isOwner } = useGame();
         const [focusEditor, setFocusEditor] = useState(false);
         const [focusCommenter, setFocusCommenter] = useState(false);
 
         const [underboard, setUnderboard] = useState(
-            isOwner
-                ? DefaultUnderboardTab.Editor
-                : Boolean(game)
-                  ? DefaultUnderboardTab.Comments
-                  : DefaultUnderboardTab.Explorer,
+            initialTab
+                ? initialTab
+                : isOwner
+                  ? DefaultUnderboardTab.Editor
+                  : Boolean(game)
+                    ? DefaultUnderboardTab.Comments
+                    : DefaultUnderboardTab.Explorer,
         );
         const light = useLightMode();
 
@@ -151,6 +154,10 @@ const Underboard = forwardRef<UnderboardApi, UnderboardProps>(
             return null;
         }
 
+        const customTab = tabs.find(
+            (t) => typeof t !== 'string' && t.name === underboard,
+        ) as CustomUnderboardTab;
+
         return (
             <Resizable
                 width={resizeData.width}
@@ -241,6 +248,8 @@ const Underboard = forwardRef<UnderboardApi, UnderboardProps>(
                                 setFocusEditor={setFocusCommenter}
                             />
                         )}
+
+                        {customTab && customTab.element}
                     </Stack>
                 </Card>
             </Resizable>

diff --git a/frontend/src/board/pgn/pgnText/MoveButton.tsx b/frontend/src/board/pgn/pgnText/MoveButton.tsx
@@ -17,7 +17,7 @@ import {
 } from '@mui/material';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 
-import { Cancel, CheckCircle, RemoveCircle } from '@mui/icons-material';
+import { RemoveCircle } from '@mui/icons-material';
 import { useLocalStorage } from 'usehooks-ts';
 import { useGame } from '../../../games/view/GamePage';
 import { getMoveDescription } from '../../../tactics/tactics';
@@ -139,42 +139,41 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
                         </Tooltip>
                     )}
 
-                    {(score !== undefined || found) && (
+                    {score > 0 && (
                         <Tooltip title={getMoveDescription(found, score)}>
-                            {score ? (
-                                <Box
+                            <Box
+                                sx={{
+                                    backgroundColor: found
+                                        ? 'success.main'
+                                        : 'error.main',
+                                    width: '20px',
+                                    height: '20px',
+                                    borderRadius: '10px',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    marginRight: '2px',
+                                    ...(inline
+                                        ? {
+                                              ml: 0.5,
+                                          }
+                                        : undefined),
+                                }}
+                            >
+                                <Typography
+                                    variant={inline ? 'body2' : 'caption'}
+                                    fontWeight='600'
                                     sx={{
-                                        backgroundColor: found
-                                            ? 'success.main'
-                                            : 'error.main',
-                                        width: '20px',
-                                        height: '20px',
-                                        borderRadius: '10px',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        marginRight: '2px',
+                                        pt: '2px',
+                                        color: found
+                                            ? 'success.contrastText'
+                                            : 'background.paper',
                                     }}
                                 >
-                                    <Typography
-                                        variant='body2'
-                                        fontWeight='600'
-                                        sx={{
-                                            pt: '2px',
-                                            color: found
-                                                ? 'success.contrastText'
-                                                : 'background.paper',
-                                        }}
-                                    >
-                                        {found ? '+' : '-'}
-                                        {score}
-                                    </Typography>
-                                </Box>
-                            ) : found ? (
-                                <CheckCircle color='success' />
-                            ) : (
-                                <Cancel color='error' />
-                            )}
+                                    {found ? '+' : '-'}
+                                    {score}
+                                </Typography>
+                            </Box>
                         </Tooltip>
                     )}
                 </Stack>