import { useMemo } from "react"; import { Col, Row } from "reactstrap"; import { sprintf } from "sprintf-js"; import { useTranslation } from "react-i18next"; import { useTo } from "taehui-ts/fe-utility"; import { GetCommentAPI } from "src/wwwAPI"; import { formatText, getHitPointsClass, getQuitStatusValue, toDate, } from "src/Utility"; import AvatarDrawing from "src/AvatarDrawing"; import AvatarTitle from "src/AvatarTitle"; export default function CommentItem({ date, avatarID, avatarName, stand, band, point, isP, commentary, isTargetAvatar, judgmentMode, hitPointsMode, isPaused, }: GetCommentAPI["comments"][number]) { const { quit, quitCss } = useMemo( () => getQuitStatusValue(point, stand), [point, stand], ); const { t } = useTranslation(); const to = useTo(); return ( <Row onClick={() => { to(`/qwilight/avatar/${encodeURIComponent("#")}${avatarID}`); }} className={`g-0 route ${isTargetAvatar ? "target" : ""}`} > <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="m-1" xs="auto"> <span className={quitCss}>{quit}</span> {isP && ( <> <br /> <span>FULL</span> </> )} </Col> <Col className="m-1" xs="auto"> <AvatarTitle avatarID={avatarID} /> <span className="avatar">{avatarName}</span>{" "} <span className="date">{toDate(date)}</span> <br /> <span className={getHitPointsClass(hitPointsMode)}> {sprintf(t("textStand"), formatText(stand))} </span>{" "} <span className={(() => { switch (judgmentMode) { case 0: return "level2"; case 2: return "level4"; case 3: return "level1"; case 5: return "level5"; default: return "point"; } })()} > {(100 * point).toFixed(2)}% </span>{" "} <span className="band">{sprintf(t("textBand"), band.toString())}</span> {isPaused && " ⏸️"} <br /> {commentary && <span>💬 {commentary}</span>} </Col> </Row> ); }