You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.2 KiB
105 lines
3.2 KiB
import React, {ChangeEvent, useCallback, useMemo, useState} from 'react';
|
|
import './App.css';
|
|
import {Col, Container, Form, InputGroup, Row,} from "react-bootstrap";
|
|
import {Character, CharacterStatus, SPType} from "./CharacterStatus";
|
|
|
|
function App() {
|
|
const [maxHp, _setMaxHp] = useState(1)
|
|
const [hp, _setHp] = useState(1)
|
|
const setHp = useCallback(function (v: number) {
|
|
v = Math.floor(v)
|
|
if (Number.isNaN(v) || v < 0 || v > maxHp || v === hp) {
|
|
return
|
|
}
|
|
_setHp(v)
|
|
}, [hp, maxHp])
|
|
const setHpMax = useCallback(function (v: number) {
|
|
v = Math.floor(v)
|
|
if (Number.isNaN(v) || v < 0 || v > 9999 || v === maxHp) {
|
|
return
|
|
}
|
|
if (v < hp) {
|
|
setHp(v)
|
|
}
|
|
_setMaxHp(v)
|
|
}, [hp, maxHp, setHp])
|
|
const onHpChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => setHp(parseInt(e.target.value)), [setHp])
|
|
const onMaxHpChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => setHpMax(parseInt(e.target.value)), [setHpMax])
|
|
const [maxMp, _setMaxMp] = useState(6)
|
|
const [mp, _setMp] = useState(6)
|
|
const setMp = useCallback(function (v: number) {
|
|
v = Math.floor(v)
|
|
if (Number.isNaN(v) || v < 0 || v > maxMp || v === mp) {
|
|
return
|
|
}
|
|
_setMp(v)
|
|
}, [mp, maxMp])
|
|
const setMpMax = useCallback(function (v: number) {
|
|
v = Math.floor(v)
|
|
if (Number.isNaN(v) || v < 0 || v > 9999 || v === maxMp) {
|
|
return
|
|
}
|
|
if (v < mp) {
|
|
setMp(v)
|
|
}
|
|
_setMaxMp(v)
|
|
}, [mp, maxMp, setMp])
|
|
const onMpChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => setMp(parseInt(e.target.value)), [setMp])
|
|
const onMaxMpChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => setMpMax(parseInt(e.target.value)), [setMpMax])
|
|
|
|
const character = useMemo<Character>(() => ({
|
|
name: "Test",
|
|
level: 50,
|
|
hp: 40,
|
|
maxHp: 50,
|
|
mp: 40,
|
|
maxMp: 50,
|
|
ip: mp,
|
|
maxIp: maxMp,
|
|
sp: 1,
|
|
spType: SPType.UltimaPoints,
|
|
turnsLeft: hp,
|
|
turnsTotal: maxHp,
|
|
}), [hp, maxHp, mp, maxMp])
|
|
return (
|
|
<Container fluid>
|
|
<Row>
|
|
<Col>
|
|
<InputGroup>
|
|
<InputGroup.Text>Max HP</InputGroup.Text>
|
|
<Form.Control type="numeric" max="9999" min="0" step="1" value={maxHp} onChange={onMaxHpChange} />
|
|
</InputGroup>
|
|
</Col>
|
|
<Col>
|
|
<InputGroup>
|
|
<InputGroup.Text>Current HP</InputGroup.Text>
|
|
<Form.Control type="numeric" max={maxHp} min="0" step="1" value={hp} onChange={onHpChange} />
|
|
</InputGroup>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col>
|
|
<InputGroup>
|
|
<InputGroup.Text>Max MP</InputGroup.Text>
|
|
<Form.Control type="numeric" max="9999" min="0" step="1" value={maxMp} onChange={onMaxMpChange} />
|
|
</InputGroup>
|
|
</Col>
|
|
<Col>
|
|
<InputGroup>
|
|
<InputGroup.Text>Current MP</InputGroup.Text>
|
|
<Form.Control type="numeric" max={maxMp} min="0" step="1" value={mp} onChange={onMpChange} />
|
|
</InputGroup>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<CharacterStatus character={character} />
|
|
</Row>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|