76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
import * as React from 'react'
|
|
|
|
export interface PJCreationMenuProps {
|
|
error: string | null
|
|
setSelectedPJ: (set: string | null) => void
|
|
setUserWantsToCreatePJ: (set: boolean) => void
|
|
setError: (set: string | null) => void
|
|
}
|
|
|
|
export interface Race {
|
|
identifier: string;
|
|
name_selection: string;
|
|
description: string;
|
|
}
|
|
export interface Races {
|
|
[id: string]: Race
|
|
}
|
|
|
|
export default function PJCreationMenu (props: PJCreationMenuProps): JSX.Element {
|
|
const longNameInputRef = React.useRef<HTMLInputElement>(null)
|
|
const shortNameInputRef = React.useRef<HTMLInputElement>(null)
|
|
const nickInputRef = React.useRef<HTMLInputElement>(null)
|
|
const raceSelectRef = React.useRef<HTMLSelectElement>(null)
|
|
const [playableRaces, setPlayableRaces] = React.useState<Races>({})
|
|
React.useEffect(() => {
|
|
fetch('/races/playable', {
|
|
method: 'GET',
|
|
mode: 'same-origin',
|
|
cache: 'no-cache'
|
|
}).then(async (response) => {
|
|
const data = await response.json()
|
|
setPlayableRaces(data)
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
props.setError('Imposible conectar al servidor para recibir las razas.')
|
|
})
|
|
})
|
|
return (
|
|
<>
|
|
<div className="login-container">
|
|
<div className="login-contained">
|
|
<h1>Crea tu personaje.</h1>
|
|
{(props.error !== null
|
|
? (<p style={{ background: 'red' }}>{props.error}</p>)
|
|
: (<></>)
|
|
)}
|
|
<div className="login-form">
|
|
<label>Nombre largo. (Se usará en la historia en situaciones formales)</label>
|
|
<input ref={longNameInputRef} type="text"/>
|
|
<label>Nombre corto. (Se usará de forma coloquial)</label>
|
|
<input ref={shortNameInputRef} type="text"/>
|
|
<label>Apodo. (Se usará en las conversaciones más distendidas)</label>
|
|
<input ref={nickInputRef} type="text"/>
|
|
<label>Raza. (Determina tu localización inicial y tus estadísticas)</label>
|
|
<select ref={raceSelectRef}>
|
|
{
|
|
Object.keys(playableRaces)
|
|
.map(
|
|
(item, i) => {
|
|
return <option key={i} value={playableRaces[item].identifier}>
|
|
{`${playableRaces[item].name_selection} (${playableRaces[item].description})`}
|
|
</option>
|
|
}
|
|
)
|
|
}
|
|
</select>
|
|
<div className="width-max-content align-self-end">
|
|
<button>Crear Personaje</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|