41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { Maybe } from '@apextoaster/js-utils';
|
||
|
|
import { Alert, Button, Card, CardContent, Stack, TextField, Typography } from '@mui/material';
|
||
|
|
import { Actor, SetDetails } from './world.js';
|
||
|
|
|
||
|
|
export interface PlayerPanelProps {
|
||
|
|
actor: Maybe<Actor>;
|
||
|
|
activeTurn: boolean;
|
||
|
|
setDetails: SetDetails;
|
||
|
|
sendInput: (input: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PlayerPanel(props: PlayerPanelProps) {
|
||
|
|
const { actor, activeTurn, sendInput } = props;
|
||
|
|
const [input, setInput] = useState<string>('');
|
||
|
|
|
||
|
|
// eslint-disable-next-line no-restricted-syntax
|
||
|
|
if (!actor) {
|
||
|
|
return <Card>
|
||
|
|
<CardContent>
|
||
|
|
<Typography variant="h6">No player character</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return <Card>
|
||
|
|
<CardContent>
|
||
|
|
{activeTurn && <Alert severity="warning">It's your turn!</Alert>}
|
||
|
|
<Typography variant="h6">Playing as: {actor.name}</Typography>
|
||
|
|
<Typography variant="body1">{actor.backstory}</Typography>
|
||
|
|
<Stack direction="row" spacing={2}>
|
||
|
|
<TextField label="Input" variant="outlined" fullWidth value={input} onChange={(event) => setInput(event.target.value)} />
|
||
|
|
<Button variant="contained" onClick={() => {
|
||
|
|
setInput('');
|
||
|
|
sendInput(input);
|
||
|
|
}}>Send</Button>
|
||
|
|
</Stack>
|
||
|
|
</CardContent>
|
||
|
|
</Card>;
|
||
|
|
}
|