import w0 from "@/assets/w0.png"; import w1 from "@/assets/w1.png"; import w2 from "@/assets/w2.png"; import w4 from "@/assets/w4.png"; import w5 from "@/assets/w5.png"; import w6 from "@/assets/w6.png"; import w7 from "@/assets/w7.png"; import AvatarDrawing from "@/AvatarDrawing"; import AvatarTitle from "@/AvatarTitle"; import { formatText, getHitPointsClass, getQuitStatusValue, toDate, } from "@/Utility"; import { GetCommentAPI } from "@/wwwAPI"; import { useTranslations } from "next-intl"; import Image from "next/image"; import { useMemo } from "react"; import { Col, Row } from "reactstrap"; import { useTo } from "taehui-ts/fe-utility"; const ws = [w0, w1, w2, "", w4, w5, w6, w7]; export default function CommentItem({ date, avatarID, avatarName, stand, band, point, isP, commentary, isTargetAvatar, judgmentMode, hitPointsMode, isPaused, handled, }: GetCommentAPI["comments"][number]) { const { quit, quitCss } = useMemo( () => getQuitStatusValue(point, stand), [point, stand], ); const to = useTo(); const t = useTranslations(); return ( <Row onClick={() => { to(`/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"> <Image src={ws[handled]} width={10} height={60} alt="" /> </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)}> {t("textStand", { value: 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">{t("textBand", { value: band })}</span> {isPaused && " ⏸️"} <br /> {commentary && <span>💬 {commentary}</span>} </Col> </Row> ); }