skipbo/src/static/js/tpl.js

import { connect } from "./socket.js";

const colors = {
  1: "blue",
  2: "blue",
  3: "blue",
  4: "blue",
  5: "green",
  6: "green",
  7: "green",
  8: "green",
  9: "red",
  10: "red",
  11: "red",
  12: "red"
};

export const tpl = {
  card: ({ val, draggable = false }) => `
    <div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
      <div class="card_tri card_color_${colors[val]}"></div>
      <div class="card_number card_number_1">${val}</div>
      <div class="card_number_middle ${colors[val]}">${val}</div>
      <div class="card_number card_number_2">${val}</div>
    </div>
    `,
  joker: ({ val = 0, draggable = false }) => `
    <div class="card_outer"${draggable?" draggable=true":""} data-val="${val}">
      <div class="card_tri card_color_joker"></div>
      <div class="card_number card_number_joker_1">${val}</div>
      <div class="card_number_joker_middle">Skip-Bo</div>
      <div class="card_number card_number_joker_2">${val}</div>
    </div>
  `,
  msgBoxes: {
    tpl: ({ title, content, buttons }) => `
      <div class="msgBox">
        <div class="msgBoxTitle">${title}</div>
        <div>
          <div class="msgBoxContainer">
            <div class="msgBoxContent">
              ${content}
            </div>
          </div>
          <div class="msgBoxButtons">
            ${buttons.map(button => button.tpl).join``}
          </div>
        </div>
      </div>
    `,
    joinGame: {
      title: "join game",
      content: `
        <div style="margin-top: 1em; width: 40%; text-align: center; margin-left: 10%; float: left">
          <h3>Game room</h3>
          <select style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; font-size: 12px;">
            <option>default</option>
          </select>
        </div>
        <div style="margin-top: 1em; width: 40%; text-align: center; float: left">
          <h3>Your name</h3>
          <input type="text" placeholder="Your name" style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; margin-bottom: 1em; font-size: 12px;">
        </div>
      `,
      buttons: [{
        tpl: `<input class="msgButton" type="button" value="Ok" />`,
        event: e => {
          alert("join");
        }
      }, {
        tpl: `<input class="msgButton" type="button" value="Cancel" />`,
        event: e => {
          removemsgBox(e.target.parentNode.parentNode.parentNode);
        }
      }]
    },
    newGame: {
      title: "new game",
      content: `
        <div style="margin-top: 1em; width: 40%; text-align: center; margin-left: 10%; float: left">
          <h3>Game room</h3>
          <input name="gameroom" type="text" value="default" style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; font-size: 12px" />
        </div>
        <div style="margin-top: 1em; width: 40%; text-align: center; float: left">
          <h3>Your name</h3>
          <input name="playername" type="text" placeholder="Your name" style="border-radius: 1em; width: 90%; height: 2em; left: 0; box-sizing: border-box; padding: 0 1em; margin-bottom: 1em; font-size: 12px" />
        </div>
      `,
      buttons: [{
        tpl: `<input class="msgButton" type="button" value="Ok" />`,
        event: e => {
          const box = e.target.parentNode.parentNode.parentNode;
          connect({
            gameroom: box.querySelector("input[name='gameroom']").value,
            playername: box.querySelector("input[name='playername']").value
          });
        }
      }, {
        tpl: `<input class="msgButton" type="button" value="Cancel" />`,
        event: e => {
          removemsgBox(e.target.parentNode.parentNode.parentNode);
        }
      }]
    },
    waitforPlayer: {
      title: "waiting for players",
      content: `
        actually connected: <span id="wfp_players">1</span>
      `,
      buttons: [{
        tpl: `<input class="msgButton" type="button" value="Cancel" />`,
        event: e => {
          removemsgBox(e.target.parentNode.parentNode.parentNode);
        }
      }]
    }
  }
};

const removemsgBox = node => {
  document.querySelector("body").removeChild(node);
  if(document.querySelectorAll(".msgBox").length === 0 && document.querySelector("div#menu").style.display === "none")
    document.querySelector("#black").style.display = "none";
};
export const removeAllmsgBox = () => {
  document.querySelectorAll(".msgbox").forEach(msgbox => {
    removemsgBox(msgbox);
  });
};

export const msgBox = type => {
  if(document.querySelector("#black").style.display === "none")
    document.querySelector("#black").style.display = "block";

  document.querySelector("body").insertAdjacentHTML("afterbegin",
    [tpl.msgBoxes[type]].map(tpl.msgBoxes.tpl).join``
  );
  document.querySelectorAll(".msgBox:first-child input[type='button']").forEach((button, i) => {
    button.addEventListener("click", tpl.msgBoxes[type].buttons[i].event);
  });
  return document.querySelector(".msgBox:first-child");
};