Skip to content

Commit fac0b23

Browse files
reece-bennettreece-bennett
committed
Add start menu
1 parent 8a3dcdf commit fac0b23

File tree

2 files changed

+143
-116
lines changed

2 files changed

+143
-116
lines changed

‎components/logic.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,25 @@ AFRAME.registerComponent("logic", {
2929
// helpers.add(new THREE.PlaneHelper(clipPlanes[3], 2, 0xffff00));
3030
// el.object3D.add(helpers);
3131

32+
/*
33+
Menu
34+
*/
35+
const mask = $("#mask");
36+
const game = $("#gameContainer");
37+
const startMenu = $("#startMenu");
38+
const playButton = $("#playButton");
39+
40+
game.setAttribute("visible", false);
41+
42+
playButton.addEventListener("click", e => {
43+
mask.emit("fadeOut");
44+
setTimeout(() => {
45+
startMenu.setAttribute("visible", false);
46+
game.setAttribute("visible", true);
47+
mask.emit("fadeIn");
48+
}, 2000);
49+
});
50+
3251
/*
3352
World generation
3453
*/

‎index.html

Lines changed: 124 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -19,134 +19,142 @@
1919
<a-asset-item id="cockpit" src="models/cockpit_v2.obj"></a-asset-item>
2020
</a-assets>
2121

22-
<a-sphere
23-
position="5 2 -6"
24-
radius=5
25-
color="#fd8"
26-
material="emissive: #f8a300; emissiveIntensity: .7"
27-
light="castShadow: true">
28-
</a-sphere>
22+
<a-entity id="startMenu">
23+
<a-text value="Return" position="0 1.4 -1" align="center" anchor="center"></a-text>
24+
<a-plane id="playButton" class="clickable" position="0 1 -1" width="0.5" height="0.2">
25+
<a-text value="Play!" align="center" anchor="center" width="3"></a-text>
26+
</a-plane>
27+
</a-entity>
28+
29+
<a-entity id="gameContainer">
30+
<a-sphere
31+
position="5 2 -6"
32+
radius=5
33+
color="#fd8"
34+
material="emissive: #f8a300; emissiveIntensity: .7"
35+
light="castShadow: true">
36+
</a-sphere>
2937

30-
<!-- Container for ship items -->
31-
<a-entity id="ship">
32-
<a-entity rotation="0 -90 0" obj-model="obj: #cockpit" material="color: #3f3f3f" shadow></a-entity>
38+
<!-- Container for ship items -->
39+
<a-entity id="ship">
40+
<a-entity rotation="0 -90 0" obj-model="obj: #cockpit" material="color: #3f3f3f" shadow></a-entity>
41+
42+
<!-- Fire Extinguisher -->
43+
<a-cylinder class="clickable" color="red" radius=".15" height=".6" position="-.85 .2 0" rotation="90 0 0" shadow></a-cylinder>
44+
45+
<!-- Front panel -->
46+
<a-entity position="0 .8 -1.75" rotation="-51.34 0 0">
47+
<a-box postition="0 0 -0.1" height=".3" width=".3" depth=".1" shadow>
48+
<a-cylinder
49+
id="launchButton"
50+
class="clickable"
51+
color="red"
52+
height=".1"
53+
radius=".1"
54+
position="0 0 .05"
55+
rotation="90 0 0"
56+
shadow
57+
button="pressed: true"
58+
animation__in="property: object3D.position.z; startEvents: in; from: .05; to: .01; dur: 100"
59+
animation__out="property: object3D.position.z; startEvents: out; from: .01; to: .05; dur: 100"></a-cylinder>
60+
</a-box>
61+
62+
<a-plane id="fuelGuage" color="#0f0" position="-.3 0 .01" width=".1" height=".5"></a-plane>
63+
<a-plane color="#000" position="-.3 0 .009" width=".1" height=".5"></a-plane>
64+
65+
<a-plane id="jumpCostGuage" color="#00f" position=".3 0 .01" width=".1" height=".5"></a-plane>
66+
<a-plane color="#000" position=".3 0 .009" width=".1" height=".5"></a-plane>
67+
</a-entity>
68+
69+
<!-- Map panel -->
70+
<a-plane id="map" color="#333" height="1" width="1.5" position="1.2 1.25 0" rotation="0 -90 0" opacity="0.8" shadow>
71+
<!-- <a-entity text="value: Fuel:; anchor: left; baseline: top; transparent: false; width: 2" position="-.7 .35 0"></a-entity>
72+
<a-plane position=".12 .32 .001" color="green" height=".07" width="1.18"></a-plane> -->
73+
74+
<!-- <a-circle position="0 0 0.001" color="yellow" radius="0.05"></a-circle>
75+
<a-circle position="0.1 0 0.001" color="brown" radius="0.02"></a-circle> -->
76+
<a-entity id="location" position="0 0 .003" visible="false">
77+
<!-- Top Right -->
78+
<a-plane width=".03" height=".01"></a-plane>
79+
<a-plane width=".01" height=".03"></a-plane>
80+
81+
<!-- Bottom Right -->
82+
<a-plane width=".03" height=".01"></a-plane>
83+
<a-plane width=".01" height=".03"></a-plane>
84+
85+
<!-- Bottom Left -->
86+
<a-plane width=".03" height=".01"></a-plane>
87+
<a-plane width=".01" height=".03"></a-plane>
88+
89+
<!-- Top left -->
90+
<a-plane width=".03" height=".01"></a-plane>
91+
<a-plane width=".01" height=".03"></a-plane>
92+
</a-entity>
3393

34-
<!-- Fire Extinguisher -->
35-
<a-cylinder class="clickable" color="red" radius=".15" height=".6" position="-.85 .2 0" rotation="90 0 0" shadow></a-cylinder>
94+
<a-entity id="target" position="0 0 .003" visible="false">
95+
<!-- Top -->
96+
<a-plane width=".01" height=".02"></a-plane>
97+
<!-- Right -->
98+
<a-plane width=".02" height=".01"></a-plane>
99+
<!-- Bottom -->
100+
<a-plane width=".01" height=".02"></a-plane>
101+
<!-- Left -->
102+
<a-plane width=".02" height=".01"></a-plane>
103+
</a-entity>
36104

37-
<!-- Front panel -->
38-
<a-entity position="0 .8 -1.75" rotation="-51.34 0 0">
39-
<a-box postition="0 0 -0.1" height=".3" width=".3" depth=".1" shadow>
105+
<a-entity id="mapObjects"></a-entity>
106+
</a-plane>
107+
108+
<!-- Left panel -->
109+
<a-box position="-1.26 .79 .25" rotation="-52 90 0" height=".3" width=".3" depth=".1" shadow>
110+
<a-cylinder
111+
id="scanButton"
112+
class="clickable"
113+
color="blue"
114+
height=".1"
115+
radius=".1"
116+
position="0 0 .05"
117+
rotation="90 0 0"
118+
shadow
119+
button="resetTime: 100"
120+
animation__in="property: object3D.position.z; startEvents: in; from: .05; to: .01; dur: 100"
121+
animation__out="property: object3D.position.z; startEvents: out; from: .01; to: .05; dur: 100"></a-cylinder>
122+
</a-box>
123+
<a-box position="-1.26 .79 -.25" rotation="-52 90 0" height=".3" width=".3" depth=".1" shadow>
40124
<a-cylinder
41-
id="launchButton"
42-
class="clickable"
43-
color="red"
44-
height=".1"
45-
radius=".1"
46-
position="0 0 .05"
47-
rotation="90 0 0"
48-
shadow
49-
button="pressed: true"
50-
animation__in="property: object3D.position.z; startEvents: in; from: .05; to: .01; dur: 100"
51-
animation__out="property: object3D.position.z; startEvents: out; from: .01; to: .05; dur: 100"></a-cylinder>
125+
id="scoopButton"
126+
class="clickable"
127+
color="yellow"
128+
height=".1"
129+
radius=".1"
130+
position="0 0 .05"
131+
rotation="90 0 0"
132+
shadow
133+
button="resetTime: 100"
134+
animation__in="property: object3D.position.z; startEvents: in; from: .05; to: .01; dur: 100"
135+
animation__out="property: object3D.position.z; startEvents: out; from: .01; to: .05; dur: 100"></a-cylinder>
52136
</a-box>
53-
54-
<a-plane id="fuelGuage" color="#0f0" position="-.3 0 .01" width=".1" height=".5"></a-plane>
55-
<a-plane color="#000" position="-.3 0 .009" width=".1" height=".5"></a-plane>
56-
57-
<a-plane id="jumpCostGuage" color="#00f" position=".3 0 .01" width=".1" height=".5"></a-plane>
58-
<a-plane color="#000" position=".3 0 .009" width=".1" height=".5"></a-plane>
59137
</a-entity>
60-
61-
<!-- Map panel -->
62-
<a-plane id="map" color="#333" height="1" width="1.5" position="1.2 1.25 0" rotation="0 -90 0" opacity="0.8" shadow>
63-
<!-- <a-entity text="value: Fuel:; anchor: left; baseline: top; transparent: false; width: 2" position="-.7 .35 0"></a-entity>
64-
<a-plane position=".12 .32 .001" color="green" height=".07" width="1.18"></a-plane> -->
65-
66-
<!-- <a-circle position="0 0 0.001" color="yellow" radius="0.05"></a-circle>
67-
<a-circle position="0.1 0 0.001" color="brown" radius="0.02"></a-circle> -->
68-
<a-entity id="location" position="0 0 .003" visible="false">
69-
<!-- Top Right -->
70-
<a-plane width=".03" height=".01"></a-plane>
71-
<a-plane width=".01" height=".03"></a-plane>
72-
73-
<!-- Bottom Right -->
74-
<a-plane width=".03" height=".01"></a-plane>
75-
<a-plane width=".01" height=".03"></a-plane>
76-
77-
<!-- Bottom Left -->
78-
<a-plane width=".03" height=".01"></a-plane>
79-
<a-plane width=".01" height=".03"></a-plane>
80-
81-
<!-- Top left -->
82-
<a-plane width=".03" height=".01"></a-plane>
83-
<a-plane width=".01" height=".03"></a-plane>
84-
</a-entity>
85-
86-
<a-entity id="target" position="0 0 .003" visible="false">
87-
<!-- Top -->
88-
<a-plane width=".01" height=".02"></a-plane>
89-
<!-- Right -->
90-
<a-plane width=".02" height=".01"></a-plane>
91-
<!-- Bottom -->
92-
<a-plane width=".01" height=".02"></a-plane>
93-
<!-- Left -->
94-
<a-plane width=".02" height=".01"></a-plane>
95-
</a-entity>
96-
97-
<a-entity id="mapObjects"></a-entity>
98-
</a-plane>
99-
100-
<!-- Left panel -->
101-
<a-box position="-1.26 .79 .25" rotation="-52 90 0" height=".3" width=".3" depth=".1" shadow>
102-
<a-cylinder
103-
id="scanButton"
104-
class="clickable"
105-
color="blue"
106-
height=".1"
107-
radius=".1"
108-
position="0 0 .05"
109-
rotation="90 0 0"
110-
shadow
111-
button="resetTime: 100"
112-
animation__in="property: object3D.position.z; startEvents: in; from: .05; to: .01; dur: 100"
113-
animation__out="property: object3D.position.z; startEvents: out; from: .01; to: .05; dur: 100"></a-cylinder>
114-
</a-box>
115-
<a-box position="-1.26 .79 -.25" rotation="-52 90 0" height=".3" width=".3" depth=".1" shadow>
116-
<a-cylinder
117-
id="scoopButton"
118-
class="clickable"
119-
color="yellow"
120-
height=".1"
121-
radius=".1"
122-
position="0 0 .05"
123-
rotation="90 0 0"
124-
shadow
125-
button="resetTime: 100"
126-
animation__in="property: object3D.position.z; startEvents: in; from: .05; to: .01; dur: 100"
127-
animation__out="property: object3D.position.z; startEvents: out; from: .01; to: .05; dur: 100"></a-cylinder>
128-
</a-box>
138+
</a-entity>
129139

130140
<!-- Camera -->
131-
<a-entity rotation="0 -90 0">
132-
<a-entity camera look-controls="pointerLockEnabled: true" position="0 1.2 0">
133-
<a-entity cursor="fuse: false" position="0 0 -1"
134-
geometry="primitive: ring; radiusInner: 0.0001; radiusOuter: 0.005" material="color: white; shader: flat"
135-
raycaster="objects: .clickable"
136-
animation__mouseenter__inner="property: geometry.radiusInner; startEvents: mouseenter; easing: easeInCubic; dur: 150; from: 0.0001; to: 0.02"
137-
animation__mouseenter__outer="property: geometry.radiusOuter; startEvents: mouseenter; easing: easeInCubic; dur: 150; from: 0.005; to: 0.025"
138-
animation__mouseleave__inner="property: geometry.radiusInner; startEvents: mouseleave; easing: easeInCubic; dur: 300; from: 0.02; to: 0.0001"
139-
animation__mouseleave__outer="property: geometry.radiusOuter; startEvents: mouseleave; easing: easeInCubic; dur: 300; from: 0.025; to: 0.005">
140-
</a-entity>
141-
<a-sky id="mask" color="#111" opacity="0" radius="0.1" fader
142-
animation__out="property: material.opacity; startEvents: fadeOut; from: 1; to: 0; dur: 1000"
143-
animation__in="property: material.opacity; startEvents: fadeIn; from: 0; to: 1; dur: 1000">
144-
</a-sky>
141+
<a-entity id="cameraRig" rotation="0 0 0">
142+
<a-entity camera look-controls="pointerLockEnabled: true" position="0 1.2 0">
143+
<a-entity cursor="fuse: false" position="0 0 -1"
144+
geometry="primitive: ring; radiusInner: 0.0001; radiusOuter: 0.005" material="color: white; shader: flat"
145+
raycaster="objects: .clickable"
146+
animation__mouseenter__inner="property: geometry.radiusInner; startEvents: mouseenter; easing: easeInCubic; dur: 150; from: 0.0001; to: 0.02"
147+
animation__mouseenter__outer="property: geometry.radiusOuter; startEvents: mouseenter; easing: easeInCubic; dur: 150; from: 0.005; to: 0.025"
148+
animation__mouseleave__inner="property: geometry.radiusInner; startEvents: mouseleave; easing: easeInCubic; dur: 300; from: 0.02; to: 0.0001"
149+
animation__mouseleave__outer="property: geometry.radiusOuter; startEvents: mouseleave; easing: easeInCubic; dur: 300; from: 0.025; to: 0.005">
145150
</a-entity>
151+
<a-sky id="mask" color="#111" opacity="0" radius="0.25" fader
152+
animation__out="property: material.opacity; startEvents: fadeOut; from: 0; to: 1; dur: 1000"
153+
animation__in="property: material.opacity; startEvents: fadeIn; from: 1; to: 0; dur: 1000">
154+
</a-sky>
146155
</a-entity>
147156
</a-entity>
148157

149-
150158
<!-- Lights -->
151159
<a-light position="0 1.8 0" intensity=".3" light="castShadow: true"></a-light>
152160
<a-light type="ambient" color="#d2e3fc" intensity=".5"></a-light>

0 commit comments

Comments
 (0)