From 6a5a575f3ff20e547dbac9f7e38f6fec45195df3 Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Tue, 11 Feb 2025 15:38:37 +0300
Subject: [PATCH 1/2] fix generate character page crash

---
 .../web3-warriors-battle/src/features/game/utils.tsx   | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

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 0fa6bede6..642b425ff 100644
--- a/frontend/apps/web3-warriors-battle/src/features/game/utils.tsx
+++ b/frontend/apps/web3-warriors-battle/src/features/game/utils.tsx
@@ -1,5 +1,5 @@
 import { decodeAddress } from '@gear-js/api';
-import React from 'react';
+import { lazy } from 'react';
 
 import { CharacterView } from './components/character/character';
 import { assetsCount, back_colors, body_colors } from './consts';
@@ -8,11 +8,7 @@ import { AssetType } from './types';
 export const getLazySvg = (assetType: AssetType, index: number) => {
   const assetNumber = index > 0 ? (index % assetsCount[assetType]) + 1 : 1;
 
-  return React.lazy(() =>
-    import(`./assets/images/character/${assetType}-${assetNumber}.svg`).then((module) => ({
-      default: module.ReactComponent,
-    })),
-  );
+  return lazy(() => import(`./assets/images/character/${assetType}-${assetNumber}.svg?react`));
 };
 
 export const getRandomNumber = (maxNumber: number) => Math.floor(Math.random() * maxNumber);
@@ -30,7 +26,7 @@ export const getSafeDecodedAddress = (address?: string) => {
   if (address) {
     try {
       return decodeAddress(address.trim());
-    } catch (error) {
+    } catch (_error) {
       // empty
     }
   }

From 54fd9e6ce3fc6eb07a8c450cdb47e4c74c592405 Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Tue, 11 Feb 2025 16:22:24 +0300
Subject: [PATCH 2/2] improve game over card ux

---
 .../game-over-card/game-over-card.module.scss | 18 +++-------
 .../game-over-card/game-over-card.tsx         | 36 ++++++++++++-------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.module.scss b/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.module.scss
index 9e2bc973b..17555e1b6 100644
--- a/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.module.scss
+++ b/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.module.scss
@@ -2,7 +2,10 @@
   position: relative;
   width: 100%;
   height: 100%;
-  backdrop-filter: grayscale(100%);
+
+  &.grayedOut {
+    backdrop-filter: grayscale(100%);
+  }
 }
 
 .card {
@@ -39,16 +42,3 @@
   height: 32px;
   width: 32px;
 }
-
-.result {
-  position: absolute;
-  top: 486px;
-  text-transform: uppercase;
-  text-align: center;
-  width: 100%;
-  font-size: 56px;
-  line-height: 67px;
-  font-weight: 700;
-  color: #ffffff;
-  -webkit-text-stroke: 2px #000000;
-}
diff --git a/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.tsx b/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.tsx
index e03199fb7..f4e20d953 100644
--- a/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.tsx
+++ b/frontend/apps/web3-warriors-battle/src/features/game/components/game-over-card/game-over-card.tsx
@@ -20,6 +20,18 @@ type GameOverCardProps = {
   className?: string;
 };
 
+const STATUS = {
+  WIN: 'win',
+  LOSS: 'loss',
+  DRAW: 'draw',
+} as const;
+
+const STATUS_TEXT = {
+  [STATUS.WIN]: 'You won',
+  [STATUS.LOSS]: 'You lost',
+  [STATUS.DRAW]: "It's a draw",
+} as const;
+
 const GameOverCard = ({
   bid,
   className,
@@ -40,16 +52,18 @@ const GameOverCard = ({
 
   const isTournamentDraw = isTournamentOver && state.gameIsOver.winners[1];
 
-  const getMyResultStatus = () => {
-    if (!account) return null;
+  const getStatus = () => {
+    if (!account) return;
+
     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;
+      return STATUS.DRAW;
+
+    if (!isAlive && (!isShowOtherBattle || isTournamentOver)) return STATUS.LOSS;
+
+    if (isTournamentOver && state.gameIsOver.winners[0] === account.decodedAddress) return STATUS.WIN;
   };
 
-  const myResultStatus = getMyResultStatus();
+  const status = getStatus();
 
   const getDesctiptionText = () => {
     if (!isTournamentOver) {
@@ -72,10 +86,10 @@ const GameOverCard = ({
   };
 
   return (
-    myResultStatus && (
-      <div className={clsx(styles.backdrop, className)}>
+    status && (
+      <div className={clsx(styles.backdrop, status === STATUS.LOSS && styles.grayedOut, className)}>
         {!isCurrentDraw && (
-          <Card title="Game over" description={getDesctiptionText()} className={styles.card} size="md">
+          <Card title={STATUS_TEXT[status]} description={getDesctiptionText()} className={styles.card} size="md">
             {isTournamentOver && (
               <div className={styles.prize}>
                 <Text size="sm">Winner prize:</Text>
@@ -87,8 +101,6 @@ const GameOverCard = ({
             )}
           </Card>
         )}
-
-        <p className={styles.result}>{myResultStatus}</p>
       </div>
     )
   );