inertialrush-game-test/dist/components/game/launch.js

This package enables the integration of the Inertial Rush game into any React application, making it easy to showcase the game.

// Generated by CoffeeScript 2.7.0

(function () {
  const localStorageKeySettings = "settings";

  function $(selector) {
    return document.querySelector(selector);
  }

  function $$(selector) {
    return document.querySelectorAll(selector);
  }

  function init(controlType, quality, hud, music, sounds, idShipModel, botLevel, gameMode, name) {
    const hexGL = new bkcore.hexgl.HexGL({
      document: document,
      width: window.innerWidth,
      height: window.innerHeight,
      container: $("#main"),
      overlay: $("#overlay"),
      gameover: $("#step-5"),
      quality: quality,
      difficulty: 0,
      hud: hud,
      music: music,
      sounds: sounds,
      controlType: controlType,
      idShipModel: idShipModel,
      godmode: 0,
      track: "Cityscape",
      botLevel: botLevel,
      gameMode: gameMode,
      player: name,
    });
    window.hexGL = hexGL;
    return hexGL.load({
      onLoad: function () {
        console.log("LOADED.");
        hexGL.init();
        $("#step-3").style.display = "none";
        $("#step-4").style.display = "block";
        return hexGL.start();
      },
      onError: function (error) {
        return console.error(`Error loading ${error}.`);
      },
      onProgress: function (p, t, n) {
        return console.log("LOADED " + t + " : " + n + " ( " + p.loaded + " / " + p.total + " ).");
      },
    });
  }

  /*const URLParameter = bkcore.Utils.getURLParameter;*/
  const settings = localStorageGetItem();

  let name = settings?.name;

  const defaultControls = bkcore.Utils.isTouchDevice() ? 1 : 0;

  let defaultSettings = [
    [
      "controlType",
      ["Keyboard", "Touch" /*, 'LEAP MOTION CONTROLLER', 'GAMEPAD'*/],
      defaultControls,
      "Controls",
    ],
    ["quality", ["Low", "Middle", "High", "Very High"], 3, "Quality"],
    ["hud", ["Off", "On"], 1, "HUD"],
    ["music", ["Off", "On"], 1, "Music"],
    [
      "sounds",
      ["Off", "On"],
      1,
      "Sounds",
    ] /*, ['bot', ['EASY', 'MEDIUM', "HARD"], 2, 'BOT LEVEL: '], ['mode', ['AGAINST BOTS', 'SCORE RESULTS'], 0, 'GAME MODE: ']*/,
  ];
  let botSettings = ["bot", ["Easy", "Medium", "Hard"], 2, "Choose bot level"];
  let gameSettings = [
    "mode",
    ["Score Results", "Play against bots" /*, "Are weapons possible?"*/],
    1,
    "Choose race type",
  ];
  let shipSettings = [
    "ship",
    [
      "Basic Orange",
      "Basic Blue",
      "Black Hawk",
      "Dropship",
      "Fighter GR2",
      "Tiger Fighter",
      "SF Fighter Multirole",
    ],
    0,
    "Choose space ship",
  ];

  if (settings.defaultSettings !== undefined) defaultSettings = settings.defaultSettings;
  if (settings.botSettings !== undefined) botSettings = settings.botSettings;
  if (settings.gameSettings !== undefined) gameSettings = settings.gameSettings;
  if (settings.shipSettings !== undefined) shipSettings = settings.shipSettings;

  let newSettings = [];

  function checkMode() {
    if (gameSettings[2] === 1) {
      $("#s-bot").closest(".race_settings__block").style.display = "block";
      $$(".settings-block .settings-type")[2].style.display = "block";
    } else {
      $("#s-bot").closest(".race_settings__block").style.display = "none";
      $$(".settings-block .settings-type")[2].style.display = "none";
    }
  }

  function checkName() {
    if (name) {
      sendMessage(bkcore.hexgl.connectionToSocket, "savedName", name);
      bkcore.hexgl.connectionToSocket.on("savedNameFail", () => {
        $(".promo__btns__first_row").style.display = "flex";
        $("#start").style.display = "none";
      });
      bkcore.hexgl.connectionToSocket.on("savedNameOk", () => {
        $(".promo__btns__first_row").style.display = "none";
        $("#start").style.display = "flex";
        $("#change_name__button").style.display = "flex";
      });
    }
  }

  function updateSettings() {
    checkMode();
    $$(".settings-block .settings-type .type")[0].textContent = gameSettings[1][gameSettings[2]];
    $$(".settings-block .settings-type .type")[1].textContent = shipSettings[1][shipSettings[2]];
    $$(".settings-block .settings-type .type")[2].textContent = botSettings[1][botSettings[2]];
    $(".p2").src = `./css/spaceShip/${shipSettings[2] + 1}.png`;
  }

  function handleDefaultSettings(param) {
    /*let current;
        param[2] = (current = URLParameter(param[0])) != null ? current : param[2];*/

    selector = $("#s-" + param[0]);
    selector.closest(".modal__main_wrapper").querySelector(".modal__main_title").textContent =
      param[3];
    return selector.querySelectorAll("label").forEach((el, i) => {
      el.querySelector(".checkbox__name").textContent = param[1][i];
      el.querySelector("input").checked = param[2] === i;
    });
  }

  function handleGameSettings(param) {
    /*let current;
        param[2] = (current = URLParameter(param[0])) != null ? current : param[2];*/

    selector = $("#s-" + param[0]);
    selector.closest(".race_settings__block").querySelector(".race_settings_title").textContent =
      param[3];
    return selector.querySelectorAll(".race_settings__type_block").forEach((el, i) => {
      el.querySelector(".race_type_title").textContent = param[1][i];
      if (param[2] === i) el.classList.add("race_settings__type_block-active");
      el.onclick = function () {
        removeActive(".race_settings__type_block", "race_settings__type_block-active");
        el.classList.add("race_settings__type_block-active");
        if (i === 1) {
          $("#s-bot").closest(".race_settings__block").style.display = "block";
        } else $("#s-bot").closest(".race_settings__block").style.display = "none";
      };
    });
  }

  function handleBotSettings(param) {
    /*let current;
        param[2] = (current = URLParameter(param[0])) != null ? current : param[2];*/

    selector = $("#s-" + param[0]);
    selector.closest(".race_settings__block").querySelector(".race_settings_title").textContent =
      param[3];
    return selector.querySelectorAll(".race_level").forEach((el, i) => {
      el.textContent = param[1][i];
      if (param[2] === i) el.classList.add("active");
      el.onclick = function () {
        removeActive(".race_level", "active");
        el.classList.add("active");
      };
    });
  }

  function handleShipSettings(param) {
    removeActive(".swiper-slide", "swiper-slide_active");
    [...$("#s-" + shipSettings[0]).querySelectorAll(".swiper-slide")][param[2]].classList.add(
      "swiper-slide_active"
    );
  }

  updateSettings();
  checkName();

  $("#step-2").onclick = function () {
    $("#step-2").style.display = "none";
    $("#step-3").style.display = "block";
    return init(
      newSettings[0][2],
      newSettings[1][2],
      newSettings[2][2],
      newSettings[3][2],
      newSettings[4][2],
      shipSettings[2],
      botSettings[2],
      gameSettings[2],
      name
    );
  };

  $("#back").onclick = function () {
    return window.location.reload();
  };

  $("#play-again").onclick = function () {
    localStorageSetItem({ ...settings, isPlay: true });
    return window.location.reload();
  };

  $("#settings").onclick = function () {
    $(".modal").style.display = "block";
    const currentSettings = newSettings.length ? newSettings : defaultSettings;
    for (let i = 0; i < currentSettings.length; i++) {
      handleDefaultSettings(currentSettings[i]);
    }
  };

  $("#name__button").onclick = function () {
    name = $("#name__input input").value;
    sendMessage(bkcore.hexgl.connectionToSocket, "name", name);
    bkcore.hexgl.connectionToSocket.on("nameFail", () => {
      alert("This name already exist! Choose another name!");
    });
    bkcore.hexgl.connectionToSocket.on("nameOk", () => {
      localStorageSetItem({ ...settings, name });
      $(".promo__btns__first_row").style.display = "none";
      $("#start").style.display = "flex";
      $("#change_name__button").style.display = "flex";
    });
  };

  $("#change_name__button").onclick = function () {
    $("#name__input input").value = name;
    $(".promo__btns__first_row").style.display = "flex";
    $("#change_name__button").style.display = "none";
    $("#start").style.display = "none";
    $("#change_name__button__cancel").style.display = "flex";
  };

  $("#change_name__button__cancel").onclick = function () {
    $(".promo__btns__first_row").style.display = "none";
    $("#change_name__button").style.display = "flex";
    $("#start").style.display = "flex";
    $("#change_name__button__cancel").style.display = "none";
  };

  $("#save").onclick = function () {
    $(".modal").style.display = "none";
    newSettings = defaultSettings.map((settingsEl) => {
      neEl = [...settingsEl];
      neEl[2] = [...$("#s-" + settingsEl[0]).querySelectorAll("input")].findIndex(
        (selectorEl) => selectorEl.checked
      );
      return neEl;
    });
    localStorageSetItem({ ...settings, defaultSettings: newSettings });
  };

  $(".modal__close").onclick = function () {
    $(".modal").style.display = "none";
  };

  $("#change").onclick = function () {
    $("#step-1").style.display = "none";
    $("#step-0").style.display = "block";
    handleGameSettings(gameSettings);
    handleBotSettings(botSettings);
    handleShipSettings(shipSettings);
  };

  $("#save-mode").onclick = function () {
    $("#step-0").style.display = "none";
    $("#step-1").style.display = "block";
    gameSettings[2] = [
      ...$("#s-" + gameSettings[0]).querySelectorAll(".race_settings__type_block"),
    ].findIndex((el) => el.classList.contains("race_settings__type_block-active"));
    botSettings[2] = [...$("#s-" + botSettings[0]).querySelectorAll(".race_level")].findIndex(
      (el) => el.classList.contains("active")
    );
    shipSettings[2] = [...$("#s-" + shipSettings[0]).querySelectorAll(".swiper-slide")].findIndex(
      (el) => el.classList.contains("swiper-slide_active")
    );

    localStorageSetItem({ ...settings, gameSettings, botSettings, shipSettings });
    updateSettings();
  };

  function hasWebGL() {
    var canvas, gl;
    gl = null;
    canvas = document.createElement("canvas");
    try {
      gl = canvas.getContext("webgl");
    } catch (error) {}
    if (gl == null) {
      try {
        gl = canvas.getContext("experimental-webgl");
      } catch (error) {}
    }
    return gl != null;
  }

  if (!hasWebGL()) {
    const getWebGL = $("#start");
    getWebGL.innerHTML = "WebGL is not supported!";
    getWebGL.onclick = function () {
      return (window.location.href = "http://get.webgl.org/");
    };
  } else {
    $("#start").onclick = function () {
      if (!bkcore.hexgl.connectionToSocket.connected) {
        alert("No connection to server! Please reload page.");
      } else {
        $("#step-1").style.display = "none";
        $("#step-2").style.display = "block";
        newSettings.length ? newSettings : (newSettings = defaultSettings);
        return ($("#controls").style.backgroundImage = `url(css/help-${newSettings[0][2]}.png)`);
      }
    };
  }

  let swiper = new Swiper(".mySwiper", {
    slidesPerView: "auto",
    spaceBetween: 20,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      576: {
        spaceBetween: 30,
      },
    },
  });

  const removeActive = (element, activeClass) => {
    $$(element).forEach((item) => {
      item.classList.remove(activeClass);
    });
  };

  if ($$(".swiper-slide_open")) {
    let opened = $$(".swiper-slide_open");
    opened.forEach((item) => {
      item.onclick = () => {
        let idShipModel = item.getAttribute("aria-label").charAt(0);
        document.querySelector(".p2").src = `./css/spaceShip/${idShipModel}.png`;
        removeActive(".swiper-slide", "swiper-slide_active");
        item.classList.add("swiper-slide_active");
      };
    });
  }

  if (settings.isPlay) {
    localStorageSetItem({ ...settings, isPlay: false });
    bkcore.hexgl.connectionToSocket.on("connect", () => {
      $("#step-3").style.display = "block";
      newSettings.length ? newSettings : (newSettings = defaultSettings);
      init(
        newSettings[0][2],
        newSettings[1][2],
        newSettings[2][2],
        newSettings[3][2],
        newSettings[4][2],
        shipSettings[2],
        botSettings[2],
        gameSettings[2],
        name
      );
    });
  } else {
    $("#step-1").style.display = "block";
  }

  function localStorageSetItem(value) {
    try {
      localStorage.setItem(localStorageKeySettings, JSON.stringify(value));
    } catch (e) {
      alert(e);
    }
  }

  function localStorageGetItem() {
    try {
      return JSON.parse(localStorage.getItem(localStorageKeySettings) || "{}");
    } catch (e) {
      alert(e);
      return {};
    }
  }
}).call(this);