-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
114 lines (113 loc) · 10.3 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
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moon Lander!</title>
<style>
@import url("./assets/css/setup.css?date=2023-12-15");
@import url("./assets/css/wc/game-engine.css?date=2023-12-15");
@import url("./assets/css/wc/game-scene.css?date=2023-12-15");
@import url("./assets/css/wc/game-instruments.css?date=2023-12-15");
@import url("./assets/css/wc/instrument-dock.css?date=2023-12-15");
@import url("./assets/css/wc/lander-instrument.css?date=2023-12-15");
@import url("./assets/css/wc/instrument-position.css?date=2023-12-15");
@import url("./assets/css/wc/instrument-booster.css?date=2023-12-15");
@import url("./assets/css/wc/instrument-fuel.css?date=2023-12-15");
@import url("./assets/css/wc/instrument-rotation.css?date=2023-12-15");
@import url("./assets/css/wc/system-notifications.css?date=2023-12-15");
@import url("./assets/css/wc/lunar-space.css?date=2023-12-15");
@import url("./assets/css/wc/lander-vehicle.css?date=2023-12-15");
@import url("./assets/css/wc/vehicle-booster.css?date=2023-12-15");
@import url("./assets/css/wc/lunar-surface.css?date=2023-12-15");
</style>
<script type="module" defer src="./assets/mjs/index.mjs?date=2023-12-26"></script>
<game-engine>
<game-sounds>
<audio data-sound-id="booster" src="./assets/sounds/booster.mp3"></audio>
</game-sounds>
<game-instruments>
<instrument-dock position="top-center">
<system-notifications>
<span data-property="altitude_high" class="notification warning">HIGH ALT</span>
<span data-property="altitude_low" class="notification warning">LOW ALT</span>
<span data-property="signal_weak" class="notification warning">WEAK SGNL</span>
<span data-property="signal_lost" class="notification error">SGNL LOST</span>
<span data-property="gear_down" class="notification status">GEAR DOWN</span>
<span data-property="rotation_high" class="notification warning">RTTN HIGH</span>
<span data-property="rotation_good" class="notification status">RTTN GOOD</span>
<span data-property="fuel_low" class="notification warning">FUEL LOW</span>
<span data-property="fuel_zero" class="notification error">FUEL ZERO</span>
</system-notifications>
</instrument-dock>
<instrument-dock position="bottom-left">
<lander-instrument property="position" label="Position">
<instrument-readout>
<instrument-position-lander></instrument-position-lander>
</instrument-readout>
</lander-instrument>
</instrument-dock>
<instrument-dock position="bottom-right">
<lander-instrument property="booster" label="Booster">
<instrument-readout>
<instrument-amount></instrument-amount>
</instrument-readout>
</lander-instrument>
<lander-instrument property="fuel" label="Fuel">
<instrument-readout>
<instrument-amount></instrument-amount>
</instrument-readout>
</lander-instrument>
</instrument-dock>
<instrument-dock position="bottom-center">
<lander-instrument property="rotation" label="Rotation">
<instrument-readout>
<instrument-amount></instrument-amount>
</instrument-readout>
</lander-instrument>
</instrument-dock>
</game-instruments>
<game-scene>
<lunar-space>
<lander-vehicle gear-mode="flight">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 512 400" fill="#000000" stroke="#000000" stroke-width="0.005">
<!-- https://www.svgrepo.com/svg/163849/lander -->
<g id="leg-left" class="leg">
<path style="fill:#5C546A;" d="M144,372.001v-17.387l-40.078-34.353L144,310.243v-10.242c0-2.356,0.525-4.587,1.444-6.604 l-48.678,12.166c-9.078,2.273-16.68,8.375-20.859,16.734L19.055,436.001h17.891l24.202-48.405l91.141-7.595H152 C147.578,380.001,144,376.423,144,372.001z M90.196,329.5c0.189,0.198,0.389,0.389,0.601,0.571l41.475,35.55l-62.751,5.229 L90.196,329.5z"/>
<path style="fill:#FF9300;" d="M8,436.001c-4.422,0-8,3.578-8,8s3.578,8,8,8h40c4.422,0,8-3.578,8-8s-3.578-8-8-8H36.945H19.055H8z "/>
</g>
<g id="leg-right" class="leg">
<path style="fill:#5C546A;" d="M436.095,322.298c-4.18-8.359-11.781-14.461-20.859-16.734l-48.681-12.167 c0.919,2.016,1.444,4.248,1.444,6.604v10.241l40.08,10.019L368,354.615v17.386c0,4.422-3.578,8-8,8h-0.287l91.141,7.595 l24.202,48.405h17.891L436.095,322.298z M379.73,365.621l41.475-35.55c0.212-0.182,0.413-0.373,0.601-0.571l20.675,41.35 L379.73,365.621z"/>
<path style="fill:#FF9300;" d="M504.002,436.001h-11.055h-17.891h-11.055c-4.422,0-8,3.578-8,8s3.578,8,8,8h40c4.422,0,8-3.578,8-8 S508.424,436.001,504.002,436.001z"/>
</g>
<path style="fill:none;" d="M287.988,268.001c0.003,2.031-0.761,3.998-2.168,5.492c-1.508,1.602-3.617,2.508-5.82,2.508h-8v8h40 v-16H287.988z"/>
<path style="fill:none;" d="M232,276.001c-2.203,0-4.313-0.906-5.82-2.508c-1.407-1.494-2.171-3.461-2.168-5.492H200v16h40v-8H232z "/>
<path style="fill:#5C546A;" d="M231.914,136.661c0.343-1.604,0.919-3.116,1.7-4.499l-59.349-13.192 c-3.688-0.813-6.266-4.023-6.266-7.805v-4.187c-2.559,0.661-5.237,1.023-8,1.023c-1.8,0-3.565-0.149-5.285-0.436 c-0.92-0.153-1.823-0.357-2.715-0.587v4.187c0,11.336,7.727,20.969,18.797,23.43l44.608,9.915 c4.199-2.853,8.741-5.303,13.595-7.267C229.929,136.862,230.917,136.671,231.914,136.661z"/>
<path style="fill:#5C546A;" d="M264,108.001c0-0.454-0.047-0.897-0.119-1.331c-2.469,0.858-5.119,1.331-7.881,1.331 c-2.762,0-5.411-0.472-7.881-1.331c-0.073,0.434-0.119,0.876-0.119,1.331v16h16V108.001z"/>
<rect style="fill:#5C546A;" x="184" y="268.001" width="16" height="16"/>
<rect style="fill:#5C546A;" x="312" y="268.001" width="16" height="16"/>
<polygon style="fill:#FF7400;" points="240,276.001 240,284.001 256,284.001 272,284.001 272,276.001 "/>
<path style="fill:#FFCF00;" d="M224.011,268.001c-0.003,2.031,0.761,3.998,2.168,5.492c1.508,1.602,3.617,2.508,5.82,2.508h8h32h8 c2.203,0,4.313-0.906,5.82-2.508c1.407-1.494,2.171-3.461,2.168-5.492H312h16h48c4.422,0,8-3.578,8-8v-28.469 c0-10.344-6.594-19.492-16.406-22.766l-37.063-12.352c-0.523-0.18-1.055-0.297-1.594-0.359l-1.388-0.163 c0.297,2.668,0.451,5.374,0.451,8.109c0,1.283-0.044,2.56-0.112,3.832l2.738,4.106c3.504,5.256,5.375,11.433,5.375,17.75v38.312 h-48.011c0-0.018,0-0.036,0-0.055c-0.001-0.138,0.005-0.276-0.004-0.414l-7.555-128.469c-0.049-0.829-0.178-1.634-0.348-2.424 c-1.561-7.251-7.998-12.639-15.628-12.639H264h-16h-0.453c-5.951,0-11.175,3.28-13.932,8.161c-0.781,1.383-1.357,2.895-1.7,4.499 c-0.167,0.783-0.295,1.581-0.344,2.403l-7.555,128.469c-0.008,0.138-0.003,0.276-0.004,0.414c-1.011-0.126-1.989-0.442-2.879-0.937 C198.227,254.306,184,230.165,184,204.001c0-7.874,1.27-15.509,3.637-22.689c-0.894,0.581-1.682,1.338-2.293,2.251l-10.625,15.938 c-4.398,6.586-6.719,14.258-6.719,22.188v38.313c0,4.422,3.578,8,8,8h8h16H224.011z M272,259.001c0,0.552-0.448,1-1,1h-30 c-0.552,0-1-0.448-1-1v-54c0-0.552,0.448-1,1-1h30c0.552,0,1,0.448,1,1V259.001z"/>
<path style="fill:#FF9300;" d="M290.883,267.001c-0.898,0.502-1.881,0.82-2.895,0.945c0,0.018,0,0.036,0,0.055H336v-38.312 c0-6.317-1.87-12.494-5.375-17.75l-2.738-4.106C326.573,232.496,312.65,254.921,290.883,267.001z"/>
<path style="fill:#FFF2AA;" d="M287.984,267.532c0.008,0.138,0.003,0.276,0.004,0.414c1.014-0.126,1.997-0.443,2.895-0.945 c21.768-12.08,35.69-34.504,37.005-59.168c0.068-1.272,0.112-2.549,0.112-3.832c0-2.734-0.153-5.44-0.451-8.109 c-2.91-26.134-19.764-48.649-44.589-58.673c-0.916-0.375-1.896-0.565-2.88-0.58c0.17,0.789,0.299,1.595,0.348,2.424 L287.984,267.532z"/>
<path style="fill:#FF9300;" d="M221.133,267.009c0.89,0.495,1.869,0.811,2.879,0.937c0.001-0.138-0.005-0.275,0.004-0.414 l7.555-128.469c0.049-0.822,0.177-1.62,0.344-2.403c-0.997,0.01-1.985,0.202-2.914,0.582c-4.854,1.964-9.396,4.414-13.595,7.267 c-13.136,8.924-22.846,21.866-27.768,36.802c-2.366,7.18-3.637,14.815-3.637,22.689C184,230.165,198.227,254.306,221.133,267.009z"/>
<path style="fill:#FF7400;" d="M168,380.001v8c0,8.82,7.18,16,16,16h64v-24H168z"/>
<path style="fill:#FF7400;" d="M264,404.001h64c8.82,0,16-7.18,16-16v-8h-80V404.001z"/>
<path style="fill:#B6B8BE;" d="M128.34,71.282c0.069-0.478,0.23-0.922,0.464-1.319C128.57,70.361,128.408,70.805,128.34,71.282 c-2.427,16.895,8.438,31.763,23.66,35.695c0.892,0.23,1.795,0.434,2.715,0.587C138.093,104.792,125.771,89.168,128.34,71.282z"/>
<path style="fill:#B6B8BE;" d="M160,108.001c2.763,0,5.441-0.362,8-1.023c15.222-3.932,26.087-18.8,23.66-35.695 c-0.274-1.911-2.037-3.281-3.967-3.281H160V108.001z"/>
<path style="fill:#B6B8BE;" d="M256,108.001c2.762,0,5.411-0.472,7.881-1.331C273.263,103.409,280,94.494,280,84.001 c0-13.255-10.745-24-24-24V108.001z"/>
<path style="fill:#FF9300;" d="M248,292.001c0-4.422,3.578-8,8-8h-16h-40h-16h-24c-6.464,0-12.035,3.864-14.556,9.396 c-0.919,2.016-1.444,4.248-1.444,6.604v10.242v44.371v17.387c0,4.422,3.578,8,8,8h0.289H168h80V292.001z"/>
<path style="fill:#FFCF00;" d="M368,372.001v-17.386v-44.373v-10.241c0-2.356-0.525-4.588-1.444-6.604 c-2.521-5.532-8.091-9.396-14.556-9.396h-24h-16h-40h-16c4.422,0,8,3.578,8,8v88h80h15.713H360 C364.422,380.001,368,376.423,368,372.001z"/>
<path style="fill:#FF9300;" d="M271,204.001h-30c-0.552,0-1,0.448-1,1v54c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1v-54 C272,204.449,271.552,204.001,271,204.001z"/>
<path style="fill:#888693;" d="M256,60.001c-6.627,0-12.627,2.686-16.971,7.029c-1.086,1.086-2.068,2.275-2.931,3.552 c-0.431,0.638-0.833,1.299-1.202,1.979c-0.924,1.7-1.648,3.525-2.141,5.442C232.262,79.92,232,81.93,232,84.001 s0.262,4.081,0.756,5.998c0.493,1.917,1.217,3.742,2.141,5.442c0.369,0.68,0.771,1.34,1.202,1.979 c0.863,1.277,1.845,2.466,2.931,3.552c2.533,2.533,5.633,4.497,9.09,5.699c2.469,0.858,5.119,1.331,7.881,1.331V60.001z"/>
<path style="fill:#888693;" d="M154.715,107.565c1.719,0.287,3.485,0.436,5.285,0.436v-40h-27.693h0 c-1.448,0-2.801,0.771-3.503,1.963c-0.234,0.397-0.396,0.841-0.464,1.319C125.771,89.168,138.093,104.792,154.715,107.565z"/>
<g id="leg-front" class="leg">
<path style="fill:#5C546A;" d="M264,292.001c0-4.422-3.578-8-8-8c-4.422,0-8,3.578-8,8v88v24v32h16v-32v-24V292.001z"/>
<path style="fill:#FF9300;" d="M232,436.001c-4.422,0-8,3.578-8,8s3.578,8,8,8h48c4.422,0,8-3.578,8-8s-3.578-8-8-8h-16h-16H232z"/>
</g>
</svg>
<vehicle-booster></vehicle-booster>
</lander-vehicle>
</lunar-space>
<lunar-surface></lunar-surface>
</game-scene>
</game-engine>