-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (169 loc) · 6.99 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
<head>
<title>Beware the Space Bears</title>
<link rel="shortcut icon" href="favicon.png" />
<link href="css/style.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div id="loading">
<h1 id="loading-text">Loading...</h1>
</div>
<div id="game">
<div id="nav">
<div id="stats-open" class="btn btn-square" title="Character" data-open="#stats">♥</div><div id="inventory-open" class="btn btn-square" title="Inventory" data-open="#inventory">I</div><div id="look-button" class="btn btn-square" title="Look At">☌</div><div id="mainmenu-open" class="btn btn-square" title="Menu" data-open="#mainmenu">≡</div>
</div>
<div id="hud">
<div>⚙ <span id="hud-suit">100</span></div>
<div>♥ <span id="hud-health">100</span></div>
<div>O₂ <span id="hud-oxygen">100</span></div>
<div>⚡ <span id="hud-power">100</span></div>
</div>
<div id="quickslots">
<div id="equipped" class="btn btn-square"></div>
</div>
<div id="messages"></div>
<!--<div id="popup" class="menu">
<div id="popup_msg"></div>
<div id="popup_ok" class="btn btn-text">✔ Ok</div>
<div id="popup_cancel" class="btn btn-text">✘ Cancel</div>
</div>-->
<div id="stats" class="modal">
<div id="stats-main" class="menu">
<div id="stats-close" class="btn btn-square right" data-close="#stats">✕</div>
<h1>Status</h1>
<table>
<tr><th>Suit</th><th></th></tr>
<tr><td> </td><td></td></tr>
<tr><td>⚙ Condition: </td><td><span id="stats-suit"></span> <span id="stats-suit-detail"></span></td></tr>
<tr><td>♥ Health: </td><td><span id="stats-health"></span></td></tr>
<!--<tr><td>O₂ Usage: </td><td><span id="stats-oxygen-usage"></span> per turn</td></tr>-->
<tr><td>O₂ Reserve: </td><td><span id="stats-oxygen"></span></td></tr>
<tr><td>⚡ Power: </td><td><span id="stats-power"></span></td></tr>
<tr><td> </td><td></td></tr>
</table>
<table>
<tr><th>Environment</th><th></th></tr>
<tr><td> </td><td></td></tr>
<tr><td>Weather: </td><td><span id="stats-weather"></span></td></tr>
<tr><td>Atmosphere: </td><td><span id="stats-atmosphere"></span></td></tr>
<tr><td>O₂ Lasts: </td><td><span id="stats-oxygen-time"></span> turns</td></tr>
<tr><td> </td><td></td></tr>
<tr><td> </td><td></td></tr>
</table>
</div>
</div>
<div id="inventory" class="modal">
<div id="inventory-main" class="menu">
<div id="inventory-close" class="btn btn-square right" data-close="#inventory">✕</div>
<h1>Inventory</h1>
<div id="inventory-capacity">Capacity</div>
<div id="inventory-items"></div>
<div id="inventory-details"></div>
<div id="inventory-actions">
<div id="inventory-equip" class="btn btn-text">✔ Equip</div>
<div id="inventory-use" class="btn btn-text">▸ Use</div>
<div id="inventory-drop" class="btn btn-text">✖ Drop</div>
</div>
</div>
</div>
<div id="shop" class="modal">
<div id="shop-main" class="menu">
<div id="shop-close" class="btn btn-square right" data-close="#shop">✕</div>
<h1>Printer</h1>
<p>Mineral sand: <span id="shop-money"></span></p>
<div id="shop-items"></div>
<p id="shop-details"></p>
<div id="shop-actions">
<div id="shop-ok" class="btn btn-text">✔ Create</div>
</div>
</div>
</div>
<div id="mainmenu" class="modal">
<div id="mainmenu-main" class="menu">
<div id="mainmenu-close" class="btn btn-square right" data-close="#mainmenu">✕</div>
<h1>Menu</h1>
<div id="mainmenu-fullscreen" class="btn btn-text">⇱ Fullscreen</div>
<div id="mainmenu-howto" class="btn btn-text">☺ Instructions</div>
<div id="mainmenu-code" class="btn btn-text">✏ Source Code</div>
<div id="mainmenu-bugs" class="btn btn-text">☠ Bug Reports</div>
<div id="mainmenu-credits" class="btn btn-text">✯ Credits</div>
<div id="mainmenu-restart" class="btn btn-text">↻ Restart</div>
<p class="footer">Copyright © 2015 Tapio Vierros</p>
</div>
</div>
<div id="info" class="modal">
<div id="info-main" class="menu">
<div id="info-close" class="btn btn-square right" data-close="#info">✕</div>
<h1>Instructions</h1>
<p>You are a lone astronaut on a hostile red planet.
Your base shelters you and its devices supply everything you need
for survival if you bring them materials to work with.</p>
<p>Your task is to survive and locate at least three (3) mysterious
alien artifacts <span style="color:#f0f; font-size:22px;">⚛</span>
and bring them to the base floor.
<!--<p>When outside, pay attention to your suit's oxygen level
as you will die if you run out. That's why it's a good idea
to bring some spare oxygen tanks with you. Same goes for
batteries that power your protective rifle.</p>-->
<p>Oh and Beware the Space Bears!</p>
<p>Navigate by clicking/touching the tile where you want to go.</p>
<div>
<div id="info-ok" class="btn btn-text">✔ Let's Go</div>
<div id="info-fullscreen" class="btn btn-text">⇱ Fullscreen</div>
</div>
</div>
</div>
<div id="death-screen" class="modal">
<div class="menu">
<h1>You have died!</h1>
<p>You managed to kill <span id="death-kills"></span> creatures
and survived for <span id="death-turns"></span> turns.</p>
<p>You used a total of <span id="death-oxygen"></span> units of oxygen
and <span id="death-power"></span> units of power.</p>
<div>
<div id="death-restart" class="btn btn-text">↻ Restart</div>
</div>
</div>
</div>
<div id="win-screen" class="modal">
<div class="menu">
<h1>Mission Accomplished!</h1>
<p>It took you <span id="win-turns"></span> turns,
<span id="win-oxygen"></span> oxygen and <span id="win-power"></span>
power to do it.
<p>While at it, you managed to kill <span id="win-kills"></span> creatures.
<p>You can now continue your adventure if you want.</p>
<div>
<div id="win-continue" class="btn btn-text">➤ Continue</div>
<div id="win-restart" class="btn btn-text">↻ Restart</div>
</div>
</div>
</div>
</div> <!-- game -->
<script>
var CONFIG = {
fontFamily: "DejaVu Sans Mono",
// Not really correct/reliable, but detecting touch screen is currently impossible
touch: (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
};
</script>
<script src="libs/rot.min.js"></script>
<script src="libs/fontdetect.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/data.js"></script>
<script src="js/ui.js"></script>
<script src="js/controls.js"></script>
<script src="js/item.js"></script>
<script src="js/actor.js"></script>
<script src="js/dungeon.js"></script>
<script src="js/mapgen.js"></script>
<script src="js/world.js"></script>
<script src="js/main.js"></script>
</body>
</html>