var rotationOK = false;
//var experienceLoaded = false;
var experienceOKToStart = false;
var experienceStarted = false;

var isMuted = false;
var isLowPowerMode = false;

var outer;
var monster_1, monster_2, monster_3, monster_4, monster_5, monster_6, monster_7;

var chromakeyVideo_full;
var video_full;
var disableAllVideos,
  nonVisiableAllVideos,
  enableVideo_idle,
  enableVideo1_left_punch,
  enableVideo2_left_kick,
  enableVideo3_right_punch,
  enableVideo4_right_kick,
  enableVideo_left_chomp,
  enableVideo_right_chomp,
  prePlayAllVideos;

var isVideo_idle = false,
  isVideo1_left_punch = false,
  isVideo2_left_kick = false,
  isVideo3_right_punch = false,
  isVideo4_right_kick = false,
  isVideo_left_chomp = false,
  isVideo_right_chomp = false,
  isVideo_full = false;
anyActionActive = false;

var gamehideAim_1, gamehideAim_2, gamehideAim_3, gamehideAim_4;

var gameCamera;
var tapToPlacePlane;
var hasTappedToPlace = false;
const tapToPlaceRaycaster = new THREE.Raycaster();
var rayOrigin = new THREE.Vector2(0, 0);
var cursorLocation = new THREE.Vector3(0, 0, 0);
var ground;
var setTimeouttapToPlaceMove;
var positionCursor;
var randomOneToThree;

var finalFrameIsOn = false;
var score = 0;
var caughtBall = false;
var newBulletLive = false;
var tapToPlaceRaycasterTimer;
var videoPlaying = false;

var monster_1_tween, monster_2_tween, monster_3_tween, monster_4_tween;
var displayDOM;
var mySetInterval;
var hideAim_1_hit = false,
  hideAim_2_hit = false,
  hideAim_3_hit = false,
  hideAim_4_hit = false;

var high_score_good = 0,
  high_score_bad = 0;

var isChomp = false;
var timeout = 500;
var playbackRatevideo = 2;
var gameTimeSec = 44;
var startTime, endTime, timeUpdate;
var checkOrientation;

var sfx_perepami_bg = new Howl({
  src: ["./assets/sfx/peperami_background_music.mp3"],
  autoplay: false,
  loop: true,
});
var sfx_hit1 = new Howl({
  src: ["./assets/sfx/hit1.mp3"],
  autoplay: false,
  loop: false,
});
var sfx_hit2 = new Howl({
  src: ["./assets/sfx/hit2.mp3"],
  autoplay: false,
  loop: false,
});

var sfx_failure = new Howl({
  src: ["./assets/sfx/kindred-2021_iyp-Idle-save.mp3"],
  autoplay: false,
  loop: false,
});

var sfx_chomp = new Howl({
  src: ["./assets/sfx/peperami_sfx_chomp.mp3"],
  autoplay: false,
  loop: false,
});

var sfx_kick = new Howl({
  src: ["./assets/sfx/peperami_sfx_kick.mp3"],
  autoplay: false,
  loop: false,
});

var sfx_punch = new Howl({
  src: ["./assets/sfx/peperami_sfx_punch.mp3"],
  autoplay: false,
  loop: false,
});

function errorLowPowerMode() {
  console.log("errorLowPowerMode");
  isLowPowerMode = true;
  $("#iyp_loading").css("display", "block");
  $("#low_power_warning").css("display", "block");
  $("#loading_logo").css("display", "none");
  $("#uiOverlay").css("display", "none");
}

window.addEventListener("resize", () => {
  checkOrientation();
});

$(document).ready(function () {
  $("#phone_rotate_portrait").css("display", "none");
  checkOrientation = function () {
    if (window.innerWidth < window.innerHeight) {
      // Portrait

      $("#phone_rotate_portrait").css("display", "none");
      rotationOK = true;

      if (!experienceStarted) {
        $("#intro").css("display", "block");
        $("#lets_play").css("display", "block");
      }
      if (!hasTappedToPlace)
        document.querySelector("#flat_surface").setAttribute("visible", "true");
    } else {
      // Landscape

      $("#phone_rotate_portrait").css("display", "block");
      document
        .querySelector("#video-turn-to-landscape")
        .addEventListener("loadedmetadata", function () {
          $("#video-turn-to-landscape")[0].play();
        });

      rotationOK = false;

      if (!experienceStarted) {
        $("#intro").css("display", "none");
        $("#lets_play").css("display", "noe");
      }
      if (!hasTappedToPlace) {
        document
          .querySelector("#flat_surface")
          .setAttribute("visible", "false");
      }
    }
  };

  video_full = document.getElementById("video_full");

  chromakeyVideo_full = document.getElementById("chromakeyVideo_full");

  $("#lets_play").click(showTapToStart);

  document.querySelector("#main_scene").renderer.gammaInput = true;
  document.querySelector("#main_scene").renderer.gammaOutput = true;

  AFRAME.registerComponent("alfa-test", {
    dependencies: ["material"],
    init: function () {
      var material = this.el.getObject3D("mesh").material;
      material.alphaTest = 0.5;
      material.needsUpdate = true;
    },
  });

  ground = document.querySelector("#ground");
  tapToPlacePlane = document.querySelector("#flat_surface");

  tapToPlaceMove();

  $("#btnClosePolaroid").click(function () {
    $("#polaroidShare").css("display", "none");
    $("#btnTapToHold").css("display", "none");
    $("#btn_takePhoto").css("display", "block");
    $("#btn_play_again").css("display", "block");
  });

  // Get Page Elements
  outer = document.getElementById("outer");

  var handleCameraStatusChange = function handleCameraStatusChange(event) {
    console.log("camera status change", event.detail.status);
    if (event.detail.status == "hasStream") {
      if (!isLowPowerMode) {
        $("#iyp_loading").css("display", "none");
        $("#uiOverlay").css("display", "block");
        rotationOK = true;
        //showGetReady();
      } else {
        errorLowPowerMode();
      }
    }
  };

  document
    .querySelector("#main_scene")
    .addEventListener("camerastatuschange", handleCameraStatusChange);

  // Click Take Photo Handler
  $("#btn_takePhoto").click(function () {
    if (experienceStarted) {
      console.log("clicked take photo");
      $("#btn_takePhoto").css("display", "none");
      $("#btn_play_again").css("display", "none");
      document.querySelector("#main_scene").emit("screenshotrequest");
    }
  });

  $("#btn_findOutMore").click(function () {
    window.location.href = "https://www.peperami.tv/";
  });

  $("#btn_soundToggle").click(function () {
    isMuted = !isMuted;

    if (isMuted == true) {
      sfx_perepami_bg.stop();
      $("#btn_soundToggle").removeClass("on");
      $("#btn_soundToggle").addClass("off");
    } else {
      sfx_perepami_bg.play();
      $("#btn_soundToggle").addClass("on");
      $("#btn_soundToggle").removeClass("off");
    }
  });

  $("#btn_recenter").click(function () {
    console.log("Recenter");
    let scene = document.querySelector("#main_scene");
    scene.emit("recenter");
  });

  document
    .querySelector("#main_scene")
    .addEventListener("screenshotready", (e) => {
      // Hide the flash
      console.log("screenshotready");
      // container.classList.remove('flash')
      // If an error occurs while trying to take the screenshot, e.detail will be empty.
      // We could either retry or return control to the user
      if (!e.detail) {
        return;
      }

      //Polaroid
      var strMime = "image/jpeg";
      var imgData = "data:image/jpeg;base64," + e.detail;

      var canvasImg = document.createElement("img");
      document.body.appendChild(canvasImg);
      canvasImg.onload = function () {
        var img_1_overlay = new Image(); // Create new img element
        img_1_overlay.addEventListener(
          "load",
          function () {
            var img_2_overlay = new Image(); // Create new img element

            img_2_overlay.addEventListener(
              "load",
              function () {
                var img_3_overlay = new Image(); // Create new img element

                img_3_overlay.addEventListener(
                  "load",
                  function () {
                    var canvas = $("#polaroidHolder")[0];
                    var ctx = canvas.getContext("2d");
                    ctx.canvas.width = canvasImg.width;
                    ctx.canvas.height = canvasImg.height;
                    var canvasWidth = canvas.width;
                    var canvasHeight = canvas.height;
                    ctx.fillStyle = "#eeeeee";
                    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

                    ctx.fillStyle = "#ffffff";
                    ctx.fillRect(20, 20, canvasWidth - 40, canvasWidth - 20);
                    ctx.drawImage(
                      canvasImg,
                      20,
                      20,
                      canvasWidth - 40,
                      canvasHeight - 40
                    );

                    ctx.drawImage(
                      img_1_overlay,
                      20,
                      20 + canvasHeight - canvasWidth * 0.8,
                      canvasWidth * 0.8 - 40,
                      canvasWidth * 0.8 - 40
                    );

                    ctx.drawImage(
                      img_3_overlay,
                      20 + canvasWidth - canvasWidth * 0.8,
                      20 + canvasHeight - canvasWidth * 0.8,
                      canvasWidth * 0.8 - 40,
                      canvasWidth * 0.8 - 40
                    );
                    ctx.drawImage(
                      img_2_overlay,
                      20,
                      20 + canvasHeight - canvasHeight / 3,
                      canvasWidth - 20,
                      canvasWidth - 20
                    );

                    ctx.strokeStyle = "white";
                    ctx.lineWidth = 3;
                    ctx.textAlign = "center";
                    ctx.font = "40px Arial";
                    ctx.fillText(
                      "HIGH SCORE",
                      112 + canvasWidth / 3,
                      22 + canvasHeight - canvasHeight / 20 - 180
                    );

                    ctx.font = "40px Arial";
                    ctx.fillStyle = "green";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "HIGH SCORE",
                      110 + canvasWidth / 3,
                      20 + canvasHeight - canvasHeight / 20 - 180
                    );

                    ctx.fillStyle = "white";
                    ctx.font = "30px Arial";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "GOOD " + high_score_good + " PTS",
                      112 + canvasWidth / 3,
                      22 + canvasHeight - canvasHeight / 20 - 140
                    );

                    ctx.font = "30px Arial";
                    ctx.fillStyle = "green";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "GOOD " + high_score_good + " PTS",
                      110 + canvasWidth / 3,
                      20 + canvasHeight - canvasHeight / 20 - 140
                    );

                    ctx.fillStyle = "white";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "BAD " + high_score_bad + " PTS",
                      112 + canvasWidth / 3,
                      22 + canvasHeight - canvasHeight / 20 - 100
                    );

                    ctx.fillStyle = "green";
                    ctx.font = "30px Arial";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "BAD " + high_score_bad + " PTS",
                      110 + canvasWidth / 3,
                      20 + canvasHeight - canvasHeight / 20 - 100
                    );

                    ctx.fillStyle = "white";
                    ctx.font = "30px Arial";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "COMBINED SCORE",
                      112 + canvasWidth / 3,
                      22 + canvasHeight - canvasHeight / 20 - 60
                    );

                    ctx.fillStyle = "green";
                    ctx.font = "30px Arial";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      "COMBINED SCORE",
                      110 + canvasWidth / 3,
                      20 + canvasHeight - canvasHeight / 20 - 60
                    );

                    ctx.fillStyle = "white";
                    ctx.font = "36px Arial";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      score + " PTS",
                      117 + canvasWidth / 3,
                      22 + canvasHeight - canvasHeight / 20 - 20
                    );

                    ctx.fillStyle = "green";
                    ctx.font = "36px Arial";
                    ctx.textAlign = "center";
                    ctx.fillText(
                      score + " PTS",
                      115 + canvasWidth / 3,
                      20 + canvasHeight - canvasHeight / 20 - 20
                    );

                    var myImage = canvas.toDataURL("image/png");
                    var imageElement = document.getElementById("polaroidImage");
                    imageElement.src = myImage;

                    $("#polaroidShare").css("display", "block");
                    $("#hold_to_save").css("display", "block");
                    $("#btnTapToHold").css("display", "block");
                    $("#hold_to_save").css("display", "block");
                  },
                  false
                );
                img_3_overlay.src = document.getElementById("animal2").src;
              },
              false
            );

            img_2_overlay.src = document.getElementById(
              "peperami_logo_on_white"
            ).src;
          },
          false
        );

        img_1_overlay.src = document.getElementById("animal1").src;
      };
      canvasImg.src = imgData.replace(strMime, "image/octet-stream");
      //Polaroid

      // Tell the restart-camera script to start watching for issues
      window.dispatchEvent(new Event("ensurecamerastart"));
    });
  $("#btn_playGame").click(startPlayGame);
  $("#btn_play_again").click(restartGame);
  checkOrientation();
  $("#btn_tapToStart").click(function () {
    $("#btn_tapToStart").css("display", "none");
    if (!experienceStarted) startExperience();
    document.querySelector("#main_scene").emit("recenter");
    $("#videovideo1_left_punch").attr("visible", "true");
    $("#flat_surface").attr("visible", "false");
  });
});

function startPlayGame() {
  document.getElementById("game").setAttribute("visible", "true");
  gamehideAim_1 = document.getElementById("hideAim_1");
  gamehideAim_1.setAttribute("visible", "true");
  gamehideAim_2 = document.getElementById("hideAim_2");
  gamehideAim_2.setAttribute("visible", "true");
  gamehideAim_3 = document.getElementById("hideAim_3");
  gamehideAim_3.setAttribute("visible", "true");
  gamehideAim_4 = document.getElementById("hideAim_4");
  gamehideAim_4.setAttribute("visible", "true");

  $("#game_bar").css("display", "block");
  $("#top_bar_logo").css("display", "block");
  $("#top_bar").css("display", "block");
  $("#game_buttons").css("display", "block");
  $("#btn_findOutMore").css("display", "none");
  $("#btn_playGame").css("display", "none");
  $("#timer").css("display", "block");
  $("#score_good").css("display", "block");
  $("#score_bad").css("display", "block");
  $("#score_combined").css("display", "block");
  displayDOM = document.querySelector("#time");
  startTimer(gameTimeSec, displayDOM);

  //$("#cursor").remove();

  let scene = document.querySelector("#main_scene");
  scene.renderer.gammaInput = true;
  scene.renderer.gammaOutput = true;

  animateGame();

  enableVideo_full = function () {
    starttime = 0;
    endtime = 0.7;
    video_full.play();
    video_full.addEventListener(
      "loadedmetadata",
      function () {
        video_full.currentTime = starttime;
      },
      false
    );
    timeUpdate = video_full.addEventListener(
      "timeupdate",
      function () {
        if (video_full.currentTime >= endtime) {
          video_full.currentTime = starttime;
          video_full.play();
        }
      },
      false
    );

    if (isVideo_full == false)
      setTimeout(() => {
        chromakeyVideo_full.setAttribute("visible", "true");
        isVideo_full = true;
      }, timeout);
    else chromakeyVideo_full.setAttribute("visible", "true");
  };

  enableVideo_full();

  enableVideo_idle = function () {
    anyActionActive = false;
    video_full.pause();
    starttime = 0;
    endtime = 0.7;
    video_full.currentTime = starttime;
    video_full.play();
  };

  enableVideo1_left_punch = function () {
    anyActionActive = true;
    video_full.pause();
    starttime = 1.0;
    endtime = 1.9;
    video_full.currentTime = starttime;
    video_full.play();
    setTimeout(() => {
      anyActionActive = false;
    }, 400);

    if (!isChomp)
      setTimeout(() => {
        enableVideo_idle();
      }, 500);
    else null;
  };

  enableVideo2_left_kick = function () {
    anyActionActive = true;
    video_full.pause();
    starttime = 3.0;
    endtime = 3.9;
    video_full.currentTime = starttime;
    video_full.play();
    setTimeout(() => {
      anyActionActive = false;
      enableVideo_idle();
    }, 900);
  };

  enableVideo3_right_punch = function () {
    anyActionActive = true;
    video_full.pause();
    starttime = 5.0;
    endtime = 5.9;
    video_full.currentTime = starttime;
    video_full.play();
    setTimeout(() => {
      anyActionActive = false;
    }, 400);
    if (!isChomp)
      setTimeout(() => {
        enableVideo_idle();
      }, 500);
    else null;
  };

  enableVideo4_right_kick = function () {
    anyActionActive = true;
    video_full.pause();
    starttime = 7.0;
    endtime = 7.9;
    video_full.currentTime = starttime;
    video_full.play();
    setTimeout(() => {
      anyActionActive = false;
      enableVideo_idle();
    }, 900);
  };

  monster_1 = document.getElementById("box_1");
  monster_2 = document.getElementById("box_2");
  monster_3 = document.getElementById("box_3");
  monster_4 = document.getElementById("box_4");

  $("#btn_left_up").click(function (e) {
    if (anyActionActive == true) return;
    punchKick(e);
  });

  $("#btn_left_down").click(function (e) {
    if (anyActionActive == true) return;
    punchKick(e);
  });

  $("#btn_right_up").click(function (e) {
    if (anyActionActive == true) return;
    punchKick(e);
  });

  $("#btn_right_down").click(function (e) {
    if (anyActionActive == true) return;
    punchKick(e);
  });

  startGame();
}

function startGame() {
  sfx_perepami_bg.play();
  setupCharacter();

  experienceStarted = true;
  hasTappedToPlace = true;

  setTimeout(function () {
    tapToPlacePlane.setAttribute("visible", "false");

    setTimeout(function () {
      addNewMonster(monster_1);
    }, 1000);

    setTimeout(function () {
      addNewMonster(monster_2);
    }, 2000);

    setTimeout(function () {
      addNewMonster(monster_3);
    }, 500);

    setTimeout(function () {
      addNewMonster(monster_4);
    }, 1500);

    setTimeout(function () {
      finalFrame();
    }, 3100000);
  }, 500);
}

function animateGame() {
  TWEEN.update();
  requestAnimationFrame(animateGame);
}

function showTapToStart() {
  $("#intro").fadeOut();
  $("#lets_play").fadeOut();
  $("#btn_findOutMore").fadeOut();
  $("#btn_tapToStart").css("display", "block");
}

function startExperience() {
  console.log("Go!");

  if (isLowPowerMode) return;

  let scene = document.querySelector("#main_scene");
  scene.emit("recenter");

  experienceStarted = true;

  startPlayGame();
}

function shoot(id) {
  if (caughtBall == true) return;

  if (!startExperience) return;

  var camera_pos = document.querySelector("#camera").getAttribute("position");
  var targetObj = document.getElementById("aim");

  var didHit = false;

  switch (id) {
    case "btn_left_up":
      if (
        intersect(gamehideAim_1.object3D, monster_1.object3D) &&
        monster_1.getAttribute("visible") == true
      ) {
        //score =high_score_good+high_score_bad;
        //console.log("HIT MONSTER 1");
        hitMonster(monster_1);
        didHit = true;
        viewScore(
          score,
          monster_1.getAttribute("material").src.getAttribute("id"),
          id
        );
        hideAim_1_hit = true;
      }
      sfx_punch.play();
      break;
    case "btn_left_down":
      if (
        intersect(gamehideAim_2.object3D, monster_2.object3D) &&
        monster_2.getAttribute("visible") == true
      ) {
        //score =high_score_good+high_score_bad;
        //console.log("HIT MONSTER 2");
        hitMonster(monster_2);
        didHit = true;
        viewScore(
          score,
          monster_2.getAttribute("material").src.getAttribute("id"),
          id
        );
        hideAim_2_hit = true;
      }
      sfx_kick.play();
      break;
    case "btn_right_up":
      if (
        intersect(gamehideAim_3.object3D, monster_3.object3D) &&
        monster_3.getAttribute("visible") == true
      ) {
        //score =high_score_good+high_score_bad;
        //console.log("HIT MONSTER 3");
        hitMonster(monster_3);
        didHit = true;
        viewScore(
          score,
          monster_3.getAttribute("material").src.getAttribute("id"),
          id
        );
        hideAim_3_hit = true;
      }
      sfx_punch.play();
      break;
    case "btn_right_down":
      if (
        intersect(gamehideAim_4.object3D, monster_4.object3D) &&
        monster_4.getAttribute("visible") == true
      ) {
        //score =high_score_good+high_score_bad;
        //console.log("HIT MONSTER 4");
        hitMonster(monster_4);
        didHit = true;
        viewScore(
          score,
          monster_4.getAttribute("material").src.getAttribute("id"),
          id
        );
        hideAim_4_hit = true;
      }
      sfx_kick.play();
      break;
  }

  if (true) {
  }

  if (score == 40) {
    setTimeout(finalFrame, 3000);
  } else null;

  if (didHit) {
    if (getRandomInt(2) == 0) {
      sfx_hit1.play();
      //console.log("sfx_hit1.play();");
    } else {
      sfx_hit2.play();
      //console.log("sfx_hit2.play();");
    }
  } else null;

  document.getElementById("count_combined").textContent = score;
}

function punchKick(e) {
  //console.log("punchKick");
  //console.log("isChomp " + isChomp);
  //if (isChomp) return;
  //console.log(e.target.id);
  var id = e.target.id;
  //console.log(document.getElementById(id));

  $("#" + id).addClass("animate__animated animate__flash animate__faster");
  setTimeout(function () {
    $("#" + id).removeClass("animate__animated animate__flash animate__faster");
  }, 500);

  //disableAllVideos();
  switch (id) {
    case "btn_left_up":
      enableVideo1_left_punch();
      //sfx_punch.play();
      break;
    case "btn_left_down":
      enableVideo2_left_kick();
      //sfx_kick.play();
      break;
    case "btn_right_up":
      enableVideo3_right_punch();
      //sfx_punch.play();
      break;
    case "btn_right_down":
      enableVideo4_right_kick();
      //sfx_kick.play();
      break;
  }

  setTimeout(() => {
    shoot(id);
  }, 100);
}

function hitMonster(whichMonster) {
  whichMonster.setAttribute("visible", "false");

  var planePuff = document.getElementById("planePuff");
  planePuff.setAttribute("position", whichMonster.getAttribute("position"));
  planePuff.setAttribute("visible", "true");
  document.getElementById("video-puff").play();

  setTimeout(function () {
    planePuff.setAttribute("visible", "false");
  }, 1000);

  setTimeout(function () {
    addNewMonster(whichMonster);
  }, 1500);
}

function addNewMonster(whichMonster) {
  // Change monster style
  // console.log(whichMonster.id);

  if (whichMonster.id == "box_1" || whichMonster.id == "box_3") {
    var rMonster = getRandomInt(9);

    if (rMonster == 0)
      whichMonster.setAttribute(
        "material",
        "src: #product_01; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 1)
      whichMonster.setAttribute(
        "material",
        "src: #product_02; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 2)
      whichMonster.setAttribute(
        "material",
        "src: #product_03; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 3)
      whichMonster.setAttribute(
        "material",
        "src: #product_04; opacity: 1.0; transparent: true;"
      );

    if (rMonster == 4)
      whichMonster.setAttribute(
        "material",
        "src: #product_05; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 5)
      whichMonster.setAttribute(
        "material",
        "src: #product_06; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 6)
      whichMonster.setAttribute(
        "material",
        "src: #product_07; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 7)
      whichMonster.setAttribute(
        "material",
        "src: #product_08; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 8)
      whichMonster.setAttribute(
        "material",
        "src: #product_09; opacity: 1.0; transparent: true;"
      );
  } else {
    // Change monster style
    var rMonster = getRandomInt(7);
    if (rMonster == 0)
      whichMonster.setAttribute(
        "material",
        "src: #product_03; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 1)
      whichMonster.setAttribute(
        "material",
        "src: #product_04; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 2)
      whichMonster.setAttribute(
        "material",
        "src: #product_05; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 3)
      whichMonster.setAttribute(
        "material",
        "src: #product_06; opacity: 1.0; transparent: true;"
      );

    if (rMonster == 4)
      whichMonster.setAttribute(
        "material",
        "src: #product_07; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 5)
      whichMonster.setAttribute(
        "material",
        "src: #product_08; opacity: 1.0; transparent: true;"
      );
    if (rMonster == 6)
      whichMonster.setAttribute(
        "material",
        "src: #product_09; opacity: 1.0; transparent: true;"
      );
  }

  var scX;
  var scY;
  var scZ;
  var target;

  if (whichMonster == monster_1) {
    scX = document.getElementById("hideAim_1").object3D.position.x - 4;
    scY = document.getElementById("hideAim_1").object3D.position.y;
    scZ = document.getElementById("hideAim_1").object3D.position.z;
    target = {
      x: document.getElementById("hideAim_1").object3D.position.x,
      y: document.getElementById("hideAim_1").object3D.position.y,
      z: document.getElementById("hideAim_1").object3D.position.z,
    };
  }
  if (whichMonster == monster_2) {
    scX = document.getElementById("hideAim_2").object3D.position.x - 5;
    scY = document.getElementById("hideAim_2").object3D.position.y;
    scZ = document.getElementById("hideAim_2").object3D.position.z;
    target = {
      x: document.getElementById("hideAim_2").object3D.position.x,
      y: document.getElementById("hideAim_2").object3D.position.y,
      z: document.getElementById("hideAim_2").object3D.position.z,
    };
  }
  if (whichMonster == monster_3) {
    scX = document.getElementById("hideAim_3").object3D.position.x + 4;
    scY = document.getElementById("hideAim_3").object3D.position.y;
    scZ = document.getElementById("hideAim_3").object3D.position.z;
    target = {
      x: document.getElementById("hideAim_3").object3D.position.x,
      y: document.getElementById("hideAim_3").object3D.position.y,
      z: document.getElementById("hideAim_3").object3D.position.z,
    };
  }
  if (whichMonster == monster_4) {
    scX = document.getElementById("hideAim_4").object3D.position.x + 5;
    scY = document.getElementById("hideAim_4").object3D.position.y;
    scZ = document.getElementById("hideAim_4").object3D.position.z;
    target = {
      x: document.getElementById("hideAim_4").object3D.position.x,
      y: document.getElementById("hideAim_4").object3D.position.y,
      z: document.getElementById("hideAim_4").object3D.position.z,
    };
  }

  if (whichMonster == monster_3 && monster_3_tween != undefined)
    monster_3_tween.stop();
  if (whichMonster == monster_1 && monster_1_tween != undefined)
    monster_1_tween.stop();
  if (whichMonster == monster_4 && monster_4_tween != undefined)
    monster_4_tween.stop();
  if (whichMonster == monster_2 && monster_2_tween != undefined)
    monster_2_tween.stop();

  var sc = { x: scX, y: scY, z: scZ };

  var tween = new TWEEN.Tween(sc).to(target, 5000);

  tween.easing(TWEEN.Easing.Quartic.InOut);

  tween.onUpdate(function () {
    whichMonster.object3D.position.x = sc.x;
    whichMonster.object3D.position.y = sc.y;
    whichMonster.object3D.position.z = sc.z;
  });
  tween.start();
  tween.onComplete(function () {
    //console.log("tween.onComplete");
    whichMonster.setAttribute("visible", "false");
    if (whichMonster == monster_1) {
      scX = document.getElementById("hideAim_1").object3D.position.x - 4;
      scY = document.getElementById("hideAim_1").object3D.position.y;
      scZ = document.getElementById("hideAim_1").object3D.position.z;
      whichMonster.setAttribute("position", scX + " " + scY + " " + scZ);
    }
    if (whichMonster == monster_2) {
      scX = document.getElementById("hideAim_2").object3D.position.x - 5;
      scY = document.getElementById("hideAim_2").object3D.position.y;
      scZ = document.getElementById("hideAim_2").object3D.position.z;
      whichMonster.setAttribute("position", scX + " " + scY + " " + scZ);
    }
    if (whichMonster == monster_3) {
      scX = document.getElementById("hideAim_3").object3D.position.x + 4;
      scY = document.getElementById("hideAim_3").object3D.position.y;
      scZ = document.getElementById("hideAim_3").object3D.position.z;
      whichMonster.setAttribute("position", scX + " " + scY + " " + scZ);
    }
    if (whichMonster == monster_4) {
      scX = document.getElementById("hideAim_4").object3D.position.x + 5;
      scY = document.getElementById("hideAim_4").object3D.position.y;
      scZ = document.getElementById("hideAim_4").object3D.position.z;
      whichMonster.setAttribute("position", scX + " " + scY + " " + scZ);
    }
    setTimeout(function () {
      addNewMonster(whichMonster);
    }, 1500);
  });
  if (whichMonster == monster_1) monster_1_tween = tween;
  if (whichMonster == monster_2) monster_2_tween = tween;
  if (whichMonster == monster_3) monster_3_tween = tween;
  if (whichMonster == monster_4) monster_4_tween = tween;
  whichMonster.setAttribute("visible", "true");
}

function intersect(a, b) {
  let collisionBoxSize = 0.2;

  var aminX = a.position.x - collisionBoxSize;
  var amaxX = a.position.x + collisionBoxSize;

  var aminY = a.position.y - collisionBoxSize;
  var amaxY = a.position.y + collisionBoxSize;

  //var aminZ = a.position.z - collisionBoxSize;
  //var amaxZ = a.position.z + collisionBoxSize;

  var bminX = b.position.x - collisionBoxSize * 3;
  var bmaxX = b.position.x + collisionBoxSize * 3;

  var bminY = b.position.y - collisionBoxSize * 3;
  var bmaxY = b.position.y + collisionBoxSize * 3;

  //var bminZ = b.position.z - collisionBoxSize ;
  //var bmaxZ = b.position.z + collisionBoxSize ;

  return (
    aminX <= bmaxX && amaxX >= bminX && aminY <= bmaxY && amaxY >= bminY
    //&&aminZ <= bmaxZ
  );
  // && amaxZ >= bminZ
}

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * max + min);
}

function restart() {
  $("#btn_recenter").css("display", "block");
  startExperience();
}

function setupCharacter() {
  document.querySelector("#main_scene").emit("recenter");
}

function finalFrame() {
  finalFrameIsOn = true;
  document.getElementById("game").setAttribute("visible", "false");

  $("#endFrame").css("display", "block");
  $("#btn_findOutMore").css("display", "block");
  $("#btn_play_again").css("display", "block");
  $("#endFrame").fadeIn();
  $("#btn_takePhoto").css("display", "block");
  $("#btn_recenter").css("display", "none");
  $("#top_bar_logo").css("display", "none");
  $("#top_bar").css("display", "none");
  $("#game_buttons").css("display", "none");
  $("#uiOverlay").css("display", "none");

  document.querySelector("#main_scene").removeAttribute("xrweb");
  document
    .querySelector("#main_scene")
    .setAttribute(
      "xrweb",
      `disableWorldTracking: true; cameraDirection: front; mirroredDisplay: true;`
    );
}

function tapToPlaceMove() {
  gameCamera = document.querySelector("#camera").getObject3D("camera");

  tapToPlaceRaycasterTimer = setTimeout(tapToPlaceMove, 25);

  if (!gameCamera) return;
  if (!ground) return;

  if (experienceStarted) clearTimeout(tapToPlaceRaycasterTimer);
  tapToPlaceRaycaster.setFromCamera(rayOrigin, gameCamera);

  const intersects = tapToPlaceRaycaster.intersectObject(ground.object3D, true);

  if (intersects.length > 0) {
    const intersect = intersects[0];
    cursorLocation = intersect.point;
    console.log("intersect at: " + cursorLocation);
  } else {
    console.log("no intersect");
  }

  tapToPlacePlane.object3D.position.lerp(cursorLocation, 0.4);
  tapToPlacePlane.object3D.rotation.z = gameCamera.rotation.y;
}

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function viewScore(num, src, id) {
  if (src == "product_01" || src == "product_02") {
    isChomp = true;
    high_score_good = high_score_good + 10;
    score = high_score_good + high_score_bad;

    setTimeout(() => {
      if (id == "btn_left_up") enableVideo_left_chomp();
      if (id == "btn_right_up") enableVideo_right_chomp();
      sfx_chomp.play();
    }, 650);
  }

  if (
    src == "product_03" ||
    src == "product_04" ||
    src == "product_05" ||
    src == "product_06" ||
    src == "product_07" ||
    src == "product_08" ||
    src == "product_09"
  )
    ++high_score_bad;
  score = high_score_good + high_score_bad;
  document.getElementById("count_good").textContent = high_score_good;
  document.getElementById("count_bad").textContent = high_score_bad;
  $("#target_" + num).css("display", "block");
  $("#target_" + num).removeClass();
  $("#target_" + num).addClass(src + "token");
}

function startTimer(duration, display) {
  var timer = duration,
    seconds,
    secondsStandart;
  mySetInterval = setInterval(function () {
    //!!!!!!!!!!!!!!!!!!
    seconds = parseInt(timer % 60, 10);
    secondsStandart = seconds <= 9 ? "0" + seconds : seconds;
    display.textContent = secondsStandart;
    if (--timer < 0) {
      $("#timer").css("display", "none");
      clearInterval(mySetInterval); //!!!!!!!!!!!!!!!!!!!!
      finalFrame();
    }
  }, 1000);
}

disableAllVideos = function () {};

enableVideo_left_chomp = function () {
  anyActionActive = true;
  starttime = 9.0;
  endtime = 10.0;
  video_full.currentTime = starttime;
  video_full.play();
  setTimeout(() => {
    isChomp = false;
    anyActionActive = false;
    enableVideo_idle();
  }, 1200);
};

enableVideo_right_chomp = function () {
  anyActionActive = true;
  starttime = 11.0;
  endtime = 12.0;
  video_full.currentTime = starttime;
  video_full.play();
  setTimeout(() => {
    isChomp = false;
    anyActionActive = false;
    enableVideo_idle();
  }, 1200);
};

function restartGame() {
  $("#endFrame").css("display", "none");
  $("#btn_findOutMore").css("display", "none");
  $("#btn_play_again").css("display", "none");
  $("#btn_takePhoto").css("display", "none");

  document.querySelector("#main_scene").removeAttribute("xrweb");
  document
    .querySelector("#main_scene")
    .setAttribute(
      "xrweb",
      `disableWorldTracking: true; cameraDirection: back; mirroredDisplay: false;`
    );

  $("#intro").css("display", "block");
  $("#lets_play").css("display", "block");
  experienceStarted = false;
  hasTappedToPlace = false;
  sfx_perepami_bg.stop();
  high_score_bad = 0;
  high_score_good = 0;
  score = 0;
  timer = 0;
  document.getElementById("count_good").textContent = high_score_good;
  document.getElementById("count_bad").textContent = high_score_bad;
  document.getElementById("count_combined").textContent = score;
  document.querySelector("#time").textContent = "45";
  document.querySelector("#flat_surface").setAttribute("visible", "true");
  tapToPlaceMove();
  //document.getElementById("game").setAttribute("visible", "true");
}