Skip to content

N
Neos
Commit e2056055 authored by chechunchi's avatar chechunchi Committed by Chunchi Che
Browse files
Options

optimize HistoryItem

parent 7c742594
Pipeline #28958 passed with stages
            in 9 minutes and 34 seconds
            Hide whitespace changes
            Inline Side-by-side
            Showing with 110 additions and 51 deletions
            neos-assets/arrow.svg 0 → 100644
            View file @ e2056055
            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
            <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
            <g>
            <g>
            <polygon fill="#6E83B7" points="502,256 302,106 302,186 146,186 146,326 302,326 302,406 "/>
            </g>
            <g>
            <rect x="78" y="186" fill="#6E83B7" width="40" height="140"/>
            </g>
            <g>
            <rect x="10" y="186" fill="#6E83B7" width="40" height="140"/>
            </g>
            </g>
            </svg>
            neos-assets/targeted.svg deleted 100644 → 0
            View file @ 7c742594
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
            <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="SVGRepo_bgCarrier" stroke-width="0"/>
            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
            <g id="SVGRepo_iconCarrier"> <path opacity="0.5" d="M17 9.00195C19.175 9.01406 20.3529 9.11051 21.1213 9.8789C22 10.7576 22 12.1718 22 15.0002V16.0002C22 18.8286 22 20.2429 21.1213 21.1215C20.2426 22.0002 18.8284 22.0002 16 22.0002H8C5.17157 22.0002 3.75736 22.0002 2.87868 21.1215C2 20.2429 2 18.8286 2 16.0002L2 15.0002C2 12.1718 2 10.7576 2.87868 9.87889C3.64706 9.11051 4.82497 9.01406 7 9.00195" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round"/> <path d="M12 2L12 15M12 15L9 11.5M12 15L15 11.5" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g>
            </svg>
            \ No newline at end of file
            src/stores/historyStore.ts
            View file @ e2056055
            import { proxy } from "valtio"; import { proxy } from "valtio";
            import { fetchCard, ygopro } from "@/api"; import { ygopro } from "@/api";
            import { Context } from "@/container"; import { Context } from "@/container";
            import { NeosStore } from "./shared"; import { NeosStore } from "./shared";
            ...@@ -17,7 +17,7 @@ export enum HistoryOp { ...@@ -17,7 +17,7 @@ export enum HistoryOp {
            } }
            export interface History { export interface History {
            card?: string; card: number;
            opponent: boolean; opponent: boolean;
            currentLocation?: ygopro.CardLocation; currentLocation?: ygopro.CardLocation;
            operation: HistoryOp; operation: HistoryOp;
            ...@@ -35,7 +35,7 @@ export class HistoryStore implements NeosStore { ...@@ -35,7 +35,7 @@ export class HistoryStore implements NeosStore {
            ) { ) {
            // TODO: Refinement // TODO: Refinement
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(from.controller), opponent: !context.matStore.isMe(from.controller),
            currentLocation: from, currentLocation: from,
            operation: HistoryOp.MOVE, operation: HistoryOp.MOVE,
            ...@@ -45,7 +45,7 @@ export class HistoryStore implements NeosStore { ...@@ -45,7 +45,7 @@ export class HistoryStore implements NeosStore {
            putEffect(context: Context, card: number, location: ygopro.CardLocation) { putEffect(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(location.controller), opponent: !context.matStore.isMe(location.controller),
            currentLocation: location, currentLocation: location,
            operation: HistoryOp.EFFECT, operation: HistoryOp.EFFECT,
            ...@@ -54,7 +54,7 @@ export class HistoryStore implements NeosStore { ...@@ -54,7 +54,7 @@ export class HistoryStore implements NeosStore {
            putTargeted(context: Context, card: number, location: ygopro.CardLocation) { putTargeted(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(location.controller), opponent: !context.matStore.isMe(location.controller),
            currentLocation: location, currentLocation: location,
            operation: HistoryOp.TARGETED, operation: HistoryOp.TARGETED,
            ...@@ -63,7 +63,7 @@ export class HistoryStore implements NeosStore { ...@@ -63,7 +63,7 @@ export class HistoryStore implements NeosStore {
            putConfirmed(context: Context, card: number, location: ygopro.CardLocation) { putConfirmed(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(location.controller), opponent: !context.matStore.isMe(location.controller),
            currentLocation: location, currentLocation: location,
            operation: HistoryOp.CONFIRMED, operation: HistoryOp.CONFIRMED,
            ...@@ -72,7 +72,7 @@ export class HistoryStore implements NeosStore { ...@@ -72,7 +72,7 @@ export class HistoryStore implements NeosStore {
            putSummon(context: Context, card: number, location: ygopro.CardLocation) { putSummon(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(location.controller), opponent: !context.matStore.isMe(location.controller),
            operation: HistoryOp.SUMMON, operation: HistoryOp.SUMMON,
            }); });
            ...@@ -80,7 +80,7 @@ export class HistoryStore implements NeosStore { ...@@ -80,7 +80,7 @@ export class HistoryStore implements NeosStore {
            putSpSummon(context: Context, card: number, location: ygopro.CardLocation) { putSpSummon(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(location.controller), opponent: !context.matStore.isMe(location.controller),
            operation: HistoryOp.SP_SUMMON, operation: HistoryOp.SP_SUMMON,
            }); });
            ...@@ -88,7 +88,7 @@ export class HistoryStore implements NeosStore { ...@@ -88,7 +88,7 @@ export class HistoryStore implements NeosStore {
            putFlipSummon(context: Context, card: number, location: ygopro.CardLocation) { putFlipSummon(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({ this.historys.push({
            card: fetchCard(card).text.name, card,
            opponent: !context.matStore.isMe(location.controller), opponent: !context.matStore.isMe(location.controller),
            operation: HistoryOp.FLIP_SUMMON, operation: HistoryOp.FLIP_SUMMON,
            }); });
            ......
            src/ui/Duel/Message/ActionHistory/index.module.scss
            View file @ e2056055
            ...@@ -34,23 +34,58 @@ ...@@ -34,23 +34,58 @@
            height: 100%; height: 100%;
            .timeline { .timeline {
            display: flex;
            flex-direction: column;
            margin-top: 1rem; margin-top: 1rem;
            p { gap: 0.5rem;
            .history {
            display: flex;
            font-family: var(--theme-font); font-family: var(--theme-font);
            font-size: 1rem; font-size: 1rem;
            .card { .card-container {
            color: #48faf0; display: flex;
            } flex-direction: row;
            .current-location { align-items: flex-start;
            .card {
            width: 4rem;
            height: auto;
            }
            .location {
            margin-top: 3rem;
            margin-left: 1rem;
            color: #8484ff; color: #8484ff;
            }
            } }
            .op {
            color: yellow; .op-container {
            font-size: 1.2rem; display: flex;
            flex-direction: column;
            margin: 0 0.8rem;
            .op-text {
            display: flex;
            flex: 1;
            align-items: flex-end;
            justify-content: center;
            margin-bottom: 0.2rem;
            color: #48faf0;
            }
            .op-icon {
            display: flex;
            flex: 1;
            width: 3rem;
            height: auto;
            }
            } }
            .target { .target {
            color: #f16b3f; margin-top: 3rem;
            color: #f16b3f;
            } }
            } }
            } }
            ......
            src/ui/Duel/Message/ActionHistory/index.tsx
            View file @ e2056055
            import { RightOutlined } from "@ant-design/icons"; import { RightOutlined } from "@ant-design/icons";
            import { Drawer, Timeline } from "antd"; import { Drawer } from "antd";
            import React from "react"; import React from "react";
            import { proxy, useSnapshot } from "valtio"; import { proxy, useSnapshot } from "valtio";
            import { fetchStrings, Region, ygopro } from "@/api"; import { fetchStrings, Region, ygopro } from "@/api";
            import { useConfig } from "@/config";
            import { History, HistoryOp, historyStore } from "@/stores"; import { History, HistoryOp, historyStore } from "@/stores";
            import { ScrollableArea } from "@/ui/Shared"; import { ScrollableArea, YgoCard } from "@/ui/Shared";
            import styles from "./index.module.scss"; import styles from "./index.module.scss";
            const { assetsPath } = useConfig();
            const defaultStore = { const defaultStore = {
            isOpen: false, isOpen: false,
            }; };
            ...@@ -30,13 +33,11 @@ export const ActionHistory: React.FC = () => { ...@@ -30,13 +33,11 @@ export const ActionHistory: React.FC = () => {
            title="操作历史" // TODO: I18N title="操作历史" // TODO: I18N
            > >
            <ScrollableArea className={styles.container} maxHeight="var(--height)"> <ScrollableArea className={styles.container} maxHeight="var(--height)">
            <Timeline <div className={styles.timeline}>
            className={styles.timeline} {historys.map((history) => (
            items={historys.map((history) => ({ <HistoryItem {...(history as History)} />
            color: history.opponent ? "red" : "blue", ))}
            children: <HistoryItem {...(history as History)} />, </div>
            }))}
            />
            </ScrollableArea> </ScrollableArea>
            </Drawer> </Drawer>
            ); );
            ...@@ -48,22 +49,36 @@ const HistoryItem: React.FC<History> = ({ ...@@ -48,22 +49,36 @@ const HistoryItem: React.FC<History> = ({
            operation, operation,
            target, target,
            }) => ( }) => (
            <p> <div className={styles.history}>
            <span className={styles.card}>{card ?? "未知卡片"}</span> <div className={styles["card-container"]}>
            {currentLocation && ( <YgoCard className={styles.card} code={card} />
            <span className={styles["current-location"]}>{` [${zone2Text( {currentLocation && (
            currentLocation.zone, <div className={styles.location}>{`${zone2Text(
            )}]`}</span> currentLocation.zone,
            )} )}`}</div>
            <span>{" "}</span> )}
            <span className={styles.op}>{Op2Text(operation)}</span> </div>
            {target && ( <div className={styles["op-container"]}>
            <> <div className={styles["op-text"]}>{Op2Text(operation)}</div>
            <span>{" "}</span> {operation === HistoryOp.MOVE ? (
            <span className={styles.target}>{`[${zone2Text(target)}]`}</span> <img src={`${assetsPath}/arrow.svg`} className={styles["op-icon"]} />
            </> ) : operation === HistoryOp.EFFECT ? (
            )} <img src={`${assetsPath}/effect.png`} className={styles["op-icon"]} />
            </p> ) : operation === HistoryOp.TARGETED ? (
            <img src={`${assetsPath}/targeted.png`} className={styles["op-icon"]} />
            ) : operation === HistoryOp.CONFIRMED ? (
            <img
            src={`${assetsPath}/confirmed.png`}
            className={styles["op-icon"]}
            />
            ) : operation === HistoryOp.ATTACK ? (
            <img src={`${assetsPath}/attack.png`} className={styles["op-icon"]} />
            ) : (
            <img src={`${assetsPath}/summon.png`} className={styles["op-icon"]} />
            )}
            </div>
            {target && <div className={styles.target}>{`${zone2Text(target)}`}</div>}
            </div>
            ); );
            function zone2Text(zone: ygopro.CardZone): string { function zone2Text(zone: ygopro.CardZone): string {
            ......
            src/ui/Shared/YgoCard/index.tsx
            View file @ e2056055
            ...@@ -54,7 +54,7 @@ export const YgoCard: React.FC<Props> = (props) => { ...@@ -54,7 +54,7 @@ export const YgoCard: React.FC<Props> = (props) => {
            {/* {cardName} */} {/* {cardName} */}
            {targeted ? ( {targeted ? (
            <div className={styles.targeted}> <div className={styles.targeted}>
            <img src={`${assetsPath}/targeted.svg`} /> <img src={`${assetsPath}/targeted.png`} />
            </div> </div>
            ) : ( ) : (
            <></> <></>
            ......
            Markdown is supported
            0% or
            You are about to add 0 people to the discussion. Proceed with caution.
            Finish editing this message first!
            Please register or to comment