Update board look and feel. Improve packaging time.

Author: Mykolas

Dockerfile

@@ -2,10 +2,10 @@ FROM node:16-alpine as build
 
 WORKDIR /opt/planning-chess
 ADD . .
-RUN npm -v
 RUN npm i
 RUN npm run bootstrap
-RUN npm run ci
+RUN npm run build
+RUN npm i --production
 
 WORKDIR /opt/planning-chess/api
 RUN npm i --production

package-lock.json

@@ -19,6 +19,7 @@
   "author": "Planning Chess",
   "license": "MIT",
   "dependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@planning-chess/shared": "file:../shared",
     "antd": "^5.1.4",
     "bootstrap": "^5.1.3",

services/app/package.json

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const Attribute = ({
-  tile: { attribute, points }
+  tile: { /* attribute, */ points }
 }) => (
   <div className="attribute f-column-center justify-center padding-s">
-    <span className="index weight-700 font-size-l">{attribute}</span>
-    <span className="points weight-500 rubik-font font-size-xxs">{`${points} SP`}</span>
+    <span className="index weight-500 font-size-m">{`${points}`}</span>
+    {/* <span className="points weight-500 rubik-font font-size-xxs">{attribute}</span> */}
   </div>
 );
 

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

@@ -40,7 +40,7 @@ const SquarePopUp = ({ items, showPopover, row, column }) => {
             {`${item.player} - `}
           </span>
           <div className="score margin-l-s padding-y-0 padding-x-s">
-            <span className='rubik-font' data-testid={`pop-up-${item.playerId}-score`}>{`${item.score} SP`}</span>
+            <span className='rubik-font' data-testid={`pop-up-${item.playerId}-score`}>{`${item.score}`}</span>
           </div>
         </div>
       ))}

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

@@ -37,12 +37,12 @@ const ChessBoardPiece = ({ selectFigure, figureName, figureImg, figureStrength,
           alt={figureName} 
           className='figure-img'
         />
-        <p className="figure-title font-size-s weight-500">
-          {figureName}
+        <p className="figure-title font-size-s weight-400">
+          {figureStrength}
         </p>
-        <div className="figure-strength-container border-r-20 padding-y-0 padding-x-xxs f-center">
-          <p className="figure-strength font-size-xxs weight-500">{figureStrength}</p>
-        </div>
+        {/* <div className="figure-strength-container border-r-20 padding-y-0 padding-x-xxs f-center">
+          <p className="figure-strength font-size-xxs weight-500">{figureName}</p>
+        </div> */}
       </button>
     </PlanningChessTooltip>
   );

services/app/src/components/gameFooter/ChessBoardPiece.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ChessBoardPieces from './ChessBoardPieces';
-
+import { Popover } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
 const GameFooterActive = ({ skipCurrentPlayerMove }) => (
   <>
-    <p className='margin-y-sm'>Complexity | Select and place the figure on the board</p>
     <ChessBoardPieces skipCurrentPlayerMove={skipCurrentPlayerMove} />
+    <Popover placement="top" content={"Select and place the figure on the board"}>
+      <p className='margin-y-sm'>Complexity <InfoCircleOutlined /></p>
+    </Popover>
   </>
 );
 

services/app/src/components/gameFooter/GameFooterActive.jsx

@@ -43,11 +43,10 @@
 
 .figure-strength-container {
   width: 2.5em;
-  height: 24px;
-  background-color: var(--primary);
+  height: 12px;
 }
 
 .figure-strength-container p {
-  color: var(--white);
+  color: var(--secondary-text);
   letter-spacing: -0.1px;
 }