WIP: InputSlider

konrad-jamrozik · Jun 29, 2024 · a34099e · a34099e
1 parent 0886ade
commit a34099e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 39 deletions.
diff --git a/web/src/components/FactionsDataGrid/InputSlider.tsx b/web/src/components/FactionsDataGrid/InputSlider.tsx
@@ -1,12 +1,12 @@
 /** This file was originally adapted from
  * https://mui.com/material-ui/react-slider/#slider-with-input-field
  */
-import { Button, Stack, SvgIcon, TextField } from '@mui/material'
+import { Button, Stack, TextField } from '@mui/material'
 import Box from '@mui/material/Box'
 import Slider from '@mui/material/Slider'
 import { useState } from 'react'
-import { assetNameColors } from '../../lib/rendering/renderAssets'
-import { Icon } from '../Icon/Icon'
+import { formatString } from '../../lib/rendering/formatString'
+import { Icon, type IconName } from '../Icon/Icon'
 
 const textFieldWidth = 110
 
@@ -15,6 +15,8 @@ export type InputSliderProps = {
   readonly onClick: (value: number) => Promise<void>
   readonly minValue: number
   readonly maxValue: number
+  readonly iconName: IconName
+  readonly label: string
 }
 
 export default function InputSlider(
@@ -48,7 +50,7 @@ export default function InputSlider(
     >
       <Stack spacing={1}>
         <Stack direction="row" spacing={2} alignItems="center">
-          <Icon iconName="Intel" />
+          <Icon iconName={props.iconName} />
           <Slider
             sx={{ width: '120px' }}
             value={value}
@@ -80,10 +82,12 @@ export default function InputSlider(
         <Button
           variant="contained"
           id="input-slider"
-          disabled={value > props.maxValue || value < props.minValue}
+          disabled={
+            value > props.maxValue || value < props.minValue || value === 0
+          }
           onClick={async () => props.onClick(value)}
         >
-          Invest intel
+          {formatString('Invest $TargetID intel', undefined, value)}
         </Button>
       </Stack>
     </Box>

diff --git a/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx b/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx
@@ -19,7 +19,7 @@ import { getSx } from '../../lib/rendering/renderUtils'
 import { Label } from '../Label'
 import InputSlider from './InputSlider'
 
-const factionDetailsGridMaxWidthPx = 400
+const factionDetailsGridMaxWidthPx = 300
 
 export type ManageFactionDialogProps = {
   readonly faction: Faction
@@ -103,22 +103,26 @@ export default function DeployMissionDialog(
               alignItems="center"
             >
               <InputSlider
-                defaultValue={gs.Assets.Intel}
+                defaultValue={Math.floor(gs.Assets.Intel * 0.2)}
                 onClick={async (intel: number) => {
                   await Promise.resolve()
                   investIntel(intel)
                 }}
                 minValue={0}
                 maxValue={gs.Assets.Intel}
+                iconName="Intel"
+                label="Invest $TargetID intel"
               />
               <InputSlider
-                defaultValue={gs.Assets.Intel}
+                defaultValue={Math.floor(gs.Assets.Intel * 0.5)}
                 onClick={async (intel: number) => {
                   await Promise.resolve()
                   investIntel(intel)
                 }}
                 minValue={0}
                 maxValue={gs.Assets.Intel}
+                iconName="Intel"
+                label="Invest $TargetID intel"
               />
             </Stack>
           </Stack>
@@ -144,10 +148,10 @@ function factionDetailsGrid(
     >
       {_.map(entries, (entry, index) => (
         <Fragment key={index}>
-          <Grid xs={8}>
+          <Grid xs={6}>
             <Label sx={entry.labelSx ?? {}}>{entry.label}</Label>
           </Grid>
-          <Grid xs={4}>
+          <Grid xs={6}>
             <Label sx={entry.valueSx ?? {}}>{entry.value}</Label>
           </Grid>
         </Fragment>

diff --git a/web/src/components/Label.tsx b/web/src/components/Label.tsx
@@ -11,10 +11,10 @@ export function Label(props: LabelProps): React.JSX.Element {
   return (
     <Paper
       sx={{
-        ...sx,
         padding: '2px',
         paddingX: '10px',
         margin: '2px',
+        ...sx,
       }}
     >
       <Typography variant={props.typographyVariant!}>

diff --git a/web/src/lib/rendering/formatString.ts b/web/src/lib/rendering/formatString.ts
@@ -0,0 +1,28 @@
+import _ from 'lodash'
+import { logIds } from './renderGameEvent'
+
+export function formatString(
+  template: string,
+  ids?: number[] | undefined,
+  targetId?: number | undefined,
+): string {
+  let formatted = template
+  if (!_.isNil(ids)) {
+    if (!_.isEmpty(ids)) {
+      for (const index of _.rangeRight(ids.length)) {
+        formatted = _.replace(
+          formatted,
+          `$IDs[${index}]`,
+          ids[index]!.toString(),
+        )
+      }
+    }
+    formatted = _.replace(formatted, '$IDs[1..]', logIds(ids.slice(1)))
+    formatted = _.replace(formatted, '$IDs', logIds(ids))
+  }
+  if (!_.isNil(targetId)) {
+    formatted = _.replace(formatted, '$TargetID+1', (targetId + 1).toString())
+    formatted = _.replace(formatted, '$TargetID', targetId.toString())
+  }
+  return formatted
+}
diff --git a/web/src/lib/rendering/renderGameEvent.ts b/web/src/lib/rendering/renderGameEvent.ts
@@ -5,6 +5,7 @@ import {
   PlayerActionNameVal,
 } from '../codesync/PlayerActionEvent'
 import { str } from '../utils'
+import { formatString } from './formatString'
 
 const playerActionNameToDisplayMap: {
   [name in GameEventName]: {
@@ -77,33 +78,7 @@ export function getDisplayedDetails(event: GameEventWithTurn): string {
   )
 }
 
-function formatString(
-  template: string,
-  ids: number[] | undefined,
-  targetId: number | undefined,
-): string {
-  let formatted = template
-  if (!_.isNil(ids)) {
-    if (!_.isEmpty(ids)) {
-      for (const index of _.rangeRight(ids.length)) {
-        formatted = _.replace(
-          formatted,
-          `$IDs[${index}]`,
-          ids[index]!.toString(),
-        )
-      }
-    }
-    formatted = _.replace(formatted, '$IDs[1..]', logIds(ids.slice(1)))
-    formatted = _.replace(formatted, '$IDs', logIds(ids))
-  }
-  if (!_.isNil(targetId)) {
-    formatted = _.replace(formatted, '$TargetID+1', (targetId + 1).toString())
-    formatted = _.replace(formatted, '$TargetID', targetId.toString())
-  }
-  return formatted
-}
-
-function logIds(ids: number[]): string {
+export function logIds(ids: number[]): string {
   // The "[...id]" spread here is used to avoid mutating the "ids" array.
   return str([...ids].sort((left, right) => left - right))
 }