Merge branch 'master' of http://gitlab2.dui88.com/sparkprojects/luzhoulaojiaosnake_250428

src/App.tsx

@@ -27,7 +27,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: HomePage,
-    }[skinId] || HomePage;
+    }[skinId] || GamePage;
     PageCtrl.changePage(defaultPage);
   }
 

src/pages/GamePage/GamePage.tsx

@@ -16,7 +16,7 @@ import { Stats } from 'pixi-stats';
 
 import { System } from 'detect-collisions';
 import gameStore from "@/store/gameStore.ts";
-import { prefixInteger, second2Date } from "@/utils/utils.ts";
+import { prefixInteger } from "@/utils/utils.ts";
 
 export const collisionSys: System = new System();
 const DEBUG = true ;
@@ -32,6 +32,8 @@ export interface IGamePageState {
 @observer
 class GamePage extends React.Component {
 
+  gameOver: boolean = false;
+
   state: IGamePageState = {
   }
 
@@ -60,6 +62,7 @@ class GamePage extends React.Component {
     await this.initStage();
 
     this.startCd();
+
   }
 
   startCd = () => {
@@ -68,6 +71,8 @@ class GamePage extends React.Component {
       if (gameStore.gameInfo.cd <= 0) {
         clearInterval(this.interval);
         gameStore.gameInfo.cd = 0;
+        this.gameOver = true;
+        gameStore.submit();
       }
     }, 1000);
   }
@@ -119,6 +124,8 @@ class GamePage extends React.Component {
   }
 
   onUpdate = (time: Ticker) => {
+    if (this.gameOver) return;
+
     Tween.flush();
     this.game.onUpdate(time);
     collisionSys.update();

src/panels/FailPanel/FailPanel.less

@@ -7,31 +7,83 @@
   left: 0;
   top: 0;
 
-  .FailBg {
+  .bg {
     position: absolute;
-    left: 93px;
-    top: 538px;
-    width: 562px;
-    height: 349px;
+    left: 151px;
+    top: 447px;
+    width: 444px;
+    height: 560px;
     .webpBg("FailPanel/bg.png");
   }
 
-  .cancel {
+  .rank {
+    font-size: 29px;
+    color: rgb(255, 255, 255);
     position: absolute;
-    left: 132px;
-    top: 746px;
-    width: 233px;
-    height: 73px;
-    .webpBg("FailPanel/我知道了.png");
+    left: 0;
+    top: 535px;
+    width: 100%;
+    text-align: center;
+    text-shadow: 0 0 5px #16c8c2,
+    0 0 5px #16c8c2,
+    0 0 5px #16c8c2,
+    0 0 10px #16c8c2,
+    0 0 10px #16c8c2,
+    0 0 20px #16c8c2;
   }
 
-  .again {
+  .score {
+    font-size: 96.09px;
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    text-align: center;
     position: absolute;
-    left: 370px;
-    top: 739px;
-    width: 257px;
-    height: 95px;
-    .webpBg("FailPanel/再来一次.png");
+    left: 0;
+    top: 672px;
+    width: 100%;
+    text-shadow: 0 0 5px #f3d71a,
+    0 0 5px #f3d71a,
+    0 0 5px #f3d71a,
+    0 0 10px #f3d71a,
+    0 0 10px #f3d71a;
+
+    span {
+      font-size: 32.34px;
+    }
+  }
+
+  .tip {
+    color: rgb(255, 255, 255);
+    font-size: 20px;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 800px;
+    width: 100%;
+    line-height: 33px;
+
+    span {
+      font-size: 26px;
+      color: #f3c81b;
+    }
+  }
+
+  .btn {
+    position: absolute;
+    left: 214px;
+    top: 887px;
+    width: 318px;
+    height: 80px;
+    .webpBg("FailPanel/btn.png");
+  }
+
+  .close {
+    position: absolute;
+    left: 340px;
+    top: 1023px;
+    width: 70px;
+    height: 70px;
+    .webpBg("FailPanel/close.png");
   }
 
 }

src/panels/FailPanel/FailPanel.tsx

@@ -4,30 +4,46 @@ import "./FailPanel.less";
 import {Button} from "@grace/ui";
 import {_asyncThrottle} from "@/utils/utils.ts";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
-import PrizePanel from "@/panels/PrizePanel/PrizePanel.tsx";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import HomePage from "@/pages/HomePage/HomePage.tsx";
+
+export interface IFailPanelProps {
+  score: number,
+  rank: number,
+  prizeName: string,
+  reachTargetScore: boolean,
+  drawChance: number,
+}
 
 @observer
-class FailPanel extends React.Component {
+class FailPanel extends React.Component<IFailPanelProps> {
 
   componentDidMount() {
   }
 
-  clickCancel = () => {
-    ModalCtrl.showModal(PrizePanel, {
-      prizeVO: {  },
-    });
+  clickClose = () => {
+    ModalCtrl.closeModal();
+    PageCtrl.changePage(HomePage);
   };
 
-  clickAgain = _asyncThrottle(async () => {
-    ModalCtrl.closeModal();
+  clickBtn = _asyncThrottle(async () => {
+
   });
 
   render() {
-    return <div className="FailPanel">
-      <div className="FailBg"/>
 
-      <Button className="cancel md12" onClick={this.clickCancel}/>
-      <Button className="again md13" onClick={this.clickAgain}/>
+    const {score, rank} = this.props;
+
+    return <div className="FailPanel">
+      <div className="bg"/>
+      <div className="rank">当前排名:NO.{rank}</div>
+      <div className="score">{score}<span>分</span></div>
+      <div className="tip">
+        单局游戏分数达200<br/>
+        即可获得<span>1次抽奖机会</span>
+      </div>
+      <Button className="btn" onClick={this.clickBtn}/>
+      <Button className="close" onClick={this.clickClose}/>
     </div>;
   }
 }

src/panels/PrizePanel/PrizePanel.tsx

@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import "./PrizePanel.less";
 import { Button } from "@grace/ui";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
-import FailPanel from "@/panels/FailPanel/FailPanel.tsx";
 
 
 export interface IPrizePanelProps {
@@ -26,7 +25,6 @@ class PrizePanel extends React.Component<IPrizePanelProps> {
   };
 
   clickGet = () => {
-    ModalCtrl.showModal(FailPanel);
   };
 
 

src/panels/SucPanel/SucPanel.less

+@import "../../res.less";
+
+.SucPanel {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .bg {
+    position: absolute;
+    left: 153px;
+    top: 335px;
+    width: 444px;
+    height: 706px;
+    .webpBg("SucPanel/bg.png");
+  }
+
+  .rank {
+    font-size: 29px;
+    color: rgb(255, 255, 255);
+    position: absolute;
+    left: 0;
+    top: 424px;
+    width: 100%;
+    text-align: center;
+    text-shadow: 0 0 5px #16c8c2,
+    0 0 5px #16c8c2,
+    0 0 5px #16c8c2,
+    0 0 10px #16c8c2,
+    0 0 10px #16c8c2,
+    0 0 20px #16c8c2;
+  }
+
+  .score {
+    font-size: 96.09px;
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 555px;
+    width: 100%;
+    text-shadow: 0 0 5px #f3d71a,
+    0 0 5px #f3d71a,
+    0 0 5px #f3d71a,
+    0 0 10px #f3d71a,
+    0 0 10px #f3d71a;
+
+    span {
+      font-size: 32.34px;
+    }
+  }
+
+  .tip {
+    color: rgb(255, 255, 255);
+    font-size: 32.34px;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 682px;
+    width: 100%;
+
+    span {
+      margin-left: 10px;
+      font-size: 32.34px;
+      text-shadow: 0 0 5px #f3d71a,
+      0 0 5px #f3d71a,
+      0 0 5px #f3d71a,
+      0 0 10px #f3d71a,
+      0 0 10px #f3d71a;
+    }
+  }
+
+  .btn {
+    position: absolute;
+    left: 233px;
+    top: 904px;
+    width: 284px;
+    height: 90px;
+    .webpBg("SucPanel/btn.png");
+  }
+
+  .close {
+    position: absolute;
+    left: 341px;
+    top: 1065px;
+    width: 70px;
+    height: 70px;
+    .webpBg("SucPanel/close.png");
+  }
+
+}

src/panels/SucPanel/SucPanel.tsx

+import React from "react";
+import {observer} from "mobx-react";
+import "./SucPanel.less";
+import {Button} from "@grace/ui";
+import {_asyncThrottle} from "@/utils/utils.ts";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import HomePage from "@/pages/HomePage/HomePage.tsx";
+
+export interface ISucPanelProps {
+  score: number,
+  rank: number,
+  prizeName: string,
+  reachTargetScore: boolean,
+  drawChance: number,
+}
+
+@observer
+class SucPanel extends React.Component<ISucPanelProps> {
+
+  componentDidMount() {
+  }
+
+  clickClose = () => {
+    ModalCtrl.closeModal();
+    PageCtrl.changePage(HomePage);
+  };
+
+  clickBtn = _asyncThrottle(async () => {
+
+  });
+
+  render() {
+
+    const {score, rank} = this.props;
+
+    return <div className="SucPanel">
+      <div className="bg"/>
+      <div className="rank">当前排名:NO.{rank}</div>
+      <div className="score">{score}<span>分</span></div>
+      <div className="tip">恭喜获得抽奖机会<span>+1</span></div>
+      <Button className="btn" onClick={this.clickBtn}/>
+      <Button className="close" onClick={this.clickClose}/>
+    </div>;
+  }
+}
+
+export default SucPanel;

src/store/gameStore.ts

@@ -6,6 +6,9 @@ import {AESEncrypt} from "@/utils/Crypto.ts";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
 import HomePage from "@/pages/HomePage/HomePage.tsx";
 import { GameConfig } from "@/pages/GamePage/config/Config.ts";
+import FailPanel from "@/panels/FailPanel/FailPanel.tsx";
+import SucPanel from "@/panels/SucPanel/SucPanel.tsx";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
 
 class GameStore {
 
@@ -77,10 +80,9 @@ class GameStore {
     }
   }
 
-  async submit(score: number) {
-
-    const recordId = this.startInfo.recordId;
-
+  async submit() {
+    const { recordId } = this.startInfo;
+    const { score } = this.gameInfo;
     const param = AESEncrypt(JSON.stringify({
       timestamp: Date.now(),
       recordId,
@@ -94,8 +96,10 @@ class GameStore {
       return;
     }
 
-    if (data) {
+    if (data.reachTargetScore) {
+      ModalCtrl.showModal(SucPanel, data);
     } else {
+      ModalCtrl.showModal(FailPanel, data);
     }
 
   }