2024-05-05 18:54:39 +00:00
|
|
|
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) {
|
2024-05-06 01:17:00 +00:00
|
|
|
return <Card style={{ minHeight: '6vh', overflow: 'auto' }}>
|
2024-05-05 18:54:39 +00:00
|
|
|
<CardContent>
|
|
|
|
<Typography variant="h6">No player character</Typography>
|
|
|
|
</CardContent>
|
|
|
|
</Card>;
|
|
|
|
}
|
|
|
|
|
2024-05-06 01:17:00 +00:00
|
|
|
return <Card style={{ minHeight: '6vh', overflow: 'auto' }}>
|
2024-05-05 18:54:39 +00:00
|
|
|
<CardContent>
|
2024-05-05 19:11:41 +00:00
|
|
|
<Stack direction="column" spacing={2}>
|
|
|
|
{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}>
|
2024-05-06 01:17:00 +00:00
|
|
|
<TextField
|
|
|
|
fullWidth
|
|
|
|
label="Input"
|
|
|
|
variant="outlined"
|
|
|
|
value={input}
|
|
|
|
onChange={(event) => setInput(event.target.value)}
|
|
|
|
onKeyDown={(event) => {
|
|
|
|
if (event.key === 'Enter') {
|
|
|
|
sendInput(input);
|
|
|
|
setInput('');
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
2024-05-05 19:11:41 +00:00
|
|
|
<Button variant="contained" onClick={() => {
|
|
|
|
sendInput(input);
|
2024-05-06 01:17:00 +00:00
|
|
|
setInput('');
|
2024-05-05 19:11:41 +00:00
|
|
|
}}>Send</Button>
|
|
|
|
</Stack>
|
2024-05-05 18:54:39 +00:00
|
|
|
</Stack>
|
|
|
|
</CardContent>
|
|
|
|
</Card>;
|
|
|
|
}
|