处理接受消息

4 years ago · 943e8afe36
4 changed files with 117 additions and 31 deletions
--- a/public/index.html
+++ b/public/index.html
@ -8,19 +8,19 @@
 	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-<div class="container p-3 clearfix">
+<div class="container p-3  clearfix">
 	<div class="float-start events">
-		<button type="button" class="btn btn-primary btn-sm" data-event="start">开始</button>
-		<button type="button" class="btn btn-warning btn-sm" data-event="pause" data-status="0">暂停</button>
-		<button type="button" class="btn btn-danger btn-sm" data-event="finish">结束</button>
+		<button type="button" class="btn btn-primary btn-sm" data-event="start" id="start">开始</button>
+		<button type="button" class="btn btn-warning btn-sm d-none" id="pause" data-event="pause" data-status="0">暂停</button>
+		<button type="button" class="btn btn-danger btn-sm d-none" id="finish" data-event="finish">结束</button>
 	</div>
-	<div class="float-end actions">
+	<div class="float-end actions d-none" id="action-container">
 		动作：
 		<button type="button" class="btn btn-outline-primary btn-sm" data-code="0">0</button>
 		<button type="button" class="btn btn-outline-secondary btn-sm" data-code="1">1</button>
-		<button type="button" class="btn btn-outline-success btn-sm"  data-code="2">2</button>
+		<button type="button" class="btn btn-outline-success btn-sm" data-code="2">2</button>
 		<button type="button" class="btn btn-outline-danger btn-sm"  data-code="3">3</button>
-		<button type="button" class="btn btn-outline-warning btn-sm"  data-code="4">4</button>
+		<button type="button" class="btn btn-outline-warning btn-sm" data-code="4">4</button>
 		<button type="button" class="btn btn-outline-info btn-sm" data-code="5">5</button>
 	</div>
 </div>
--- a/src/frame.js
+++ b/src/frame.js
@ -18,9 +18,14 @@ export function handleEventButtons() {
  eventButtons.forEach(item => {
    item.addEventListener('click', function () {
      const { event } = item.dataset;
-      if (event === 'pause' || event === 'continue') {
-        setPauseButtonStatus(item);
+
+      switch (event) {
+        case 'pause':
+        case 'continue':
+          setPauseButtonStatus(item, +item.dataset.status);
+          break;
      }
+      changeButtonsDisplay(event);
      sendMessage(event);
    })
  })
@ -39,22 +44,48 @@ export function handlePlayCodeButtons() {
  })
 }

+// 收到消息
+export function onMessage() {
+  window.addEventListener('message', function(e) {
+    console.log(e);
+    if (e.source !== frame.src) return; // 来源
+    const { event } = e.data;
+
+    if (event === 'pause') { // 暂停
+      changeButtonsDisplay('pause');
+      sendMessage('pause');
+    } else if (event === 'continue') { // 继续
+      changeButtonsDisplay('continue');
+      sendMessage('continue');
+    } else if (event === 'finish') {
+      // 结束
+      // 回传finish信息
+      // 切换按钮状态
+      sendMessage('finish');
+      changeButtonsDisplay('finish');
+    }
+  }, false);
+}
+
 /**
 * 发送消息
 * @param {string} type 消息类型
 */
 function sendMessage(type, ...args) {
  const data = creatData(type, ...args);
+  if (!data) {
+    return alert('错误: 发送消息数据为空');
+  }
  contentWindow.postMessage(data, frame.src);
 }

 /**
 * 设置 暂停/继续 按钮的状态样式等
 * @param {HTMLElement} element
+ * @param {number} type
 */
-function setPauseButtonStatus(element) {
-  const type = element.dataset.status;
-  if (+type === 0) { // 点击的是暂停
+function setPauseButtonStatus(element, type) {
+  if (type === 0) { // 点击的是暂停
    element.dataset.status = '1';
    element.dataset.event = 'continue';
    element.textContent = '继续';
@ -69,3 +100,38 @@ function setPauseButtonStatus(element) {
    element.classList.add('btn-warning');
  }
 }
+
+/**
+ * 切换按钮的显示状态
+ * @param eventType
+ */
+function changeButtonsDisplay(eventType) {
+  const start = $id('start');
+  const pause = $id('pause');
+  const finish = $id('finish');
+  const actionContainer = $id('action-container')
+  if (eventType === 'start') { // 点了开始
+    start.classList.add('d-none');
+    pause.classList.remove('d-none');
+    finish.classList.remove('d-none');
+    actionContainer.classList.remove('d-none');
+  } else if (eventType === 'finish') {
+    start.classList.remove('d-none');
+    pause.classList.add('d-none');
+    finish.classList.add('d-none');
+    actionContainer.classList.add('d-none');
+  } else if ((eventType === 'pause')) {
+    actionContainer.classList.add('d-none');
+  } else if (eventType === 'continue') {
+    actionContainer.classList.remove('d-none');
+  }
+}
+
+/**
+ * 通过id获取元素
+ * @param {string} id
+ * @returns {HTMLElement}
+ */
+function $id(id) {
+  return document.getElementById(id);
+}
--- a/src/index.js
+++ b/src/index.js
@ -1,9 +1,10 @@
-import {handleEventButtons, handlePlayCodeButtons, setFrameStyle} from "./frame";
+import {handleEventButtons, handlePlayCodeButtons, onMessage, setFrameStyle} from "./frame";

 window.addEventListener('load', init, false)
 window.addEventListener('resize', setFrameStyle, false)

 function init() {
+  onMessage();
  setFrameStyle();
  handleEventButtons();
  handlePlayCodeButtons();
--- a/src/message.js
+++ b/src/message.js
@ -2,10 +2,13 @@ import { game } from './config';
 const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game;

 let currentScore = 0; // 当前得分
-let currentTimes = 10; // 当前次数
+let currentTimes = 0; // 当前次数

 // 生成开始游戏消息需要的data数据
 const createStartData = () => {
+  currentScore = 0;
+  currentTimes = 0;
+
  const now = Date.now();
  const countFinishTime = now + count * 1000; // 倒计时结束时间
  const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间
@ -66,23 +69,32 @@ const createFinishData = (score=currentScore, times=currentTimes) => {

 /**
 * 生成 play消息 发送的data数据
- * @param {number} score 当前得分
- * @param {number} times 当前次数
 * @param {number} direction 事件code 0默认 共6个事件参数 0 1 2 3 4 5
- * @returns {{data: {score: number, times: number, param: {direction: number}, status: number}, event: string}}
 */
-const createPlayData = ({ score=currentScore, times=currentTimes , direction=0 }) => {
-  return {
-    event: "play",
-    data: {
-      score, // 得分
-      times, // 次数
-      status: 1, // 游戏状态 0 1 2
-      param: {
-        direction, // 0 1 2 3 4 5 共6中事件参数
+const createPlayData = (direction= 0) => {
+  let data = null;
+  if (validatePlayCode(direction, currentTimes)) { // 动作正确
+    currentTimes += 1;
+    const directionTarget = scores.find(item => item.direction === direction);
+    if (!directionTarget) {
+      alert('配置信息有误, 未找到事件分值')
+    }
+    currentScore += directionTarget.score
+    data = {
+      event: "play",
+      data: {
+        score: currentScore, // 得分
+        times: currentTimes, // 次数
+        status: 1, // 游戏状态 0 1 2
+        param: {
+          direction, // 0 1 2 3 4 5 共6中事件参数
+        }
      }
    }
+  } else {
+    alert('错误: 动作执行错误');
  }
+  return data;
 }

 // 生成提交的数据
@ -99,16 +111,23 @@ export const creatData = (eventType, ...args) => {
      data = createPauseData(1);
      break;
    case 'finish':
-      data = createFinishData(); // TODO:
+      data = createFinishData();
      break;
    case 'play':
-      data = createPlayData({direction: +args[0]});
+      data = createPlayData(+args[0]);
      break;
    default:
      break;
  }
-  if (!data) {
-    alert('时间类型参数有误，消息数据为空');
-  }
+
  return data;
 }
+
+/**
+ * 验证code是否是当前应该执行的动作代码
+ * @param code
+ * @returns {boolean}
+ */
+function validatePlayCode(code, currentTimes) {
+  return code === directions[currentTimes];
+}