新手引导

src/pages/GamePage/config/Config.ts

@@ -64,7 +64,7 @@ export const EleConfig: { [key in Ele]: EleData } = {
     cls: Filiform,
     texture: "元素/丝状菌.png",
     weight: 3,
-    score: 20,
+    score: 2,
   },
   [Ele.Molecule]: {
     cls: Molecule,

src/pages/GuidePage/GuidePage.less

+@import "../../res.less";
+
+.GuidePage {
+  width: 750px;
+  height: 1624px;
+  left: 0;
+  top: 0;
+  position: absolute;
+  overflow: hidden;
+
+  .bg {
+    width: 750px;
+    height: 1624px;
+    left: 0;
+    top: 0;
+    position: absolute;
+    .sparkBg("GuidePage/bg.jpg");
+  }
+
+  .joystick {
+    position: absolute;
+    left: 270px;
+    top: 1070px;
+    width: 210px;
+    height: 210px;
+    .sparkBg("GuidePage/方向键未触发.png");
+  }
+
+  .tip {
+    font-size: 32px;
+    color: rgb(255, 255, 255);
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 1300px;
+    width: 100%;
+  }
+
+  .kuang {
+    width: 750px;
+    height: 411px;
+    position: absolute;
+    left: 0;
+  }
+
+  .kuang1 {
+    top: 575px;
+  }
+
+  .kuang2 {
+    top: 694px;
+  }
+
+  .kuang3 {
+    top: 694px;
+  }
+
+  .kuang4 {
+    top: 694px;
+  }
+
+  .kuang5 {
+    top: 344px;
+  }
+
+  .guide {
+    position: absolute;
+    .fadeIn();
+  }
+
+  .guide1 {
+    left: 70px;
+    top: 690px;
+    width: 613px;
+    height: 208px;
+    .sparkBg("GuidePage/guide1.png");
+  }
+
+  .guide2 {
+    left: 70px;
+    top: 544px;
+    width: 611px;
+    height: 479px;
+    .sparkBg("GuidePage/guide2.png");
+  }
+
+  .guide3 {
+    left: 92px;
+    top: 554px;
+    width: 569px;
+    height: 467px;
+    .sparkBg("GuidePage/guide3.png");
+  }
+
+  .guide4 {
+    left: 42px;
+    top: 571px;
+    width: 676px;
+    height: 459px;
+    .sparkBg("GuidePage/guide4.png");
+  }
+
+  .guide5 {
+    left: 43px;
+    top: 211px;
+    width: 707px;
+    height: 461px;
+    .sparkBg("GuidePage/guide5.png");
+  }
+
+  .guide6 {
+    position: absolute;
+    left: 107px;
+    top: 568px;
+    width: 534px;
+    height: 374px;
+    .sparkBg("GuidePage/文案.png");
+
+    .guide6Btn {
+      position: absolute;
+      left: 93px;
+      top: 218px;
+      width: 349px;
+      height: 90px;
+      .sparkBg("GuidePage/按钮.png");
+    }
+  }
+}
+
+
+.fadeIn {
+  opacity: 0;
+  animation-name: fadeInAni;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-duration: 1s;
+  animation-delay: 0.88s;
+}
+
+@keyframes fadeInAni {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/pages/GuidePage/GuidePage.tsx

+import React from 'react';
+import { observer } from 'mobx-react';
+import './GuidePage.less';
+import { SvgaPlayer } from "@grace/svgaplayer";
+
+import kuang from "../../assets/GuidePage/4输出横幅效果.svga";
+import { SvgaPlayerRef } from "@grace/svgaplayer/dist/components/SvgaPlayer";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import GamePage from "@/pages/GamePage/GamePage.tsx";
+import { Button } from "@grace/ui";
+import API from "@/api";
+
+@observer
+class GuidePage extends React.Component<any, any> {
+
+  state = {
+    guide: 1,
+    canNext: false,
+  }
+
+  kuangSvga: SvgaPlayerRef;
+
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ canNext: true });
+    }, 2000);
+  }
+
+  next = () => {
+    const { guide, canNext } = this.state;
+    if (guide >= 6) return;
+
+    if (!canNext) return;
+    this.setState({ guide: guide + 1, canNext: false });
+    setTimeout(() => {
+      this.setState({ canNext: true });
+    }, 1666);
+
+    this.kuangSvga.start();
+  }
+
+  onEnd = () => {
+    // this.setState({ canNext: true });
+  }
+
+  startGame = () => {
+    API.guide();
+    PageCtrl.changePage(GamePage);
+  }
+
+  render() {
+    const { guide, canNext } = this.state;
+    return <div className="GuidePage" onClick={this.next}>
+      <div className="bg"/>
+
+      {guide < 6 && <SvgaPlayer
+        ref={(el) => (this.kuangSvga = el)}
+        onEnd={this.onEnd}
+        src={kuang}
+        className={`kuang kuang${guide}`}
+        loop={1}
+      />}
+
+      {guide == 1 && <div className="guide guide1"/>}
+      {guide == 2 && <div className="guide guide2"/>}
+      {guide == 3 && <div className="guide guide3"/>}
+      {guide == 4 && <div className="guide guide4"/>}
+      {guide == 5 && <div className="guide guide5"/>}
+      {guide >= 6 && <div className="guide6">
+        <Button className="guide6Btn" onClick={this.startGame}/>
+      </div>}
+
+      <div className="joystick"/>
+      {guide < 6 && canNext && <div className="tip">点击屏幕继续</div>}
+
+    </div>;
+  }
+}
+
+export default GuidePage;

src/pages/HomePage/HomePage.tsx

@@ -39,10 +39,8 @@ class HomePage extends React.Component<any, any> {
     //   Toast.show("暂无游戏次数哦")
     //   return;
     // }
-    // const suc = await gameStore.start();
-    // if (!suc) return;
-
-    PageCtrl.changePage(GamePage);
+    const suc = await gameStore.start();
+    if (!suc) return;
   })
 
   /** 奖品按钮*/

src/store/gameStore.ts

@@ -2,13 +2,15 @@ import {makeAutoObservable,} from 'mobx';
 import API from "@/api";
 import store from "@/store/store.ts";
 import {Toast} from "@grace/ui";
-import {AESEncrypt} from "@/utils/Crypto.ts";
+import { AESDecrypt, 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";
+import GamePage from "@/pages/GamePage/GamePage.tsx";
+import GuidePage from "@/pages/GuidePage/GuidePage.tsx";
 
 class GameStore {
 
@@ -36,7 +38,20 @@ class GameStore {
       return false;
     }
 
-    this.startInfo = data;
+    try {
+      const decrypt = JSON.parse(AESDecrypt(data, "3C8C48E792E9241B", "cDOiBC1n2QrkAY2P"));
+
+      this.startInfo = decrypt;
+
+      if (decrypt.guide) {
+        PageCtrl.changePage(GuidePage);
+      } else {
+        PageCtrl.changePage(GamePage);
+      }
+
+    } catch (e) {
+      return false;
+    }
 
     return success;
   }