47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { ErrorMessage, Field, Form, Formik } from 'formik';
|
|
import { Dispatch, useState } from 'react';
|
|
import sample from 'lodash/sample'
|
|
|
|
const namePlaceholders = [
|
|
'Alexander the Great',
|
|
'Genghis Khan',
|
|
'Boudicca',
|
|
'Cleopatra',
|
|
'Alaric the Visigoth',
|
|
'Cyrus the Great',
|
|
'Augustus',
|
|
'Hannibal',
|
|
'Tutankhamen',
|
|
]
|
|
|
|
export default function UserSelector({ users, user, selectUser, removeUser, locked }: {
|
|
users: string[], user?: string, selectUser: Dispatch<string | undefined>, removeUser: () => void, locked: boolean
|
|
}) {
|
|
const [namePlaceholder] = useState(() => sample(namePlaceholders))
|
|
return <div>
|
|
{user
|
|
? <>Playing as {user} <button onClick={() => selectUser(undefined)}>Change</button> <button onClick={removeUser} disabled={locked}>Remove</button></>
|
|
: <Formik
|
|
initialValues={{ newUser: '' }}
|
|
validate={values => {
|
|
const errors: Partial<typeof values> = {}
|
|
if (values.newUser.length === 0) {
|
|
errors.newUser = 'Name cannot be blank.'
|
|
}
|
|
return errors
|
|
}}
|
|
onSubmit={(values) => {
|
|
selectUser(values.newUser)
|
|
}}
|
|
>{() => <Form>
|
|
<button type="submit">Play as</button>
|
|
{' '}
|
|
<Field type="text" name="newUser" placeholder={namePlaceholder} />
|
|
{' '}
|
|
<ErrorMessage name="newUser" />
|
|
</Form>}
|
|
</Formik>
|
|
}
|
|
</div>
|
|
}
|