-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
216 lines (214 loc) · 9.61 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slime Rancher Planner</title>
<link rel="icon" href="favicon.ico">
<meta name="description" content="Simple web-app that helps you plan and organize your ranch in Slime Rancher game.">
<meta name="keywords" content="Slime Rancher, game, helper, app, slimes">
<meta name="author" content="Bartosz Rodziewicz">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="main.js"></script>
</head>
<body>
<!-- Donate button -->
<div id="donateBox">
<a href="https://www.paypal.me/baatochan/1usd"><img src="https://img.shields.io/badge/Donate-PayPal-green.svg" id="donateButton"></a>
<div id="donateText">
<p>If you enjoy my work,</p>
<p>you can give me</p>
<p>a cup of coffee <i class="em em-blush" style="vertical-align: bottom; width: 1.25em; height: 1.25em;"></i></p>
</div>
</div>
<!-- Export/Import menu -->
<div id="exportMenu">
<a href="#" id="numberOfItemsLink"><img src="img/hideNOI.png" alt="Show/hide number of items in plots"></a>
<a href="https://github.com/baatochan/SlimeRancherPlanner/issues/new" id="issueLink"><img src="img/issue.png" alt="Report issue"></a>
<a href="#" id="exportLink"><img src="img/save.png" alt="Export data"></a>
<a href="#" id="importLink"><img src="img/load.png" alt="Import data"></a>
<a href="#" id="resetLink" data-toggle="modal" data-target="#confirmReset"><img src="img/reset.png" alt="Reset data"></a>
<p id="menuText"></p>
</div>
<!-- Place for plot divs (small with number - empty) -->
<div id="plots">
<a href="#" id="plotTemplate"><div class="plot"><p class="plotNumber"></p></div></a>
</div>
<!-- Place for big plot div (when set up) -->
<div id="plotsMaximized">
<a href="#" id="plotMaximizedTemplate">
<div class="plotMaximized">
<!-- Title of plot -->
<p class="plotType"></p>
<!-- Place for 2 items inside plot -->
<div class="corralContent">
<div class="corralContentFirstItem"></div>
<div class="corralContentPlus">
<p>+</p>
</div>
<div class="corralContentSecondItem"></div>
<div style="clear: both; float: none;"></div>
<p class="numberOfItemsInPlot"></p>
</div>
<!-- Place for 1 item inside plot-->
<div class="plotContent">
<img src="#" class="plotContentImg">
<p class="numberOfItemsInPlot"></p>
</div>
</div>
</a>
<div id="regionTemplate" class="region">
<p class="regionName"></p>
</div>
</div>
<!-- Small button to show slime count table -->
<div id="openSlimeCount"><a href="#"><img src="img/double-arrow-left.png" style="width: 20px; vertical-align: unset; margin-top:2px"></a></div>
<!-- Slime count table -->
<div id="slimeCount">
<a href="#" id="hideSlimeCount"><img src="img/close.png" style="width: 16px;"></a>
<a href="#" id="refreshSlimeCount"><img src="img/refresh.png" style="width: 20px;"></a>
<div style="clear: both; margin-bottom: 8px"></div>
<p id="slimeCountTitle">Slime Count</p>
<table>
<tr><th>Slime</th><th>Number of corrals</th></tr>
<tr id="slimeCountTableRowTemplate" class="slimeCountTableRow">
<td><img class="slimeCountImage" src=""></td>
<td class="SlimeCountNumber"></td>
</tr>
</table>
</div>
<!-- Modal with form for setting up/editing plot -->
<div id="setupPlot" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Setup plot <span id="setupPlotNumber"></span></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-group" id="editPlot">
<input type="hidden" id="editedPlotNumber" value="unselected">
<div>
<label for="firstChoice" id="firstChoiceLabel">Type: </label>
<select class="form-control" id="firstChoice">
<option id="firstChoiceUnselected" value="unselected">Empty plot</option>
<option id="firstChoiceCorral" value="corral">Corral</option>
<option id="firstChoiceGarden" value="garden">Garden</option>
<option id="firstChoiceCoop" value="coop">Coop</option>
<option id="firstChoicePond" value="pond">Pond</option>
<option id="firstChoiceSilo" value="silo">Silo</option>
<option id="firstChoiceIncinerator" value="incinerator">Incinerator</option>
</select>
</div>
<div>
<label for="secondChoice" id="secondChoiceLabel"></label>
<select class="form-control" id="secondChoice">
<option value="unselected">Select type</option>
</select>
</div>
<div>
<label for="thirdChoice" id="thirdChoiceLabel"></label>
<select class="form-control" id="thirdChoice">
<option value="unselected">Select type</option>
</select>
</div>
<div>
<label for="alignChoice" id="alignChoiceLabel">Align</label>
<select class="form-control" id="alignChoice">
<option value="top-left">Top Left</option>
<option value="top-right">Top Right
<option value="center">Center</option>
<option value="bottom-left">Bottom Left</option>
<option value="bottom-right">Bottom Right</option>
</select>
</div>
<div>
<div><label for="description" id="descriptionLabel" title="Shown when mouse over the plot">Custom description of the plot</label></div>
<div><input id="description" type="text" placeholder="Shown when mouse over the plot"></div>
</div>
<div>
<div><label for="numberOfItems" id="numberOfItemsLabel">Number of stuff inside</label></div>
<div><input id="numberOfItems" type="number"></div>
</div>
</form>
</div>
<div class="modal-footer">
<div style="flex: initial;">
<button type="button" id="clearPlot" class="btn btn-danger">Clear plot</button>
</div>
<div style="flex: auto; text-align: right;">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" id="savePlot" form="editPlot" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal with form for downloading data -->
<div id="downloadData" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Export data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p style="text-align: left;">You're about to download exported copy of your settings. Save this file and during import you'll have to copy the whole content of it.</p>
<a class="btn btn-success" id="downloadButton">Download</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal with form for importing data -->
<div id="importData" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Import data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="importDataForm">
<p id="fileError">File is not supported!</p>
<img id="fileLoadingAnimation" src="img/loader.gif" alt="Loading file...">
<input type="file" id="importDataFileInput">
<div style="margin: 0; display: none;" id="importDataTextInput">
<p><label for="importDataTextArea">Paste the content of exported file below.</label></p>
<textarea id="importDataTextArea"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" id="importDataButton" form="importDataForm" class="btn btn-success disabled">Load</button>
</div>
</div>
</div>
</div>
<!-- Modal for confirmation of resetting farm -->
<div id="confirmReset" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reset data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to reset the plan of the Ranch?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="resetButton" class="btn btn-danger">Reset</button>
</div>
</div>
</div>
</div>
</body>
</html>