From 9d1845f4cf7d505dd98ef0fcef7fb2f0b1498fc1 Mon Sep 17 00:00:00 2001 From: Konrad Jamrozik Date: Fri, 28 Jun 2024 20:58:29 -0700 Subject: [PATCH] refactor out: FactionDetails.tsx, FactionActions.tsx --- .../FactionsDataGrid/FactionActions.tsx | 40 +++++++ .../FactionsDataGrid/FactionDetails.tsx | 60 ++++++++++ .../FactionsDataGrid/FactionsDataGrid.tsx | 2 +- .../FactionsDataGrid/ManageFactionDialog.tsx | 104 +----------------- 4 files changed, 107 insertions(+), 99 deletions(-) create mode 100644 web/src/components/FactionsDataGrid/FactionActions.tsx create mode 100644 web/src/components/FactionsDataGrid/FactionDetails.tsx diff --git a/web/src/components/FactionsDataGrid/FactionActions.tsx b/web/src/components/FactionsDataGrid/FactionActions.tsx new file mode 100644 index 00000000..49b0f49f --- /dev/null +++ b/web/src/components/FactionsDataGrid/FactionActions.tsx @@ -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 ( + + { + await Promise.resolve() + investIntel(intel) + }} + minValue={0} + maxValue={props.gs.Assets.Intel} + iconName="Intel" + label="Invest $TargetID intel" + /> + { + await Promise.resolve() + investIntel(intel) + }} + minValue={0} + maxValue={props.gs.Assets.Intel} + iconName="Intel" + label="Invest $TargetID intel" + /> + + ) +} diff --git a/web/src/components/FactionsDataGrid/FactionDetails.tsx b/web/src/components/FactionsDataGrid/FactionDetails.tsx new file mode 100644 index 00000000..4b89aaf0 --- /dev/null +++ b/web/src/components/FactionsDataGrid/FactionDetails.tsx @@ -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 ( + + {_.map(entries, (entry, index) => ( + + + + + + + + + ))} + + ) +} + +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 + valueSx?: SxProps +} diff --git a/web/src/components/FactionsDataGrid/FactionsDataGrid.tsx b/web/src/components/FactionsDataGrid/FactionsDataGrid.tsx index dc31512e..392bab8a 100644 --- a/web/src/components/FactionsDataGrid/FactionsDataGrid.tsx +++ b/web/src/components/FactionsDataGrid/FactionsDataGrid.tsx @@ -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' diff --git a/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx b/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx index 72c32353..3f653601 100644 --- a/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx +++ b/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx @@ -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 @@ -90,8 +84,8 @@ export default function DeployMissionDialog( }} > - {factionDetailsGrid(props)} - {factionActionsStack(props, gs)} + + @@ -101,89 +95,3 @@ export default function DeployMissionDialog( ) } - -function factionDetailsGrid( - props: ManageFactionDialogProps, -): React.JSX.Element { - const entries = getFactionDetailsEntries(props) - return ( - - {_.map(entries, (entry, index) => ( - - - - - - - - - ))} - - ) -} - -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 ( - - { - await Promise.resolve() - investIntel(intel) - }} - minValue={0} - maxValue={gs.Assets.Intel} - iconName="Intel" - label="Invest $TargetID intel" - /> - { - await Promise.resolve() - investIntel(intel) - }} - minValue={0} - maxValue={gs.Assets.Intel} - iconName="Intel" - label="Invest $TargetID intel" - /> - - ) -} - -type FactionDetailsEntry = { - label: string - value: string | number | undefined - labelSx?: SxProps - valueSx?: SxProps -} - -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 -}