PLAN-195 Change Board Squares Design (#245)

* updated square design on hover and figure placement

* removed display of board square, column letter, and row number after the game is over

* removed popover functionality

* isHovered controls the appearance of showPopover

* removes unnecessary curly brackets and changes the if statement for game finish status

* PLAN-195 added todo comment

---------

Co-authored-by: Justas Bartka <>
Co-authored-by: Andrius Iljinych <[email protected]>

Author: jbartka

services/app/src/components/chessBoard/Square.jsx

@@ -7,6 +7,7 @@ import { useChessBoardContext } from '../../contexts/ChessBoardContext';
 import UserAvatar from '../avatar/UserAvatar';
 import { squareItemPropType } from '../../prop-types/chessboard';
 import SquarePopUp from './SquarePopUp';
+import { GameState } from '../../constants/gameConstants'
 
 const figures = PIECES.reduce((prev, curr) => ({ ...prev, [curr.name]: curr}), {});
 
@@ -16,8 +17,8 @@ const Square = ({
   column,
   filled
 }) => {
-  const { board, currentPlayerId } = useChessBoardContext();
-  const [showPopover, setShowPopover] = useState(false);
+  const { board, currentPlayerId, gameState } = useChessBoardContext();
+  const [isHovered, setIsHovered] = useState(false);
 
   const turnToShow = useMemo(() => {
     const myMove = items.find(figure => figure.playerId === currentPlayerId);
@@ -32,22 +33,17 @@ const Square = ({
     ? 3
     : 2;
 
-  const updatePopover = bool => {
-    if (items.length && bool || !bool) {
-      setShowPopover(bool);
-    }
-  }
-
   return (
     <div
       data-testid={`chess-tile-${row}-${column}`}
       className={classNames("square", {
         'is-empty-tile': !items.length && row !== board.length - 1 && column !== 0
       })}
-      onMouseEnter={() => updatePopover(true)}
-      onMouseLeave={() => updatePopover(false)}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      {!!items.length && (
+      {/* TODO: make it more prettier when fixing PLAN-205 */}
+      {(isHovered && (!items.length && row !== board.length - 1 && column !== 0) && (gameState !== GameState.GAME_FINISHED)) && (
         <span
           className={classNames('number number-row', {
             'number-filled': filled
@@ -97,8 +93,9 @@ const Square = ({
           </div>
         )}
       </div>
-
-      {!!items.length && (
+      
+      {/* TODO: make it more prettier when fixing PLAN-205 */}
+      {(isHovered && (!items.length && row !== board.length - 1 && column !== 0) && (gameState !== GameState.GAME_FINISHED))&& (
         <span 
           className={classNames('number number-column', {
             'number-filled': filled,
@@ -107,7 +104,7 @@ const Square = ({
           {board[board.length - 1][column].attribute}
         </span>
       )}
-      {!!items.length && <SquarePopUp items={items} showPopover={showPopover} row={row} column={column} />}
+      {!!items.length && <SquarePopUp items={items} showPopover={isHovered} row={row} column={column} />}
     </div>
   );
 };