Skip to content

Commit

Permalink
refactor(webapp): split dev action panels
Browse files Browse the repository at this point in the history
  • Loading branch information
ben196888 committed Jul 1, 2024
1 parent 44f2113 commit 58b8794
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 47 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Box, Stack, TextField } from "@mui/material";
import React from "react";

interface Props {
value: number;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const ContributionValueInputBox: React.FC<Props> = ({ value, onChange }) => (
<Stack direction="row" spacing={2}>
<Box component='label'>Value</Box>
<TextField
type="number"
InputProps={{ inputProps: { min: 0, max: 5 } }}
value={value}
onChange={onChange}
/>
</Stack>
);

export default ContributionValueInputBox;
59 changes: 21 additions & 38 deletions packages/webapp/src/components/DevActions/DevActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ import {
Stack,
Button,
Box,
RadioGroup,
Radio,
FormControlLabel,
TextField,
Tab,
} from '@mui/material';
import { TabContext, TabList, TabPanel } from '@mui/lab';
Expand All @@ -17,6 +13,7 @@ import { AllMoves } from '@/game/moves/type';
import HandProjectCards from './HandProjectCards';
import JobSlots from './JobSlots';
import ProjectBoard from './ProjectBoard';
import ContributionValueInputBox from './ContributionValueInputBox';

const DevActions: React.FC<BoardProps<GameState>> = (props) => {
const { G, playerID, moves: nonTypeMoves, events, ctx } = props;
Expand Down Expand Up @@ -60,30 +57,6 @@ const DevActions: React.FC<BoardProps<GameState>> = (props) => {
const onRefillAndEnd = () => moves.refillAndEnd();
const myCurrentStage = ctx.activePlayers ? ctx.activePlayers[playerID] : ''

const renderActiveProjectJobName = () => (
<Stack direction="row" spacing={2}>
<Box component='label'>Job name</Box>
<RadioGroup onChange={event => setJobName(event.target.value)} value={jobName}>
{
Object.keys(G.table.projectBoard[activeProjectIndex]?.card.requirements ?? []).map((jobName) =>
<FormControlLabel key={`${activeProjectIndex}-${jobName}`} value={jobName} control={<Radio />} label={jobName} />)
}
</RadioGroup>
</Stack>
);

const renderValueInputBox = () => (
<Stack direction="row" spacing={2}>
<Box component='label'>Value</Box>
<TextField
type="number"
InputProps={{ inputProps: { min: 0, max: 5 } }}
value={value}
onChange={event => setValue(parseInt(event.target.value))}
/>
</Stack>
);

return (
<div className='CurrentPlayer'>
{myCurrentStage ? <div>my current stage: {myCurrentStage}</div> : null}
Expand Down Expand Up @@ -118,8 +91,10 @@ const DevActions: React.FC<BoardProps<GameState>> = (props) => {
<Stack direction={['column', 'row']} mt={2}>
<ProjectBoard
projectBoard={G.table.projectBoard}
onChange={event => setActiveProjectIndex(parseInt(event.target.value))}
value={activeProjectIndex}
onProjectSlotChange={event => setActiveProjectIndex(parseInt(event.target.value))}
projectValue={activeProjectIndex}
onJobNameChange={event => setJobName(event.target.value)}
jobNameValue={jobName}
/>
<JobSlots
jobSlots={G.table.jobSlots}
Expand All @@ -133,11 +108,15 @@ const DevActions: React.FC<BoardProps<GameState>> = (props) => {
<Stack direction={['column', 'row']} mt={2}>
<ProjectBoard
projectBoard={G.table.projectBoard}
onChange={event => setActiveProjectIndex(parseInt(event.target.value))}
value={activeProjectIndex}
onProjectSlotChange={event => setActiveProjectIndex(parseInt(event.target.value))}
projectValue={activeProjectIndex}
onJobNameChange={event => setJobName(event.target.value)}
jobNameValue={jobName}
/>
<ContributionValueInputBox
value={value}
onChange={event => setValue(parseInt(event.target.value))}
/>
{renderActiveProjectJobName()}
{renderValueInputBox()}
<Button size='small' onClick={onAddContribution}>add contribution entity</Button>
<Box>current contribution entities: {JSON.stringify(contributions)}</Box>
</Stack>
Expand All @@ -147,11 +126,15 @@ const DevActions: React.FC<BoardProps<GameState>> = (props) => {
<Stack direction={['column', 'row']} mt={2}>
<ProjectBoard
projectBoard={G.table.projectBoard}
onChange={event => setActiveProjectIndex(parseInt(event.target.value))}
value={activeProjectIndex}
onProjectSlotChange={event => setActiveProjectIndex(parseInt(event.target.value))}
projectValue={activeProjectIndex}
onJobNameChange={event => setJobName(event.target.value)}
jobNameValue={jobName}
/>
<ContributionValueInputBox
value={value}
onChange={event => setValue(parseInt(event.target.value))}
/>
{renderActiveProjectJobName()}
{renderValueInputBox()}
<Button size='small' onClick={onAddContribution}>add contribution entity</Button>
<Box>current contribution entities: {JSON.stringify(contributions)}</Box>
</Stack>
Expand Down
25 changes: 22 additions & 3 deletions packages/webapp/src/components/DevActions/HandProjectCards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,32 @@ interface Props {
value: number;
}

const HandProjectCards: React.FC<Props> = ({ projects, onChange, value }) => (
const HandProjectCards: React.FC<Props> = ({ projects: projectCardss, onChange, value }) => (
<Stack direction="row" spacing={2}>
<Box component='label'>Hand project cards</Box>
<RadioGroup onChange={onChange} value={value}>
{
projects.map((project, index) =>
<FormControlLabel key={`${project.name}-${index}`} value={index} control={<Radio />} label={`${project.name} ${JSON.stringify(project.requirements)}`} />)
projectCardss.map((projectCard, index) =>
<>
<FormControlLabel
key={`${projectCard.name}-${index}`}
value={index}
control={<Radio />}
label={projectCard.name}
/>
Job requirements:
{
Object.keys(projectCard.requirements).map(jobName => (
<Box
key={`${projectCard.name}-${jobName}`}
component='label'
>
{jobName}: {projectCard.requirements[jobName]}
</Box>
))
}
</>
)
}
</RadioGroup>
</Stack>
Expand Down
48 changes: 42 additions & 6 deletions packages/webapp/src/components/DevActions/ProjectBoard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,53 @@ import { ProjectBoardState } from "@/game";

interface Props {
projectBoard: ProjectBoardState;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
value: number;
onProjectSlotChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
projectValue: number;
onJobNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
jobNameValue: string;
}

const ProjectBoard: React.FC<Props> = ({ projectBoard, onChange, value }) => (
const ProjectBoard: React.FC<Props> = ({ projectBoard, onProjectSlotChange, projectValue, onJobNameChange, jobNameValue }) => (
<Stack direction="row" spacing={2}>
<Box component='label'>Active project cards</Box>
<RadioGroup onChange={onChange} value={value}>
<RadioGroup onChange={onProjectSlotChange} value={projectValue}>
{
projectBoard.map(activeProject => activeProject.card).map((project, index) =>
<FormControlLabel key={`${project.name}-${index}`} value={index} control={<Radio />} label={`${project.name} ${JSON.stringify(project.requirements)}`} />)
projectBoard.map(project => project.card).map((projectCard, index) =>
<>
<FormControlLabel
key={`${projectCard.name}-${index}`}
value={index}
control={<Radio />}
label={projectCard.name}
/>
Job requirements:
{
(projectValue === index) && (
<RadioGroup onChange={onJobNameChange} value={jobNameValue}>
{
Object.keys(projectCard.requirements).map((jobName) =>
<FormControlLabel
key={`${index}-${jobName}`}
value={jobName}
control={<Radio />}
label={jobName}
/>
)
}
</RadioGroup>
)
||
Object.keys(projectCard.requirements).map(jobName => (
<Box
key={`${projectCard.name}-${jobName}`}
component='label'
>
{jobName}: {projectCard.requirements[jobName]}
</Box>
))
}
</>
)
}
</RadioGroup>
</Stack>
Expand Down

0 comments on commit 58b8794

Please sign in to comment.