game-frame-template/src/dom.js

// 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.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 {number} type
 */
export function setPauseButtonStatus(type) {
  const element = $id('pause');
  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 actionContainer = $id('action-container')
  if (eventType === 'start') { // 点了开始
    start.classList.add('d-none');
    pause.classList.remove('d-none');
    actionContainer.classList.remove('d-none');
  } else if (eventType === 'finish') {
    start.classList.remove('d-none');
    pause.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);
}