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 { fetchCard, ygopro } from "@/api";
            import { ygopro } from "@/api";
            import { Context } from "@/container";
            import { NeosStore } from "./shared";
            ......@@ -17,7 +17,7 @@ export enum HistoryOp {
            }
            export interface History {
            card?: string;
            card: number;
            opponent: boolean;
            currentLocation?: ygopro.CardLocation;
            operation: HistoryOp;
            ......@@ -35,7 +35,7 @@ export class HistoryStore implements NeosStore {
            ) {
            // TODO: Refinement
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(from.controller),
            currentLocation: from,
            operation: HistoryOp.MOVE,
            ......@@ -45,7 +45,7 @@ export class HistoryStore implements NeosStore {
            putEffect(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(location.controller),
            currentLocation: location,
            operation: HistoryOp.EFFECT,
            ......@@ -54,7 +54,7 @@ export class HistoryStore implements NeosStore {
            putTargeted(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(location.controller),
            currentLocation: location,
            operation: HistoryOp.TARGETED,
            ......@@ -63,7 +63,7 @@ export class HistoryStore implements NeosStore {
            putConfirmed(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(location.controller),
            currentLocation: location,
            operation: HistoryOp.CONFIRMED,
            ......@@ -72,7 +72,7 @@ export class HistoryStore implements NeosStore {
            putSummon(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(location.controller),
            operation: HistoryOp.SUMMON,
            });
            ......@@ -80,7 +80,7 @@ export class HistoryStore implements NeosStore {
            putSpSummon(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(location.controller),
            operation: HistoryOp.SP_SUMMON,
            });
            ......@@ -88,7 +88,7 @@ export class HistoryStore implements NeosStore {
            putFlipSummon(context: Context, card: number, location: ygopro.CardLocation) {
            this.historys.push({
            card: fetchCard(card).text.name,
            card,
            opponent: !context.matStore.isMe(location.controller),
            operation: HistoryOp.FLIP_SUMMON,
            });
            ......
            src/ui/Duel/Message/ActionHistory/index.module.scss
            View file @ e2056055
            ......@@ -34,23 +34,58 @@
            height: 100%;
            .timeline {
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
            p {
            gap: 0.5rem;
            .history {
            display: flex;
            font-family: var(--theme-font);
            font-size: 1rem;
            .card {
            color: #48faf0;
            }
            .current-location {
            .card-container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            .card {
            width: 4rem;
            height: auto;
            }
            .location {
            margin-top: 3rem;
            margin-left: 1rem;
            color: #8484ff;
            }
            }
            .op {
            color: yellow;
            font-size: 1.2rem;
            .op-container {
            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 {
            color: #f16b3f;
            margin-top: 3rem;
            color: #f16b3f;
            }
            }
            }
            ......
            src/ui/Duel/Message/ActionHistory/index.tsx
            View file @ e2056055
            import { RightOutlined } from "@ant-design/icons";
            import { Drawer, Timeline } from "antd";
            import { Drawer } from "antd";
            import React from "react";
            import { proxy, useSnapshot } from "valtio";
            import { fetchStrings, Region, ygopro } from "@/api";
            import { useConfig } from "@/config";
            import { History, HistoryOp, historyStore } from "@/stores";
            import { ScrollableArea } from "@/ui/Shared";
            import { ScrollableArea, YgoCard } from "@/ui/Shared";
            import styles from "./index.module.scss";
            const { assetsPath } = useConfig();
            const defaultStore = {
            isOpen: false,
            };
            ......@@ -30,13 +33,11 @@ export const ActionHistory: React.FC = () => {
            title="操作历史" // TODO: I18N
            >
            <ScrollableArea className={styles.container} maxHeight="var(--height)">
            <Timeline
            className={styles.timeline}
            items={historys.map((history) => ({
            color: history.opponent ? "red" : "blue",
            children: <HistoryItem {...(history as History)} />,
            }))}
            />
            <div className={styles.timeline}>
            {historys.map((history) => (
            <HistoryItem {...(history as History)} />
            ))}
            </div>
            </ScrollableArea>
            </Drawer>
            );
            ......@@ -48,22 +49,36 @@ const HistoryItem: React.FC<History> = ({
            operation,
            target,
            }) => (
            <p>
            <span className={styles.card}>{card ?? "未知卡片"}</span>
            {currentLocation && (
            <span className={styles["current-location"]}>{` [${zone2Text(
            currentLocation.zone,
            )}]`}</span>
            )}
            <span>{" "}</span>
            <span className={styles.op}>{Op2Text(operation)}</span>
            {target && (
            <>
            <span>{" "}</span>
            <span className={styles.target}>{`[${zone2Text(target)}]`}</span>
            </>
            )}
            </p>
            <div className={styles.history}>
            <div className={styles["card-container"]}>
            <YgoCard className={styles.card} code={card} />
            {currentLocation && (
            <div className={styles.location}>{`${zone2Text(
            currentLocation.zone,
            )}`}</div>
            )}
            </div>
            <div className={styles["op-container"]}>
            <div className={styles["op-text"]}>{Op2Text(operation)}</div>
            {operation === HistoryOp.MOVE ? (
            <img src={`${assetsPath}/arrow.svg`} className={styles["op-icon"]} />
            ) : operation === HistoryOp.EFFECT ? (
            <img src={`${assetsPath}/effect.png`} className={styles["op-icon"]} />
            ) : 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 {
            ......
            src/ui/Shared/YgoCard/index.tsx
            View file @ e2056055
            ......@@ -54,7 +54,7 @@ export const YgoCard: React.FC<Props> = (props) => {
            {/* {cardName} */}
            {targeted ? (
            <div className={styles.targeted}>
            <img src={`${assetsPath}/targeted.svg`} />
            <img src={`${assetsPath}/targeted.png`} />
            </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