Commit 8bd46a0e authored by zhangjinzhou's avatar zhangjinzhou

引导适配暂存

parent 993ffdf2
......@@ -63,4 +63,13 @@ body {
.btn_heartbeats {
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
......@@ -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 "
......
.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;
......
......@@ -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"
......
.loading {
width: 750px;
height: 1624px;
position: absolute;
// width: 750px;
// height: 1624px;
// position: absolute;
.loading_bg {
width: 750px;
height: 1624px;
......
......@@ -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;
};
/**
* 销毁回调
*/
......
......@@ -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;
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,11 +432,11 @@ 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>
);
}
......
.main3 {
width: 750px;
height: 1624px;
position: absolute;
// width: 750px;
// height: 1624px;
// position: absolute;
overflow-x: hidden;
.main3_bg {
width: 750px;
height: 1624px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment