Small explanation for the power star.

GitOrigin-RevId: 56891eb40858c02e16260e0c6466fb5e9b34b83e
nkzw-tech · Aug 6, 2024 · d611f62 · d611f62
1 parent 956db03
commit d611f62
Showing 1 changed file with 50 additions and 3 deletions.
diff --git a/hera/ui/GameDialog.tsx b/hera/ui/GameDialog.tsx
@@ -36,7 +36,14 @@ import Subscriptions from '@iconify-icons/pixelarticons/subscriptions.js';
 import Trophy from '@iconify-icons/pixelarticons/trophy.js';
 import Zap from '@iconify-icons/pixelarticons/zap.js';
 import { fbt } from 'fbt';
-import { memo, ReactNode, useCallback, useMemo, useState } from 'react';
+import {
+  Fragment,
+  memo,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 import BuildingCard from '../card/BuildingCard.tsx';
 import LeaderCard from '../card/LeaderCard.tsx';
 import LeaderTitle from '../card/LeaderTitle.tsx';
@@ -262,6 +269,17 @@ const MapPerformance = ({
     ? evaluatePlayerPerformance(map, currentPlayer.id)
     : null;
 
+  const hasPowerChallenge = performance.power != null;
+  const hasAchievedPowerChallenge =
+    performance.power != null &&
+    evaluation != null &&
+    evaluation.power === true;
+  const powerNeed =
+    currentPlayer && hasPowerChallenge && !hasAchievedPowerChallenge
+      ? Math.ceil(currentPlayer.stats.lostUnits * performance.power) -
+        currentPlayer.stats.destroyedUnits
+      : null;
+
   return (
     <Stack gap={16} vertical>
       <h2>
@@ -300,7 +318,7 @@ const MapPerformance = ({
             </div>
           </>
         )}
-        {performance.power != null && (
+        {hasPowerChallenge && (
           <>
             <Stack alignCenter gap start>
               <Icon icon={Zap} />
@@ -310,7 +328,7 @@ const MapPerformance = ({
             <div
               className={cx(
                 alignCenter,
-                evaluation?.power ? achievedStyle : failedStyle,
+                hasAchievedPowerChallenge ? achievedStyle : failedStyle,
               )}
             >
               {currentPlayer ? getPowerValue(currentPlayer.stats) : null}
@@ -340,6 +358,31 @@ const MapPerformance = ({
           </>
         )}
       </div>
+      {powerNeed != null && powerNeed > 0 ? (
+        <p>
+          <fbt desc="Explanation for the power star">
+            Defeat
+            <fbt:plural
+              count={powerNeed}
+              many="more units"
+              name="number of units"
+              showCount="ifMany"
+            >
+              one more unit
+            </fbt:plural>{' '}
+            without losing a unit to secure the{' '}
+            <fbt:param name="starName">
+              {
+                <Fragment>
+                  <Icon className={zapStyle} icon={Zap} />
+                  <span>{getTranslatedPerformanceTypeName('power')}</span>
+                </Fragment>
+              }
+            </fbt:param>{' '}
+            star.
+          </fbt>
+        </p>
+      ) : null}
     </Stack>
   );
 };
@@ -662,3 +705,7 @@ const achievedStyle = css`
 const failedStyle = css`
   color: ${getColor('red')};
 `;
+
+const zapStyle = css`
+  margin: -2px 4px 2px 0;
+`;