diff --git a/src/config.js b/src/config.js index 8c851a4..caca57a 100644 --- a/src/config.js +++ b/src/config.js @@ -1,3 +1,6 @@ +// 各个类型的游戏有差异 需要修改 并验证 +// https://ccsensp.yuque.com/docs/share/f8296710-f2fe-4912-ba95-13e005ff7b1a?# 《黄金样品(鸟妈妈回家)v2.0改版》 + // 生成单一的动作构成数组 const directions = (eventCode = 0) => { const results = []; diff --git a/src/dom.js b/src/dom.js new file mode 100644 index 0000000..6377a6e --- /dev/null +++ b/src/dom.js @@ -0,0 +1,92 @@ +// DEBUG: 该文件仅适用于测试调试程序 正式版删除 +import { sendMessage } from './frame'; + +// 事件功能按钮 绑定动作 发送消息 +export function handleEventButtons() { + const eventButtons = document.querySelectorAll('div.events button'); + + eventButtons.forEach(item => { + item.addEventListener('click', function () { + const { event } = item.dataset; + + switch (event) { + case 'pause': + case 'continue': + setPauseButtonStatus(item, +item.dataset.status); + break; + } + changeButtonsDisplay(event); + sendMessage(event); + }) + }) +} + +// play code按钮 绑定动作 发送消息 +export function handlePlayCodeButtons() { + const actionButtons = document.querySelectorAll('div.actions button'); + + actionButtons.forEach(item => { + item.addEventListener('click', function () { + const { code } = item.dataset; + + sendMessage('play', code); + }) + }) +} + +/** + * 设置 暂停/继续 按钮的状态样式等 + * @param {HTMLElement} element + * @param {number} type + */ +function setPauseButtonStatus(element, type) { + if (type === 0) { // 点击的是暂停 + element.dataset.status = '1'; + element.dataset.event = 'continue'; + element.textContent = '继续'; + element.classList.remove('btn-warning'); + element.classList.add('btn-success'); + } else { + // 点击的是继续 游戏 + element.dataset.status = '0'; + element.dataset.event = 'pause'; + element.textContent = '暂停'; + element.classList.remove('btn-success'); + element.classList.add('btn-warning'); + } +} + +/** + * 切换按钮的显示状态 + * @param eventType + */ +export 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); +} diff --git a/src/frame.js b/src/frame.js index 3945a84..86d260d 100644 --- a/src/frame.js +++ b/src/frame.js @@ -1,5 +1,6 @@ import { game } from './config'; import { creatData } from './message'; +import { changeButtonsDisplay } from './dom'; let frame = document.getElementById('iframe'); let contentWindow = frame.contentWindow; @@ -11,39 +12,6 @@ export function setFrameStyle() { frame.style.height = Math.round(html.clientWidth * game.frame.height / game.frame.width) + 'px'; } -// 事件功能按钮 绑定动作 发送消息 -export function handleEventButtons() { - const eventButtons = document.querySelectorAll('div.events button'); - - eventButtons.forEach(item => { - item.addEventListener('click', function () { - const { event } = item.dataset; - - switch (event) { - case 'pause': - case 'continue': - setPauseButtonStatus(item, +item.dataset.status); - break; - } - changeButtonsDisplay(event); - sendMessage(event); - }) - }) -} - -// play code按钮 绑定动作 发送消息 -export function handlePlayCodeButtons() { - const actionButtons = document.querySelectorAll('div.actions button'); - - actionButtons.forEach(item => { - item.addEventListener('click', function () { - const { code } = item.dataset; - - sendMessage('play', code); - }) - }) -} - // 收到消息 export function onMessage() { window.addEventListener('message', function(e) { @@ -51,19 +19,11 @@ export function onMessage() { 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'); + if (event === 'pause' || event === 'continue' || event === 'finish') { // 暂停 + sendMessage(event); + changeButtonsDisplay(event); // DEBUG: 改变按钮状态 正式使用不需要的话 就删除掉 } + }, false); } @@ -71,67 +31,10 @@ export function onMessage() { * 发送消息 * @param {string} type 消息类型 */ -function sendMessage(type, ...args) { +export function sendMessage(type, ...args) { const data = creatData(type, ...args); if (!data) { - return alert('错误: 发送消息数据为空'); + return alert('错误: 发送消息数据为空'); // DEBUG: } contentWindow.postMessage(data, frame.src); } - -/** - * 设置 暂停/继续 按钮的状态样式等 - * @param {HTMLElement} element - * @param {number} type - */ -function setPauseButtonStatus(element, type) { - if (type === 0) { // 点击的是暂停 - element.dataset.status = '1'; - element.dataset.event = 'continue'; - element.textContent = '继续'; - element.classList.remove('btn-warning'); - element.classList.add('btn-success'); - } else { - // 点击的是继续 游戏 - element.dataset.status = '0'; - element.dataset.event = 'pause'; - element.textContent = '暂停'; - element.classList.remove('btn-success'); - 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); -} diff --git a/src/index.js b/src/index.js index 69da1e0..4ac69f6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,18 @@ -import {handleEventButtons, handlePlayCodeButtons, onMessage, setFrameStyle} from "./frame"; +import { handleEventButtons, handlePlayCodeButtons } from "./dom"; +import { onMessage, setFrameStyle } from "./frame"; window.addEventListener('load', init, false) window.addEventListener('resize', setFrameStyle, false) function init() { - onMessage(); - setFrameStyle(); - handleEventButtons(); - handlePlayCodeButtons(); + onMessage(); // 监听处理接受到的message + setFrameStyle(); // 设置frame宽高 + + initDom(); +} + +// 初始化dom 正式程序不需要 就删除掉 +function initDom() { + handleEventButtons(); // 按钮绑定事件 + handlePlayCodeButtons(); // 事件play code 绑定事件 }