61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { doesExist } from '@apextoaster/js-utils';
|
|
import { Alert, Button, Card, CardContent, Stack, TextField, Typography } from '@mui/material';
|
|
import React, { useState } from 'react';
|
|
import { useStore } from 'zustand';
|
|
import { store, StoreState } from './store';
|
|
|
|
export interface PlayerPanelProps {
|
|
sendInput: (input: string) => void;
|
|
}
|
|
|
|
export function playerStateSelector(s: StoreState) {
|
|
return {
|
|
character: s.character,
|
|
activeTurn: s.activeTurn,
|
|
};
|
|
}
|
|
|
|
export function PlayerPanel(props: PlayerPanelProps) {
|
|
const state = useStore(store, playerStateSelector);
|
|
const { character, activeTurn } = state;
|
|
const { sendInput } = props;
|
|
const [input, setInput] = useState<string>('');
|
|
|
|
if (doesExist(character)) {
|
|
return <Card style={{ minHeight: '6vh', overflow: 'auto' }}>
|
|
<CardContent>
|
|
<Stack direction="column" spacing={2}>
|
|
{activeTurn && <Alert severity="warning">It's your turn!</Alert>}
|
|
<Typography variant="h6">Playing as: {character.name}</Typography>
|
|
<Typography variant="body1">{character.backstory}</Typography>
|
|
<Stack direction="row" spacing={2}>
|
|
<TextField
|
|
fullWidth
|
|
label="Input"
|
|
variant="outlined"
|
|
value={input}
|
|
onChange={(event) => setInput(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
sendInput(input);
|
|
setInput('');
|
|
}
|
|
}}
|
|
/>
|
|
<Button variant="contained" onClick={() => {
|
|
sendInput(input);
|
|
setInput('');
|
|
}}>Send</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>;
|
|
}
|
|
|
|
return <Card style={{ minHeight: '6vh', overflow: 'auto' }}>
|
|
<CardContent>
|
|
<Typography variant="h6">No player character</Typography>
|
|
</CardContent>
|
|
</Card>;
|
|
}
|