import { Col, Row } from "reactstrap"; import { useTranslation } from "react-i18next"; import { sprintf } from "sprintf-js"; import { LevelAPI } from "src/wwwAPI"; import NoteItems from "src/avatar/NoteItems"; import { _m12, formatText, m0, m1, m2, m3, m4, m5, m6, m7 } from "src/Utility"; const getValueText = ( data: number[], toValue: (value: number) => string, lowestUnit: string, highestUnit: string, ) => { const lowestValue = data[0]; const highestValue = data[1]; let text = ""; if (lowestValue !== -1) { text += sprintf(lowestUnit, toValue(lowestValue)); } text += " "; if (highestValue !== -1) { text += sprintf(highestUnit, toValue(highestValue)); } return text; }; const getDrawing = (mode: number[], drawing: string[]) => { return ( mode && mode.map((i) => ( <Col key={i} className="m-1" xs="auto"> <img src={drawing[i]} className="mode" alt="" /> </Col> )) ); }; export default function WwwLevelData({ wwwLevelData, }: { wwwLevelData: LevelAPI; }) { const { levelNote, stand, point, band, judgments, autoMode, noteSaltMode, audioMultiplier, faintNoteMode, judgmentMode, hitPointsMode, noteMobilityMode, longNoteMode, inputFavorMode, lowestJudgmentConditionMode, } = wwwLevelData; const { t } = useTranslation(); return ( <> <NoteItems levelNote={levelNote} /> {stand && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="stand"> {t("stand")}{" "} {getValueText( stand, formatText, t("textStand") + " 🔺", t("textStand") + " 🔻", )} </span> </Col> </Row> )} {point && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="point"> {t("point")}{" "} {getValueText( point, (value) => (100 * value).toString(), "%s%🔺", "%s%🔻", )} </span> </Col> </Row> )} {band && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="band"> {getValueText( band, (value) => value.toString(), t("textBand") + " 🔺", t("textBand") + " 🔻", )} </span> </Col> </Row> )} {judgments && ( <> {judgments[0] && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="highestJudgment"> Yell!{" "} {getValueText( judgments[0], formatText, t("textCount") + " 🔺", t("textCount") + " 🔻", )} </span> </Col> </Row> )} {judgments[1] && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="higherJudgment"> Yell{" "} {getValueText( judgments[1], formatText, t("textCount") + " 🔺", t("textCount") + " 🔻", )} </span> </Col> </Row> )} {judgments[2] && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="highJudgment"> Cool{" "} {getValueText( judgments[2], formatText, t("textCount") + " 🔺", t("textCount") + " 🔻", )} </span> </Col> </Row> )} {judgments[3] && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="lowJudgment"> Good{" "} {getValueText( judgments[3], formatText, t("textCount") + " 🔺", t("textCount") + " 🔻", )} </span> </Col> </Row> )} {judgments[4] && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="lowerJudgment"> Poor{" "} {getValueText( judgments[4], formatText, t("textCount") + " 🔺", t("textCount") + " 🔻", )} </span> </Col> </Row> )} {judgments[5] && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="lowestJudgment"> Failed{" "} {getValueText( judgments[5], formatText, t("textCount") + " 🔺", t("textCount") + " 🔻", )} </span> </Col> </Row> )} </> )} {audioMultiplier && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span className="audioMultiplier"> {t("audioMultiplier")}{" "} {getValueText( audioMultiplier, (value) => value.toString(), "×%.2f 🔺", "×%.2f 🔻", )} </span> </Col> </Row> )} <Row className="g-0">{getDrawing(autoMode, m0)}</Row> <Row className="g-0">{getDrawing(noteSaltMode, m1)}</Row> <Row className="g-0">{getDrawing(faintNoteMode, m2)}</Row> <Row className="g-0">{getDrawing(judgmentMode, m3)}</Row> <Row className="g-0">{getDrawing(hitPointsMode, m4)}</Row> <Row className="g-0">{getDrawing(noteMobilityMode, m5)}</Row> <Row className="g-0">{getDrawing(longNoteMode, m6)}</Row> <Row className="g-0">{getDrawing(inputFavorMode, m7)}</Row> <Row className="g-0">{getDrawing(lowestJudgmentConditionMode, _m12)}</Row> </> ); }