引导适配暂存

project/src/app.less

@@ -64,3 +64,12 @@ body {
   transform-origin: center center;
   animation: heartbeats 0.775s infinite;
 }
+
+.diacontmidpos {
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  bottom: 0%;
+  right: 0%;
+  margin: auto;
+}
\ No newline at end of file

project/src/components/select/select.jsx

@@ -124,7 +124,7 @@ class Select extends Component {
   render() {
     const {nshowidx,changed,selected} = this.state;
     return (
-      <div className="select " uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627">
+      <div className="select diacontmidpos" uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627">
         <div className="cardone" uuid="36334c7a-26df-4f9e-83d3-6ac81e49d6db" ref="cardone">
           <img
             className="select_role1 "

project/src/components/select/select.less

 .select {
   width: 656px;
   height: 1140px;
-  left: 47px;
-  top: 228px;
-  position: absolute;
+  // left: 47px;
+  // top: 228px;
+  // position: absolute;
 
   .cardone {
     transform-origin: 50% 50%;
@@ -104,15 +104,15 @@
     animation: opacurAnilat 0.5 ease 0s 1 normal;
   }
   .planame{
-    width: 405px;
-    height: 63px;
+    width: 380px;
+    height: 65px;
     position: absolute;
     top:930px;
     left: 125px;
     appearance: none;
     font-size: 28px;
     border-radius: 100px;
-    border: 1px solid #c8cccf;
+    border: 0px solid #c8cccf;
     color: #6a6f77;
     outline: 0;
     margin: auto;

project/src/pages/loading/loading.jsx

@@ -100,7 +100,7 @@ class Loading extends Component {
 
   render() {
     return (
-      <div className="loading " uuid="b325d068-5750-48c1-8447-29b6f572e955">
+      <div className="loading diacontmidpos" uuid="b325d068-5750-48c1-8447-29b6f572e955">
         <img
           className="loading_bg "
           uuid="caa1574c-edd4-4b5c-8332-18002df91464"

project/src/pages/loading/loading.less

 .loading {
-  width: 750px;
-  height: 1624px;
-  position: absolute;
+  // width: 750px;
+  // height: 1624px;
+  // position: absolute;
+  
   .loading_bg {
     width: 750px;
     height: 1624px;

project/src/pages/main3/bundle.js

@@ -61,7 +61,7 @@ var GameStage = /** @class */ (function (_super) {
         this.guideconfig = this.props['guideconfig'];
         this.skipbtn.addEventListener(MouseEvent.CLICK, this.skipGuide, this);
         this.touchrect.addEventListener(MouseEvent.CLICK, this.toNextLevel, this);
-        this.setGuideShow();
+        this.dispatchOutEvent("canvasready", null);
     };
     /**
      * 事件回调
@@ -69,16 +69,33 @@ var GameStage = /** @class */ (function (_super) {
      * @param payload
      */
     GameStage.prototype.onEvent = function (type, payload) {
+        console.error("游戏内监听===》", type, payload);
         switch (type) {
             case "setStepData":
-                var step = payload.step;
-                var stepdata = payload.stepdata;
+                this.setStepData(payload);
+                break;
+            case "setStepConfig":
+                this.setStepConfig(payload);
+                break;
+            case "startGuide":
+                this.step = 1;
+                this.setGuideShow();
                 break;
             default:
                 console.error("为定义监听类型===》", payload);
                 break;
         }
     };
+    //设定单个关卡
+    GameStage.prototype.setStepData = function (payload) {
+        var step = payload.step;
+        var stepdata = payload.stepdata;
+        this.guideconfig[step] = stepdata;
+    };
+    //一次设定所有的引导数据
+    GameStage.prototype.setStepConfig = function (payload) {
+        this.guideconfig = payload;
+    };
     /**
      * 销毁回调
      */

project/src/pages/main3/main3.jsx

@@ -8,7 +8,7 @@ import './main3.less';
 import { CanvasWidget } from 'spark-utils';
 import { Guideact } from './bundle';//'@spark/guideact';//
 import { widgetConfig } from './widgetConfig';
-import {GDispatcher} from "spark-wrapper-fyge"
+import { GDispatcher } from "spark-wrapper-fyge"
 import dataCenter, { Store } from '../../dataCenter';
 let _widget;
 class Main3 extends Component {
@@ -19,7 +19,7 @@ class Main3 extends Component {
       nickname: 'nickname',
       avatar: 1,
       num: "1123",
-      needguide:false
+      needguide: false
     };
   }
 
@@ -33,34 +33,279 @@ class Main3 extends Component {
       }, 200);
     }
   }
-  initEvent(){
-    GDispatcher.addEventListener(Store.homeinfo,this.freshHomeInfo,this);
-    GDispatcher.addEventListener(Store.needguide,this.changeGuideShow,this);
+  initEvent() {
+    GDispatcher.addEventListener(Store.homeinfo, this.freshHomeInfo, this);
+    GDispatcher.addEventListener(Store.needguide, this.changeGuideShow, this);
   }
-  removeEvent(){
+  removeEvent() {
 
   }
   //首页信息显示更新
-  freshHomeInfo(){
+  freshHomeInfo() {
     let homeinfo = dataCenter.getData(Store.homeinfo);
   }
-  changeGuideShow(){
+  changeGuideShow() {
     let needguide = dataCenter.getData(Store.needguide);
     this.setState({
-      needguide:needguide
+      needguide: needguide
     });
   }
-
-
+  //引导数据
+  guideconfig = {};
   onReady(widget) {
     _widget = widget;
+
+
+  }
+  //新手引导的位置设定
+  setGuideConfig() {
+    let clientWidth = document.body.clientWidth;
+    let clientHeight = document.body.clientHeight;
+
+    let canvaswid = 750;
+    let canvashei = clientHeight * 750 / clientWidth;
+    console.log("CANVAS宽高===》", canvaswid, canvashei);
+
+    let holedata = {
+      holetype: "cirect",
+      holex: 15,
+      holey: 33,
+      holesize: [
+        395,
+        112,
+        70
+      ]
+    }
+
+    let txtdata = {
+      text: "您可以在此处编辑信息查看欢趣豆数量",
+      txtwidth: 750,
+      txtx: 0,
+      txty: 224,
+      txtalign: "center"
+    }
+
+    let roledata = [
+      {
+        rolex: 375,
+        roley: 911,
+        roletex: "guide2_1"
+      }
+    ];
+
+    let nextbtndata = {
+      btnx: 485,
+      btny: 303,
+      btntex: "nextbtn"
+    }
+
+    let skipbtndata = {
+      skipx: (canvaswid - 107) / 2,
+      skipy: canvashei - 200,
+      skiplevel: 9,
+      skiptex: "skipbtn",
+    };
+
+    let touchdata = {
+      touchx: 0,
+      touchy: 0,
+      touchsize: [
+        canvaswid,
+        canvashei
+      ]
+    }
+
+
+    this.guideconfig[1] = {
+      hole: null,
+      txt: null,
+      role: [
+        {
+          rolex: 40,
+          roley: (canvashei - 764) / 2,
+          roletex: "guide1"
+        }
+      ],
+      nextbtn: null,
+      skipbtn: skipbtndata,
+      touch: touchdata,
+      pagey: 0,
+    }
+    _widget && _widget.dispatchInEvent("setStepData", {
+      step: 1,
+      stepdata: this.guideconfig[1]
+    });
+    this.guideconfig[2] = {
+      hole: {
+        holetype: "cirect",
+        holex: 15,
+        holey: 33,
+        holesize: [
+          395,
+          112,
+          70
+        ]
+      },
+      txt: {
+        text: "您可以在此处编辑信息查看欢趣豆数量",
+        txtwidth: 750,
+        txtx: 0,
+        txty: 224,
+        txtalign: "center"
+      },
+      role :[
+        {
+          rolex: 375,
+          roley: canvashei-550,
+          roletex: "guide2_1"
+        }
+      ],
+      nextbtn: {
+        btnx: 485,
+        btny: 303,
+        btntex: "nextbtn"
+      },
+      skipbtn: skipbtndata,
+      touch: touchdata,
+      pagey: 0,
+    }
+    _widget && _widget.dispatchInEvent("setStepData", {
+      step: 2,
+      stepdata: this.guideconfig[2]
+    });
+
+    this.guideconfig[3] = {
+      hole: {
+        holetype: "cirect",
+        holex: 600,
+        holey: 26,
+        holesize: [
+          135,
+          440,
+          40
+        ]
+      },
+      txt: {
+        text: "点击图标您可查看规则、进行分享和签到\n \n偷偷告诉您，连签7天可获得大额欢趣豆哦～",
+        txtwidth: 455,
+        txtx: 100,
+        txty: 245,
+        txtalign: "left"
+      },
+      role :[
+        {
+          rolex: 375,
+          roley: canvashei-550,
+          roletex: "guide2_1"
+        }
+      ],
+      nextbtn: {
+        btnx: 100,
+        btny: 520,
+        btntex: "nextbtn"
+      },
+      skipbtn: skipbtndata,
+      touch: touchdata,
+      pagey: 0,
+    }
+    _widget && _widget.dispatchInEvent("setStepData", {
+      step: 3,
+      stepdata: this.guideconfig[3]
+    });
+
+
+    this.guideconfig[4] = {
+      hole: {
+        holetype: "cir",
+        holex: 185,
+        holey: 465,
+        holesize: [
+          165,
+          440
+        ]
+      },
+      txt: {
+        text: "欢趣豆可以兑换立减金，\n进入趣赶集即可进行\n兑换哦～",
+        txtwidth: 375,
+        txtx: 375,
+        txty: 357,
+        txtalign: "left"
+      },
+      role :[
+        {
+          rolex: 375,
+          roley: canvashei-550,
+          roletex: "guide2_1"
+        }
+      ],
+      nextbtn: {
+        btnx: 375,
+        btny: 536,
+        btntex: "nextbtn"
+      },
+      skipbtn: skipbtndata,
+      touch: touchdata,
+      pagey: 0,
+    }
+    _widget && _widget.dispatchInEvent("setStepData", {
+      step: 4,
+      stepdata: this.guideconfig[4]
+    });
+
+    this.guideconfig[5] = {
+      hole: {
+        holetype: "cir",
+        holex: 540,
+        holey: 600,
+        holesize: [
+          165,
+          440
+        ]
+      },
+      txt: {
+        text: "农场主集结～在这里\n就是向往的生活！\n收获成果的同时还可\n以兑换丰厚礼物哦",
+        txtwidth: 320,
+        txtx: 55,
+        txty: 580,
+        txtalign: "left"
+      },
+      role :[
+        {
+          rolex: 375,
+          roley: canvashei-550,
+          roletex: "guide2_1"
+        }
+      ],
+      nextbtn: {
+        btnx: 55,
+        btny: 780,
+        btntex: "nextbtn"
+      },
+      skipbtn: skipbtndata,
+      touch: touchdata,
+      pagey: 0,
+    }
+    _widget && _widget.dispatchInEvent("setStepData", {
+      step: 5,
+      stepdata: this.guideconfig[5]
+    });
+
+    this.startGuide();
+  }
+  startGuide() {
+    _widget && _widget.dispatchInEvent("startGuide");
   }
   onEvent(type, payload) {
     console.log(type, payload);
-    switch(type){
+    switch (type) {
+      case "canvasready":
+        this.setGuideConfig();
+        break;
+
       case "guidecomplete":
-        dataCenter.setData(Store.needguide,false);
+        dataCenter.setData(Store.needguide, false);
         break;
+
       default:
         break;
     }
@@ -74,9 +319,9 @@ class Main3 extends Component {
   }
 
   render() {
-    const { avatar, nickname, num,needguide } = this.state;
+    const { avatar, nickname, num, needguide } = this.state;
     return (
-      <div className="main3 " uuid="8754a9d1-7453-474b-b722-7cb71483ae85">
+      <div className="main3 diacontmidpos" uuid="8754a9d1-7453-474b-b722-7cb71483ae85">
         <img
           className="main3_bg "
           uuid="25a6c3f8-3f78-4758-b2ab-5bcbfaa0d8bc"
@@ -187,10 +432,10 @@ class Main3 extends Component {
           src={this.state.resList['56b64b91-4e9a-49bd-bfd0-20d10b6e6556'].url}
         />
 
-        {needguide?<CanvasWidget className="canvas-widget" widgetFactory={Guideact} widgetConfig={widgetConfig}
+        {needguide ? <CanvasWidget className="canvas-widget" widgetFactory={Guideact} widgetConfig={widgetConfig}
           onEvent={this.onEvent.bind(this)}
           onReady={this.onReady.bind(this)} onAssetsProcess={this.onAssetsProcess.bind(this)}
-          onAssetsComplete={this.onAssetsComplete.bind(this)} />:""}
+          onAssetsComplete={this.onAssetsComplete.bind(this)} /> : ""}
 
       </div>
     );

project/src/pages/main3/main3.less

 .main3 {
-  width: 750px;
-  height: 1624px;
-  position: absolute;
+  // width: 750px;
+  // height: 1624px;
+  // position: absolute;
+  overflow-x: hidden;
   .main3_bg {
     width: 750px;
     height: 1624px;