<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- Image Assets-->
<a-assets>
<!-- Test pages -->
<img id="vocab_test" src="Test_sheets/test_page.png">
<img id="chem_test" src="Test_sheets/Chem_test.png">
<img id="physics_test" src="Test_sheets/Physics_test.png">
<img id="ref" src="Test_sheets/ref.png">
<!-- Background Images -->
<img id="b_mountains" src="Backgrounds/b_mountains.jpg">
<img id="b_forest" src="Backgrounds/b_forest.jpg">
<img id="b_lake" src="Backgrounds/b_lake.jpg">
<img id="b_blue_night" src="Backgrounds/b_blue_night.jpg">
<!-- Objects -->
<img id="calcu" src="Objects/calcu.png">
<img id="squish_0" src="Objects/squish_bird0.png"> <!-- non-squished -->
<img id="squish_1" src="Objects/squish_bird1.png"> <!-- very squished -->
<!-- Sounds -->
<audio id="music" src="Sounds/chill_music.mp3"></audio>
<audio id="squeak" src="Sounds/squeak.mp3"></audio>
</a-assets>
<!-- Environment -->
<!-- Table -->
<a-box id="table" position="0 0.5 -0.75" color="#795044" width="2.5">
<a-box position="0 0.5 0" color="#4D342D" width="2.75s" height="0.10" depth="1.25"></a-box>
</a-box>
<!-- Background color="#4CB7FF" -->
<a-sky id="sky" color="black"></a-sky>
<a-image id="mountains" src="#b_mountains" scale="10 5 10" position="0 2.5 -4"
event-set__move="_event: click; _target: #mountains; position: 0 2.5 -5; scale: 0.5 0.5 0.5"
event-set__replace="_event: click; _target: #forest; position: 0 2.5 -4; scale: 10 5 10"
></a-image>
<a-image id="forest" src="#b_forest" scale="10 5 10" position="0 2.5 -5"
event-set__move="_event: click; position: 0 2.5 -5; scale: 0.5 0.5 0.5"
event-set__replace="_event: click; _target: #lake; position: 0 2.5 -4; scale: 10 5 10"
></a-image>
<a-image id="lake" src="#b_lake" scale="10 5 10" position="0 2.5 -5"
event-set__move="_event: click; position: 0 2.5 -5; scale: 0.5 0.5 0.5"
event-set__replace="_event: click; _target: #blue_night; position: 0 2.5 -4; scale: 10 5 10"
></a-image>
<a-image id="blue_night" src="#b_blue_night" scale="10 5 10" position="0 2.5 -5"
event-set__move="_event: click; position: 0 2.5 -5; scale: 0.5 0.5 0.5"
event-set__replace="_event: click; _target: #mountains; position: 0 2.5 -4; scale: 10 5 10"
></a-image>
<!-- Floor -->
<a-plane id="floor" color="#3A3A3A " rotation="-90 0 0" scale="5 5 5"></a-plane>
<!-- Test Function -->
<a-image id="physics" src="#physics_test" position="0 1.092 -0.67" rotation="-85 0 0" scale="0.60 0.80 1"
event-set__move="_event: click; _target: #physics; position: 0 0 -0.67 "
event-set__replace="_event: click; _target: #chem; position: 0 1.092 -0.67">
</a-image>
<a-image id="chem" src="#chem_test" position="0 0 -0.67" rotation="-85 0 0" scale="0.60 0.80 1" event-set__move="_event: click; _target: #chem; position: 0 0 -0.67"
event-set__replace="_event: click; _target: #physics; position: 0 1.092 -0.67">
</a-image>
<a-image id="testref" src="#ref" position="0.67 1.092 -0.67" scale="0.60 0.80 1" rotation="-85 0 0"></a-image>
<a-image id="stressball" src="#squish_0" position="1.189 1.150 -1.155" rotation="0 -41.080 0" scale="0.25 0.25 0.25"
event-set__crush="_event: mousedown; src:#squish_1"
event-set__release="_event: mouseup; src:#squish_0"
sound="src:#squeak; on: click"
></a-image>
<a-box id="calculator" color="black" scale="0.25 0.030 0.52" position="-0.578 1.066 -0.599">
<a-image src="#calcu" rotation="-90 0 0" position="0 0.51 0"></a-image>
</a-box>
<a-sound id="b_music" src="#music" autoplay="false" loop="true"></a-sound>
<!-- Music button-->
<a-cylinder id="sound" color="yellow" position="-1.2 1.055 -0.3" scale="0.1 0.1 0.1"
event-set__enter="_event: mouseenter; color: orange"
event-set__leave="_event: mouseleave; color: yellow"
event-set__target="_event: mousedown; scale: 0.1 0.05 0.1"
event-set__away="_event: mouseup; scale: 0.1 0.1 0.1"
sound="src:#music; on: click"
>
<a-text value="SOUND" position="0 0.5 0" rotation="-90 0 0" align="center" color="black" scale="2 2 2"></a-text>
</a-cylinder>
<!-- finished button-->
<a-cylinder id="finished" color="#FD0F0F" position="-0.9 1.055 -0.3" scale="0.1 0.1 0.1"
event-set__enter="_event: mouseenter; color: #BC0D0D"
event-set__leave="_event: mouseleave; color: #FD0F0F"
event-set__target="_event: mousedown; scale: 0.1 0.05 0.1"
event-set__away="_event: mouseup; scale: 0.1 0.1 0.1"
>
<a-text value="FINISH" position="0 0.5 0" rotation="-90 0 0" align="center" color="black" scale="2 2 2"></a-text>
</a-cylinder>
<!-- Timer -->
<a-box id="timer" position="-1 1.2 -1.1" width="0.6" height="0.32" depth="0.12" rotation="0 24 0" color="#212121">
<a-text id="time" value="dasd" color="white" align="center" position="-0.006 0 0.065"></a-text>
</a-box>
<!-- Camera -->
<a-camera id="camera" wasd-controls="enabled: true; acceleration:10;" mouseEnabled="true" fov="90" look-controls="enabled:true; pointerLockEnabled:true;">
<a-cursor position="0 0 -0.5" scale="0.5 0.5 0.5"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>