light="type: point; intensity: 0.32<!--source virus:https://poly.google.com/view/d_QDWsT0kBG-->
<!--source mario:https://sketchfab.com/3d-models/doctor-mario-85d76d136fcf4ad981b6f89a1cb0fcb5-->
<!--source pill:https://poly.google.com/view/2_WoeCdMxYH-->
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v3.1.2/dist/aframe-physics-system.min.js"></script>
<script src="//unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>

<!-- <script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script> -->
<script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<!-- <script src="https://unpkg.com/aframe-event-set-component@4.0.1/dist/aframe-event-set-component.min.js"></script> -->
<script src="https://unpkg.com/aframe-look-at-component@0.5.1/dist/aframe-look-at-component.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/super-hands@3.0.0/dist/super-hands.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>

<script src="https://unpkg.com/aframe-layout-component/dist/aframe-layout-component.min.js"></script>

<a-scene>
  <a-assets>
    <a-asset-item
      id="bed"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fbed.glb?v=1581016637601"
    >
    </a-asset-item>
    <a-asset-item
      id="wheelchair"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fwheelchair.glb?v=1581016518710"
    ></a-asset-item>
    <a-asset-item
      id="hospital"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fhospital.glb?v=1581016688127"
    ></a-asset-item>
    <a-asset-item
      id="virus"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2FVirus.glb?v=1580424742100"
    ></a-asset-item>
    <a-asset-item
      id="pill"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2FPill.glb?v=1580424746138"
    ></a-asset-item>
    <a-asset-item
      id="mario"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fmario.glb?v=1579904169582"
    ></a-asset-item>
    <a-asset-item
      id="machine"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fmachine.glb?v=1581019736821"
    ></a-asset-item>
    <a-asset-item
      id="doctor"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fdoctor.glb?v=1581019736772"
    ></a-asset-item>
    <a-asset-item
      id="car"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fambulance.glb?v=1581021226898"
    ></a-asset-item>

    <audio
      id="jump-sound"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2FMario-jump-sound.mp3?v=1581034044878"
      preload="auto"
    ></audio>

    <audio
      id="bgm"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2F04.%20Gloomy%20Manor%20~Medley~.mp3?v=1581097322410"
      preload="auto"
    ></audio>

    <audio
      id="ambulance"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Femergency_police_siren_quick_blast.mp3?v=1581099652771"
      preload="auto"
    ></audio>

    <audio
      id="bubble"
      src="https://cdn.glitch.com/60e15f71-b43f-49c5-93a8-8232b243af29%2Fzapsplat_leisure_toy_plastic_bubble_two_halves_pull_open_002_44542.mp3?v=1581100132735"
      preload="auto"
    ></audio>

    <a-mixin
      id="menu-item"
      material="opacity: 0.8"
      event-set__mouseenter="opacity: 0.6"
      event-set__mouseleave="opacity: 0.8"
    ></a-mixin>

    <a-mixin
      id="scaling-animation"
      animation__scale="property: scale; dir: alternate; dur: 300; easing: easeInSine; loop: true; to: 0.002 0.002 0.002"
    ></a-mixin>

    <a-mixin
      id="jumping-animation"
      animation__scale="property: position; dir: alternate; dur: 300; easing: easeInSine; loop: 1; from: 3 0 -2 ; to: 3 1 -2"
    ></a-mixin>
  </a-assets>

  <a-sound src="#bgm" autoplay="true" loop="true" position="0 1 0"></a-sound>
  <!-- set waypoints -->
  <a-plane
    class="waypoint clickable"
    position="4 0.1 1"
    rotation="-90 0 0"
    width="1"
    height="1"
    color="#A2DA11"
    select
  ></a-plane>

  <a-plane
    class="waypoint clickable"
    position="1 0.1 0"
    rotation="-90 0 0"
    width="1"
    height="1"
    color="#C7BA11"
    select
  ></a-plane>

  <a-plane
    class="waypoint clickable"
    position="2 0.1 -3"
    rotation="-90 0 0"
    width="1"
    height="1"
    color="#F7BA11"
    select
  ></a-plane>

  <a-entity
    id="Hospital"
    shadow="cast:false"
    position="0 -0.5 0"
    scale="0.1 0.1 0.1"
    gltf-model="#hospital"
  ></a-entity>

  <a-entity
    id="Bed2"
    shadow="cast:true; receive: false"
    position="-3 0 -1.5"
    scale="0.5 0.5 0.5"
    rotation="0 -190 0"
    gltf-model="#bed"
  ></a-entity>

  <a-entity
    id="Bed3"
    shadow="cast:true; receive: false"
    position="-3 0 3"
    scale="0.5 0.5 0.5"
    rotation="0 -160 0"
    gltf-model="#bed"
  ></a-entity>

  <a-entity
    id="Car"
    class="clickable"
    shadow="cast:true; receive: false"
    position="4 0 6"
    rotation="0 -200 0"
    scale="0.1 0.1 0.1"
    gltf-model="#car"
    select
    play-sound
    sound="src: #ambulance"
  ></a-entity>

  <a-entity
    id="Wheelchair"
    position="-2.5 0 -4.5"
    rotation="0 -225 0"
    scale="0.1 0.1 0.1"
    gltf-model="#wheelchair"
  ></a-entity>

  <a-entity
    id="Machine"
    shadow="cast:true; receive: false"
    position="-3 -3 5"
    rotation="0 180 0"
    scale="3 3 3"
    gltf-model="#machine"
  ></a-entity>

  <a-entity
    id="Doctor"
    class="clickable"
    shadow="cast:true; receive: false"
    position="-2.6 0 -0.4"
    rotation="0 -140 0"
    scale="0.2 0.2 0.2"
    gltf-model="#doctor"
    animation="property: rotation; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -100 0; loop: true"
    select
    looking-at
  ></a-entity>

  <a-entity
    class="Virus clickable"
    shadow="cast:true; receive: false"
    position="0 2 3"
    scale="0.05 0.05 0.05"
    gltf-model="#virus"
    select
    falling
    animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 2.2 3; loop: true"
    sound="src:#bubble"
    play-sound
  ></a-entity>

  <a-entity
    shadow="cast:true; receive: false"
    class="Virus clickable"
    position="2 1 -5"
    scale="0.03 0.03 0.03"
    gltf-model="#virus"
    select
    falling
    animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 2 1.2 -5; loop: true"
    sound="src:#bubble"
    play-sound
  ></a-entity>

  <a-entity
    shadow="cast:true; receive: false"
    class="Virus clickable"
    position="3 2 -4.4"
    scale="0.03 0.03 0.03"
    gltf-model="#virus"
    select
    falling
    animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 3 2.1 -4.4; loop: true"
    sound="src:#bubble"
    play-sound
  ></a-entity>

  <a-entity
    shadow="cast:true; receive: false"
    class="Virus clickable"
    position="3 0.6 -4.2"
    scale="0.05 0.05 0.05"
    gltf-model="#virus"
    select
    falling
    animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 3 1 -4.2; loop: true"
    sound="src:#bubble"
    play-sound
  ></a-entity>

  <a-entity
    id="Mario"
    shadow="cast:true; receive: false"
    class="clickable"
    rotation="0 -140 0"
    scale="0.1 0.1 0.1"
    position="3 0 -2"
    gltf-model="#mario"
    select
    jumping
    play-sound
    sound="src: #jump-sound"
  ></a-entity>

  <a-entity
    id="Pill"
    shadow="cast:true; receive: false"
    class="clickable"
    scale="0.004 0.004 0.004"
    position="-1.5 1.5 -1"
    radius="0.5"
    rotation="0 0 60"
    height="1.5"
    color="#EF2D5E"
    gltf-model="#pill"
    pill_ani
    select
  ></a-entity>

  <a-plane
    id="plane"
    static-body
    position="0 0 -3"
    rotation="-90 0 0"
    width="100"
    height="100"
    color="#ffffff"
  ></a-plane>

  <a-entity
    class="Kill"
    shadow="cast:true; receive: false"
    scale="0.0005 0.0005 0.0005"
    position="0 0 0"
    radius="0.5"
    rotation="0 0 60"
    height="1.5"
    color="#EF2D5E"
    gltf-model="#pill"
    dynamic-body="mass:2; linearDamping: 0.0001"
    grabbable
    kill
  ></a-entity>

  <a-entity
    id="particle-virus"
    position="-1.5 1.8 -1"
    particle-system="color: #74ff2e; size: 0.2;  enabled: false"
  ></a-entity>

  <!--   head light -->
  <a-entity
    light="type: point;castShadow:true; intensity: 0.2; distance: 100; decay: 1"
    position="2 10 0"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 0.2; distance: 10; decay: 1"
    position="-2 10 0"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 0.2; distance: 10; decay: 1"
    position="-3 5 4"
  ></a-entity>

  <a-entity
    light="type: point;intensity: 0.4; distance: 10; decay: 1"
    position="0 5 4"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 0.8; distance: 8; decay: 1"
    position="-2 5 -0.5"
  ></a-entity>

  <!--   mario light -->
  <a-entity
    light="type: point;  intensity: 1; distance: 5; decay: 1"
    position="3.5 2 -3"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 2; distance: 4; decay: 1"
    position="3 3 -2"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 1.5; distance: 4; decay: 1"
    position="2 0.5 -1"
  ></a-entity>

  <a-entity
    light="type: point; castShadow:true; intensity: 10; distance: 3; decay: 5"
    position="3 2 -3.2"
  ></a-entity>

  <!--   car light -->
  <a-entity
    light="type: point; castShadow:true;intensity: 1; distance: 10; decay: 5"
    position="2 2 4.5"
  ></a-entity>

  <!--   door light -->

  <a-entity
    light="type: point; intensity: 1; distance: 50; decay: 1"
    position="1.5 2.8 -15"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 3; distance: 10; decay: 0.5"
    position="1.3 3 -16"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 1; distance: 50; decay: 1"
    position="15 2.8 0.5"
  ></a-entity>

  <a-entity
    light="type: point; intensity: 3; distance: 10; decay: 0.5"
    position="16 3 1"
  ></a-entity>

  <a-sky id="sky" color="#ffffff"></a-sky>

  <a-text color="#ffffff" position="0 3 -3" value="WENHUI ZHAO"></a-text>

  <!--   <a-entity id="camera-rig">
    <a-camera id="camera">
      <a-cursor color="white" fuse="true" timeout="10"></a-cursor>
    </a-camera>
  </a-entity>  -->
  <!-- Camera & Hand Controls -->

  <a-entity id="cameraRig">
    <a-entity
      id="head"
      camera
      position="0 1.6 0"
      wasd-controls
      look-controls
    ></a-entity>
    <a-entity id="lhand" oculus-touch-controls="hand: left" controller-menu>
    </a-entity>
    <a-entity
      id="rhand"
      raycaster="objects: .clickable"
      oculus-touch-controls="hand: right"
      laser-controls="hand: right"
      control="select"
    ></a-entity>
  </a-entity>
</a-scene>

<script>
  AFRAME.registerComponent("select", {
    init: function() {
      var el = this.el; // <a-box>
      // console.log(data.scale)

      el.addEventListener("mouseenter", function() {
        el.object3D.scale.multiplyScalar(1.25);
      });

      el.addEventListener("mouseleave", function() {
        el.object3D.scale.multiplyScalar(0.8);
      });
    }
  });

  AFRAME.registerComponent("pill_ani", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        el.setAttribute("mixin", "");
        el.setAttribute("mixin", "scaling-animation");
        document
          .getElementById("particle-virus")
          .components["particle-system"].particleGroup.emitters[0].enable();
      });
    }
  });

  AFRAME.registerComponent("play-sound", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        el.components.sound.playSound();
      });
    }
  });

  AFRAME.registerComponent("jumping", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        el.setAttribute("mixin", "");
        el.setAttribute("mixin", "jumping-animation");
        el.components.sound.playSound();
      });
    }
  });

  AFRAME.registerComponent("falling", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        el.setAttribute("dynamic-body", "");
      });
    }
  });

  AFRAME.registerComponent("looking-at", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        el.setAttribute("look-at", "[camera]");
      });
    }
  });

  AFRAME.registerComponent("phase-shift", {
    init: function() {
      var el = this.el;
      el.addEventListener("triggerdown", function() {
        console.log("grip");
        el.setAttribute("collision-filter", {
          collisionForces: true
        });
      });
      el.addEventListener("triggerup", function() {
        console.log("grip");

        el.setAttribute("collision-filter", {
          collisionForces: false
        });
      });
    }
  });

  AFRAME.registerComponent("kill", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("collide", function(e) {
        touched = e.detail.body.el;
        if (touched.classList[0] == "Virus") {
          console.log("touched");
          touched.parentNode.removeChild(touched);
          el.parentNode.removeChild(el);
        }
      });
    }
  });

  AFRAME.registerComponent("add-virus", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        let menu = document.querySelector("#controller-menu");
        if (!menu.object3D.visible) return;

        let virus = document.createElement("a-entity");
        virus.setAttribute("class", "Virus clickable");
        virus.setAttribute("shadow", "cast:true; receive: false");
        virus.setAttribute("scale", "0.005 0.005 0.005");
        virus.setAttribute("gltf-model", "#virus");
        virus.setAttribute("select", "");
        virus.setAttribute("falling", "");
        virus.setAttribute("play-sound", "");
        virus.setAttribute("sound", "src:#bubble");

        
        let hand_position = new THREE.Vector3()
        rhand.object3D.getWorldPosition(hand_position)
        let new_y = hand_position.y + 0.1;
        virus.setAttribute(
          "animation",
          "property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: " +
            hand_position.x +
            " " +
            new_y +
            " " +
            hand_position.z +
            "+; loop: true"
        );

        rhand.object3D.getWorldPosition(virus.object3D.position);

        virus.object3D.rotation.copy(rhand.object3D.rotation); // take rotation from controller

        sceneEl.appendChild(virus);
      });
    }
  });

  AFRAME.registerComponent("add-pill", {
    init: function() {
      var el = this.el; // <a-box>

      el.addEventListener("mousedown", function() {
        let menu = document.querySelector("#controller-menu");
        if (!menu.object3D.visible) return;

        let pill = document.createElement("a-entity");
        pill.setAttribute("class", "Kill");
        pill.setAttribute("shadow", "cast:true; receive: false");
        pill.setAttribute("scale", "0.0005 0.0005 0.0005");
        pill.setAttribute("gltf-model", "#pill");
        pill.setAttribute("grabbable", "");
        pill.setAttribute("dynamic-body", "");
        pill.setAttribute("kill", "");
        
        rhand.object3D.getWorldPosition(pill.object3D.position);

        pill.object3D.rotation.copy(rhand.object3D.rotation); // take rotation from controller

        sceneEl.appendChild(pill);
      });
    }
  });

  AFRAME.registerComponent("controller-menu", {
    init: function() {
      var el = this.el; // <a-box>

      let menu_grid = document.createElement("a-entity");
      menu_grid.setAttribute("id", "controller-menu");
      menu_grid.setAttribute("opacity", "0.8");
      menu_grid.setAttribute("visible", "false");
      el.appendChild(menu_grid);

      let menu = document.createElement("a-entity");
      menu.setAttribute("id", "menu");
      menu.setAttribute("position", "0 0.05 -0.05");
      menu.setAttribute("scale", "0.05 0.05 0.05");
      menu.setAttribute(
        "layout",
        "type: box; plane: xy; columns: 2; margin: 2; align: center"
      );
      menu_grid.appendChild(menu);

      let virus = document.createElement("a-entity");
      virus.setAttribute("id", "mini-virus");
      virus.setAttribute("class", "clickable");
      virus.setAttribute("select", "");
      virus.setAttribute("scale", "0.05 0.05 0.05");
      // virus.setAttribute("position","-1 0.5 -3")
      virus.setAttribute("shadow", "");
      virus.setAttribute("gltf-model", "#virus");
      virus.setAttribute("add-virus", "");

      menu.appendChild(virus);

      let pill = document.createElement("a-entity");
      pill.setAttribute("id", "mini-pill");
      pill.setAttribute("class", "clickable");
      pill.setAttribute("select", "");
      pill.setAttribute("scale", "0.005 0.005 0.005");
      pill.setAttribute("rotation", "0 45 90");
      // pill.setAttribute("position","0 1.25 -5")
      pill.setAttribute("shadow", "");
      pill.setAttribute("gltf-model", "#pill");
      pill.setAttribute("add-pill", "");
      menu.appendChild(pill);
    }
  });

  //     AFRAME.registerComponent("super-hand", {
  //       init: function() {
  //         var el = this.el; // <a-box>
  //       el.setAttribute("physics-collider","")
  //       el.setAttribute("phase-shift","")
  //       el.setAttribute("collision-filter","collisionForces: false")
  //       el.setAttribute("static-body","shape: sphere; sphereRadius: 0.03")
  //       el.setAttribute("super-hands","colliderEvent: collisions; colliderEventProperty: els; colliderEndEvent: collisions; colliderEndEventProperty: clearedEls;")
  //       }
  //     });

  //       AFRAME.registerComponent("teleport", {
  //       init: function() {
  //         var el = this.el; // <a-box>
  //       el.setAttribute("id","teleport")
  //       el.setAttribute("teleport-controls","cameraRig: #cameraRig; teleportOrigin: #head; button:trigger")
  //       }
  //     });
</script>

<script>
  let cameraRig = document.querySelector("#cameraRig");
  let head = document.querySelector("#head");
  let lhand = document.querySelector("#lhand");
  let rhand = document.querySelector("#rhand");
  let sceneEl = document.querySelector("a-scene");
  // let mini_virus = document.querySelector("#mini_virus");

  // get all the waypoints
  [].forEach.call(document.querySelectorAll(".waypoint"), function(waypoint) {
    // handle gaze fusing

    waypoint.addEventListener("triggerdown", function(e) {
      // move the camera rig, not the camera, to the new location
      cameraRig.setAttribute("position", this.getAttribute("position"));
      head.setAttribute("orientation", "0 0 0");
    });
  });

  lhand.addEventListener("triggerdown", function(e) {
    let menu = document.querySelector("#controller-menu");
    console.log("trigger");
    toggle(menu);
  });

  lhand.addEventListener("triggerup", function(e) {
    let menu = document.querySelector("#controller-menu");
    console.log("trigger");

    toggle(menu);
  });

  function toggle(el) {
    el.setAttribute("visible", !el.object3D.visible);
  }

  //   mini_virus.addEventListener("mousedown", function() {
  //     let menu = document.querySelector("#controller-menu");
  //     if (!menu.object3D.visible) return;

  //     let virus = document.createElement("a-entity");
  //     virus.setAttribute("class", "Virus clickable");
  //     virus.setAttribute("shadow", "cast:true; receive: false");
  //     virus.setAttribute("scale", "0.05 0.05 0.05");
  //     virus.setAttribute("gltf-model", "#virus");
  //     virus.setAttribute("select", "");

  //     virus.object3D.position.copy(rhand.object3D.position);

  //     virus.object3D.rotation.copy(rhand.object3D.rotation); // take rotation from controller

  //     sceneEl.appendChild(virus);
  //   });

  rhand.addEventListener("gripdown", function() {
    if (rhand.getAttribute("control") == "select") {
      console.log("select");
      console.log(rhand);
      // rhand.removeAttribute("laser-controls");
      rhand.setAttribute("raycaster", "showLine", false);
      rhand.removeAttribute("raycaster");

      rhand.setAttribute("control", "teleport");
      rhand.setAttribute("id", "teleport");
      rhand.setAttribute(
        "teleport-controls",
        "cameraRig: #cameraRig; teleportOrigin: #head; button:trigger"
      );
    } else if (rhand.getAttribute("control") == "teleport") {
      console.log("teleport");
      console.log(rhand);
      rhand.removeAttribute("id");
      rhand.removeAttribute("teleport-controls");
      rhand.setAttribute("control", "super-hand");

      rhand.setAttribute("physics-collider", "");
      rhand.setAttribute("phase-shift", "");
      rhand.setAttribute("collision-filter", "collisionForces: false");
      rhand.setAttribute("static-body", "shape: sphere; sphereRadius: 0.03");
      rhand.setAttribute(
        "super-hands",
        "colliderEvent: collisions; colliderEventProperty: els; colliderEndEvent: collisions; colliderEndEventProperty: clearedEls;"
      );
    } else {
      console.log("super-hand");
      console.log(rhand);
      rhand.removeAttribute("super-hand");
      rhand.removeAttribute("physics-collider");
      rhand.removeAttribute("phase-shift");
      rhand.removeAttribute("collision-filter");
      rhand.removeAttribute("static-body");
      rhand.removeAttribute("super-hands");

      rhand.setAttribute("control", "select");

      // rhand.setAttribute("laser-controls", "hand: right");
      rhand.setAttribute(
        "raycaster",
        "objects: .clickable; enabled: true; showLine: true; direction: 0 -1 -1"
      );
    }
  });
</script>