display charge count correctly

mafia-rust · Dec 30, 2024 · 45054b6 · 45054b6
1 parent 78697b1
commit 45054b6
Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/client/src/components/Counter.tsx b/client/src/components/Counter.tsx
@@ -8,7 +8,7 @@ export default function Counter(props: Readonly<{
 }>): ReactElement {
     const circles = [];
 
-    for (let i = 0; i < props.max; i++) {
+    for (let i = 0; i < Math.max(props.max, props.current); i++) {
         const filled = i < props.current ? "filled" : "empty";
 
         circles.push(<div key={filled + i} className={`counter-circle counter-circle-${filled}`} />)

diff --git a/client/src/menu/game/gameScreenContent/AbilityMenu/RoleSpecific.tsx b/client/src/menu/game/gameScreenContent/AbilityMenu/RoleSpecific.tsx
@@ -30,8 +30,12 @@ export default function RoleSpecificSection(): ReactElement{
         gameState => gameState.dayNumber,
         ["phase"]
     )!;
+    const numPlayers = useGameState(
+        gameState => gameState.players.length,
+        ["gamePlayers"]
+    )!;
 
-    const inner = roleSpecificSectionInner(phaseState, dayNumber, roleState);
+    const inner = roleSpecificSectionInner(phaseState, dayNumber, roleState, numPlayers);
 
     return <>{inner===null ? null : 
         <DetailsSummary
@@ -42,11 +46,18 @@ export default function RoleSpecificSection(): ReactElement{
     }</>;
 }
 
+function abilityChargesCounter(numPlayers: number): number{
+    return Math.ceil(numPlayers/5);
+}
+
 function roleSpecificSectionInner(
     phaseState: PhaseState,
     dayNumber: number,
-    roleState: RoleState
+    roleState: RoleState,
+    numPlayers: number
 ): ReactElement | null{
+    let chargesCounter = abilityChargesCounter(numPlayers);
+
     switch(roleState.type){
         case "auditor":
             return <AuditorMenu roleState={roleState}/>;
@@ -56,7 +67,7 @@ function roleSpecificSectionInner(
             return <LargeDoomsayerMenu/>;
         case "jailor": 
             return <Counter 
-                max={3} 
+                max={chargesCounter} 
                 current={roleState.executionsRemaining}
             >
                 <StyledText>{translate("role.jailor.roleDataText.executionsRemaining", roleState.executionsRemaining)}</StyledText>
@@ -101,7 +112,7 @@ function roleSpecificSectionInner(
                     </div>
                 case "loaded":
                     return <Counter 
-                        max={3} 
+                        max={chargesCounter} 
                         current={roleState.state.bullets}
                     >
                         <StyledText>{translate("role.vigilante.roleDataText", roleState.state.bullets)}</StyledText>
@@ -111,14 +122,14 @@ function roleSpecificSectionInner(
             }
         case "veteran":
             return <Counter
-                max={3}
+                max={chargesCounter}
                 current={roleState.alertsRemaining}
             >
                 <StyledText>{translate("role.veteran.roleDataText", roleState.alertsRemaining)}</StyledText>
             </Counter>
         case "armorsmith":
             return <Counter
-                max={3}
+                max={chargesCounter}
                 current={roleState.openShopsRemaining}
             >
                 <StyledText>{translate("role.armorsmith.roleDataText", roleState.openShopsRemaining)}</StyledText>
@@ -128,14 +139,14 @@ function roleSpecificSectionInner(
         case "counterfeiter":
         case "forger":
             return <Counter
-                max={3}
+                max={chargesCounter}
                 current={roleState.forgesRemaining}
             >
                 <StyledText>{translate("role.forger.roleDataText", roleState.forgesRemaining)}</StyledText>
             </Counter>
         case "mortician":
             return <Counter
-                max={3}
+                max={chargesCounter}
                 current={roleState.cremationsRemaining}
             >
                 <StyledText>{translate("role.mortician.roleDataText", roleState.cremationsRemaining)}</StyledText>
@@ -147,7 +158,8 @@ function roleSpecificSectionInner(
         case "spiral": 
             return <SpiralMenu />;
         case "puppeteer":
-            return <SmallPuppeteerMenu 
+            return <SmallPuppeteerMenu
+                maxCharges={chargesCounter}
                 marionettesRemaining={roleState.marionettesRemaining}
                 phase={phaseState.type}
             />;
@@ -164,7 +176,7 @@ function roleSpecificSectionInner(
                         <StyledText>{translate("role.martyr.roleDataText.eccentric")}</StyledText>
                     </div>
                     <Counter
-                        max={2}
+                        max={chargesCounter}
                         current={roleState.state.bullets}
                     >
                         <StyledText>{translate("role.martyr.roleDataText", roleState.state.bullets)}</StyledText>

diff --git a/client/src/menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/SmallPuppeteerMenu.tsx b/client/src/menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/SmallPuppeteerMenu.tsx
@@ -5,10 +5,10 @@ import StyledText from "../../../../../components/StyledText";
 import translate from "../../../../../game/lang";
 import { PhaseType } from "../../../../../game/gameState.d";
 
-export default function SmallPuppeteerMenu(props: {marionettesRemaining: number, phase: PhaseType}): ReactElement {
+export default function SmallPuppeteerMenu(props: Readonly<{marionettesRemaining: number, maxCharges: number, phase: PhaseType}>): ReactElement {
     return <>
         <Counter
-            max={3}
+            max={props.maxCharges}
             current={props.marionettesRemaining}
         >
             <StyledText>{translate("role.puppeteer.smallRoleMenu.marionettesRemaining", props.marionettesRemaining)}</StyledText>