Added stage cutin to quest page

atlasacademy · Dec 1, 2023 · 9e6d8f4 · 9e6d8f4
1 parent b6677da
commit 9e6d8f4
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 32 deletions.
diff --git a/packages/api-connector/src/Schema/Quest.ts b/packages/api-connector/src/Schema/Quest.ts
@@ -7,6 +7,7 @@ import { Item, ItemAmount } from "./Item";
 import { NpcServant } from "./NpcServant";
 import { EnemyDrop, QuestEnemy } from "./QuestEnemy";
 import { Restriction } from "./Restriction";
+import { Skill } from "./Skill";
 import { SupportServant } from "./SupportServant";
 import { Trait } from "./Trait";
 
@@ -128,6 +129,17 @@ export enum StageLimitActType {
     LOSE = "lose",
 }
 
+export interface StageSkill {
+    skill: Skill;
+    appearCount: number;
+}
+
+export interface StageCutin {
+    runs: number;
+    skills: StageSkill[];
+    drops: EnemyDrop[];
+}
+
 export interface Stage {
     wave: number;
     bgm: Bgm;
@@ -138,6 +150,7 @@ export interface Stage {
     turn?: number;
     limitAct?: StageLimitActType;
     waveStartMovies: StageStartMovie[];
+    cutin?: StageCutin;
     enemies: QuestEnemy[];
 }
 

diff --git a/packages/db/src/App.css b/packages/db/src/App.css
@@ -10,10 +10,22 @@
     white-space: nowrap;
 }
 
+.mx-0p5 {
+    margin: 0 0.125em;
+}
+
+.w-25pct {
+    width: 25%;
+}
+
 .w-1px {
     width: 1px;
 }
 
+.align-middle {
+    vertical-align: middle;
+}
+
 .underline {
     text-decoration: underline;
 }
@@ -22,6 +34,14 @@
     flex-direction: row;
 }
 
+.lh-1 {
+    line-height: 1em;
+}
+
+.lh-1p5 {
+    line-height: 1.5em;
+}
+
 .lh-2 {
     line-height: 2em;
 }

diff --git a/packages/db/src/Component/QuestEnemy.tsx b/packages/db/src/Component/QuestEnemy.tsx
@@ -26,6 +26,7 @@ import { SvtClassDescriptor } from "../Descriptor/SvtClassDestriptor";
 import { SvtAttrDescriptor } from "../Descriptor/SvttAttrDestriptor";
 import TraitDescription from "../Descriptor/TraitDescription";
 import { getEnemyCalcString } from "../Helper/CalcString";
+import { numToPct } from "../Helper/NumberHelper";
 import { Renderable, asPercent, mergeElements } from "../Helper/OutputHelper";
 import { OrdinalNumeral } from "../Helper/StringHelper";
 import Manager from "../Setting/Manager";
@@ -45,19 +46,21 @@ export const hashEnemy = (enemy: QuestEnemy.QuestEnemy) => `${enemy.deck}-${enem
 export function renderDoubleRow(content: [RenderableRow, RenderableRow]): Renderable {
     return (
         <tr>
-            <th>{content[0].title}</th>
-            <td>{content[0].content}</td>
-            <th>{content[1].title}</th>
-            <td>{content[1].content}</td>
+            <th className="w-25pct align-middle">{content[0].title}</th>
+            <td className="w-25pct align-middle">{content[0].content}</td>
+            <th className="w-25pct align-middle">{content[1].title}</th>
+            <td className="w-25pct align-middle">{content[1].content}</td>
         </tr>
     );
 }
 
 export function renderSpanningRow(content: RenderableRow): Renderable {
     return (
         <tr>
-            <th>{content.title}</th>
-            <td colSpan={3}>{content.content}</td>
+            <th className="align-middle">{content.title}</th>
+            <td colSpan={3} className="align-middle">
+                {content.content}
+            </td>
         </tr>
     );
 }
@@ -286,9 +289,17 @@ export const QuestEnemySubData = (props: {
 }) => {
     const region = props.region,
         enemy = props.enemy;
-    const traitDescriptions = enemy.traits.map((trait) => (
-        <TraitDescription region={region} trait={trait} overrideTraits={[{ id: enemy.svt.id, name: `Self` }]} />
-    ));
+    const traitDescriptions = enemy.traits
+        .sort((a, b) => a.id - b.id)
+        .map((trait) => (
+            <TraitDescription
+                className="text-nowrap mx-0p5"
+                key={trait.id}
+                region={region}
+                trait={trait}
+                overrideTraits={[{ id: enemy.svt.id, name: `Self` }]}
+            />
+        ));
     const { t } = useTranslation();
     const isSupportDetail = props.supportDetail ?? false;
     return (
@@ -304,7 +315,7 @@ export const QuestEnemySubData = (props: {
                 })}
                 {renderSpanningRow({
                     title: t("Traits"),
-                    content: mergeElements(traitDescriptions, <br />),
+                    content: <>{traitDescriptions}</>,
                 })}
                 {!isSupportDetail &&
                     renderSpanningRow({
@@ -378,9 +389,6 @@ export const QuestEnemySubData = (props: {
     );
 };
 
-const numToPct = (value: number) =>
-    value < 1 ? `${(value * 100).toFixed(2)}%` : `${Math.round(value * 100).toLocaleString()}%`;
-
 export const QuestDropDescriptor = ({
     region,
     drops,
@@ -395,7 +403,7 @@ export const QuestDropDescriptor = ({
     const { t } = useTranslation();
 
     return (
-        <Alert variant="success">
+        <>
             {questHash !== undefined ? (
                 questHash === "average" ? (
                     <div className="mb-3">{t("Average drop rates accross all enemy versions")}</div>
@@ -453,7 +461,7 @@ export const QuestDropDescriptor = ({
                     );
                 })}
             </ul>
-        </Alert>
+        </>
     );
 };
 
@@ -545,7 +553,11 @@ const QuestEnemyTable = (props: {
                 {changeOriginDescription}
             </ul>
 
-            {enemy.drops.length > 0 ? <QuestDropDescriptor region={region} drops={enemy.drops} /> : null}
+            {enemy.drops.length > 0 && (
+                <Alert variant="success">
+                    <QuestDropDescriptor region={region} drops={enemy.drops} />
+                </Alert>
+            )}
 
             <Row className="quest-svt-tables">
                 <Col xs={{ span: 12 }} lg={{ span: 6 }}>

diff --git a/packages/db/src/Component/QuestStage.tsx b/packages/db/src/Component/QuestStage.tsx
@@ -1,19 +1,22 @@
 import { useRef } from "react";
-import { Col, Row } from "react-bootstrap";
+import { Alert, Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { Ai, Quest, Region } from "@atlasacademy/api-connector";
 
 import AiDescriptor from "../Descriptor/AiDescriptor";
 import BgmDescriptor from "../Descriptor/BgmDescriptor";
+import SkillDescriptor from "../Descriptor/SkillDescriptor";
 import { getStageCalcString } from "../Helper/CalcString";
+import { numToPct } from "../Helper/NumberHelper";
 import { mergeElements } from "../Helper/OutputHelper";
+import QuestDrops from "../Page/Quest/QuestDrops";
 import Manager from "../Setting/Manager";
 import CopyToClipboard from "./CopyToClipboard";
 import QuestEnemyTable, { FromToEntry, hashEnemy } from "./QuestEnemy";
 
 const QuestStage = (props: { region: Region; stage: Quest.Stage }) => {
-    const stage = props.stage,
+    const { region, stage } = props,
         { t } = useTranslation();
     const fieldAiDescriptions = stage.fieldAis.map((ai) => (
         <AiDescriptor region={props.region} aiType={Ai.AiType.FIELD} id={ai.id} />
@@ -113,6 +116,28 @@ const QuestStage = (props: { region: Region; stage: Quest.Stage }) => {
                         />
                     </div>
                 )}
+                {stage.cutin !== undefined && (
+                    <Alert variant="success" className="my-3 lh-1p5">
+                        <b>{t("Cut-in random appearance:")}</b>
+                        <ul className="mb-0">
+                            <li>
+                                {t("Skills")}
+                                <ul>
+                                    {stage.cutin.skills.map((skill) => (
+                                        <li key={skill.skill.id}>
+                                            <SkillDescriptor region={region} skill={skill.skill} />:{" "}
+                                            {numToPct(skill.appearCount / (stage.cutin?.runs ?? 1))}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </li>
+                            <li>
+                                {t("Drops")}
+                                <QuestDrops region={region} drops={stage.cutin.drops} />
+                            </li>
+                        </ul>
+                    </Alert>
+                )}
             </div>
 
             {stage.enemies.map((enemy) => (

diff --git a/packages/db/src/Descriptor/TraitDescription.tsx b/packages/db/src/Descriptor/TraitDescription.tsx
@@ -8,6 +8,8 @@ import Api from "../Api";
 import Description from "./Description";
 
 interface IProps {
+    className?: string;
+    style?: React.CSSProperties;
     region: Region;
     trait: Trait.Trait | number;
     disableLink?: boolean;
@@ -106,9 +108,13 @@ class TraitDescription extends React.Component<IProps, IState> {
         const trait = this.state.trait ?? this.state.id;
 
         return this.props.disableLink ? (
-            <span>[{this.getDescription(trait)}]</span>
+            <span className={this.props.className} style={this.props.style}>
+                [{this.getDescription(trait)}]
+            </span>
         ) : (
-            <Link to={this.getLocation()}>[{this.getDescription(trait)}]</Link>
+            <Link to={this.getLocation()} className={this.props.className} style={this.props.style}>
+                [{this.getDescription(trait)}]
+            </Link>
         );
     }
 }

diff --git a/packages/db/src/Helper/NumberHelper.tsx b/packages/db/src/Helper/NumberHelper.tsx
@@ -1 +1,4 @@
 export const sum = (arr: number[]) => arr.reduce((a, b) => a + b, 0);
+
+export const numToPct = (value: number) =>
+    value < 1 ? `${(value * 100).toFixed(2)}%` : `${Math.round(value * 100).toLocaleString()}%`;
diff --git a/packages/db/src/Page/QuestPage.tsx b/packages/db/src/Page/QuestPage.tsx
@@ -185,18 +185,20 @@ class QuestPage extends React.Component<IProps, IState> {
                         </ul>
                     </Alert>
                 ) : null}
-                <QuestDrops
-                    region={this.props.region}
-                    drops={quest.drops}
-                    questHash={
-                        quest.availableEnemyHashes.length > 1
-                            ? this.state.hash === undefined
-                                ? "average"
-                                : currentQuestHash
-                            : undefined
-                    }
-                    questHashAverageGoTo={() => this.setState({ hash: undefined })}
-                />
+                <Alert variant="success">
+                    <QuestDrops
+                        region={this.props.region}
+                        drops={quest.drops}
+                        questHash={
+                            quest.availableEnemyHashes.length > 1
+                                ? this.state.hash === undefined
+                                    ? "average"
+                                    : currentQuestHash
+                                : undefined
+                        }
+                        questHashAverageGoTo={() => this.setState({ hash: undefined })}
+                    />
+                </Alert>
                 {quest.restrictions.length > 0 && (
                     <Alert variant="success">
                         <QuestRestriction region={this.props.region} questRestrictions={quest.restrictions} />