Skip to content

Commit

Permalink
refactor out: FactionDetails.tsx, FactionActions.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
Konrad Jamrozik committed Jun 29, 2024
1 parent d844de0 commit 9d1845f
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 99 deletions.
40 changes: 40 additions & 0 deletions web/src/components/FactionsDataGrid/FactionActions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Stack } from '@mui/material'
import type { GameState } from '../../lib/codesync/GameState'
import SliderWithButton from '../SliderWithButton/SliderWithButton'
import type { ManageFactionDialogProps } from './ManageFactionDialog'

export function FactionActions(
props: ManageFactionDialogProps & { gs: GameState },
): React.JSX.Element {
// eslint-disable-next-line unicorn/consistent-function-scoping
function investIntel(amount: number): void {
console.log(`investIntel(${amount}) NOT IMPLEMENTED`)
}

return (
<Stack direction="column" spacing={1} display="flex" alignItems="center">
<SliderWithButton
defaultValue={Math.floor(props.gs.Assets.Intel * 0.2)}
onClick={async (intel: number) => {
await Promise.resolve()
investIntel(intel)
}}
minValue={0}
maxValue={props.gs.Assets.Intel}
iconName="Intel"
label="Invest $TargetID intel"
/>
<SliderWithButton
defaultValue={Math.floor(props.gs.Assets.Intel * 0.5)}
onClick={async (intel: number) => {
await Promise.resolve()
investIntel(intel)
}}
minValue={0}
maxValue={props.gs.Assets.Intel}
iconName="Intel"
label="Invest $TargetID intel"
/>
</Stack>
)
}
60 changes: 60 additions & 0 deletions web/src/components/FactionsDataGrid/FactionDetails.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import type { SxProps, Theme } from '@mui/material'
import Grid from '@mui/material/Unstable_Grid2'
import _ from 'lodash'
import { Fragment } from 'react/jsx-runtime'
import { getNormalizedPower } from '../../lib/codesync/ruleset'
import { factionNameRenderMap } from '../../lib/rendering/renderFactions'
import { getSx } from '../../lib/rendering/renderUtils'
import { Label } from '../Label'
import type { ManageFactionDialogProps } from './ManageFactionDialog'

const gridMaxWidthPx = 300

export function FactionDetails(
props: ManageFactionDialogProps,
): React.JSX.Element {
const entries = getFactionDetailsEntries(props)
return (
<Grid
container
spacing={1}
// bgcolor="rgba(100,200,100,0.2)"
width={gridMaxWidthPx}
>
{_.map(entries, (entry, index) => (
<Fragment key={index}>
<Grid xs={6}>
<Label sx={entry.labelSx ?? {}}>{entry.label}</Label>
</Grid>
<Grid xs={6}>
<Label sx={entry.valueSx ?? {}}>{entry.value}</Label>
</Grid>
</Fragment>
))}
</Grid>
)
}

function getFactionDetailsEntries(
props: ManageFactionDialogProps,
): FactionDetailsEntry[] {
const name = factionNameRenderMap[props.faction.Name].display
const power = getNormalizedPower(props.faction)
const intel = props.faction.IntelInvested

// prettier-ignore
const entries: FactionDetailsEntry[] = [
{ label: 'Faction', value: name, valueSx: getSx(props.faction.Name) },
{ label: 'Power', value: power, valueSx: getSx('Difficulty') },
{ label: 'Intel', value: intel, valueSx: getSx('Intel') },
]

return entries
}

type FactionDetailsEntry = {
label: string
value: string | number | undefined
labelSx?: SxProps<Theme>
valueSx?: SxProps<Theme>
}
2 changes: 1 addition & 1 deletion web/src/components/FactionsDataGrid/FactionsDataGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Box } from '@mui/material'
import {
DataGrid,
type GridRenderCellParams,
type GridColDef,
type GridRenderCellParams,
} from '@mui/x-data-grid'
import _ from 'lodash'
import type { Faction } from '../../lib/codesync/GameState'
Expand Down
104 changes: 6 additions & 98 deletions web/src/components/FactionsDataGrid/ManageFactionDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
/* eslint-disable max-lines-per-function */
import { Stack, Typography, type SxProps, type Theme } from '@mui/material'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import Grid from '@mui/material/Unstable_Grid2'
import _ from 'lodash'
import { Fragment, useState } from 'react'
import type { Faction, GameState } from '../../lib/codesync/GameState'
import { getNormalizedPower } from '../../lib/codesync/ruleset'
import type { Faction } from '../../lib/codesync/GameState'
import {
type GameSession,
useGameSessionContext,
type GameSession,
} from '../../lib/gameSession/GameSession'
import { factionNameRenderMap } from '../../lib/rendering/renderFactions'
import { getSx } from '../../lib/rendering/renderUtils'
import { Label } from '../Label'
import SliderWithButton from '../SliderWithButton/SliderWithButton'

const factionDetailsGridMaxWidthPx = 300
import { FactionActions } from './FactionActions'
import { FactionDetails } from './FactionDetails'

export type ManageFactionDialogProps = {
readonly faction: Faction
Expand Down Expand Up @@ -90,8 +84,8 @@ export default function DeployMissionDialog(
}}
>
<Stack direction="row" spacing={2} alignItems="flex-start">
{factionDetailsGrid(props)}
{factionActionsStack(props, gs)}
<FactionDetails {...props} />
<FactionActions {...{ ...props, gs }} />
</Stack>
</DialogContent>
<DialogActions>
Expand All @@ -101,89 +95,3 @@ export default function DeployMissionDialog(
</Fragment>
)
}

function factionDetailsGrid(
props: ManageFactionDialogProps,
): React.JSX.Element {
const entries = getFactionDetailsEntries(props)
return (
<Grid
container
spacing={1}
// bgcolor="rgba(100,200,100,0.2)"
width={factionDetailsGridMaxWidthPx}
>
{_.map(entries, (entry, index) => (
<Fragment key={index}>
<Grid xs={6}>
<Label sx={entry.labelSx ?? {}}>{entry.label}</Label>
</Grid>
<Grid xs={6}>
<Label sx={entry.valueSx ?? {}}>{entry.value}</Label>
</Grid>
</Fragment>
))}
</Grid>
)
}

function factionActionsStack(
props: ManageFactionDialogProps,
gs: GameState,
): React.JSX.Element {
// eslint-disable-next-line unicorn/consistent-function-scoping
function investIntel(amount: number): void {
console.log(`investIntel(${amount}) NOT IMPLEMENTED`)
}

return (
<Stack direction="column" spacing={1} display="flex" alignItems="center">
<SliderWithButton
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"
/>
<SliderWithButton
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>
)
}

type FactionDetailsEntry = {
label: string
value: string | number | undefined
labelSx?: SxProps<Theme>
valueSx?: SxProps<Theme>
}

function getFactionDetailsEntries(
props: ManageFactionDialogProps,
): FactionDetailsEntry[] {
const name = factionNameRenderMap[props.faction.Name].display
const power = getNormalizedPower(props.faction)
const intel = props.faction.IntelInvested

// prettier-ignore
const entries: FactionDetailsEntry[] = [
{ label: 'Faction', value: name, valueSx: getSx(props.faction.Name) },
{ label: 'Power', value: power, valueSx: getSx('Difficulty') },
{ label: 'Intel', value: intel, valueSx: getSx('Intel') },
]

return entries
}

0 comments on commit 9d1845f

Please sign in to comment.