-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
101 lines (90 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<title>Battleship</title>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- A Frame import -->
<!-- <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> -->
<script src="https://aframe.io/releases/0.6.0/aframe.js"></script>
<!-- <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> -->
<!-- A Frame Extras Component -->
<script type="text/javascript" src="./lib/aframe-extras.min.js"></script>
<!-- A Frame Curve Component -->
<script src="https://unpkg.com/aframe-curve-component/dist/aframe-curve-component.min.js"></script>
<!-- A Frame along path Component (Edited to allow customization of constraints during curve movement) -->
<script type="text/javascript" src="./lib/aframe-alongpath-component.js"></script>
<!-- <script src="https://rawgit.com/protyze/aframe-alongpath-component/master/dist/aframe-alongpath-component.min.js"></script> -->
<!-- A Frame Text-Geometry -->
<script type="text/javascript" src="https://unpkg.com/aframe-text-geometry-component@^0.5.0/dist/aframe-text-geometry-component.min.js"></script>
<!-- A Frame Look-At -->
<script type="text/javascript" src="https://unpkg.com/aframe-look-at-component@0.5.1/dist/aframe-look-at-component.min.js"></script>
<!-- A Frame Lerp Component -->
<!-- <script src="https://unpkg.com/aframe-lerp-component/dist/aframe-lerp-component.min.js"></script> -->
<script type="text/javascript" src="./js/input.js"></script>
<link rel="stylesheet" type="text/css" href="./css/pure-drawer.css"/>
</head>
<body>
<div class="pure-container" data-effect="pure-effect-scaleRotate">
<!-- Hamburger Icon -->
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left"/>
<label id="toggler" class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label>
<!-- Sliding Menu -->
<nav class="pure-drawer" data-position="left">
<div style="padding: 100px 20px; margin: 0;">
<h1>Content</h1>
</div>
</nav>
<!-- Page Content -->
<div class="pure-pusher-container">
<div class="pure-pusher"> <!-- Menu Pusher Wrapper -->
<a-scene id="scene" fog="type: exponential; color: #FFF; density: 0.03;">
<a-assets>
<!-- Ship model -->
<!-- <a-asset-item id="ship" src="./assets/ship.dae"></a-asset-item> -->
<a-asset-item id="ship" src="./assets/ship-model.dae"></a-asset-item>
<a-asset-item id="play" src="./assets/Play_Regular.json"></a-asset-item>
<a-asset-item id="shipHull" src="./assets/shipHull.obj"></a-asset-item>
<a-asset-item id="shipMount" src="./assets/shipMount.obj"></a-asset-item>
<a-asset-item id="shipCannon" src="./assets/shipCannon.obj"></a-asset-item>
<!-- Possible Ship classes
+5 Hull: Aircraft Carrier
+5 Firepower: Torpedo Ship
+5 Speed: Cannon Boat
+5 Range: Missile Submarine
Dummies: Rafts
-->
<!-- Debug model, checks if the grid size is correct -->
<a-asset-item id="box" src="./assets/debug.dae"></a-asset-item>
</a-assets>
<!-- Camera Spawn CANNOT be dynamically spawned -->
<a-entity id="camera" camera="userHeight: 4" universal-controls></a-entity>
<!-- Dynamically Spawned in for objects below... -->
<!-- Ships-->
<!-- <a-curve id="track1">
<a-curve-point position="5 0 12"></a-curve-point>
<a-curve-point position="12 0 12"></a-curve-point>
<a-curve-point position="12 0 3"></a-curve-point>
</a-curve> -->
<!-- <a-draw-curve curveref="#track1" material="shader: line; color: blue;"></a-draw-curve>
<a-collada-model alongpath="curve: #track1; rotate: true; constraint: 0 0 -1; delay: 1000; dur: 5000;" position="0 0 0" rotation="0 0 0" src="#ship"></a-collada-model> -->
<!-- Ocean -->
<!-- <a-ocean position="0 0 0" width="50" depth="50" density="40"></a-ocean> -->
<!-- Dynamically Spawned in for objects above... -->
<!-- Lighting -->
<a-entity position="0 -5 0" light="type: hemisphere; color: #AAA; groundColor: #000000; intensity: 0.9;"></a-entity>
<a-entity position="0 5 0" light="type: ambient; color: #DC8874; intensity: 0.5;"></a-entity>
</a-scene>
</div>
</div>
<!-- Darken Content while in menu mode -->
<label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
</div>
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>