import { useEffect } from "react"; import { useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { observer } from "mobx-react-lite"; import { sprintf } from "sprintf-js"; import { Input, Button, Row, Col, Progress, ListGroup, ListGroupItem, } from "reactstrap"; import { useTo } from "taehui-ts/fe-utility"; import { useAvatarStore, useSiteStore } from "src/Stores"; import DateView from "src/avatar/DateView"; import Favorites from "src/avatar/Favorites"; import Levels from "src/avatar/Levels"; import Lasts from "src/avatar/Lasts"; import IntroView from "src/avatar/IntroView"; import { formatText, getDefaultAvatarID } from "src/Utility"; import { wwwAPI } from "src/Www"; import AvatarDrawing from "src/AvatarDrawing"; import QuitStatusValues from "src/avatar/QuitValues"; import AvatarTitle from "src/AvatarTitle"; import { AvatarLoading } from "src/Loading"; import scss from "src/avatar/AvatarView.module.scss"; export default observer(() => { const { wantAvatars, input, setInput, avatarID, avatarName, totalCount, totalLength, highestCount, date, avatarLevels, avatarAbility5K, avatarAbility5KClass, avatarAbility5KPlace, avatarAbility5KCount, avatarAbility7K, avatarAbility7KClass, avatarAbility7KPlace, avatarAbility7KCount, avatarAbility9K, avatarAbility9KClass, avatarAbility9KPlace, avatarAbility9KCount, isLoading, getAvatar, } = useAvatarStore(); const { siteAvatarID, isSignedIn, setSignInOpened } = useSiteStore(); const to = useTo(); const { wantAvatarName } = useParams<{ wantAvatarName: string }>(); const { t } = useTranslation(); useEffect(() => { setInput(wantAvatarName ?? ""); }, [wantAvatarName, setInput]); useEffect(() => { if (wantAvatarName?.startsWith("#")) { getAvatar(t, { avatarID: wantAvatarName.substring(wantAvatarName.indexOf("#") + 1), }); } else { getAvatar(t, { avatarName: wantAvatarName }); } }, [getAvatar, t, wantAvatarName]); const onWant = () => { to(`/qwilight/avatar/${input}`); }; return ( <> <Row className="g-0"> <Col className="m-1" xs="auto"> <Button color="info" onClick={() => { if (isSignedIn) { to( `/qwilight/avatar/${encodeURIComponent( "#", )}${getDefaultAvatarID(siteAvatarID)}`, ); } else { setSignInOpened(true); } }} > {t("onWantMe")} </Button> </Col> <Col className="m-1"> <Input type="search" value={input} onChange={({ target: { value } }) => { setInput(value); }} onKeyDown={({ key }) => { if (key === "Enter") { onWant(); } }} placeholder={t("wantAvatarAssist")} /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={onWant}> {t("onWant")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={() => { to("/qwilight/avatar"); }} > {t("onClose")} </Button> </Col> </Row> {isLoading ? ( <AvatarLoading /> ) : ( <> {wantAvatars && ( <ListGroup> {wantAvatars.map(({ avatarID, avatarName, avatarIntro }) => { return ( <ListGroupItem> <Row className="g-0 route" onClick={() => { to( `/qwilight/avatar/${encodeURIComponent( "#", )}${avatarID}`, ); }} > <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="m-1" xs="auto"> <AvatarTitle avatarID={avatarID} />{" "} <span> {avatarName} ({avatarID}) </span> <br /> <span className="avatarIntro">{avatarIntro}</span> </Col> </Row> </ListGroupItem> ); })} </ListGroup> )} {avatarID && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="m-1" xs="auto"> <AvatarTitle avatarID={avatarID} />{" "} <span> {avatarName} ({avatarID}) </span> <br /> <span>{sprintf(t("totalCountText"), totalCount)}</span> <br /> <span>{totalLength}</span> <br /> <span>{sprintf(t("highestCountText"), highestCount)}</span> <br /> <span>{sprintf(t("avatarDate"), date)}</span> <br /> <span>LV. {avatarLevels[0]}</span> <Progress value={(100 * avatarLevels[1]) / avatarLevels[2]} /> <br /> </Col> <Col className="m-1" xs="auto"> <img className={scss.abilityClass} alt="" src={`${wwwAPI}/drawing?abilityClass5K=${ avatarAbility5KClass < 0 ? avatarAbility5KClass : 100 * avatarAbility5KClass }`} /> {avatarAbility5KPlace > 0 && ( <> <br /> <span className="avatarPlace"> #{formatText(avatarAbility5KPlace)} </span> <span>/{formatText(avatarAbility5KCount)}</span> <br /> <span>{formatText(avatarAbility5K)} Point</span> </> )} </Col> <Col className="m-1" xs="auto"> <img className={scss.abilityClass} alt="" src={`${wwwAPI}/drawing?abilityClass7K=${ avatarAbility7KClass < 0 ? avatarAbility7KClass : 100 * avatarAbility7KClass }`} /> {avatarAbility7KPlace > 0 && ( <> <br /> <span className="avatarPlace"> #{formatText(avatarAbility7KPlace)} </span> <span>/{formatText(avatarAbility7KCount)}</span> <br /> <span>{formatText(avatarAbility7K)} Point</span> </> )} </Col> <Col className="m-1" xs="auto"> <img className={scss.abilityClass} alt="" src={`${wwwAPI}/drawing?abilityClass9K=${ avatarAbility9KClass < 0 ? avatarAbility9KClass : 100 * avatarAbility9KClass }`} /> {avatarAbility9KPlace > 0 && ( <> <br /> <span className="avatarPlace"> #{formatText(avatarAbility9KPlace)} </span> <span>/{formatText(avatarAbility9KCount)}</span> <br /> <span>{formatText(avatarAbility9K)} Point</span> </> )} </Col> <Col className="m-1" xs="auto"> <IntroView /> </Col> <Col className="m-1" xs="auto"> <DateView /> </Col> <Col className="m-1" xs="auto"> <QuitStatusValues /> </Col> <Col className="m-1" xs="auto"> <Favorites /> </Col> <Col className="m-1" xs="auto"> <Lasts /> </Col> <Col className="m-1" xs="auto"> <Levels /> </Col> </Row> )} </> )} </> ); });