ordered captured pieces, moved player info to separate component

client/src/App.js

@@ -21,7 +21,7 @@ function App () {
 
   const theme = createTheme({
     palette: {
-      mode: themeMode,
+      mode: themeMode
       // primary: purple,
       // secondary: red
       // primary: {
@@ -43,17 +43,17 @@ function App () {
         styleOverrides: {
           root: ({ ownerState, theme }) => ({
             ...(ownerState.disabled && {
-              backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[500],
-            }),
+              backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[500]
+            })
           }),
           bar: ({ ownerState, theme }) => ({
             ...(ownerState.disabled && {
-              backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800],
-            }),
-          }),
-        },
-      },
-    },
+              backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800]
+            })
+          })
+        }
+      }
+    }
   })
 
   useEffect(() => {

client/src/baseUrl.js

@@ -1 +1 @@
-export default process.env.NODE_ENV === 'production' ? '' : 'http://192.168.29.37:5000'
+export default process.env.NODE_ENV === 'production' ? '' : 'http://192.168.29.38:5000'

client/src/components/CapturedPieces.js

@@ -1,52 +1,59 @@
 import React, { useEffect, useState } from 'react'
 import { Stack } from '@mui/material'
 
-const PieceIcon = ({ piece_color }) => (
+const PieceIcon = ({ pieceDashColor }) => (
   <img
-    alt={piece_color}
-    src={`./pieces/${piece_color}.png`}
-    height={piece_color[0] === 'p' ? '21px' : '25px'}
-    width={piece_color[0] === 'p' ? '17px' : '21px'}
-		style={{objectFit:'cover'}}
+    alt={pieceDashColor}
+    src={`./pieces/${pieceDashColor}.png`}
+    height={pieceDashColor[0] === 'p' ? '21px' : '25px'}
+    width={pieceDashColor[0] === 'p' ? '13px' : '23px'}
+    style={{ objectFit: 'cover' }}
   />
 )
 
 function CapturedPieces ({ gameHistory, color, align }) {
-  const [capturedIcons, setCapturedIcons] = useState([])
+  const [capturedPieces, setCapturedPieces] = useState([])
 
   useEffect(() => {
     if (gameHistory[gameHistory.length - 1]?.captured !== null) {
-      //if latest move is a capture - just to optimize
-      const temp = []
+      // 👆 if latest move is a capture - just to optimize
+      const pieces = { p: 0, n: 0, b: 0, r: 0, q: 0 }
       for (const move of gameHistory) {
-        if (move.hasOwnProperty('captured') && move.color !== color) {
-          temp.push(`${move.captured}-${color}`)
+        if (move.captured && move.color !== color) {
+          pieces[move.captured]++
         }
       }
-      setCapturedIcons(temp)
+      const final = []
+      pieces.p > 0 && final.push(...new Array(pieces.p).fill(`p-${color}`))
+      pieces.n > 0 && final.push(...new Array(pieces.n).fill(`n-${color}`))
+      pieces.b > 0 && final.push(...new Array(pieces.b).fill(`b-${color}`))
+      pieces.r > 0 && final.push(...new Array(pieces.r).fill(`r-${color}`))
+      pieces.q > 0 && final.push(...new Array(pieces.q).fill(`q-${color}`))
+      console.log(final)
+      setCapturedPieces(final)
     }
   }, [color, gameHistory])
 
   return (
     <>
-      {capturedIcons.length > 0 && (
-        <Stack
-				alignItems={'end'}
-				justifyContent={align || 'start'}
-				width={'fit-content'}
-				maxWidth={'100%'}
-				flexWrap='wrap'
-				px={'5px'}
-				py={'3px'}
-          direction={'row'}
-          bgcolor={'rgba(170,170,170,0.45)'}
-          borderRadius={1}
-        >
-          {capturedIcons.map((i, idx) => (
-            <PieceIcon piece_color={i} key={idx} />
-          ))}
-        </Stack>
-      )}
+      {capturedPieces.length > 0
+        ? (
+          <Stack
+            alignItems='end'
+            justifyContent={align || 'start'}
+            width='fit-content'
+            maxWidth='100%'
+            flexWrap='wrap'
+            px='5px'
+            py='3px'
+            direction='row'
+            bgcolor='rgba(170,170,170,0.45)'
+            borderRadius={1}
+          >
+            {capturedPieces.map((p, idx) => <PieceIcon key={idx} pieceDashColor={p} />)}
+          </Stack>
+          )
+        : <div style={{ height: '27px', width: '1px' }} />}
     </>
   )
 }

client/src/components/GameOverModal.js

@@ -33,8 +33,8 @@ function GameOverModal ({
   const navigate = useNavigate()
   return (
     <Dialog
-    fullWidth
-      maxWidth={'xs'}
+      fullWidth
+      maxWidth='xs'
       open={isOpen}
       onClose={(event, reason) => {
         if (reason && reason !== 'backdropClick') onClose()
@@ -46,11 +46,11 @@ function GameOverModal ({
             {winner === 'draw'
               ? "It's a draw!"
               : winner === 'Nobody'
-              ? 'Uh-oh!'
-              : `${winner} wins!`}
+                ? 'Uh-oh!'
+                : `${winner} wins!`}
           </Box>
           {winner !== 'Nobody' && (
-            <IconButton sx={{p: 0, color: 'grey.400'}} onClick={onClose}>
+            <IconButton sx={{ p: 0, color: 'grey.400' }} onClick={onClose}>
               <CloseIcon />
             </IconButton>
           )}

client/src/components/HomeComponent.js

@@ -74,9 +74,9 @@ function HomeComponent ({
             py={2}
             mx={2}
           >
-            <Typography variant={'h3'} fontWeight={600} color='primary'>
-              NumChess 
-              <SvgIcon className='logo' sx={{marginLeft: 1, filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, .7))'}} fontSize='inherit' >
+            <Typography variant='h3' fontWeight={600} color='primary'>
+              NumChess
+              <SvgIcon className='logo' sx={{ marginLeft: 1, filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, .7))' }} fontSize='inherit'>
                 <Logo />
               </SvgIcon>
             </Typography>
@@ -114,8 +114,7 @@ function HomeComponent ({
               </Button>
               <TextField
                 onKeyDown={e =>
-                  e.key === 'Enter' && roomName.length === 6 && handleSubmit()
-                }
+                  e.key === 'Enter' && roomName.length === 6 && handleSubmit()}
                 color='secondary'
                 variant='outlined'
                 size='small'
@@ -195,7 +194,7 @@ function HomeComponent ({
             borderRadius='1rem 1rem 0 0'
             bgcolor='rgba(155, 155, 155, 0.2)'
           >
-            <Typography fontSize={'85%'} color='text.primary' fontWeight='600'>
+            <Typography fontSize='85%' color='text.primary' fontWeight='600'>
               made by{' '}
               <Link
                 target='_blank'

client/src/components/LocalMultiplayer.js

@@ -14,8 +14,8 @@ import {
 import GameOverModal from './GameOverModal'
 import NavBar from './NavBar'
 
-const checkmateSound = new Audio('/sounds/victoryBell.mp3')
-const pieceMoveSound = new Audio('/sounds/pieceMove.wav')
+const checkmateSound = new window.Audio('/sounds/victoryBell.mp3')
+const pieceMoveSound = new window.Audio('/sounds/pieceMove.wav')
 
 function LocalMultiplayer () {
   const [fen, setFen] = useState('start')
@@ -63,18 +63,17 @@ function LocalMultiplayer () {
             }
           }
         : game.current?.in_check() && {
-            [getPiecePosition({ type: 'k', color: game.current.turn() })]: {
-              backgroundColor: 'rgba(24,255,186,0.5)'
-            }
-          })
+          [getPiecePosition({ type: 'k', color: game.current.turn() })]: {
+            backgroundColor: 'rgba(24,255,186,0.5)'
+          }
+        })
     }
   }, [gameHistory])
 
   useEffect(() => {
     if (!game.current?.in_checkmate()) pieceMoveSound?.play()
     setSquareStyles(highlightLastMove())
   }, [gameHistory, highlightLastMove])
-
 
   const finishGame = useCallback(move => {
     setGameOver(true)
@@ -223,14 +222,13 @@ function LocalMultiplayer () {
         alignItems='center'
       >
         <NavBar />
-        <Stack flexGrow={1} alignItems='center' justifyContent={'center'}>
+        <Stack flexGrow={1} alignItems='center' justifyContent='center'>
           <Chessboard
             undo
             calcWidth={({ screenWidth, screenHeight }) =>
               screenHeight < screenWidth
                 ? 0.75 * screenHeight
-                : 0.95 * screenWidth
-            }
+                : 0.95 * screenWidth}
             position={fen}
             transitionDuration={50}
             draggable={!gameOver}

client/src/components/Matchmaking.js

@@ -33,7 +33,8 @@ function Matchmaking ({ socket }) {
       <NavBar onClick={() => {
         socket.emit('un-matchmake')
         navigate('/')
-      }} />
+      }}
+      />
       <Stack flexGrow={1} px={3} spacing={2} alignItems='center' justifyContent='center'>
         <Typography color='primary' variant='h6' textAlign='center'>
           searching for an opponent