-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.htm
166 lines (165 loc) · 7.22 KB
/
index.htm
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
<!DOCTYPE html>
<html class="h-100">
<head>
<title>Steal the Sun</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/tooltips.css" type="text/css" media="screen" />
<script src="js/main.js"></script>
<script src="js/utilities.js"></script>
<script src="js/actions.js"></script>
<script src="js/items.js"></script>
<script src="js/build.js"></script>
<script src="js/resources.js"></script>
<script src="js/map.js"></script>
<script src="js/player.js"></script>
<script src="js/ui.js"></script>
<script>
$(document).ready(function(){
main.run();
});
</script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col">
<h1 class="display-4">Steal the Sun</h1>
<p class="lead">The game where you have to harness the sun's energy for some reason we're not sure about yet</p>
</div>
</div>
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<button id="goto_map" class="nav-link btn btn-link">Map</button>
</li>
<li class="nav-item">
<button id="goto_research" class="nav-link btn btn-link">Research</button>
</li>
<li class="nav-item">
<button id="goto_leaderboard" class="nav-link btn btn-link">Leaderboard</button>
</li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="notes.htm">Notes</a>
</li>
<li class="nav-item">
<button class="btn btn-link nav-link" id="reset_game">Reset the game</button>
</li>
</ul>
</nav>
</div>
</div>
<div class="row mt-2 mb-2">
<div class="col">
Energy:
<div class="progress">
<div id="energy" class="progress-bar" style="width: 100%"></div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
Wood:
<div class="progress">
<div id="wood" class="progress-bar bg-warning" style="width: 0%"></div>
</div>
</div>
<div class="col">
Stone:
<div class="progress">
<div id="stone" class="progress-bar bg-secondary" style="width: 0%"></div>
</div>
</div>
<div class="col">
Metal:
<div class="progress">
<div id="metal" class="progress-bar bg-dark" style="width: 0%"></div>
</div>
</div>
<div class="col">
Silicon:
<div class="progress">
<div id="silicon" class="progress-bar bg-info" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Start of content panel -->
<div id="content">
<div id="main">
<div class="row">
<div class="col-7">
<canvas id="map" height="576" width="576"></canvas>
</div>
<div class="col-5">
<div id="build_buttons" class="list-group"></div>
</div>
</div>
<div class="row mt-5">
<div class="col-2">
<h4>Movement</h4>
<div class="row">
<div class="col-3 offset-3">
<button class="btn btn-secondary" id="move_up"><i class="fas fa-arrow-up"></i></button>
</div>
</div>
<div class="row">
<div class="col-3">
<button class="btn btn-secondary" id="move_left"><i class="fas fa-arrow-left"></i></button>
</div>
<div class="col-3 offset-3">
<button class="btn btn-secondary" id="move_right"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
<div class="row">
<div class="col-3 offset-3">
<button class="btn btn-secondary" id="move_down"><i class="fas fa-arrow-down"></i></button>
</div>
</div>
<small class="pt-3">Arrow keys work!</small>
</div>
<div class="col-3 offset-1">
<h4 class="mt-5">Actions</h4>
<button id="gather" class="btn btn-dark">
<i class="fas fa-hand-paper"></i>
Gather / Use
</button>
</div>
<div class="col-6">
<h4>Quick Guide</h4>
<ul>
<li>Move around the map, this uses energy.</li>
<li>If you run out of energy, you die.</li>
<li>You can gather wood and stone from certain tiles on the map</li>
<li>You can build a campfire on an open map tile, this uses wood but provides energy.</li>
<li>To operate buildings, stand on them and click "Gather / Use".</li>
</ul>
</div>
</div>
</div>
<div id="research">
<p>Build a lab first!</p>
</div>
<div id="leaderboard">
<p>Future feature, i hope.</p>
</div>
</div>
<!-- end of content panel -->
</div>
</body>
</html>