Battleship: Updates designs (#319)

Co-authored-by: Yauheni <[email protected]>

frontend/apps/battleship/src/app.scss

@@ -21,5 +21,5 @@ main {
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding: 100px 16px;
+  padding: 80px 0 0;
 }

frontend/apps/battleship/src/app.tsx

@@ -7,6 +7,7 @@ import { Header } from '@/components/layout';
 import { withProviders } from '@/app/hocs';
 
 import { useAccountAvailableBalanceSync, useWalletSync } from '@/features/wallet/hooks';
+import { Container, Footer } from '@dapps-frontend/ui';
 
 function Component() {
   const { isApiReady } = useApi();
@@ -23,6 +24,9 @@ function Component() {
         <>
           <Header />
           <Routing />
+          <Container>
+            <Footer vara isAlwaysMobile />
+          </Container>
         </>
       ) : (
         <ApiLoader />

frontend/apps/battleship/src/components/layout/header/account-info/account-info.module.scss

@@ -25,3 +25,13 @@
   align-items: center;
   gap: 4px;
 }
+
+.connectWallet {
+  width: 169px;
+  height: 44px;
+  padding: 17px 24px 17px 24px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 26px;
+  letter-spacing: 0.03em;
+}

frontend/apps/battleship/src/components/layout/header/account-info/account-info.tsx

@@ -11,10 +11,11 @@ import { useAccountAvailableBalance } from '@/features/wallet/hooks';
 
 type AccountInfoProps = BaseComponentProps & {
   openWallet: () => void;
+  openConnectWallet: () => void;
   isOpen: boolean;
 };
 
-export function AccountInfo({ className, openWallet, isOpen }: AccountInfoProps) {
+export function AccountInfo({ className, openWallet, openConnectWallet, isOpen }: AccountInfoProps) {
   const { isApiReady } = useApi();
   const { account } = useAccount();
   const { availableBalance: balance } = useAccountAvailableBalance();
@@ -40,6 +41,11 @@ export function AccountInfo({ className, openWallet, isOpen }: AccountInfoProps)
             </Button>
           </>
         )}
+        {!account && (
+          <Button size="small" className={styles.connectWallet} onClick={openConnectWallet}>
+            Connect wallet
+          </Button>
+        )}
       </div>
     </>
   );

frontend/apps/battleship/src/components/layout/header/header.module.scss

@@ -1,5 +1,4 @@
 .header {
-  background: #ffffff;
   position: absolute;
   top: 0;
   left: 0;
@@ -10,6 +9,12 @@
   flex-direction: column;
   gap: 30px;
   z-index: 9;
+
+  &Dark {
+    background: rgb(0,0,0);
+    background: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(0,51,39,1) 50%, rgba(0,0,0,1) 90%); 
+    color: #ffffff;
+  }
 }
 
 .header__container {
@@ -45,3 +50,12 @@
 .noScroll {
   overflow: hidden;
 }
+
+.accountInfo {
+  span {
+    color: #ffffff;
+  }
+  svg:last-child path {
+    stroke: #ffffff; 
+  }
+}

frontend/apps/battleship/src/components/layout/header/header.tsx

@@ -6,6 +6,8 @@ import { AccountInfo } from './account-info';
 import ModalBackground from './ModalBackground';
 import { Logo } from './logo';
 import styles from './header.module.scss';
+import { useIsLocationGamePage } from '@/features/game/hooks';
+import clsx from 'clsx';
 
 export function Header() {
   const [isOpenChange, setIsOpenChange] = useState(false);
@@ -16,12 +18,19 @@ export function Header() {
   const openConnectWallet = () => setIsOpenConnectWallet(true);
   const closConnectWallet = () => setIsOpenConnectWallet(false);
 
+  const isGamePage = useIsLocationGamePage();
+
   return (
     <>
-      <header className={styles.header}>
+      <header className={clsx(styles.header, isGamePage && !isOpenChange && styles.headerDark)}>
         <Container className={styles.header__container}>
           <Logo className={styles.header__logo} />
-          <AccountInfo openWallet={openAndCloseChange} isOpen={isOpenChange} />
+          <AccountInfo
+            openWallet={openAndCloseChange}
+            openConnectWallet={openConnectWallet}
+            isOpen={isOpenChange}
+            className={clsx(isGamePage && !isOpenChange && styles.accountInfo)}
+          />
         </Container>
         {isOpenChange && (
           <Container>

frontend/apps/battleship/src/features/game/components/game-end-modal/GameEndModal.module.scss

@@ -35,4 +35,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
+
+  & button {
+    width: 100%;
+    padding: 16px 10px;
+  }
 }

frontend/apps/battleship/src/features/game/components/game-process/GameProcess.module.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+  padding: 20px 0;
 }
 
 .header {
@@ -15,6 +16,7 @@
   display: flex;
   justify-content: space-between;
   gap: 24px;
+  padding: 0 16px;
 }
 
 .gameInfo {
@@ -41,9 +43,18 @@
 .enemyShips {
   display: flex;
   justify-content: space-between;
-
+  width: 100%;
+  box-shadow: 0px 1px 0px 0px #00000040 inset;
+  background: #64FFDB;
+  padding: 9px 16px;
+  z-index: 1;
+
   .text {
-    color: #a6a6a6;
+    color: #000000;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 14px;
+    letter-spacing: 0.1em;
   }
 
   .listShips {
@@ -56,11 +67,11 @@
     }
 
     .block {
-      background: rgba(166, 166, 166, 0.13);
+      background: #00000021;
       border-radius: 1px;
       height: 16px;
       width: 16px;
-      border: 1px solid #a6a6a6;
+      border: 1px solid #000000;
     }
   }
 }

frontend/apps/battleship/src/features/game/components/game-process/game-process.tsx

@@ -89,6 +89,9 @@ export default function GameProcess() {
           onSuccess: () => {
             setPending(false);
           },
+          onError: () => {
+            setDisabledCell(false);
+          },
         }),
       );
     }
@@ -131,7 +134,7 @@ export default function GameProcess() {
       </div>
       <div className={styles.enemyShips}>
         <Text size="sm" weight="normal" className={styles.text}>
-          Enemy Ships: {totalShips}
+          Enemy Ships: {totalShips} / 4
         </Text>
 
         <div className={styles.listShips}>
@@ -158,7 +161,7 @@ export default function GameProcess() {
 
       <div>
         <MapEnemy
-          sizeBlock={68}
+          sizeBlock={86}
           onClickCell={onClickCell}
           shipStatusArray={enemiesShips}
           isDisabledCell={isDisabledCell || gasless.isLoading}

frontend/apps/battleship/src/features/game/components/map/map.module.scss

@@ -7,6 +7,13 @@
   justify-content: center;
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .row {
   display: flex;
   justify-content: center;
@@ -18,12 +25,23 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
   background: #ffffff;
-  border: 1px solid #cfcfcf;
+  border: 0.48px solid #CFCFCF;
   cursor: pointer;
+  z-index: 1;
 
-  opacity: 0.5;
+  &Enemy {
+    position: relative;
+    background: transparent;
+    border: 1px solid #00FFC4;
+  }
+}
+
+.cellFire {
+  width: 68px;
+  height: 68px;
+  z-index: 1;
+  transform: translateY(-20px);
 }
 
 .buttons {
@@ -38,14 +56,33 @@
   }
 }
 
+.sea {
+  position: absolute;
+  width: 100%;
+}
+
 .shipBlock {
-  background: url('../../assets/images/ship.svg'), rgba(0, 255, 196, 0.7);
+  background: url('../../assets/images/ship.svg'), #00FFC4;
 }
 
 .hitShip {
-  background: rgba(217, 217, 217);
+  background: transparent;
+  border: 1px solid #00000033
+}
+
+.hitEmpty {
+  width: 4px;
+  height: 4px;
+  border-radius: 50px;
+  background: #00000066;
+}
+
+.hitCell {
+  background: transparent;
+  border: 1px solid #00000033;
 }
 
 .deadShip {
-  background: rgba(255, 222, 222);
+  background: transparent;
+  border: 1px solid #00000033
 }

frontend/apps/battleship/src/features/game/components/map/map.tsx

@@ -37,7 +37,8 @@ export default function Map({ sizeBlock = 64, shipStatusArray }: Props) {
 
     return (
       <div key={`block-${row}-${col}`} className={cellClassName} style={cellStyle}>
-        {(isHitShips || isHit || isDeadShips) && <CrossIcon />}
+        {isHit && !isHitShips && !isDeadShips && <div className={styles.hitEmpty} />}
+        {(isHitShips || isDeadShips) && <CrossIcon />}
       </div>
     );
   };