Skip to content

R
RB-studyChina-20250617
Commit d2f7ff00 authored by jtwu's avatar jtwu
Browse files
Options

3

parent 6758c42a
Hide whitespace changes
Inline Side-by-side
Showing with 236 additions and 129 deletions
src/api/index.ts
View file @ d2f7ff00
......@@ -167,10 +167,16 @@ const API = generateAPI({
uri: "game/agreePrivacy.do",
},
/** 获取地图详情 */
/** 研学地图信息接口 */
mapInfo: {
uri: "map/info.do",
},
/** 提交游戏接口 */
submitGame: {
uri: "game/submitGame.do",
withToken: true,
method: "post",
}
})
......
src/components/CodePop/CodePop.less
View file @ d2f7ff00
......@@ -18,28 +18,28 @@
.bg {
position: absolute;
left: 96px;
top: 358px;
width: 593px;
height: 672px;
.sparkBg("CodePop/bg.png")
width: 596px;
height: 541px;
top: 467px;
left: 77px;
.sparkBg("QRCodePopup/qr_bg.png");
}
.code {
position: absolute;
left: 146px;
top: 240px;
width: 254px;
height: 254px;
top: 186px;
left: 180px;
width: 237px;
height: 237px;
//.sparkBg("CodePop/code.png")
}
.close {
position: absolute;
left: 343px;
top: 1040px;
top: 1090px;
width: 64px;
height: 64px;
.sparkBg("CodePop/close.png")
.sparkBg("QRCodePopup/close.png");
}
}
\ No newline at end of file
src/pages/GamePage/GamePage.tsx
View file @ d2f7ff00
......@@ -18,6 +18,9 @@ import.meta.env.DEV && initDevtools({});
import { _throttle } from "@/utils/utils.ts";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { LOG_KEY, pageView, sensorLog } from "@/utils/sensors";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import FailPopup from '@/panels/FailPopup/index.jsx'
import VictoryPopup from '@/panels/VictoryPopup/index.jsx'
import "./js/output";
......@@ -34,74 +37,99 @@ class GamePage extends React.Component<any, any> {
game = null;
async componentDidMount() {
// import { Game } from "./output.js" | window[Game]
//实例，传入资源路径
// const game = this.game = new Game("./released/resource/")
// https://yun.duiba.com.cn/db_games/RB_yanxue/250620/index.html
const game = this.game = new Game("https://yun.duiba.com.cn/db_games/RB_yanxue/250620/resource/")
//可预加载资源
game.preLoad();
//初始化舞台，及加载资源，传入canvas标签
// <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
// <canvas id="canvas" style="width: 100%;height: 100%"></canvas> //需要的canvas给个全屏，尽量用div包下
// </div>
await game.initStage(this.gameCanvas)
//加鼠标事件，
game.stage.addWebMouseEvent();
//监听窗口尺寸改变
window.addEventListener('resize', function () { game.stage.resize() });
//展示游戏，传入数据
game.showGame({
targetStudy: 1,//背包数量
targetTravel: 1,//飞机数量
time: 120,//时间，秒计
needGuide: store.indexData?.newGuideFlag == 1,
})
if (store.indexData?.newGuideFlag == 1) {
API.completeGuide({ flag: 2 })
}
//监听事件，比如游戏结果,gameResult|exitGame
game.addGlobalEvent("gameResult", (e) => {
console.log(e.data)//成功
if (e.data === true) {
//成功
} else {
console.log(e.data)
// {
// targetStudy: 1,//还差合成数量
// targetTravel: 2,
// }
}
})
game.addGlobalEvent("exitGame", (e) => {
//自行切换，游戏有需要就销毁
game.destroy()
})
game.addGlobalEvent("pauseGame", (e) => {
console.log(123123123)
})
//派发事件，比如倒计时暂停,pauseGame|continueGame|restartGame
//暂停游戏
// game.dispatchGlobalEvent("pauseGame")
//继续游戏
// game.dispatchGlobalEvent("continueGame")
//重玩游戏
game.dispatchGlobalEvent("restartGame", { targetStudy: 1, targetTravel: 1, time: 120 })
// import { Game } from "./output.js" | window[Game]
//实例，传入资源路径
// const store.game = this.store.game = new Game("./released/resource/")
// https://yun.duiba.com.cn/db_games/RB_yanxue/250620/index.html
store.game = this.game = new Game("https://yun.duiba.com.cn/db_games/RB_yanxue/250620/resource/")
//可预加载资源
store.game.preLoad();
//初始化舞台，及加载资源，传入canvas标签
// <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
// <canvas id="canvas" style="width: 100%;height: 100%"></canvas> //需要的canvas给个全屏，尽量用div包下
// </div>
await store.game.initStage(this.gameCanvas)
//加鼠标事件，
store.game.stage.addWebMouseEvent();
//监听窗口尺寸改变
window.addEventListener('resize', function () { store.game.stage.resize() });
//展示游戏，传入数据
store.game.showGame({
targetStudy: 1,//背包数量
targetTravel: 1,//飞机数量
time: 120,//时间，秒计
needGuide: store.indexData?.newGuideFlag == 1,
})
if (store.indexData?.newGuideFlag == 1) {
API.completeGuide({ flag: 2 })
}
//监听事件，比如游戏结果,gameResult|exitGame
store.game.addGlobalEvent("gameResult", (e) => {
console.log(e)//成功
if (e.data === true) {
//成功
let param = { "recordId": 1234, "score": 507, "success": true, "timestamp": 1749800591737 }
this.submitGame(param)
} else {
console.log(e.data)
ModalCtrl.showModal(FailPopup, e.data);
// {
// targetStudy: 1,//还差合成数量
// targetTravel: 2,
// }
}
})
store.game.addGlobalEvent("exitGame", (e) => {
//自行切换，游戏有需要就销毁
store.game.destroy()
})
store.game.addGlobalEvent("pauseGame", (e) => {
console.log(123123123)
})
//派发事件，比如倒计时暂停,pauseGame|continueGame|restartGame
//暂停游戏
// store.game.dispatchGlobalEvent("pauseGame")
//继续游戏
// store.game.dispatchGlobalEvent("continueGame")
//重玩游戏
store.game.dispatchGlobalEvent("restartGame", { targetStudy: 1, targetTravel: 1, time: 120 })
}
componentWillUnmount() {
}
//提交游戏
submitGame = async (param) => {
let gameData: any = await API.submitGame({ param: param })
gameData = {
"success": true,
"code": "",
"message": "",
"data": {
"gotSpInfo": {
"spId": "sp_landmark1",
"name": "北京",
"icon": "https://www.baidu.com/tiananmen.png"
},
"rewardDrawTimes": 1,
"leftGameTimes": 2
}
}
if (gameData.data?.gotSpInfo) {
ModalCtrl.showModal(VictoryPopup, gameData.data);
}
}
render() {
return <div className={styles.root} ref={(el) => this.gameDiv = el}>
<canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
<canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el} />
</div>;
}
}
......
src/pages/HomePage/HomePage.tsx
View file @ d2f7ff00
......@@ -23,9 +23,10 @@ import MapPage from "@/pages/MapPage/mappage.jsx";
import MusicBtn from '@/core/components/MusicBtn/MusicBtn.tsx';
import AwardPopup from '@/panels/AwardPopup/index.jsx'
import NotWinPopup from '@/panels/NotWinPopup/index.jsx'
import QRCodePopup from '@/panels/QRCodePopup/index.jsx'
import GiftPackPopup from '@/panels/GiftPackPopup/index.jsx'
import VictoryPopup from '@/panels/VictoryPopup/index.jsx'
import FailPopup from '@/panels/FailPopup/index.jsx'
import CodePop from "@/components/CodePop/CodePop.jsx";
import { SvgaPlayer } from "@grace/svgaplayer";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
......@@ -77,7 +78,8 @@ class Homepage extends React.Component {
page_name: "活动首页",
button_name: "抽奖按钮",
});
store.doLotttery();
// store.doLotttery();
ModalCtrl.showModal(GiftPackPopup);
break;
// 2 做任务
......@@ -87,7 +89,6 @@ class Homepage extends React.Component {
button_name: "做任务，赚次数按钮",
});
ModalCtrl.showModal(Taskpop);
// ModalCtrl.showModal(FailPopup);
break;
// 3 开始游戏
......
src/panels/AwardPopup/index.jsx
View file @ d2f7ff00
......@@ -13,16 +13,22 @@ import HomePage from '@/pages/HomePage/HomePage.tsx';
class AwardPopup extends React.Component {
constructor(props) {
super(props);
// console.log('ddddd::::::', props);
this.state = {
prizeInfo: props.prizeInfo
};
}
//关闭
onClose = () => {
ModalCtrl.closeModal();
PageCtrl.changePage(HomePage);
}
//开心收下
onReceive = ()=>{
onReceive = () => {
ModalCtrl.closeModal();
PageCtrl.changePage(HomePage);
}
render() {
......@@ -31,12 +37,12 @@ class AwardPopup extends React.Component {
<div className="ap_mask"></div>
<div className='ap_bg'>
<div className='ap_txt'>成功获得奖品</div>
<div className='ap_icon'></div>
<div className='ap_award_name'>奖品名称</div>
<div className='ap_btn' onClick={()=>this.onReceive()}></div>
<div className='ap_icon' style={{ backgroundImage: `url(${this.state.prizeInfo.icon})` }}></div>
<div className='ap_award_name'>{this.state.prizeInfo.name}</div>
<div className='ap_btn' onClick={() => this.onReceive()}></div>
</div>
<div className='ap_close' onClick={()=>this.onClose()}></div>
</div>
<div className='ap_close' onClick={() => this.onClose()}></div>
</div >
);
}
};
......
src/panels/AwardPopup/index.less
View file @ d2f7ff00
......@@ -37,8 +37,9 @@
top: 411px;
left: 220px;
background: #fff;
border: #af7b13 2px solid;
border: #af7b13 1px solid;
border-radius: 20px;
background-size: 100% 100%;
}
.ap_award_name {
......
src/panels/FailPopup/index.jsx
View file @ d2f7ff00
......@@ -13,30 +13,44 @@ import HomePage from '@/pages/HomePage/HomePage.tsx';
class FailPopup extends React.Component {
constructor(props) {
super(props);
this.state = props;
// {
// targetStudy: 1,//还差合成数量，飞机
// targetTravel: 2//书包
// }
}
//关闭
onClose = () => {
ModalCtrl.closeModal();
PageCtrl.changePage(HomePage);//回到首页
}
//开心收下
onReceive = ()=>{
//再玩一次
onReceive = () => {
ModalCtrl.closeModal();
//重玩游戏
if (store.game) {
store.game.dispatchGlobalEvent("restartGame", { targetStudy: 1, targetTravel: 1, time: 120 })
}
}
render() {
const { leftGameTimes } = store?.indexData || {}
return (
<div className="FailPopup">
<div className="fp_mask"></div>
<div className='fp_bg'>
<div className='fp_txt'>还需要合成以下个数才可解锁地标</div>
<div className='fp_icon'></div>
<div className='fp_btn' onClick={()=>this.onReceive()}>
<div className='fp_btn_txt'>剩余次数：3</div>
<div className='fp_icon'>
<div className='fp_mb_1'>还差{this.state?.targetTravel}个</div>
<div className='fp_mb_2'>还差{this.state?.targetStudy}个</div>
</div>
<div className='fp_btn' onClick={() => this.onReceive()}>
<div className='fp_btn_txt'>剩余次数：{leftGameTimes}</div>
</div>
</div>
<div className='fp_close' onClick={()=>this.onClose()}></div>
<div className='fp_close' onClick={() => this.onClose()}></div>
</div>
);
}
......
src/panels/FailPopup/index.less
View file @ d2f7ff00
......@@ -30,26 +30,43 @@
font-size: 30px;
}
// .fp_icon {
// position: absolute;
// width: 200px;
// height: 200px;
// top: 411px;
// left: 220px;
// background: #fff;
// border: #af7b13 2px solid;
// border-radius: 20px;
// }
.fp_icon {
position: absolute;
width: 378px;
height: 137px;
top: 185px;
left: 109px;
.sparkBg("failPopup/fail_icon.png");
.fp_mb_1 {
position: absolute;
width: 150px;
top: 92px;
left: 20px;
text-align: right;
font-size: 30px;
font-weight: 600;
color: #fff;
-webkit-text-stroke: 5px #4f1600;
text-stroke: 5px #4f1600;
paint-order: stroke;
}
.fp_mb_2 {
position: absolute;
width: 150px;
top: 92px;
left: 210px;
text-align: right;
font-size: 30px;
font-weight: 600;
color: #fff;
-webkit-text-stroke: 5px #4f1600;
text-stroke: 5px #4f1600;
paint-order: stroke;
}
// .ap_award_name {
// position: absolute;
// width: 100%;
// top: 635px;
// left: 0px;
// text-align: center;
// color: #87542f;
// font-size: 30px;
// }
}
.fp_btn {
position: absolute;
......@@ -58,7 +75,8 @@
top: 354px;
left: 56px;
.sparkBg("failPopup/btn.png");
.fp_btn_txt{
.fp_btn_txt {
position: absolute;
width: 100%;
text-align: center;
......@@ -76,5 +94,5 @@
left: 342px;
top: 1142px;
.sparkBg("failPopup/close.png");
}
}
}
\ No newline at end of file
src/panels/GiftPackPopup/index.jsx
View file @ d2f7ff00
......@@ -8,6 +8,11 @@ import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import store from "@/store/store.js";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import HomePage from '@/pages/HomePage/HomePage.tsx';
import { SvgaPlayer } from '@grace/svgaplayer';
import output1Svga from "../../assets/giftPackPopup/5.svga";
import AwardPopup from '@/panels/AwardPopup/index.jsx'
import NotWinPopup from '@/panels/NotWinPopup/index.jsx'
import API from '@/api/index';
//礼包动效弹窗
@observer
class GiftPackPopup extends React.Component {
......@@ -15,21 +20,35 @@ class GiftPackPopup extends React.Component {
super(props);
}
componentDidMount() {
this.lottteryHandle();
}
// 开始抽奖
lottteryHandle = _asyncThrottle(async () => {
const { success, data } = await API.drawJoin();
if (success && data) {//中奖
setTimeout(() => {
ModalCtrl.closeModal();
ModalCtrl.showModal(AwardPopup, data);
}, 3000);
} else {//未中奖
setTimeout(() => {
ModalCtrl.showModal(NotWinPopup);
}, 3000);
}
});
//关闭
onClose = () => {
ModalCtrl.closeModal();
}
//抽奖
onDraw = ()=>{
// ModalCtrl.closeModal();
}
render() {
return (
<div className="GiftPackPopup">
<div className="gpp_mask" onClick={()=>this.onClose()}></div>
<div className='gpp_icon'></div>
<div className="GiftPackPopup" onClick={() => this.onClose()}>
<div className="gpp_mask"></div>
{/* <div className='gpp_icon'></div> */}
<SvgaPlayer className="output1" src={output1Svga} />
</div>
);
}
......
src/panels/GiftPackPopup/index.less
View file @ d2f7ff00
......@@ -9,7 +9,15 @@
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
opacity: 0.1;
}
.output1{
position: absolute;
width: 750px;
height: 1179px;
top: 200px;
left: 0px;
pointer-events: none;
}
.gpp_icon{
position: absolute;
......
src/panels/VictoryPopup/index.jsx
View file @ d2f7ff00
......@@ -13,7 +13,7 @@ import taskStore from '../../store/task.ts';
import { LOG_KEY, MatterShareOpt, MatterViewOpt, pageView, sensorLog, MatterViewDuration } from '../../utils/sensors';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';
import store from "@/store/store.js";
import store from '@/store/store';
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import HomePage from '@/pages/HomePage/HomePage.tsx';
import GiftPackPopup from '@/panels/GiftPackPopup/index.jsx';
......@@ -22,6 +22,7 @@ import GiftPackPopup from '@/panels/GiftPackPopup/index.jsx';
class VictoryPopup extends React.Component {
constructor(props) {
super(props);
this.state = props;
}
//关闭
......@@ -33,7 +34,8 @@ class VictoryPopup extends React.Component {
//抽奖
onDraw = ()=>{
ModalCtrl.closeModal();
ModalCtrl.showModal(GiftPackPopup);
// ModalCtrl.showModal(GiftPackPopup);
store.doLotttery();
}
render() {
......@@ -41,11 +43,11 @@ class VictoryPopup extends React.Component {
<div className="VictoryPopup">
<div className="vp_mask"></div>
<div className='vp_title'></div>
<div className='vp_ditu_txt'>杭州地图</div>
<div className='vp_ditu_txt'>{this.state.gotSpInfo.name}地图</div>
<div className='vp_guang'></div>
<div className='vp_xz_icon'></div>
<div className='vp_xz_icon' style={{backgroundImage: `url(${this.state.gotSpInfo.icon})`}}></div>
<div className='vp_cjjh_tips'>
<div>抽奖机会+1</div>
<div>抽奖机会+{this.state?.rewardDrawTimes}</div>
</div>
<div className='vp_btn' onClick={()=>this.onDraw()}></div>
<div className='vp_close' onClick={() => this.onClose()}></div>
......
src/panels/VictoryPopup/index.less
View file @ d2f7ff00
......@@ -43,7 +43,8 @@
height: 327px;
top: 493px;
left: 230px;
.sparkBg("victoryPopup/shanghai.png");
background-size: 100% 100%;
// .sparkBg("victoryPopup/shanghai.png");
}
.vp_cjjh_tips{
position: absolute;
......
src/store/store.ts
View file @ d2f7ff00
......@@ -11,6 +11,7 @@ import LoginPop from "../components/loginpop/loginpop.jsx"
import { isWeiXin } from '@/AppTools.js';
import { CHANNEL_PARAMS } from '@/utils/constants.js';
import CodePop from "../components/CodePop/CodePop.jsx";
import GiftPackPopup from '@/panels/GiftPackPopup/index.jsx'
class Store {
......@@ -19,6 +20,7 @@ class Store {
}
baseInfo: any = {};
game:any = null
/** 前端开发配置 */
frontVariable: {
......@@ -48,7 +50,7 @@ class Store {
/** 获取前端配置项 */
async getFrontVariable() {
// 获取前端开发配置
console.info('time',new Date().getTime())
console.info('time', new Date().getTime())
const { data } = await API.getFrontVariable();
this.frontVariable = data || {};
console.log('前端开发配置', data)
......@@ -86,10 +88,10 @@ class Store {
}
indexData: {
actStartTimestamp?: number,
actEndTimestamp?: number,
currentTimestamp?: number,
actStartTimestamp?: number,
actEndTimestamp?: number,
currentTimestamp?: number,
leftGameTimes?: number,
uid?: string,
avatar?: string,
......@@ -188,6 +190,7 @@ class Store {
}
// 打开抽奖出奖弹窗 CK_TODO
return ModalCtrl.showModal(GiftPackPopup);
};
......
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