Skip to content

L
LuzhouLaojiaoSnake_250428
Commit 6c14d4e7 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

init

parent feb25ffe
Expand all Show whitespace changes
Inline Side-by-side
Showing with 100 additions and 1065 deletions
pnpm-lock.yaml
View file @ 6c14d4e7
This diff is collapsed.
src/core/ctrls/PageCtrl.tsx
View file @ 6c14d4e7
......@@ -15,7 +15,7 @@ export class PageCtrl extends Component<{}, PageCtrlState> {
};
static changePage: (Component: ComponentType<any>, props?: any) => void = null;
static backPage: (Component?: ComponentType<any>) => void = null;
static backPage: () => void = null;
componentDidMount() {
PageCtrl.changePage = this.changePage;
......
src/pages/GamePage/Card.ts deleted 100644 → 0
View file @ feb25ffe
import {AnimatedSprite, Assets, Container, Sprite, Text} from "pixi.js";
import {globalMsg} from "@/pages/GamePage/event/MessageManager.ts";
import {GameEvent} from "@/pages/GamePage/GameEvent.ts";
import {ECard, ECardType} from "@/common.ts";
export type TCardInfo = {
cardName: ECard;
type: ECardType;
}
export class Card extends Container {
private _type: ECardType = ECardType.A;
set type(type: ECardType) {
this._type = type;
}
get type(): ECardType {
return this._type;
}
private _cardName: ECard = ECard.CARD_0;
set cardName(cardName: ECard) {
this._cardName = cardName;
}
get cardName(): ECard {
return this._cardName;
}
sp: Sprite = null;
selectImg: Sprite = null;
effect: AnimatedSprite = null;
private _select: boolean = false;
set select(select: boolean) {
this._select = select;
this.selectImg.visible = select;
this.effect.visible = select;
if (select) {
this.effect.gotoAndPlay(0);
}
}
get select(): boolean {
return this._select;
}
constructor(cardInfo: TCardInfo) {
super();
this.cardName = cardInfo.cardName;
this.type = cardInfo.type;
this.sp = new Sprite(Assets.get(`card/${this.cardName}${this.type}.png`));
this.addChild(this.sp);
this.selectImg = new Sprite(Assets.get("选中.png"));
this.selectImg.visible = false;
this.selectImg.position.set(-13, -18);
this.addChild(this.selectImg);
const textures = new Array(20).fill(1).map((_, i) => {
return Assets.get(`选中效果/选中效果_${i}.png`);
});
this.effect = new AnimatedSprite(textures);
this.addChild(this.effect);
this.effect.loop = false;
this.effect.animationSpeed = 0.5;
this.effect.gotoAndPlay(0);
this.effect.position.set(-46, -56);
this.effect.stop();
// const debugTxt = this.addChild(new Text({
// text: cardInfo.cardName,
// }));
// debugTxt.position.set(35, 50);
// debugTxt.eventMode = "none";
this.effect.eventMode = "none";
this.selectImg.eventMode = "none";
this.sp.on("touchstart", this.onTouchStart, this);
}
onTouchStart = () => {
globalMsg.emit(GameEvent.ClickCard, this);
}
}
src/pages/GamePage/CompositePanel/CompositePanel.less deleted 100644 → 0
View file @ feb25ffe
@import "../../../res.less";
.CompositePanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
.CompositeBg {
position: absolute;
left: 0;
top: 260px;
width: 750px;
height: 966px;
}
.CompositePanel_title {
font-size: 60px;
color: rgb(255, 255, 255);
text-align: center;
position: absolute;
left: 0;
top: 483.38px;
width: 750px;
font-weight: bold;
}
.card {
position: absolute;
width: 199px;
height: 269px;
pointer-events: none;
}
.card1 {
left: 162px;
top: 577px;
}
.card2 {
left: 391px;
top: 577px;
}
.CompositeEffect {
position: absolute;
left: 0;
top: 53px;
width: 750px;
height: 1318px;
}
.posterDiv {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.poster {
position: absolute;
left: 75px;
top: 213px;
width: 598px;
height: 1037px;
}
.posterSvga {
position: absolute;
left: 75px;
top: 213px;
width: 598px;
height: 1037px;
}
.posterBtn {
position: absolute;
left: 230px;
top: 1275px;
width: 300px;
height: 77px;
.webpBg("PosterPanel/收起海报.png");
}
}
}
src/pages/GamePage/CompositePanel/CompositePanel.tsx deleted 100644 → 0
View file @ feb25ffe
import React, {HTMLAttributes} from "react";
import {observer} from "mobx-react";
import "./CompositePanel.less";
import {gsap} from "gsap";
import {SvgaPlayer} from "@grace/svgaplayer";
import bgSvga from "@/assets/svga/3输出宝箱动效.svga"
import effectSvga from "@/assets/svga/4打开光效.svga"
import posterSvga from "@/assets/svga/5输出刮卡.svga"
import {Button} from "@grace/ui";
import {globalMsg} from "@/pages/GamePage/event/MessageManager.ts";
import {GameEvent} from "@/pages/GamePage/GameEvent.ts";
import {ECard, ECardType} from "@/common.ts";
import musicStore from "@/store/musicStore.ts";
import collectPoster from "@/assets/music/收起海报.mp3";
export interface ICompositePanelProps extends HTMLAttributes<HTMLDivElement> {
count: number,
cardName: ECard,
}
@observer
class CompositePanel extends React.Component<ICompositePanelProps> {
state = {
showEffect: false,
showPoster: false,
}
componentDidMount() {
gsap.timeline({defaults: {ease: "sine.inOut"}})
.set(".card1", {x: -100 * remScale})
.to(".card1", {x: 0, scale: 1.1, duration: 0.666})
.to(".card1", {scale: 1, duration: 0.333})
.to(".card1", {x: 18 * remScale, duration: 0.333})
.to(".card1", {x: 0, duration: 0.333})
.to(".card1", {x: 18 * remScale, duration: 0.133})
gsap.timeline({defaults: {ease: "sine.inOut"}})
.set(".card2", {x: 100 * remScale})
.to(".card2", {x: 0, scale: 1.1, duration: 0.666})
.to(".card2", {scale: 1, duration: 0.333})
.to(".card2", {x: -18 * remScale, duration: 0.333})
.to(".card2", {x: 0, duration: 0.333})
.to(".card2", {x: -18 * remScale, duration: 0.133})
.call(() => {
this.setState({showEffect: true});
gsap.timeline({defaults: {ease: "sine.inOut"}})
.delay(0.5)
.to(".posterDiv", {scale: 1, duration: 0.333})
});
}
onEnd = () => {
}
clickPosterBtn = () => {
gsap.timeline({defaults: {ease: "sine.inOut"}})
.to(".CompositePanel", {background: "rgba(0,0,0,0)", duration: 0.233})
musicStore.playSound(collectPoster);
gsap.timeline({defaults: {ease: "sine.inOut"}})
.to(".CompositePanel", {
x: -180 * remScale, y: 520 * remScale,
scale: 0.1, duration: 0.5
})
.call(() => {
globalMsg.emit(GameEvent.PosterClose);
})
}
render() {
const {count, cardName} = this.props;
const {showEffect} = this.state;
const card1Src = new URL(`../../../assets/Game/card/${cardName}${ECardType.A}.png`, import.meta.url).href;
const card2Src = new URL(`../../../assets/Game/card/${cardName}${ECardType.B}.png`, import.meta.url).href;
const posterSrc = new URL(`../../../assets/poster/${cardName}.png`, import.meta.url).href;
return <div className="CompositePanel">
<SvgaPlayer className="CompositeBg" src={bgSvga}/>
<div className="CompositePanel_title">{count}碰</div>
<img src={card1Src} className="card card1"/>
<img src={card2Src} className="card card2"/>
{showEffect && <SvgaPlayer
className="CompositeEffect"
src={effectSvga}
loop={1}
onEnd={this.onEnd}
/>}
<div className="posterDiv" style={{
transform: "scale(0)"
}}>
<img className="poster" src={posterSrc}/>
<SvgaPlayer
className="posterSvga"
src={posterSvga}
loop={1}
/>
<Button className="posterBtn md11" onClick={this.clickPosterBtn}/>
</div>
</div>;
}
}
export default CompositePanel;
src/pages/GamePage/GamePage.less
View file @ 6c14d4e7
......@@ -26,55 +26,6 @@
height: 1624px;
}
.posterBtn {
position: absolute;
left: 18px;
top: 1285px;
width: 346px;
height: 120px;
.webpBg("GamePage/我的海报.png");
}
.dealCardBtn {
position: absolute;
left: 388px;
top: 1285px;
width: 347px;
height: 120px;
.webpBg("GamePage/发牌.png");
}
.backBtn {
position: absolute;
left: 0;
top: 270px;
width: 112px;
height: 60px;
.webpBg("GamePage/返回.png");
transform-origin: center left !important;
}
.progressTitle {
position: absolute;
left: 48px;
top: 366px;
width: 157px;
height: 55px;
.webpBg("GamePage/bt.png");
}
.progressTxt {
font-size: 38px;
color: rgb(237, 74, 14);
line-height: 2.514;
text-align: left;
position: absolute;
left: 212px;
top: 350px;
font-weight: bold;
}
.musicBtn {
position: absolute;
left: 678px;
......@@ -83,23 +34,4 @@
height: 46px;
}
.progressBar {
position: absolute;
left: 41px;
top: 425px;
width: 664px;
height: 43px;
.webpBg("GamePage/bar.png");
.progressFill {
position: absolute;
left: 10px;
top: 7px;
width: 648px;
height: 27px;
border-radius: 27px;
.webpBg("GamePage/fill.png");
background-size: 648px 27px;
}
}
}
src/pages/GamePage/GamePage.tsx
View file @ 6c14d4e7
......@@ -7,56 +7,23 @@ import {AnimatedSprite, Application, Assets, Sprite, Ticker} from "pixi.js";
import {Ease, Tween} from "./tween";
import bgImg from "../../assets/GamePage/bg.jpg";
import {Card, TCardInfo} from "@/pages/GamePage/Card.ts";
import {shuffle, waitTime} from "@/utils/utils.ts";
import {globalMsg} from "@/pages/GamePage/event/MessageManager.ts";
import {GameEvent} from "@/pages/GamePage/GameEvent.ts";
import CompositePanel from "@/pages/GamePage/CompositePanel/CompositePanel.tsx";
import {initBundle} from "@/pages/GamePage/Helper.ts";
import store from "@/store/store.ts";
import {PAGE_MAP} from "@/utils/constants.ts";
import gameStore from "@/store/gameStore.ts";
import {ECard, ECardType} from "@/common.ts";
import MusicBtn from "@/core/components/MusicBtn/MusicBtn.tsx";
import musicStore from "@/store/musicStore.ts";
const cardSlot = [
{x: 68, y: 587,},
{x: 275, y: 587,},
{x: 483, y: 587,},
{x: 68, y: 872,},
{x: 275, y: 872,},
{x: 483, y: 872,},
]
export interface IGamePageState {
compositeCard: ECard,
completeCount: number,
}
import chooseAudio from "@/assets/music/选择.mp3";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
@observer
class GamePage extends React.Component {
state: IGamePageState = {
compositeCard: null,
completeCount: 0,
}
gameCanvas: HTMLCanvasElement = null;
app: Application = null;
cardData = [
null, null, null,
null, null, null
];
cardPool: TCardInfo[] = null;
chooseCard: Card[] = [];
async componentDidMount() {
await initBundle();
......@@ -66,86 +33,9 @@ class GamePage extends React.Component {
}
initEvent() {
globalMsg.on(GameEvent.ClickCard, this.onClickCard, this);
globalMsg.on(GameEvent.PosterClose, this.onPosterClose, this);
}
async onClickCard(event: GameEvent, card: Card) {
if (this.chooseCard.length >= 2) return;
if (card.select) {
this.chooseCard.splice(this.chooseCard.indexOf(card), 1);
card.select = false;
return;
}
musicStore.playSound(chooseAudio);
this.chooseCard.push(card);
card.select = true;
if (this.chooseCard.length === 2) {
await waitTime(1000);
const [card1, card2] = this.chooseCard;
if (card1.cardName === card2.cardName) {
card1.removeFromParent();
card2.removeFromParent();
this.cardData[this.cardData.indexOf(card1)] = null;
this.cardData[this.cardData.indexOf(card2)] = null;
this.setState({
compositeCard: card1.cardName,
completeCount: this.state.completeCount + 1
});
gameStore.poster(card1.cardName);
} else {
Toast.show("选错啦");
card1.select = false;
card2.select = false;
}
this.chooseCard.length = 0;
}
}
onPosterClose = () => {
this.setState({compositeCard: null,});
this.dealCard();
this.check();
}
check = () => {
const death = this.checkDeath();
const win = this.checkWin();
if (death || win) {
gameStore.submit(win, this.state.completeCount);
}
}
checkDeath() {
const cardMap = {};
for (let i = 0; i < this.cardData.length; i++) {
const card = this.cardData[i];
if (!card) continue;
if (cardMap[card.cardName]) {
return false;
} else {
cardMap[card.cardName] = true;
}
}
return true;
}
checkWin() {
const haveCard = this.cardData.filter(Boolean);
return !haveCard.length && !this.chooseCard.length;
}
componentWillUnmount() {
globalMsg.off(GameEvent.ClickCard, this.onClickCard, this);
globalMsg.off(GameEvent.PosterClose, this.onPosterClose, this);
this.app?.destroy();
window["__app"] = null;
}
......@@ -187,115 +77,22 @@ class GamePage extends React.Component {
Tween.flush();
};
initCardPool = () => {
const cardArr = Object.values(ECard);
shuffle(cardArr);
const pre = cardArr.splice(0, 2);
const poolHead: TCardInfo[] = [];
pre.forEach((card) => {
poolHead.push(
{cardName: card, type: ECardType.A,},
{cardName: card, type: ECardType.B,}
);
})
const poolTail = [];
cardArr.forEach((card) => {
poolTail.push(
{cardName: card, type: ECardType.A,},
{cardName: card, type: ECardType.B,}
);
})
this.cardPool = [
...shuffle(poolHead),
...shuffle(poolTail),
];
}
dealCard() {
if (!this.cardPool) this.initCardPool();
if (!this.cardPool.length) return;
let dealCount = 0;
this.cardData.forEach((card, index) => {
if (!card) {
const cardInfo = this.cardPool.shift();
card = new Card(cardInfo);
this.app.stage.addChild(card);
this.cardData[index] = card;
Tween.get(card)
.set({x: 500, y: 1300, scale: 0.1})
.wait(66 * dealCount++)
.to({
x: cardSlot[index].x,
y: cardSlot[index].y,
scale: 1,
}, 666, Ease.quadInOut);
}
});
}
/**
* 点击海报
*/
clickPoster = () => {
Toast.show("游戏结束后可在“活动首页”进行查看");
}
/**
* 点击发牌
*/
clickDealCard = () => {
if (this.cardPool && !this.cardPool.length) {
return Toast.show("全部卡牌已发完～");
}
const haveCard = this.cardData.filter(Boolean);
if (haveCard.length >= 6) {
return Toast.show("当前无空余卡槽位置～");
}
this.dealCard();
}
/**
* 点击返回
*/
clickBack = () => {
PageCtrl.changePage(PAGE_MAP.HOME_PAGE);
PageCtrl.backPage();
}
render() {
const {compositeCard, completeCount} = this.state;
return <div className="GamePage">
<div className="gameBg"/>
<canvas
className="gameCanvas"
ref={(el) => this.gameCanvas = el}
/>
<div className="progressTitle"/>
<div className="progressTxt">({completeCount}/8)</div>
<div className="progressBar">
<div className="progressFill"
style={{
width: `${completeCount / 8 * 648 / 100}rem`
}}
/>
</div>
<MusicBtn className="musicBtn md10"/>
<Button className="posterBtn md9" onClick={this.clickPoster}/>
<Button className="dealCardBtn md8" onClick={this.clickDealCard}/>
<Button className="backBtn md7" onClick={this.clickBack}/>
{compositeCard && <CompositePanel count={completeCount} cardName={compositeCard}/>}
<MusicBtn className="musicBtn"/>
<Button className="backBtn" onClick={this.clickBack}/>
</div>;
}
}
......
src/pages/GamePage/event/EventDispatcher.ts deleted 100644 → 0
View file @ feb25ffe
import {ListenerFunc} from "./EventMessage";
import {MessageEventData} from "./MessageManager";
/* 事件对象基类，继承该类将拥有发送和接送事件的能力 */
export class EventDispatcher {
protected _msg: MessageEventData | null = null;
/**
* 注册全局事件
* @param event 事件名
* @param listener 处理事件的侦听器函数
* @param object 侦听函数绑定的作用域对象
*/
on(event: string, listener: ListenerFunc, object: any) {
if (this._msg == null) {
this._msg = new MessageEventData();
}
this._msg.on(event, listener, object);
}
/**
* 移除全局事件
* @param event 事件名
*/
off(event: string) {
if (this._msg) {
this._msg.off(event);
}
}
/**
* 触发全局事件
* @param event 事件名
* @param args 事件参数
*/
dispatchEvent(event: string, ...args: any) {
if (this._msg == null) {
this._msg = new MessageEventData();
}
this._msg.dispatchEvent(event, ...args);
}
/**
* 销毁事件对象
*/
destroy() {
if (this._msg) {
this._msg.clear();
}
this._msg = null;
}
}
src/pages/GamePage/event/EventMessage.ts deleted 100644 → 0
View file @ feb25ffe
/**
* 全局事件监听方法
* @param event 事件名
* @param args 事件参数
*/
export type ListenerFunc = (event: string, ...args: any) => void
/** 框架内部全局事件 */
export enum EventMessage {
/** 游戏从后台进入事件 */
GAME_SHOW = "GAME_ENTER",
/** 游戏切到后台事件 */
GAME_HIDE = "GAME_EXIT",
/** 游戏画笔尺寸变化事件 */
GAME_RESIZE = "GAME_RESIZE",
/** 游戏全屏事件 */
GAME_FULL_SCREEN = "GAME_FULL_SCREEN",
/** 游戏旋转屏幕事件 */
GAME_ORIENTATION = "GAME_ORIENTATION"
}
src/pages/GamePage/event/MessageManager.ts deleted 100644 → 0
View file @ feb25ffe
import {ListenerFunc} from "./EventMessage";
class EventData {
public event!: string;
public listener!: ListenerFunc;
public object: any;
}
/** 批量注册、移除全局事件对象 */
export class MessageEventData {
private events: Map<string, Array<EventData>> = new Map();
/**
* 注册全局事件
* @param event 事件名
* @param listener 处理事件的侦听器函数
* @param object 侦听函数绑定的作用域对象
*/
on(event: string, listener: ListenerFunc, object: object) {
let eds = this.events.get(event);
if (eds == null) {
eds = [];
this.events.set(event, eds);
}
let ed: EventData = new EventData();
ed.event = event;
ed.listener = listener;
ed.object = object;
eds.push(ed);
globalMsg.on(event, listener, object);
}
/**
* 移除全局事件
* @param event 事件名
*/
off(event: string) {
let eds = this.events.get(event);
if (!eds) return;
for (let eb of eds) {
globalMsg.off(event, eb.listener, eb.object);
}
this.events.delete(event);
}
/**
* 触发全局事件
* @param event 事件名
* @param args 事件参数
*/
dispatchEvent(event: string, ...args: any) {
globalMsg.dispatchEvent(event, ...args);
}
/** 清除所有的全局事件监听 */
clear() {
const keys = Array.from(this.events.keys());
for (let event of keys) {
this.off(event)
}
}
}
/**
* 全局消息管理
* @help https://gitee.com/dgflash/oops-framework/wikis/pages?sort_id=12037894&doc_id=2873565
* @example
// 注册持续监听的全局事件
export class RoleViewComp extends Component{
onLoad(){
// 监听全局事件
oops.message.on(GameEvent.GameServerConnected, this.onHandler, this);
}
protected onDestroy() {
// 对象释放时取消注册的全局事件
oops.message.off(GameEvent.GameServerConnected, this.onHandler, this);
}
private onHandler(event: string, args: any) {
switch (event) {
case GameEvent.GameServerConnected:
console.log("处理游戏服务器连接成功后的逻辑");
break;
}
}
}
// 注册只触发一次的全局事件
export class RoleViewComp extends Component{
onLoad(){
// 监听一次事件，事件响应后，该监听自动移除
oops.message.once(GameEvent.GameServerConnected, this.onHandler, this);
}
private onHandler(event: string, args: any) {
switch (event) {
case GameEvent.GameServerConnected:
console.log("处理游戏服务器连接成功后的逻辑");
break;
}
}
}
*/
export class MessageManager {
private events: Map<string, Array<EventData>> = new Map();
/**
* 注册全局事件
* @param event 事件名
* @param listener 处理事件的侦听器函数
* @param object 侦听函数绑定的作用域对象
*/
on(event: string, listener: ListenerFunc, object: object) {
if (!event || !listener) {
console.warn(`注册【${event}】事件的侦听器函数为空`);
return;
}
let eds = this.events.get(event);
if (eds == null) {
eds = [];
this.events.set(event, eds);
}
let length = eds.length;
for (let i = 0; i < length; i++) {
let bin = eds[i];
if (bin.listener == listener && bin.object == object) {
console.warn(`名为【${event}】的事件重复注册侦听器`);
}
}
let data: EventData = new EventData();
data.event = event;
data.listener = listener;
data.object = object;
eds.push(data);
}
/**
* 监听一次事件，事件响应后，该监听自动移除
* @param event 事件名
* @param listener 事件触发回调方法
* @param object 侦听函数绑定的作用域对象
*/
once(event: string, listener: ListenerFunc, object: object) {
let _listener: any = ($event: string, ...$args: any) => {
this.off(event, _listener, object);
_listener = null;
listener.call(object, $event, $args);
}
this.on(event, _listener, object);
}
/**
* 移除全局事件
* @param event 事件名
* @param listener 处理事件的侦听器函数
* @param object 侦听函数绑定的作用域对象
*/
off(event: string, listener: Function, object: object) {
let eds = this.events.get(event);
if (!eds) {
console.log(`名为【${event}】的事件不存在`);
return;
}
let length = eds.length;
for (let i = 0; i < length; i++) {
let bin: EventData = eds[i];
if (bin.listener == listener && bin.object == object) {
eds.splice(i, 1);
break;
}
}
if (eds.length == 0) {
this.events.delete(event);
}
}
/**
* 触发全局事件
* @param event 事件名
* @param args 事件参数
*/
_dispatchEvent(event: string, ...args: any) {
let list = this.events.get(event);
if (list != null) {
let eds: Array<EventData> = list.concat();
let length = eds.length;
for (let i = 0; i < length; i++) {
let eventBin = eds[i];
eventBin.listener.call(eventBin.object, event, ...args);
}
}
}
dispatchEvent(event: string, ...args: any) {
this._dispatchEvent(event, ...args);
}
emit(event: string, ...args: any) {
this._dispatchEvent(event, ...args);
}
}
export const globalMsg = new MessageManager();
src/pages/HomePage/HomePage.tsx
View file @ 6c14d4e7
......@@ -47,18 +47,6 @@ class HomePage extends React.Component<any, any> {
ModalCtrl.showModal(RulePanel);
}
clickPoster = () => {
if(!store.judgeActTime(true, false)) return;
PageCtrl.changePage(PAGE_MAP.POSTER_PAGE);
}
clickDraw = () => {
if(!store.judgeActTime()) return;
store.changePage(PAGE_MAP.DRAW_PAGE);
}
render() {
const {remainTimes} = store.indexData
......@@ -77,11 +65,9 @@ class HomePage extends React.Component<any, any> {
<div className="cardBg"/>
<SvgaPlayer className="homeSvga" src={homeSvga}/>
<Button className="poster md4" onClick={this.clickPoster}/>
<div className="numBg">
剩余次数：{remainTimes}
</div>
<Button className="draw_icon" onClick={this.clickDraw}/>
<Button className="starGame md5" onClick={this.startGame}/>
</div>;
......
src/pages/LoadingDemo/LoadingDemo.tsx
View file @ 6c14d4e7
......@@ -4,6 +4,8 @@ import { PAGE_MAP } from "@/utils/constants.ts";
import store from "../../store/store";
import { preload } from "@/core/preload.ts";
import "./LoadingDemo.less";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import HomePage from "@/pages/HomePage/HomePage.tsx";
@observer
class LoadingDemo extends React.Component {
......@@ -41,7 +43,7 @@ class LoadingDemo extends React.Component {
jump = () => {
setTimeout(() => {
store.changePage(PAGE_MAP.HOME_PAGE); // 跳转页面
PageCtrl.changePage(HomePage); // 跳转页面
}, 100);
};
......
src/pages/MyPrize/MyPrize.tsx
View file @ 6c14d4e7
......@@ -6,6 +6,7 @@ import store from "@/store/store.ts";
import {PAGE_MAP} from "@/utils/constants.ts";
import {dateFormatter} from "@/utils/utils.ts";
import API from "@/api";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
@observer
class MyPrize extends React.Component<any, any> {
......@@ -29,7 +30,7 @@ class MyPrize extends React.Component<any, any> {
}
clickBack = () => {
store.changePage(this.props?.from || PAGE_MAP.HOME_PAGE);
PageCtrl.backPage();
}
clickItem = (item) => {
......
src/panels/FailPanel/FailPanel.less
View file @ 6c14d4e7
......@@ -7,15 +7,6 @@
left: 0;
top: 0;
.FailEffect {
position: absolute;
left: 0;
top: 244px;
width: 750px;
height: 1032px;
.webpBg("common/氛围.png");
}
.FailBg {
position: absolute;
left: 93px;
......
src/panels/FailPanel/FailPanel.tsx
View file @ 6c14d4e7
......@@ -24,7 +24,6 @@ class FailPanel extends React.Component {
render() {
return <div className="FailPanel">
<div className="FailEffect"/>
<div className="FailBg"/>
<Button className="cancel md12" onClick={this.clickCancel}/>
......
src/panels/PosterPanel/PosterPanel.less deleted 100644 → 0
View file @ feb25ffe
@import "../../res.less";
.PosterPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.popupCenterShow();
.poster {
position: absolute;
left: 75px;
top: 213px;
width: 598px;
height: 1037px;
}
.posterBtn {
position: absolute;
left: 230px;
top: 1275px;
width: 300px;
height: 77px;
.webpBg("PosterPanel/收起海报.png");
}
}
src/panels/PosterPanel/PosterPanel.tsx deleted 100644 → 0
View file @ feb25ffe
import React from "react";
import { observer } from "mobx-react";
import "./PosterPanel.less";
import { Button } from "@grace/ui";
import { ECard } from "@/common.ts";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
export interface IPrizePanelProps {
cardName: ECard,
}
@observer
class PosterPanel extends React.Component<IPrizePanelProps> {
componentDidMount() {
}
clickPosterBtn = () => {
ModalCtrl.closeModal();
};
render() {
const { cardName } = this.props;
const posterSrc = new URL(`../../assets/poster/${cardName}.png`, import.meta.url).href;
return <div className="PosterPanel modal_center">
<img className="poster" src={posterSrc}/>
<Button className="posterBtn" onClick={this.clickPosterBtn}/>
</div>;
}
}
export default PosterPanel;
src/panels/PrizePanel/PrizePanel.less
View file @ 6c14d4e7
......@@ -7,15 +7,6 @@
left: 0;
top: 0;
.PrizeEffect {
position: absolute;
left: 0;
top: 244px;
width: 750px;
height: 1032px;
.webpBg("common/氛围.png");
}
.PrizeBg {
position: absolute;
left: 93px;
......
src/panels/PrizePanel/PrizePanel.tsx
View file @ 6c14d4e7
......@@ -35,7 +35,6 @@ class PrizePanel extends React.Component<IPrizePanelProps> {
const { prizeVO } = this.props;
return <div className="PrizePanel">
<div className="PrizeEffect"/>
<div className="PrizeBg"/>
<img className="prizeImg" src={prizeVO.prizeImg}/>
<div className="prizeName">{prizeVO?.prizeName}</div>
......
src/panels/RulePanel/RulePanel.less
View file @ 6c14d4e7
......@@ -7,15 +7,6 @@
left: 0;
top: 0;
.effect {
position: absolute;
left: 0;
top: 244px;
width: 750px;
height: 1032px;
.webpBg("common/氛围.png");
}
.ruleBg {
position: absolute;
left: 93px;
......
src/panels/RulePanel/RulePanel.tsx
View file @ 6c14d4e7
......@@ -18,7 +18,6 @@ class RulePanel extends React.Component {
render() {
return <div className="RulePanel modal_center">
<div className="effect"/>
<div className="ruleBg"/>
<div className="content" dangerouslySetInnerHTML={{
__html: store.ruleInfo,
......
src/store/gameStore.ts
View file @ 6c14d4e7
......@@ -5,6 +5,8 @@ import {Toast} from "@grace/ui";
import {AESEncrypt} from "@/utils/Crypto.ts";
import {PAGE_MAP} from "@/utils/constants.ts";
import {ECard, getPosterId} from "@/common.ts";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import HomePage from "@/pages/HomePage/HomePage.tsx";
class GameStore {
......@@ -53,7 +55,7 @@ class GameStore {
const {success, data} = await API.submit(params);
if (!success) {
store.changePage(PAGE_MAP.HOME_PAGE);
PageCtrl.changePage(HomePage);
return;
}
......
src/store/store.ts
View file @ 6c14d4e7
import { makeAutoObservable, } from 'mobx';
import API from '../api/index';
import { PAGE_MAP } from "../utils/constants";
import { GetCurrSkinId, getCustomShareId } from "../utils/utils";
import { Toast } from "@grace/ui";
import { IWxShareInfo } from "@/built-in/share/weixin/weixin.ts";
const skinId = GetCurrSkinId() || getCustomShareId();
class Store {
constructor() {
......@@ -30,24 +25,6 @@ class Store {
},
};
/** 当前页面 */
curPage = {
// TODO 举例子，自定义页面，因为mng更新原因原数字id会对应一个新的字符串id
"5055": "sharePage",
Did1NDA0NDc: "sharePage",
myPrize: "myPrize", // TODO 举例子 新宿台奖品页
index: PAGE_MAP.HOME_PAGE,
}[skinId] || PAGE_MAP.HOME_PAGE;
pageData = {};
/** 场景切换 */
changePage(page: PAGE_MAP, data = {}) {
this.pageData = data;
this.curPage = page;
}
ruleInfo = '';
/** 获取活动规则 */
......
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