import Waterful from "./waterful";
import tip from "./tip.png";
import "../../font.css";
import "./water.css";
export default class Game {
  constructor({ containerId, onWon, onLose }) {
    const waterful = new Waterful();
    const container = document.getElementById(containerId);
    const containerWH = container.clientWidth;
    const bg = document.createElement("div");
    bg.style.transform = `scale(${containerWH / 2160})`;
    bg.className = "bg";
    ["left", "right"].forEach((name) => {
      const button = document.createElement("div");
      button.className = "button " + name;
      bg.appendChild(button);
    });
    container.appendChild(bg);
    const tipDom = document.createElement("div");
    tipDom.className = "tip-wrapper";
    tipDom.addEventListener("click", (e) => {
      e.stopPropagation();
      Object.assign(tipDom.style, {
        display: "none",
      });
    });
    const tipImg = document.createElement("img");
    tipImg.className = "tip";
    tipImg.src = tip;
    tipDom.append(tipImg);
    bg.append(tipDom);
    this.tipDom = tipDom;

    const meta = document.createElement("div");
    meta.className = "meta";
    bg.appendChild(meta);
    this.loaded = false;
    this.options = {
      container: bg,
      red: 6,
      yellow: 6,
      green: 6,
      score: {
        left: [],
        right: [],
      },
      callbacks: {
        score(score) {},
        end(score) {
          onWon(score.total);
        },
        step(step) {
          if (step === 0) onLose();
          meta.textContent = `剩余 ${step} 次机会`;
        },
      },
    };
    waterful.preload().then(() => {
      this.loaded = true;
      waterful.init(this.options);
    });
    this.waterful = waterful;
    this.bg = bg;
  }
  showTip() {
    Object.assign(this.tipDom.style, {
      display: "block",
    });
  }
  dispose() {}
  restart() {
    this.showTip();
    this.loaded && this.waterful.restart(this.options);
  }
  pause() {
    this.loaded && this.waterful.pause();
  }
  resume() {
    this.loaded && this.waterful.resume();
  }
}