取消红色提示

.storybook/preview-body.html

@@ -5,5 +5,5 @@
     font-size: 15px;
   }
 </style>
-<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script>
+<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2030.min.js" crossorigin="anonymous"></script>
 

.storybook/tsconfig.json

 {
     "files": [
-        "./typings.d.ts"
-      ]
+        "./typings.d.ts",
+      ],
+    "types":["node"],
+    "exclude": ["../src"]
 }
\ No newline at end of file

.storybook/typings.d.ts

@@ -5,4 +5,4 @@ declare module "*.md" {
 declare module "*.mdx" {
     const content: string;
     export default content;
-}
+}
\ No newline at end of file

libs/SvgaParser.d.ts

+
+declare module SvgaParser {
+    /**
+     * 加载方法
+     * @param url 资源路径
+     * @param success 
+     * @param failure 
+     */
+    export function loadSvga(url: string, success: (videoItem: VideoEntity) => void, failure?: (err: string) => void): void;
+    /**
+     * 导出只是当作类型接口用
+     */
+    export interface VideoEntity {
+        /**
+         * SVGA 文件版本
+         */
+        version: string;
+        /**
+         * 影片尺寸
+         */
+        videoSize: {
+            width: number;
+            height: number;
+        };
+        /**
+         * 帧率，60，30等每秒
+         */
+        FPS: number;
+        /**
+         * 总帧数
+         */
+        frames: number;
+        /**
+         * base64图片数据记录
+         */
+        images: {
+            [key: string]: string
+        };
+        /**
+         * 图片是否已被缓存，缓存全局，注意名字覆盖
+         */
+        hasBeenCached: boolean;
+        /**
+         * sprite对象数据
+         */
+        sprites: SpriteEntity[];
+
+    }
+    interface SpriteEntity {
+        /**
+         * 标识
+         */
+        matteKey: string;
+        /**
+         * 图片key值
+         */
+        imageKey: string;
+        /**
+         * 帧数据数组
+         */
+        frames: FrameEntity[];
+    }
+    /**
+     * 还有很多其他数据，暂不需要，比如矢量路径和遮罩路径暂时都无
+     */
+    interface FrameEntity {
+        /**
+         * 透明度
+         */
+        alpha: number;
+        /**
+         * 2维矩阵数据
+         */
+        transform: {
+            a: number,
+            b: number,
+            c: number,
+            d: number,
+            tx: number,
+            ty: number,
+        };
+    }
+}
+
+declare module "svga-parser" { export = SvgaParser; }
\ No newline at end of file

libs/howler.d.ts

+// Type definitions for howler.js v2.1.1
+// Project: https://github.com/goldfire/howler.js
+// Definitions by: Pedro Casaubon <https://github.com/xperiments>
+//                 Alexander Leon <https://github.com/alien35>
+//                 Nicholas Higgins <https://github.com/nicholashza>
+//                 Carlos Urango <https://github.com/cjurango>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface HowlerGlobal {
+    mute(muted: boolean): this;
+    volume(): number;
+    volume(volume: number): this;
+    codecs(ext: string): boolean;
+    unload(): this;
+    usingWebAudio: boolean;
+    html5PoolSize: number;
+    noAudio: boolean;
+    autoUnlock: boolean;
+    autoSuspend: boolean;
+    ctx: AudioContext;
+    masterGain: GainNode;
+
+    stereo(pan: number): this;
+    pos(x: number, y: number, z: number): this | void;
+    orientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): this | void;
+}
+
+declare let Howler: HowlerGlobal;
+
+interface IHowlSoundSpriteDefinition {
+    [name: string]: [number, number] | [number, number, boolean]
+}
+
+interface IHowlProperties {
+    src: string | string[];
+    volume?: number;
+    html5?: boolean;
+    loop?: boolean;
+    preload?: boolean;
+    autoplay?: boolean;
+    mute?: boolean;
+    sprite?: IHowlSoundSpriteDefinition;
+    rate?: number;
+    pool?: number;
+    format?: string[] | string;
+    xhrWithCredentials?: boolean;
+    onload?: () => void;
+    onloaderror?: (soundId: number, error: any) => void;
+    onplay?: (soundId: number) => void;
+    onplayerror?: (soundId: number, error: any) => void;
+    onend?: (soundId: number) => void;
+    onpause?: (soundId: number) => void;
+    onstop?: (soundId: number) => void;
+    onmute?: (soundId: number) => void;
+    onvolume?: (soundId: number) => void;
+    onrate?: (soundId: number) => void;
+    onseek?: (soundId: number) => void;
+    onfade?: (soundId: number) => void;
+    onunlock?: (soundId: number) => void;
+}
+
+interface Howl {
+    play(spriteOrId?: string | number): number; // .play() is not chainable; the other methods are
+    pause(id?: number): this;
+    stop(id?: number): this;
+
+    mute(): boolean;
+    mute(muted: boolean, id?: number): this;
+
+    volume(): number;
+    volume(idOrSetVolume: number): this | number;
+    volume(volume: number, id: number): this;
+
+    fade(from: number, to: number, duration: number, id?: number): this;
+
+    rate(): number;
+    rate(idOrSetRate: number): this | number;
+    rate(rate: number, id: number): this;
+
+    seek(seek?: number, id?: number): this | number;
+
+    loop(id?: number): boolean;
+    loop(loop: boolean, id?: number): this;
+
+    playing(id?: number): boolean;
+    duration(id?: number): number;
+    state(): 'unloaded' | 'loading' | 'loaded';
+    load(): this;
+    unload(): void;
+
+    on(event: 'load', callback: () => void, id?: number): this;
+    on(event: 'loaderror', callback: (soundId: number, error: any) => void, id?: number): this;
+    on(event: 'play', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'playerror', callback: (soundId: number, error: any) => void, id?: number): this;
+    on(event: 'end', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'pause', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'stop', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'mute', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'volume', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'rate', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'seek', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'fade', callback: (soundId: number) => void, id?: number): this;
+    on(event: string, callback: Function, id?: number): this;
+    on(event: 'unlock', callback: (soundId: number) => void, id?: number): this;
+
+    once(event: 'load', callback: () => void, id?: number): this;
+    once(event: 'loaderror', callback: (soundId: number, error: any) => void, id?: number): this;
+    once(event: 'play', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'playerror', callback: (soundId: number, error: any) => void, id?: number): this;
+    once(event: 'end', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'pause', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'stop', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'mute', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'volume', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'rate', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'seek', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'fade', callback: (soundId: number) => void, id?: number): this;
+    once(event: string, callback: Function, id?: number): this;
+    once(event: 'unlock', callback: (soundId: number) => void, id?: number): this;
+
+    off(event: string, callback?: Function, id?: number): this;
+    off(): this;
+
+    stereo(pan: number, id?: number): this | void;
+    pos(x: number, y: number, z: number, id?: number): this | void;
+    orientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): this | void;
+    pannerAttr(o: {
+        coneInnerAngle?: number,
+        coneOuterAngle?: number, coneOuterGain?: number,
+        distanceModel: 'inverse' | 'linear', maxDistance: number,
+        panningModel: 'HRTF' | 'equalpower', refDistance: number, rolloffFactor: number
+    }, id?: number): this;
+}
+
+interface HowlStatic {
+    new(properties: IHowlProperties): Howl;
+}
+
+declare let Howl: HowlStatic;
+
+declare module "howler" {
+    export let Howler: HowlerGlobal;
+    export let Howl: HowlStatic;
+}

libs/stats.js

+var Stats = function () {
+    var startTime = Date.now(), prevTime = startTime;
+    var ms = 0, msMin = Infinity, msMax = 0;
+    var fps = 0, fpsMin = Infinity, fpsMax = 0;
+    var frames = 0, mode = 0;
+
+    var container = document.createElement('div');
+    container.id = 'stats';
+    container.addEventListener('mousedown', function (event) { event.preventDefault(); setMode(++mode % 2) }, false);
+    container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
+
+    var fpsDiv = document.createElement('div');
+    fpsDiv.id = 'fps';
+    fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
+    container.appendChild(fpsDiv);
+
+    var fpsText = document.createElement('div');
+    fpsText.id = 'fpsText';
+    fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+    fpsText.innerHTML = 'FPS';
+    fpsDiv.appendChild(fpsText);
+
+    var fpsGraph = document.createElement('div');
+    fpsGraph.id = 'fpsGraph';
+    fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
+    fpsDiv.appendChild(fpsGraph);
+
+    while (fpsGraph.children.length < 74) {
+
+        var bar = document.createElement('span');
+        bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
+        fpsGraph.appendChild(bar);
+
+    }
+
+    var msDiv = document.createElement('div');
+    msDiv.id = 'ms';
+    msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
+    container.appendChild(msDiv);
+
+    var msText = document.createElement('div');
+    msText.id = 'msText';
+    msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+    msText.innerHTML = 'MS';
+    msDiv.appendChild(msText);
+
+    var msGraph = document.createElement('div');
+    msGraph.id = 'msGraph';
+    msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
+    msDiv.appendChild(msGraph);
+
+    while (msGraph.children.length < 74) {
+
+        var bar = document.createElement('span');
+        bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
+        msGraph.appendChild(bar);
+
+    }
+
+    var setMode = function (value) {
+
+        mode = value;
+
+        switch (mode) {
+
+            case 0:
+                fpsDiv.style.display = 'block';
+                msDiv.style.display = 'none';
+                break;
+            case 1:
+                fpsDiv.style.display = 'none';
+                msDiv.style.display = 'block';
+                break;
+        }
+
+    }
+
+    var updateGraph = function (dom, value) {
+
+        var child = dom.appendChild(dom.firstChild);
+        child.style.height = value + 'px';
+
+    }
+
+    return {
+
+        REVISION: 11,
+
+        domElement: container,
+
+        setMode: setMode,
+
+        begin: function () {
+
+            startTime = Date.now();
+
+        },
+
+        end: function () {
+
+            var time = Date.now();
+
+            ms = time - startTime;
+            msMin = Math.min(msMin, ms);
+            msMax = Math.max(msMax, ms);
+
+            msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
+            updateGraph(msGraph, Math.min(30, 30 - (ms / 200) * 30));
+
+            frames++;
+
+            if (time > prevTime + 1000) {
+
+                fps = Math.round((frames * 1000) / (time - prevTime));
+                fpsMin = Math.min(fpsMin, fps);
+                fpsMax = Math.max(fpsMax, fps);
+
+                fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
+                updateGraph(fpsGraph, Math.min(30, 30 - (fps / 100) * 30));
+
+                prevTime = time;
+                frames = 0;
+
+            }
+
+            return time;
+
+        },
+
+        update: function () {
+
+            startTime = this.end();
+
+        }
+
+    }
+
+};
+
+//执行
+var stats = new Stats();
+stats.domElement.style.position = 'absolute';
+stats.domElement.style.top = '0px';
+document.body.appendChild(stats.domElement);
+aa();
+function aa() {
+    stats.update();
+    requestAnimationFrame(aa)
+}
\ No newline at end of file

package-lock.json

@@ -3938,9 +3938,9 @@
       "integrity": "sha1-EAHMXmo3BLg8I2An538vWOoBD0A="
     },
     "@types/node": {
-      "version": "16.3.3",
-      "resolved": "http://npm.dui88.com:80/@types%2fnode/-/node-16.3.3.tgz",
-      "integrity": "sha1-DDCt/ze7vHpQ65tY+uKlBNDYgDg="
+      "version": "16.11.12",
+      "resolved": "http://npm.dui88.com:80/@types%2fnode/-/node-16.11.12.tgz",
+      "integrity": "sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw=="
     },
     "@types/node-fetch": {
       "version": "2.5.11",

package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "npm run storybook",
     "storybook": "start-storybook -s src/asserts -p 9003 -c .storybook",
-    "build": "yarn build-storybook -s src/asserts -o ./released/"
+    "build": "yarn build-storybook -s src/asserts -o ./released/ && node scripts/upload 1"
   },
   "keywords": [],
   "author": "",
@@ -33,6 +33,7 @@
     "@storybook/addon-docs": "^6.3.2",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/preset-ant-design": "^0.0.2",
+    "@types/node": "^16.11.12",
     "ali-oss": "^6.15.2",
     "antd": "^4.16.6",
     "babel-preset-react-app": "^10.0.0",

src/canvasCom/dazhuanpanCom/dazhuanpan.stories.tsx

@@ -54,7 +54,7 @@ Primary.args = {
     id: "oe8dff3af",
     index: 1,
     name: "f优惠券",
-    prizeId: "sss_15",
+    prizeId: "sss_11",
     prizeType: 2,
     refId: "88661",
     refType: "coupon",
@@ -63,7 +63,7 @@ Primary.args = {
     id: "o184c36c3",
     index: 2,
     name: "e优惠券",
-    prizeId: "sss_15",
+    prizeId: "sss_12",
     prizeType: 2,
     refId: "88661",
     refType: "coupon",
@@ -74,7 +74,7 @@ Primary.args = {
     id: "ofd8cb484",
     index: 3,
     name: "d支付宝10",
-    prizeId: "sss_14",
+    prizeId: "sss_13",
     prizeType: 2,
     refId: "53",
     refType: "alipay",
@@ -85,7 +85,7 @@ Primary.args = {
     id: "of98c438d",
     index: 4,
     name: "c支付宝10",
-    prizeId: "sss_13",
+    prizeId: "sss_14",
     prizeType: 2,
     refId: "53",
     refType: "alipay",
@@ -96,7 +96,7 @@ Primary.args = {
     id: "o527ff73c",
     index: 5,
     name: "b话费",
-    prizeId: "sss_12",
+    prizeId: "sss_15",
     prizeType: 2,
     refId: "1",
     refType: "phonebill",
@@ -107,7 +107,7 @@ Primary.args = {
     id: "of623b9e0",
     index: 6,
     name: "a话费",
-    prizeId: "sss_11",
+    prizeId: "sss_16",
     prizeType: 2,
     refId: "1",
     refType: "phonebill",

src/common/createStage.ts

 export const createStage = () => {
     const height = document.body.clientHeight * (window.devicePixelRatio || 1) || 1624;
     const width = document.body.clientWidth * (window.devicePixelRatio || 1) || 750;
-    // const height = 800;
-    // const width = 750;
     const scale = window.devicePixelRatio;
-    let canvas = document.getElementById("canvas-container");
+    //@ts-ignore
+    let canvas:HTMLCanvasElement = document.getElementById("canvas-container");
     if (!canvas) {
         canvas = document.createElement("canvas");
         canvas.setAttribute("id", "canvas-container")

src/sourceCode/canvas/RichText.ts

@@ -15,55 +15,56 @@
 // [{text: "测试"，style:{color: ""}},{},{}]
 interface IRichTextEle {
     text: string,
-    style: { color: string, size: number }
-}
-export class RichText extends FYGE.Container {
+    style: { color: string, size: number, bold?: boolean }
+  }
+  export class RichText extends FYGE.Container {
     private static cache: FYGE.TextField[] = []
     /**
      * 
      * @param text 
      */
     constructor(text?: IRichTextEle[]) {
-        super()
-        if (text) this.text = text;
+      super()
+      if (text) this.text = text;
     }
+  
     /**
      * 水平对齐方式，默认居中
      */
     get textAlign() {
-        return this._textAlign
+      return this._textAlign
     }
     set textAlign(value: FYGE.TEXT_ALIGN) {
-        if (this._textAlign !== value) {
-            this._textAlign = value;
-            this.adaptate();
-        }
+      if (this._textAlign !== value) {
+        this._textAlign = value;
+        this.adaptate();
+      }
     }
     private _textAlign: FYGE.TEXT_ALIGN = FYGE.TEXT_ALIGN.CENTER;
     /**
      * 垂直居中方式，默认居中
      */
     get verticalAlign() {
-        return this._verticalAlign
+      return this._verticalAlign
     }
     set verticalAlign(value: FYGE.VERTICAL_ALIGN) {
-        if (this._verticalAlign !== value) {
-            this._verticalAlign = value;
-            this.adaptate();
-        }
+      if (this._verticalAlign !== value) {
+        this._verticalAlign = value;
+        this.adaptate();
+      }
     }
     private _verticalAlign: FYGE.VERTICAL_ALIGN = FYGE.VERTICAL_ALIGN.MIDDLE;
     /**
      * 文字间隙
      */
     get gap(): number {
-        return this._gap;
+      return this._gap;
     };
     set gap(value: number) {
-        if (this._gap != value) {
-            this._gap = value;
-            this.adaptate();
-        }
+      if (this._gap != value) {
+        this._gap = value;
+        this.adaptate();
+      }
     };
     private _gap: number = 0;
     /**
@@ -74,72 +75,76 @@ export class RichText extends FYGE.Container {
      * 按顺序
      */
     get text(): IRichTextEle[] {
-        return this._text
+      return this._text
     }
     /**
      * 
      */
     set text(value: IRichTextEle[]) {
-        this._text = value;
-        var arr = value || [];
-        for (var i = 0; i < arr.length; i++) {
-            let a = arr[i];
-            let c: FYGE.TextField = this.children[i] || this.addChild(RichText.cache.shift() || new FYGE.TextField());
-            c.text = a.text;
-            c.fillColor = a.style.color;
-            c.size = a.style.size;
+      this._text = value;
+      var arr = value || [];
+      for (var i = 0; i < arr.length; i++) {
+        let a = arr[i];
+        let c = (this.children[i] || this.addChild(RichText.cache.shift() || new FYGE.TextField())) as FYGE.TextField;
+        c.text = a.text;
+        c.fillColor = a.style.color;
+        c.size = a.style.size;
+        c.bold = a.style.bold || false;
+      }
+      //如果多了，去掉后面的，回收
+      if (this.children.length > arr.length) {
+        //移除后序
+        for (var i = this.children.length - 1; i >= arr.length; i--) {
+          let c = this.children[i] as FYGE.TextField;
+          this.removeChild(c);
+          RichText.cache.push(c);
         }
-        //如果多了，去掉后面的，回收
-        if (this.children.length > arr.length) {
-            //移除后序
-            for (var i = this.children.length - 1; i >= arr.length; i--) {
-                let c = this.children[i];
-                this.removeChild(c);
-                RichText.cache.push(c);
-            }
-        }
-        //适配
-        this.adaptate()
+      }
+      //适配
+      this.adaptate()
     }
-
+  
     /**
      * 适配，
      */
     private adaptate() {
-        if (!this.children.length) return
-        var len = this.children.length;
-        //算总长度
-        var sum = 0;
-        for (var m = 0; m < len; m++) {
-            sum += this.children[m].textWidth;
-        }
-        sum += (len - 1) * this._gap;
-        //算出左边第一个元素的位置
-        var left: number;
-        if (this._textAlign == FYGE.TEXT_ALIGN.LEFT) {
-            left = 0
-        }
-        else if (this._textAlign == FYGE.TEXT_ALIGN.RIGHT) {
-            left = -sum
-        } else {
-            left = -sum / 2
-        }
-        var temSum = 0;
-        for (var i = 0; i < this.children.length; i++) {
-            this.children[i].x = left + temSum
-            temSum += this.children[i].textWidth + this._gap;
-        }
-        var up: number;
-        if (this._verticalAlign == FYGE.VERTICAL_ALIGN.UP) {
-            up = 0
-        }
-        else if (this._verticalAlign == FYGE.VERTICAL_ALIGN.DOWN) {
-            up = -1
-        } else {
-            up = -1 / 2
-        }
-        for (var i = 0; i < this.children.length; i++) {
-            this.children[i].y = this.children[i].textHeight * up;
-        }
+      if (!this.children.length) return
+      var len = this.children.length;
+      //算总长度
+      var sum = 0;
+      for (var m = 0; m < len; m++) {
+        //@ts-ignore
+        sum += this.children[m].textWidth;
+      }
+      sum += (len - 1) * this._gap;
+      //算出左边第一个元素的位置
+      var left: number;
+      if (this._textAlign == FYGE.TEXT_ALIGN.LEFT) {
+        left = 0
+      }
+      else if (this._textAlign == FYGE.TEXT_ALIGN.RIGHT) {
+        left = -sum
+      } else {
+        left = -sum / 2
+      }
+      var temSum = 0;
+      for (var i = 0; i < this.children.length; i++) {
+        this.children[i].x = left + temSum
+        //@ts-ignore
+        temSum += this.children[i].textWidth + this._gap;
+      }
+      var up: number;
+      if (this._verticalAlign == FYGE.VERTICAL_ALIGN.UP) {
+        up = 0
+      }
+      else if (this._verticalAlign == FYGE.VERTICAL_ALIGN.DOWN) {
+        up = -1
+      } else {
+        up = -1 / 2
+      }
+      for (var i = 0; i < this.children.length; i++) {
+        //@ts-ignore
+        this.children[i].y = this.children[i].textHeight * up;
+      }
     }
-}
+  }
\ No newline at end of file

src/sourceCode/canvas/dazhuanpan.ts

@@ -87,6 +87,7 @@ export class Dazhuanpan extends FYGE.Container{
                 index = i;
             }
         });
+        console.log(index)
 
         if (index === null) {
             console.log("抽奖异常");
@@ -107,7 +108,7 @@ export class Dazhuanpan extends FYGE.Container{
             .to({ rotation: 720 }, 500)
             .to({ rotation: 900 }, 900)
             .to({ rotation: 1080 }, 2000)
-            .to({ rotation: 1080 + deg }, 4000 * rotateDeg / 180)
+            .to({ rotation: 1080+rotateDeg}, 4000 * rotateDeg / 180)
             .call(() => {
                 this.beginBtn.mouseEnable = true;
                 this.beginBtn.mouseChildren = true;

src/typings/global.ts

 interface Window {
-    FYGE: any;
     stage: any;
 }
-declare module "*.md" {
-    const content: string;
-    export default content;
-}
\ No newline at end of file