You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.6 KiB
93 lines
2.6 KiB
4 years ago
|
// 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);
|
||
|
}
|