fix gameplay

gear-foundation · Oct 25, 2024 · d0e3e9d · d0e3e9d
1 parent 675104f
commit d0e3e9d
Show file tree

Hide file tree

Showing 11 changed files with 287 additions and 151 deletions.
diff --git a/...s/tamagotchi-battle-new/src/app/utils/sails/events/use-event-round-action-subscription.ts b/...s/tamagotchi-battle-new/src/app/utils/sails/events/use-event-round-action-subscription.ts
@@ -22,8 +22,10 @@ export function useEventRoundActionSubscription(pair: Pair) {
 
     if (players.includes(player_1[0]) && players.includes(player_2[0]) && account && roundRef.current !== round) {
       roundRef.current = round;
-      const myData = account.decodedAddress === player_1[0] ? player_1 : player_2;
-      const opponentsData = account.decodedAddress === player_1[0] ? player_2 : player_1;
+      const isMyBattle = players.includes(account.decodedAddress);
+      const isMatchPlayers = isMyBattle ? account.decodedAddress === player_1[0] : pair.player_1 === player_1[0];
+      const myData = isMatchPlayers ? player_1 : player_2;
+      const opponentsData = isMatchPlayers ? player_2 : player_1;
 
       setLastMoves({ moves: [myData[1], opponentsData[1]], newHealth: [myData[2], opponentsData[2]] });
     }

diff --git a/...tend/apps/tamagotchi-battle-new/src/features/game/components/animations/sphere/sphere.tsx b/...tend/apps/tamagotchi-battle-new/src/features/game/components/animations/sphere/sphere.tsx
@@ -50,7 +50,7 @@ class ParticleFlame implements Particle {
 }
 
 type FireAnimationProps = {
-  type?: Move;
+  type?: Move | null;
   className?: string;
 };
 

diff --git a/...otchi-battle-new/src/features/game/components/battle-history-card/battle-history-card.tsx b/...otchi-battle-new/src/features/game/components/battle-history-card/battle-history-card.tsx
@@ -4,6 +4,7 @@ import { AttackIcon, DefenceIcon, DodgeIcon, HealthIcon } from '../../assets/ima
 import { HealthIndicator } from '../health-indicator';
 import { VariantProps, cva } from 'class-variance-authority';
 import { CrossIcon } from '@/assets/images';
+import { Move } from '@/app/utils';
 import { PlayerState } from '../../types';
 import { PlayerStatus } from '../player-status/player-status';
 import styles from './battle-history-card.module.scss';
@@ -13,9 +14,10 @@ export const variants = cva('', {
   defaultVariants: { align: 'left' },
 });
 
-type BattleHistoryCardProps = PlayerState &
+type BattleHistoryCardProps = Omit<PlayerState, 'action'> &
   VariantProps<typeof variants> & {
     onClose?: () => void;
+    action: Move | null;
   };
 
 const BattleHistoryCard = ({
@@ -36,7 +38,13 @@ const BattleHistoryCard = ({
     <div className={variants({ className: styles.wrapper, align })}>
       <div className={styles.header}>
         <Text>
-          {name} uses <span className={styles[`action-${action}`]}>{action}</span>
+          {action ? (
+            <>
+              {name} uses <span className={styles[`action-${action}`]}>{action}</span>
+            </>
+          ) : (
+            <span>{name}</span>
+          )}
         </Text>
 
         <PlayerStatus isAlive={isAlive} />

diff --git a/...apps/tamagotchi-battle-new/src/features/game/components/game-over-card/game-over-card.tsx b/...apps/tamagotchi-battle-new/src/features/game/components/game-over-card/game-over-card.tsx
@@ -1,8 +1,10 @@
 import clsx from 'clsx';
+import { useAtomValue } from 'jotai';
 import { Card, Text } from '@/components';
 import { VaraIcon } from '@/components/layout';
 import { useAccount, useBalanceFormat } from '@gear-js/react-hooks';
 import { Player, State } from '@/app/utils';
+import { battleHistoryAtom, currentPlayersAtom } from '../../store';
 import styles from './game-over-card.module.scss';
 
 type GameOverCardProps = {
@@ -25,15 +27,20 @@ const GameOverCard = ({
   isShowOtherBattle,
 }: GameOverCardProps) => {
   const { account } = useAccount();
+  const currentPlayers = useAtomValue(currentPlayersAtom);
+  const battleHistory = useAtomValue(battleHistoryAtom);
   const { getFormattedBalanceValue } = useBalanceFormat();
   const isTournamentOver = 'gameIsOver' in state;
   const prizeValue = Number(getFormattedBalanceValue(Number(bid) || 0)) * totalParticipants;
+  const isCurrentDraw =
+    !isTournamentOver && battleHistory?.[0].player.health === 0 && battleHistory?.[0].opponent.health === 0;
 
-  const isDraw = isTournamentOver && state.gameIsOver.winners[1];
+  const isTournamentDraw = isTournamentOver && state.gameIsOver.winners[1];
 
   const getMyResultStatus = () => {
     if (!account) return null;
-    if (isDraw && state.gameIsOver.winners.includes(account.decodedAddress)) return 'It’s a draw';
+    if (isCurrentDraw || (isTournamentDraw && state.gameIsOver.winners.includes(account.decodedAddress)))
+      return 'It’s a draw';
     if (!isAlive && (!isShowOtherBattle || isTournamentOver)) return 'You lose';
     if (isTournamentOver && state.gameIsOver.winners[0] === account.decodedAddress) return 'You win';
     return null;
@@ -42,11 +49,18 @@ const GameOverCard = ({
   const myResultStatus = getMyResultStatus();
 
   const getDesctiptionText = () => {
-    if (!isTournamentOver)
-      return `Player 2 wins! Now you can watch other players' battles. Choose any battle from the list below.`;
+    if (!isTournamentOver) {
+      const winnersName =
+        currentPlayers?.player.player_settings.health === 0
+          ? currentPlayers?.opponent.user_name
+          : currentPlayers?.player.user_name;
+      return `${
+        winnersName || 'Player 2'
+      } wins! Now you can watch other players' battles. Choose any battle from the list below.`;
+    }
 
     const firstTournamentWinnerName = participantsMap[state.gameIsOver.winners[0]].user_name;
-    if (isDraw && state.gameIsOver.winners[1]) {
+    if (isTournamentDraw && state.gameIsOver.winners[1]) {
       const secondTournamentWinnerName = participantsMap[state.gameIsOver.winners[1]].user_name;
       return `${firstTournamentWinnerName} and ${secondTournamentWinnerName} ended in a draw!`;
     } else {
@@ -57,17 +71,19 @@ const GameOverCard = ({
   return (
     myResultStatus && (
       <div className={clsx(styles.backdrop, className)}>
-        <Card title="Game over" description={getDesctiptionText()} className={styles.card} size="md">
-          {isTournamentOver && (
-            <div className={styles.prize}>
-              <Text size="sm">Winner prize:</Text>
-              <VaraIcon className={styles.icon} />
-              <Text size="sm" weight="semibold">
-                {isDraw ? prizeValue / 2 : prizeValue} VARA
-              </Text>
-            </div>
-          )}
-        </Card>
+        {!isCurrentDraw && (
+          <Card title="Game over" description={getDesctiptionText()} className={styles.card} size="md">
+            {isTournamentOver && (
+              <div className={styles.prize}>
+                <Text size="sm">Winner prize:</Text>
+                <VaraIcon className={styles.icon} />
+                <Text size="sm" weight="semibold">
+                  {isTournamentDraw ? prizeValue / 2 : prizeValue} VARA
+                </Text>
+              </div>
+            )}
+          </Card>
+        )}
 
         <p className={styles.result}>{myResultStatus}</p>
       </div>

diff --git a/...tchi-battle-new/src/features/game/components/sections/battle-tabs/battle-tabs.module.scss b/...tchi-battle-new/src/features/game/components/sections/battle-tabs/battle-tabs.module.scss
@@ -1,11 +1,39 @@
-.list {
+.tabs {
   position: absolute;
-  top: 767px;
+  top: 684px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &.defeated {
+    top: 642px;
+  }
+}
+
+.list {
+  margin-top: 30px;
+}
+
+.playersList {
+  margin-top: 43px;
+}
+
+.switcher {
+  margin-top: 31px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
 }
 
 .historyItem {
   display: flex;
   cursor: pointer;
+
+  &.disabled {
+    cursor: auto;
+    pointer-events: none;
+  }
 }
 
 .players {
@@ -19,8 +47,3 @@
     gap: 6px;
   }
 }
-
-.segmented {
-  position: absolute;
-  top: 684px;
-}