feat:merge

dist/js/runtime-main.056eba21.js

-!function(e){function r(r){for(var n,a,l=r[0],i=r[1],p=r[2],c=0,s=[];c<l.length;c++)a=l[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="//yun.duiba.com.cn/spark/v2/temp_base/1744368490950/";var l=window.webpackJsonp=window.webpackJsonp||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=i;t()}([]);
-//# sourceMappingURL=runtime-main.056eba21.js.map
\ No newline at end of file

dist/js/runtime-main.056eba21.js.map

-{"version":3,"sources":["webpack:///webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice"],"mappings":"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","file":"js/runtime-main.056eba21.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"//yun.duiba.com.cn/spark/v2/temp_base/1744368490950/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}
\ No newline at end of file

src/components/guideModal/guideModal.jsx

@@ -2,12 +2,14 @@ import React, { Component } from 'react';
 import './guideModal.less';
 import modalStore from '@src/store/modal';
 import { _throttle } from '@src/utils/utils';
+import { SvgaPlayer } from '@spark/svgaplayer';
+import { RES_PATH } from '../../../sparkrc';
 
 class GuideModal extends Component {
 
   closeModal = _throttle(() => {
-    const {doCount} = this.props.popData;
-    doCount && doCount();
+    const {handleStartSvga} = this.props.popData;
+    handleStartSvga && handleStartSvga(true);
     modalStore.closePop("GuideModal")
   })
 
@@ -15,6 +17,7 @@ class GuideModal extends Component {
     return (
       <div className='guideModal' onClick={this.closeModal}>
         <div className="bg"></div>
+        <SvgaPlayer className='hand' src={RES_PATH + "svga/4输出引导.svga"}/>
       </div>
     );
   }

src/components/guideModal/guideModal.less

@@ -11,4 +11,12 @@
     position: absolute;
    .sparkBg("gamePage/guide.jpg");
   }
+
+  .hand {
+    width: 553px;
+    height: 685px;
+    position: absolute;
+    left: 0px;
+    top: 570px;
+  }
 }
\ No newline at end of file

src/pages/gamePage/gamePage.jsx

@@ -4,6 +4,8 @@ import { minusProbability, plusProbability } from './gameData';
 import modalStore from '@src/store/modal';
 import store from '@src/store';
 import { second2Date } from '@src/utils/utils';
+import { SvgaPlayer } from '@spark/svgaplayer';
+import { RES_PATH } from '../../../sparkrc';
 
 class GamePage extends Component {
 
@@ -34,7 +36,8 @@ class GamePage extends Component {
     numElements: [{
       top: '3.71rem'
     }],
-    seconds: '00:00'
+    seconds: '00:00',
+    showCountSvga: false,
     // fen1: 1,
     // fen2: 1,
     // fen3: 1,
@@ -47,12 +50,23 @@ class GamePage extends Component {
     
     this.createAddition();
     if(store.startInfo?.guide) {
-      modalStore.pushPop("GuideModal", {doCount: this.doCount})
+      modalStore.pushPop("GuideModal", {handleStartSvga: this.handleStartSvga})
     } else {
-      this.doCount();
+      // this.doCount();
+      this.handleStartSvga(true)
     }
   }
 
+  handleStartSvga = (status) => {
+
+    this.setState({
+      showCountSvga: status
+    }, () => {
+      !status && this.doCount()
+    })
+    
+  }
+
   countdownSeconds = (store.startInfo?.countdownSeconds || 60) * 1000;
 
   gameOver = false;
@@ -188,7 +202,7 @@ class GamePage extends Component {
           fen1 = this.createSpecialNum(2, 9);
           fen2 = this.createSpecialNum(1, Math.max(1, fen1 - 1));
         }
-
+        console.error("fen1", fen1, "fen2", fen2)
         number = Math.round(fen2 / fen1);
         break;
       case 'percent':
@@ -234,6 +248,7 @@ class GamePage extends Component {
         newNumber1 += symbolInfo?.number * newNumber1 
         break;
       case 'multiplyFen':
+        console.error("symonl fen2", symbolInfo?.fen2, "fen1", symbolInfo?.fen1, symbolInfo?.fen2 * newNumber1 / symbolInfo?.fen1)
         newNumber1 += Math.round(symbolInfo?.fen2 * newNumber1 / symbolInfo?.fen1) * operate;
         break;
       case 'percent':
@@ -276,12 +291,17 @@ class GamePage extends Component {
     console.error("左边", newNumber1, "右边", newNumber2)
 
     // 如果是加法 先判断选择的是不是比另一个大 如果不是那就不用计算了
+    let correctIndex = ''
     if(addition == 'plus') {
-      const correctIndex = newNumber1 > newNumber2 ? -1 : 1;
-
+      correctIndex = newNumber1 > newNumber2 ? -1 : 1;
+      if(newNumber1 == newNumber2) {
+        correctIndex = index;
+      }
       if(correctIndex != index && newNumber1 != newNumber2) {
+        console.error("选择错误", correctIndex, index)
         this.setState({
           selectIndex: index,
+          correctIndex
         })
 
         setTimeout(() => {
@@ -296,6 +316,8 @@ class GamePage extends Component {
         return
       }
       
+    } else {
+      correctIndex = index == 1 ? -1 : 1;
     }
 
 
@@ -319,16 +341,10 @@ class GamePage extends Component {
     this.setState({
       selectIndex: index,
       currentNum: this.currentNumber,
+      correctIndex
     })
 
-    setTimeout(() => {
-      this.createAddition();
-      this.canChoose = true
-      this.setState({
-        selectIndex: 0,
-      })
     
-    }, 500)
   }
 
   currentArr = [{
@@ -435,9 +451,20 @@ class GamePage extends Component {
     });
   }
 
+  handEnd = () => {
+    // setTimeout(() => {
+      this.createAddition();
+      this.canChoose = true
+      this.setState({
+        selectIndex: 0,
+      })
+
+    // }, 500)
+  }
+
 
   render() {
-    const { addition, symbolInfo1, symbolInfo2, selectIndex, currentNum, numElements, seconds } = this.state;
+    const { addition, symbolInfo1, symbolInfo2, selectIndex, currentNum, numElements, seconds, correctIndex, showCountSvga } = this.state;
 
     // console.error(symbolInfo1, symbolInfo2);
 
@@ -453,18 +480,20 @@ class GamePage extends Component {
         </div> */}
         {/* 渲染新创建的元素 */}
         {numElements.map((element, index) => (
-          <div key={index} className="numPaper" ref={element.ref} style={{ top: element.top }}>
+          <div key={index} className={`numPaper ${numElements.length > 1 && index == numElements.length - 1 ? 'moneyAni' : ''}`} ref={element.ref} style={{ top: element.top }}>
             {index == numElements.length - 1 && <div className="number">${currentNum}</div>}
           </div>
         ))}
         <div className="leftNum" onClick={() => this.chooseNumber(-1)}>
-          {selectIndex == -1 && <div className="selected"></div>}
+          {(correctIndex == selectIndex && selectIndex == -1) && <SvgaPlayer className="rightSvga" src={RES_PATH + "svga/6输出选中动效.svga"} loop={1} onEnd={this.handEnd}/>}
+          {(correctIndex != selectIndex && selectIndex == -1) && <SvgaPlayer className="wrongSvga" src={RES_PATH + "svga/7输出选错.svga"} loop={1} onEnd={this.handEnd}/>}
+          {/* {selectIndex == -1 && <div className="selected"></div>} */}
           {(addition == 'plus' && symbolInfo1?.symbolName != 'doublePlus' && symbolInfo1?.symbolName != 'minusDouble') && <div className="number1">
             {symbolInfo1?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo1?.symbolText}{symbolInfo1?.number}{symbolInfo1?.symbolText == '+' ? '%' : ''}</div>}
             {symbolInfo1?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo1?.symbolText}{symbolInfo1?.symbolText == '+'? '%' : ''}
               <div className="fenBox">
                 <div className="fen1">{symbolInfo1?.fen2}</div>
-                <div className="fen2">{symbolInfo2?.fen1}</div>
+                <div className="fen2">{symbolInfo1?.fen1}</div>
               </div>
             </div>}
           </div>}
@@ -483,7 +512,9 @@ class GamePage extends Component {
           </div>}
         </div>
         <div className="rightNum" onClick={() => this.chooseNumber(1)}>
-          {selectIndex == 1 && <div className="selected"></div>}
+          {(correctIndex == selectIndex && selectIndex == 1) && <SvgaPlayer className="rightSvga" src={RES_PATH + "svga/6输出选中动效.svga"} loop={1} onEnd={this.handEnd}/>}
+          {(correctIndex != selectIndex && selectIndex == 1) && <SvgaPlayer className="wrongSvga" src={RES_PATH + "svga/7输出选错.svga"} loop={1} onEnd={this.handEnd}/>}
+          {/* {selectIndex == 1 && <div className="selected"></div>} */}
           {(addition == 'plus' && symbolInfo2?.symbolName != 'doublePlus' && symbolInfo2?.symbolName != 'minusDouble') && <div className="number2">
             {symbolInfo2?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo2?.symbolText}{symbolInfo2?.number}{symbolInfo2?.symbolText == '+' ? '%' : ''}</div>}
             {symbolInfo2?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo2?.symbolText}{symbolInfo2?.symbolText == '+'? '%' : ''}
@@ -507,6 +538,9 @@ class GamePage extends Component {
             <div className={`right2 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo2?.symbolText}{symbolInfo2?.number}{(symbolInfo2?.symbolText == '+' || symbolInfo2?.symbolText == '-') ? '%' : ''}</div>
           </div>}
         </div>
+        {showCountSvga && <div className="count321">
+          <SvgaPlayer className='countSvga' src={RES_PATH + "svga/5倒计时.svga"} loop={1} onEnd={() => this.handleStartSvga(false)}/>
+        </div>}
       </div>
     );
   }

src/pages/gamePage/gamePage.less

@@ -12,6 +12,20 @@
     position: absolute;
     .sparkBg("gamePage/bg.jpg");
   }
+  .count321 {
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7);
+    .countSvga {
+      width: 750px;
+      height: 1624px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+  
 
   .countBg {
     width: 148px;
@@ -61,6 +75,8 @@
     .sparkBg("gamePage/minus2.png")!important;
   }
 
+
+
   .leftNum {
     width: 332px;
     height: 266px;
@@ -68,6 +84,22 @@
     left: 45px;
     top: 778px;
 
+    .rightSvga {
+      width: 690px;
+      height: 664px;
+      position: absolute;
+      left: calc(50% - 345px);
+      top: calc(50% - 332px);
+    }
+
+    .wrongSvga {
+      width: 332px;
+      height: 266px;
+      position: absolute;
+      left: calc(50% - 166px);
+      top: calc(50% - 133px);
+    }
+ 
     .selected {
       width: 332px;
       height: 266px;
@@ -242,6 +274,22 @@
       .sparkBg("gamePage/selectBg.png");
     }
 
+    .rightSvga {
+      width: 690px;
+      height: 664px;
+      position: absolute;
+      left: calc(50% - 345px);
+      top: calc(50% - 332px);
+    }
+
+    .wrongSvga {
+      width: 332px;
+      height: 266px;
+      position: absolute;
+      left: calc(50% - 166px);
+      top: calc(50% - 133px);
+    }
+
     .number2 {
       width: 280px;
       height: 180px;
@@ -389,3 +437,19 @@
     }
   }
 }
+
+.moneyAni {
+  animation: money 0.3s linear forwards;
+}
+
+@keyframes money {
+  0% {
+    transform: scaleY(0.87);
+    transform-origin: bottom;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: bottom;
+  }
+}
\ No newline at end of file