基础玩法组件

在深入分析现有的基础玩法组件后，可以将其大概分为两类：

• 目标可控：我们可以控制目标命中哪个奖品，而玩家无法控制，如大转盘
• 目标不可控：玩家可以控制命中哪个目标（不代表真实奖励），而我们不可以控制，如翻牌子，部分套猫

这两类在后续的讨论中会有一些区别

基础玩法组件逻辑规范

在线上时我们可能会需要在玩法组件的各个阶段做一些事情，所以这边就通过规范组件的状态、方法和事件来让组件统一

状态

主要分为以下状态，有些状态可能就维持了一瞬间，有些可能是长时间存在的：

• 初始化状态（0）：玩法组件默认状态
• 等待开始状态（1）：玩法组件初始化好之后，进入等待开始状态，比如大转盘缓慢转动等待玩法点击开始
• 开始状态（2）：玩家点了开始，组件开启启动，比如大转盘转速逐渐增大
• 等待结果状态（3）：组件一直播放动效，等待告知需要命中什么目标，比如大转盘一直在高速转动不停止。当然不可控组件没有这个状态，而是直接到下一个状态
• 结果状态（4）：组件命中目标的过程，比如大转盘减速转动，并慢慢停在目标位置
• 奖品展示状态（5）：组件停在目标位置，比如页面可以根据大转盘的结果展示对应奖励/弹窗等
• 重置状态（6）：组件重置，为了可能有重置动效
• 禁用状态（100）：不可玩时的状态，比如按钮变为灰色

事件

• 状态变化事件（stateChange）：有状态设定，就有状态变化事件
• 点击开始按钮事件（clickStart）：大转盘自带了开始按钮，点击按钮抛出该事件，注意，最好由外部决定是否真正开始，而不是玩法内部直接开始

方法

所有方法都设定为异步/Promise，都涉及到状态变化

• 开始（start）：控制玩法组件开始，对于可控和不可控组件有不同的表现
  • 可控组件：从等待开始状态切换为开始状态，异步结束时切换为等待结果状态
  • 不可控组件：从等待开始状态切换为开始状态，过程中直接切换为结果状态，异步结束时切换为奖品展示状态。其实就是合并了后续的结束方法
• 结束（stop）：仅可控组件拥有，控制玩法组件命中特定目标。其状态变化为从等待结果状态切换为结果状态，异步结束时切换为奖品展示状态
• 重置（reset）：重置玩法组件，即从任意状态切换为重置状态，异步结束时切换为等待开始状态
• 禁用（disable）：让玩法组件不可用，即从任意状态切换为禁用状态

上面的方法中，开始与结束方法对于可控/不可控组件有所区别，下图可以更直观的看出区别

StateConstant

enum StateConstant {
  // 初始化状态
  INIT = 0,
  // 等待开始状态
  WAIT_START = 1,
  // 开始状态
  START = 2,
  // 等待结果状态
  WAIT_END = 3,
  // 结果状态
  END = 4,
  // 结果状态
  PRIZE = 5,
  // 重置状态
  RESET = 6,
  // 不可用状态
  DISABLE = 100,
}

可以如下引入

import { StateConstant } from '@tuia/market-ui';

import StateConstant from '@tuia/market-ui/lib/constants/StateConstant'

BasicBase

根据上述规范，所有基础玩法组件都继承自BasicBase.ts

基本类型定义

// 状态变化事件参数
export interface StateChangeDataType {
  now: StateConstant;
  pre: StateConstant;
}

Methods

名称	入参	出参	说明
start	any	Promise	开始方法
stop	any	Promise	结束方法
reset	any	Promise	重置方法
disable	any	Promise	禁用方法
getState	无	StateConstant	获取状态方法

Events

名称	参数	说明
stateChange	StateChangeDataType	状态变化事件
clickStart	无	开始按钮被点击时触发

State

暴露了部分computed的数据，方便外部判断

参数	说明	类型	示例
isWaitStart	是否为等待开始状态	boolean	true
isDisable	是否为禁用状态	boolean	false