gear-foundation · vraja-nayaka · Nov 4, 2024 · Nov 4, 2024
diff --git a/.github/workflows/Release-warriors-battle.yml b/.github/workflows/Release-warriors-battle.yml
@@ -70,8 +70,8 @@ jobs:
           push: true
           tags: ${{ needs.prepair.outputs.image_name }}
           build-args: |
-            VITE_DNS_API_URL=${{ secrets.VITE_DNS_API_URL }}
-            VITE_NODE_ADDRESS=${{ secrets.VITE_NODE_ADDRESS }}
+            VITE_DNS_API_URL=${{ secrets.VITE_DNS_API_URL_TESTNET }}
+            VITE_NODE_ADDRESS=${{ secrets.VITE_NODE_ADDRESS_TESTNET }}
             VITE_DNS_NAME=${{ secrets.VITE_DNS_NAME_BATTLE_NEW }}
             VITE_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }}
             VITE_GASLESS_BACKEND_ADDRESS=${{ secrets.VITE_GASLESS_BACKEND_ADDRESS }}

diff --git a/frontend/apps/web3-warriors-battle/src/app/utils/sails/queries/use-battle-query.ts b/frontend/apps/web3-warriors-battle/src/app/utils/sails/queries/use-battle-query.ts
@@ -1,14 +1,14 @@
 import { useProgram } from '@/app/utils';
 import { useProgramQuery } from '@gear-js/react-hooks';
 
-export const useBattleQuery = (gameAddress: string) => {
+export const useBattleQuery = (gameAddress: string | null) => {
   const program = useProgram();
 
   const { data, refetch, isFetching, error } = useProgramQuery({
     program,
     serviceName: 'battle',
     functionName: 'getBattle',
-    args: [gameAddress],
+    args: [gameAddress || ''],
     query: { enabled: false },
   });
 

diff --git a/frontend/apps/web3-warriors-battle/src/components/ui/modal/Modal.module.scss b/frontend/apps/web3-warriors-battle/src/components/ui/modal/Modal.module.scss
@@ -5,11 +5,17 @@
   width: 100%;
   padding: 0;
   background: none;
+}
 
-  &::backdrop {
-    background-color: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
-  }
+.backdrop {
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(10px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
 }
 
 .wrapper {

diff --git a/frontend/apps/web3-warriors-battle/src/components/ui/modal/Modal.tsx b/frontend/apps/web3-warriors-battle/src/components/ui/modal/Modal.tsx
@@ -63,34 +63,37 @@ export function Modal({
   };
 
   return (
-    <motion.dialog
-      initial="enter"
-      animate="center"
-      exit="exit"
-      variants={variantsOverlay}
-      ref={ref}
-      onClick={handleClick}
-      className={variants({ className: clsx(styles.modal, modalClassName), size })}>
-      <motion.div
+    // We don't use ::backdrop for displaing alerts
+    <div className={styles.backdrop}>
+      <motion.dialog
         initial="enter"
         animate="center"
         exit="exit"
-        variants={variantsPanel}
-        className={clsx(styles.wrapper, className)}>
-        <div className={styles.header}>
-          <div className={styles.titleContainer}>
-            <h2 className={styles.title}>{title}</h2>
-            {description && <p className={styles.description}>{description}</p>}
+        variants={variantsOverlay}
+        ref={ref}
+        onClick={handleClick}
+        className={variants({ className: clsx(styles.modal, modalClassName), size })}>
+        <motion.div
+          initial="enter"
+          animate="center"
+          exit="exit"
+          variants={variantsPanel}
+          className={clsx(styles.wrapper, className)}>
+          <div className={styles.header}>
+            <div className={styles.titleContainer}>
+              <h2 className={styles.title}>{title}</h2>
+              {description && <p className={styles.description}>{description}</p>}
+            </div>
+            <Button variant="text" onClick={onClose} className={styles['modal-close']}>
+              <Sprite name="close" width={25} height={24} />
+            </Button>
           </div>
-          <Button variant="text" onClick={onClose} className={styles['modal-close']}>
-            <Sprite name="close" width={25} height={24} />
-          </Button>
-        </div>
 
-        {children}
+          {children}
 
-        {buttons && <div className={styles.buttons}>{buttons}</div>}
-      </motion.div>
-    </motion.dialog>
+          {buttons && <div className={styles.buttons}>{buttons}</div>}
+        </motion.div>
+      </motion.dialog>
+    </div>
   );
 }
diff --git a/frontend/apps/web3-warriors-battle/src/features/game/assets/images/icons/exit.svg b/frontend/apps/web3-warriors-battle/src/features/game/assets/images/icons/exit.svg
diff --git a/frontend/apps/web3-warriors-battle/src/features/game/assets/images/icons/info.svg b/frontend/apps/web3-warriors-battle/src/features/game/assets/images/icons/info.svg
diff --git a/frontend/apps/web3-warriors-battle/src/features/game/assets/images/index.ts b/frontend/apps/web3-warriors-battle/src/features/game/assets/images/index.ts
@@ -24,4 +24,5 @@ export { ReactComponent as SkullBigIcon } from './icons/skull-big.svg';
 export { ReactComponent as CupStarIcon } from './icons/cup-star.svg';
 export { ReactComponent as CaretRightIcon } from './icons/caret-right.svg';
 export { ReactComponent as FilledCrossIcon } from './icons/filled-cross.svg';
+export { ReactComponent as ExitIcon } from './icons/exit.svg';
 export * from './character';
diff --git a/...battle/src/features/game/components/character-stats-form/character-stats-form.module.scss b/...battle/src/features/game/components/character-stats-form/character-stats-form.module.scss
@@ -30,6 +30,11 @@
 .title {
   color: #ffffff;
   margin-bottom: 8px;
+  line-height: 29px;
+}
+
+.subtitle {
+  height: 24px;
 }
 
 .text {
@@ -145,3 +150,16 @@
   bottom: 0px;
   border-width: 0 0 1.5px 1.5px;
 }
+
+.info {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: #fdd87c;
+  background: #fdd87c14;
+  padding: 0 8px;
+  border-radius: 8px;
+  margin: 63px -13.5px 0;
+}
diff --git a/...arriors-battle/src/features/game/components/character-stats-form/character-stats-from.tsx b/...arriors-battle/src/features/game/components/character-stats-form/character-stats-from.tsx
@@ -3,7 +3,7 @@ import { Button } from '@gear-js/vara-ui';
 import { useForm } from '@mantine/form';
 import { Text } from '@/components';
 import { Heading } from '@/components/ui/heading';
-import { AttackIcon, CaretRightIcon, DefenceIcon, DodgeIcon } from '../../assets/images';
+import { AttackIcon, CaretRightIcon, DefenceIcon, DodgeIcon, InfoIcon } from '../../assets/images';
 import { CharacterStatsFormValues } from '../../types';
 import { characterStatsStorage } from '../../store';
 import styles from './character-stats-form.module.scss';
@@ -69,6 +69,7 @@ export const CharacterStatsForm = ({ onValuesChange }: CharacterStatsFormProps)
   const initialPoints = 10;
   const availablePoints = 20 + initialPoints - values.attack - values.defence - values.dodge;
   const displayedAvailablePoints = Math.min(20, Math.max(availablePoints, 0));
+  const isShowInfo = availablePoints !== 0;
 
   useEffect(() => {
     const isValid = availablePoints === 0;
@@ -142,11 +143,20 @@ export const CharacterStatsForm = ({ onValuesChange }: CharacterStatsFormProps)
         Set Character's Attributes
       </Heading>
 
-      <Text size="sm">
+      <Text size="sm" className={styles.subtitle}>
         <span className={styles.points}>{displayedAvailablePoints} points</span> are available to distribute.
       </Text>
 
       <form className={styles.stats}>{charStats.map((stats) => drawRow(stats))}</form>
+
+      {isShowInfo && (
+        <div className={styles.info}>
+          <InfoIcon />
+          <Text size="xs" weight="semibold">
+            Distribute all points between attributes to continue
+          </Text>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/...3-warriors-battle/src/features/game/components/sections/find-game-form/find-game-form.tsx b/...3-warriors-battle/src/features/game/components/sections/find-game-form/find-game-form.tsx
@@ -14,6 +14,7 @@ import { usePending } from '@/features/game/hooks';
 import { ROUTES } from '@/app/consts';
 import { characterAppearanceAtom, characterStatsStorage, warriorIdStorage } from '@/features/game/store';
 import styles from './find-game-form.module.scss';
+import { getSafeDecodedAddress } from '@/features/game/utils';
 
 type FindGameFormValues = {
   address: HexString | undefined;
@@ -42,7 +43,7 @@ function FindGameForm() {
 
   const { errors: joinErrors, getInputProps: getJoinInputProps, onSubmit: onJoinSubmit, values } = joinForm;
 
-  const { refetch } = useBattleQuery(values.address?.length === 49 ? decodeAddress(values.address) : '');
+  const { refetch } = useBattleQuery(getSafeDecodedAddress(values.address));
   const appearance = useAtomValue(characterAppearanceAtom);
   const characterStats = characterStatsStorage.get();
   const warriorId = warriorIdStorage.get();

diff --git a/frontend/apps/web3-warriors-battle/src/features/game/utils.tsx b/frontend/apps/web3-warriors-battle/src/features/game/utils.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { AssetType } from './types';
 import { assetsCount, back_colors, body_colors } from './consts';
 import { CharacterView } from './components/character/character';
+import { decodeAddress } from '@gear-js/api';
 
 export const getLazySvg = (assetType: AssetType, index: number) => {
   const assetNumber = index > 0 ? (index % assetsCount[assetType]) + 1 : 1;
@@ -23,3 +24,14 @@ export const generateRandomCharacterView = (): CharacterView => ({
   body_color: body_colors[getRandomNumber(body_colors.length)],
   back_color: back_colors[getRandomNumber(back_colors.length)],
 });
+
+export const getSafeDecodedAddress = (address?: string) => {
+  if (address) {
+    try {
+      return decodeAddress(address.trim());
+    } catch (error) {
+      // empty
+    }
+  }
+  return null;
+};
diff --git a/frontend/apps/web3-warriors-battle/src/pages/game.module.scss b/frontend/apps/web3-warriors-battle/src/pages/game.module.scss
@@ -23,6 +23,7 @@
 .redButton {
   background: #eb5757;
   color: #ffffff;
+  border-radius: 4px;
   &:hover {
     background: #eb5757;
   }
@@ -37,10 +38,11 @@
 
 .exit {
   position: absolute;
-  top: 692px;
-  left: calc(50% + 364px);
-  height: 40px;
-  width: 93px;
+  top: 688px;
+  left: calc(50% + 494px);
+  gap: 8px;
+  height: 44px;
+  width: 107px;
   &.defeated {
     top: 650px;
   }

diff --git a/frontend/apps/web3-warriors-battle/src/pages/game.tsx b/frontend/apps/web3-warriors-battle/src/pages/game.tsx
@@ -18,10 +18,9 @@ import {
   FireballCanvas,
   GameSpinner,
 } from '@/features/game/components';
-import { AttackButtonIcon, DefenceButtonIcon, UltimateButtonIcon } from '@/features/game/assets/images';
+import { AttackButtonIcon, DefenceButtonIcon, ExitIcon, UltimateButtonIcon } from '@/features/game/assets/images';
 import { useEffect, useState } from 'react';
 import { Loader, Modal } from '@/components';
-import { ExitIcon } from '@/features/wallet/assets';
 import {
   Move,
   useCancelTournamentMessage,
@@ -273,9 +272,9 @@ export default function GamePage() {
         ) : (
           <Button
             text="Exit"
+            size="small"
             icon={ExitIcon}
-            color="transparent"
-            className={clsx(styles.exit, !isAlive && styles.defeated)}
+            className={clsx(styles.exit, styles.redButton, !isAlive && styles.defeated)}
             onClick={onExitGame}
             disabled={pending}
           />

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -23682,55 +23682,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tamagotchi-battle-new@workspace:apps/tamagotchi-battle-new":
-  version: 0.0.0-use.local
-  resolution: "tamagotchi-battle-new@workspace:apps/tamagotchi-battle-new"
-  dependencies:
-    "@dapps-frontend/error-tracking": "workspace:*"
-    "@dapps-frontend/hooks": "workspace:*"
-    "@dapps-frontend/ui": "workspace:*"
-    "@gear-js/api": "npm:0.38.1"
-    "@gear-js/react-hooks": "npm:0.13.0"
-    "@mantine/form": "npm:6.0.15"
-    "@polkadot/api": "npm:11.0.2"
-    "@polkadot/types": "npm:11.0.2"
-    "@polkadot/util": "npm:12.3.2"
-    "@polkadot/util-crypto": "npm:12.6.2"
-    "@radix-ui/react-dialog": "npm:1.0.4"
-    "@radix-ui/react-scroll-area": "npm:1.0.4"
-    "@tanstack/react-query": "npm:5.29.0"
-    "@types/node": "npm:18.16.19"
-    "@types/react": "npm:18.2.33"
-    "@types/react-dom": "npm:18.2.14"
-    "@vitejs/plugin-react-swc": "npm:3.3.2"
-    assert: "npm:2.0.0"
-    autoprefixer: "npm:10.4.15"
-    buffer: "npm:6.0.3"
-    class-variance-authority: "npm:0.6.1"
-    clsx: "npm:1.2.1"
-    eslint: "npm:8.48.0"
-    eslint-config-react-app: "npm:7.0.1"
-    framer-motion: "npm:10.16.2"
-    jotai: "npm:2.2.1"
-    postcss: "npm:8.4.29"
-    prettier: "npm:3.0.3"
-    react: "npm:18.2.0"
-    react-countdown: "npm:2.3.5"
-    react-dom: "npm:18.2.0"
-    react-router-dom: "npm:6.10.0"
-    react-transition-group: "npm:4.4.5"
-    rollup-plugin-visualizer: "npm:5.9.2"
-    sails-js: "npm:0.1.8"
-    sass: "npm:1.62.0"
-    tailwindcss: "npm:3.3.3"
-    typescript: "npm:4.9.5"
-    vite: "npm:4.4.9"
-    vite-plugin-eslint: "npm:1.8.1"
-    vite-plugin-node-polyfills: "npm:0.17.0"
-    vite-plugin-svgr: "npm:3.2.0"
-  languageName: unknown
-  linkType: soft
-
 "tamagotchi-battle@workspace:apps/tamagotchi-battle":
   version: 0.0.0-use.local
   resolution: "tamagotchi-battle@workspace:apps/tamagotchi-battle"
@@ -25803,6 +25754,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web3-warriors-battle@workspace:apps/web3-warriors-battle":
+  version: 0.0.0-use.local
+  resolution: "web3-warriors-battle@workspace:apps/web3-warriors-battle"
+  dependencies:
+    "@dapps-frontend/error-tracking": "workspace:*"
+    "@dapps-frontend/hooks": "workspace:*"
+    "@dapps-frontend/ui": "workspace:*"
+    "@gear-js/api": "npm:0.38.1"
+    "@gear-js/react-hooks": "npm:0.13.0"
+    "@mantine/form": "npm:6.0.15"
+    "@polkadot/api": "npm:11.0.2"
+    "@polkadot/types": "npm:11.0.2"
+    "@polkadot/util": "npm:12.3.2"
+    "@polkadot/util-crypto": "npm:12.6.2"
+    "@radix-ui/react-dialog": "npm:1.0.4"
+    "@radix-ui/react-scroll-area": "npm:1.0.4"
+    "@tanstack/react-query": "npm:5.29.0"
+    "@types/node": "npm:18.16.19"
+    "@types/react": "npm:18.2.33"
+    "@types/react-dom": "npm:18.2.14"
+    "@vitejs/plugin-react-swc": "npm:3.3.2"
+    assert: "npm:2.0.0"
+    autoprefixer: "npm:10.4.15"
+    buffer: "npm:6.0.3"
+    class-variance-authority: "npm:0.6.1"
+    clsx: "npm:1.2.1"
+    eslint: "npm:8.48.0"
+    eslint-config-react-app: "npm:7.0.1"
+    framer-motion: "npm:10.16.2"
+    jotai: "npm:2.2.1"
+    postcss: "npm:8.4.29"
+    prettier: "npm:3.0.3"
+    react: "npm:18.2.0"
+    react-countdown: "npm:2.3.5"
+    react-dom: "npm:18.2.0"
+    react-router-dom: "npm:6.10.0"
+    react-transition-group: "npm:4.4.5"
+    rollup-plugin-visualizer: "npm:5.9.2"
+    sails-js: "npm:0.1.8"
+    sass: "npm:1.62.0"
+    tailwindcss: "npm:3.3.3"
+    typescript: "npm:4.9.5"
+    vite: "npm:4.4.9"
+    vite-plugin-eslint: "npm:1.8.1"
+    vite-plugin-node-polyfills: "npm:0.17.0"
+    vite-plugin-svgr: "npm:3.2.0"
+  languageName: unknown
+  linkType: soft
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"