From 05f83925ea0f61e6a9d33c79fbe7819561f2d276 Mon Sep 17 00:00:00 2001 From: Vadim Tokar <52737608+vraja-nayaka@users.noreply.github.com> Date: Mon, 4 Nov 2024 17:05:52 +0400 Subject: [PATCH] Fix warriors battle (#502) --- .github/workflows/Release-warriors-battle.yml | 4 +- .../utils/sails/queries/use-battle-query.ts | 4 +- .../src/components/ui/modal/Modal.module.scss | 14 ++- .../src/components/ui/modal/Modal.tsx | 49 +++++----- .../game/assets/images/icons/exit.svg | 3 + .../game/assets/images/icons/info.svg | 2 +- .../src/features/game/assets/images/index.ts | 1 + .../character-stats-form.module.scss | 18 ++++ .../character-stats-from.tsx | 14 ++- .../find-game-form/find-game-form.tsx | 3 +- .../src/features/game/utils.tsx | 12 +++ .../src/pages/game.module.scss | 10 +- .../web3-warriors-battle/src/pages/game.tsx | 7 +- frontend/yarn.lock | 98 +++++++++---------- 14 files changed, 147 insertions(+), 92 deletions(-) create mode 100644 frontend/apps/web3-warriors-battle/src/features/game/assets/images/icons/exit.svg diff --git a/.github/workflows/Release-warriors-battle.yml b/.github/workflows/Release-warriors-battle.yml index 9876973ba..d4e1819ce 100644 --- 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 index a376b2f50..ccefe937d 100644 --- 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 index 44cf06f7f..fd3da6ed7 100644 --- 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 index 0d79f78ad..01f686125 100644 --- 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 ( - - + -
-
-

{title}

- {description &&

{description}

} + variants={variantsOverlay} + ref={ref} + onClick={handleClick} + className={variants({ className: clsx(styles.modal, modalClassName), size })}> + +
+
+

{title}

+ {description &&

{description}

} +
+
- -
- {children} + {children} - {buttons &&
{buttons}
} - - + {buttons &&
{buttons}
} + + +
); } 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 new file mode 100644 index 000000000..6301b889b --- /dev/null +++ b/frontend/apps/web3-warriors-battle/src/features/game/assets/images/icons/exit.svg @@ -0,0 +1,3 @@ + + + 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 index ee9fb59cb..e0ff19941 100644 --- 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 @@ -1,6 +1,6 @@ - + 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 index 6c80e2098..6a8a09e03 100644 --- 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/frontend/apps/web3-warriors-battle/src/features/game/components/character-stats-form/character-stats-form.module.scss b/frontend/apps/web3-warriors-battle/src/features/game/components/character-stats-form/character-stats-form.module.scss index a0e7b1621..458081b35 100644 --- a/frontend/apps/web3-warriors-battle/src/features/game/components/character-stats-form/character-stats-form.module.scss +++ b/frontend/apps/web3-warriors-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/frontend/apps/web3-warriors-battle/src/features/game/components/character-stats-form/character-stats-from.tsx b/frontend/apps/web3-warriors-battle/src/features/game/components/character-stats-form/character-stats-from.tsx index f5683eef0..d796378f6 100644 --- a/frontend/apps/web3-warriors-battle/src/features/game/components/character-stats-form/character-stats-from.tsx +++ b/frontend/apps/web3-warriors-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 - + {displayedAvailablePoints} points are available to distribute.
{charStats.map((stats) => drawRow(stats))}
+ + {isShowInfo && ( +
+ + + Distribute all points between attributes to continue + +
+ )} ); }; diff --git a/frontend/apps/web3-warriors-battle/src/features/game/components/sections/find-game-form/find-game-form.tsx b/frontend/apps/web3-warriors-battle/src/features/game/components/sections/find-game-form/find-game-form.tsx index 3b2a364b9..9b953e66c 100644 --- a/frontend/apps/web3-warriors-battle/src/features/game/components/sections/find-game-form/find-game-form.tsx +++ b/frontend/apps/web3-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 index 649513af4..a81d22f74 100644 --- 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 index 5d2fb2e89..195533fa9 100644 --- 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 index 6661e9911..7cd8dee32 100644 --- 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() { ) : (