init

src/pages/HomePage/Sign/Sign.module.less

@@ -17,8 +17,8 @@
     font-family: "zzgfyht";
     color: #68152b;
     position: absolute;
-    left: 76px;
-    top: 38px;
+    left: 86px;
+    top: 14px;
 
     span {
       font-size: 54px;

src/pages/HomePage/Top/Game.ts

 import { AnimatedSprite, Assets, Container, PointData, Sprite, Ticker } from "pixi.js";
 import 'pixi.js/math-extras';
 import { prefixInteger } from "@/utils/utils.ts";
+import { Base } from "@/pages/HomePage/Top/base/Base.ts";
+import { observer, reactor } from "@/pages/HomePage/Top/mobx/decorators.ts";
+import store from "@/store/store.ts";
+import { GifSprite } from "pixi.js/gif";
 
-export class Game extends Container {
-
-  constructor() {
-    super();
-    this.initUI();
-  }
+@observer
+export class Game extends Base {
 
   fullAni: AnimatedSprite;
-  dropAni: AnimatedSprite;
+  dropAni: GifSprite;
 
-  initUI() {
+  onLoad() {
     const bg = this.addChild(new Sprite(Assets.get("招财猫_底.png")));
     bg.position.set(168, 332);
 
@@ -27,17 +27,11 @@ export class Game extends Container {
     fullAni.loop = false;
     fullAni.play();
 
-    const dropTextures = new Array(300).fill(0).map((_, i) => {
-      return Assets.get(`撒金币/撒金币_${prefixInteger(i, 5)}.png`);
-    });
-    const dropAni = this.dropAni = this.addChild(new AnimatedSprite(dropTextures));
-    dropAni.scale.set(0.66, 0.66);
+    const dropAni = this.dropAni = this.addChild(new GifSprite({ source: Assets.get("撒金币.gif") }));
     dropAni.anchor.set(0.5);
     dropAni.position.set(375, 339);
     dropAni.loop = true;
     dropAni.play();
-    // this.dropAni.visible = false;
-
 
     const top = this.addChild(new Sprite(Assets.get("招财猫_叠.png")));
     top.position.set(168, 332);
@@ -54,10 +48,19 @@ export class Game extends Container {
 
   playTo(progress: number) {
     progress = Math.min(Math.max(progress, 0), 1);
+  }
 
+  @reactor(() => store.indexData.currentStoreNum)
+  onStoreNumChange(currentStoreNum: number) {
+    console.log("currentStoreNum", currentStoreNum)
+  }
 
+  @reactor(() => store.indexData.storeLimitNum)
+  onStoreLimitChange(storeLimitNum: number) {
+    console.log("storeLimitNum", storeLimitNum)
   }
 
+
   onPointerDown(e: any) {
     console.log(e)
   }
@@ -70,7 +73,6 @@ export class Game extends Container {
     const dt = time.deltaMS / 1000;
   }
 
-  destroy() {
-    super.destroy();
+  onDestroy() {
   }
 }

src/pages/HomePage/Top/Helper.ts

@@ -31,10 +31,14 @@ export async function initBundle(): Promise<void> {
 
   console.time("initBundle");
   await Assets.init({
+    // defaultSearchParams: {
+    //   "x-oss-process": "image/format,webp"
+    // },
     manifest: manifest,
     skipDetections: true,
     preferences: {
-      preferWorkers: false,
+      // preferWorkers: false,
+      // preferCreateImageBitmap: true,
     }
   });
   Assets.backgroundLoadBundle(["Game"]);

src/pages/HomePage/Top/Top.tsx

@@ -29,6 +29,13 @@ class Top extends React.Component<any, any> {
     await this.initStage();
   }
 
+  componentWillUnmount() {
+    Tween.removeAllTweens();
+    this.app.ticker.remove(this.onUpdate);
+    this.game.removeFromParent();
+    this.game.destroy();
+  }
+
   async initStage() {
 
     // if (!gameCanvas) {
@@ -79,11 +86,11 @@ class Top extends React.Component<any, any> {
   };
 
   render() {
-    const {} = store.indexData
+    const {currentStoreNum, storeLimitNum} = store.indexData;
     return <div className={styles.top} ref={(el) => this.gameDiv = el}>
       <canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
       <SvgaPlayer className={styles.handSvga} src={handSvga}/>
-      <div className={styles.credits}>积分:<span>200</span>/300</div>
+      <div className={styles.credits}>积分:<span>{currentStoreNum}</span>/{storeLimitNum}</div>
     </div>;
   }
 }

src/pages/HomePage/Top/base/Base.ts

+import { Container, Ticker } from "pixi.js";
+
+export class Base extends Container {
+
+  constructor() {
+    super();
+    this.onLoad();
+  }
+
+  protected onLoad() {
+
+  }
+
+  protected onDestroy() {
+
+  }
+
+  protected onUpdate(time: Ticker) {
+
+  }
+
+  destroy() {
+    this.onDestroy();
+    super.destroy();
+  }
+}

src/pages/HomePage/Top/mobx/decorators.ts

+import { autorun, configure, IReactionDisposer, IReactionPublic, reaction } from "mobx";
+
+configure({enforceActions: "observed"});
+
+const {hasOwnProperty} = Object.prototype;
+
+const symbolAutoRuns = Symbol("autoRuns");
+const symbolReactions = Symbol("reactions");
+const symbolDisposers = Symbol("disposers");
+
+/**
+ * 绑定放到 onEnable, onDisable,
+ * 如果用户不希望observe, 可以在 onLoad 中执行 this.enable = false;
+ */
+export function observer(Component: Function): void {
+    const prototype = Component.prototype as ObserverPrototype;
+    if (!prototype[symbolAutoRuns] && !prototype[symbolReactions]) return;
+    const {onLoad: _onLoad, onDestroy: _onDestroy} = prototype;
+    if (!_onLoad) {
+        prototype.onLoad = observe;
+    } else if (_onLoad !== observe) {
+        prototype.onLoad = function onEnable(this: ObserverPrototype) {
+            const rt = _onLoad.call(this);
+            if (rt !== false) observe.call(this);
+        };
+    }
+    if (!_onDestroy) {
+        prototype.onDestroy = dispose;
+    } else if (_onDestroy !== dispose) {
+        prototype.onDestroy = function onDestroy(this: ObserverPrototype) {
+            dispose.call(this);
+            _onDestroy.call(this);
+        };
+    }
+}
+
+type ObserverPrototype = {
+    [symbolDisposers]?: Array<() => void>;
+    [symbolAutoRuns]?: string[];
+    [symbolReactions]?: string[];
+    onLoad?: () => unknown;
+    onDestroy?: () => void;
+};
+
+function dispose(this: ObserverPrototype) {
+    const disposers = this[symbolDisposers];
+    if (disposers) disposers.splice(0).forEach((x) => x());
+}
+
+function getDisposers(object: ObserverPrototype): Array<() => void> {
+    const value = object[symbolDisposers];
+    if (value) return value;
+    const arr: Array<() => void> = [];
+    defineProperty(object, symbolDisposers, arr);
+    return arr;
+}
+
+function observe(this: ObserverPrototype) {
+    const disposers = getDisposers(this);
+    if (disposers.length) return;
+    const {[symbolAutoRuns]: autoRuns, [symbolReactions]: reactions} = this;
+    const _self = this as unknown as { [fn: string]: () => () => void };
+    if (autoRuns) {
+        const {name} = this.constructor;
+        autoRuns.forEach((fn) => {
+            const view = _self[fn].bind(_self);
+            const disposer = autorun(view, {name: `${name}#${fn}`});
+            disposers.push(disposer);
+        });
+    }
+    if (reactions) {
+        reactions.forEach((fn) => {
+            const disposer = _self[fn]();
+            disposers.push(disposer);
+        });
+    }
+}
+
+export function render(target: any, key: string, _?: TypedPropertyDescriptor<() => void>) {
+    attach(target, key, symbolAutoRuns);
+}
+
+export function reactor(
+    target: any,
+    key: string,
+    descriptor?: TypedPropertyDescriptor<() => IReactionDisposer>,
+): void;
+export function reactor<T>(
+    expression: (r: IReactionPublic) => T,
+): (target: any, key: string, descriptor: TypedPropertyDescriptor<(arg: T) => void>) => void;
+export function reactor<T>(arg0: any, arg1?: string) {
+    if (arg1 == null) {
+        return reactorArg1<T>(arg0);
+    }
+    return attach(arg0, arg1, symbolReactions);
+}
+
+function reactorArg1<T>(expression: (r: IReactionPublic) => T) {
+    return (target: any, key: string, descriptor: TypedPropertyDescriptor<(arg: T) => void>) => {
+        attach(target, key, symbolReactions);
+        const value = descriptor.value as (arg: T) => void;
+        // eslint-disable-next-line no-param-reassign
+        descriptor.value = function getter() {
+            return reaction(expression, value.bind(this), {fireImmediately: true});
+        };
+    };
+}
+
+function attach<K extends symbol>(target: Record<K, string[]>, key: string, storeKey: K) {
+    if (!hasOwnProperty.call(target, storeKey)) {
+        const value = target[storeKey] ? target[storeKey].slice(0) : [];
+        defineProperty(target, storeKey, value);
+    }
+    if (target[storeKey].indexOf(key) === -1) {
+        target[storeKey].push(key);
+    }
+}
+
+function defineProperty(target: any, key: string | symbol, value: unknown[]) {
+    Object.defineProperty(target, key, {
+        enumerable: false,
+        writable: false,
+        configurable: false,
+        value,
+    });
+}

src/pages/LoadingDemo/LoadingDemo.tsx

@@ -31,7 +31,6 @@ class LoadingDemo extends React.Component {
     const files = import.meta.glob([
       "../../assets/common/**/*",
       "../../assets/HomePage/**/*",
-      "../../assets/Game/**/*",
     ], {
       import: "default",
       eager: true,