This repository has been archived by the owner on Aug 1, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (221 loc) · 8.41 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Dark mode CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-darkmode@0.6.0/dist/darktheme.css"/>
<!-- Custom CSS -->
<link rel="stylesheet" href="index.css">
<title>PAYDAY 2 Secret Helper</title>
</head>
<body>
<script src="https://unpkg.com/bootstrap-darkmode@0.6.0/dist/theme.js"></script>
<script>
const themeConfig = new ThemeConfig();
themeConfig.initTheme();
</script>
<noscript>
<div class="alert alert-warning text-center" role="alert">
<h4 class="alert-heading">JavaScript is disabled!</h4>
<p>
This website requires JavaScript to work correctly. Please
<a target="_blank" rel="noopener noreferrer"
href="https://www.whatismybrowser.com/guides/how-to-enable-javascript/auto">
enable JavaScript
</a>
to enjoy the full functionality of this tool.
</p>
</div>
</noscript>
<div class="container text-center mt-3">
<h1>PAYDAY 2 Secret Helper</h1>
<p>
<small>
by <a href="https://github.com/Clashsoft/payday2-secret">Clashsoft</a>
</small>
</p>
<p>
<img src="https://github.com/r-pufky/payday2-secret/blob/master/cipher-text.jpg?raw=true"
class="img-fluid" alt="Symbol Translation">
<small>
Image Credit
<a href="https://github.com/r-pufky/payday2-secret">r-pufky/payday2-secret</a>
</small>
</p>
<input id="inputField" class="form-control" type="text" oninput="onInputChanged()"
onkeypress="onSearchSubmit(event)" placeholder="Start typing the translated letters...">
<form class="mt-3 mb-3 form-inline align-items-baseline justify-content-center">
<div class="mr-2">
<a href="#" data-toggle="modal" data-target="#helpModal">How to Use</a>
•
<a href="#" data-toggle="modal" data-target="#saveModal">Saved</a>
•
Options:
</div>
<div class="mr-2 custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="threeSymbolCheckBox" value=""
onclick="onThreeSymbolChanged()">
<label class="custom-control-label" for="threeSymbolCheckBox">Three-Symbol Mode</label>
</div>
<div class="mr-2">
<script>
writeDarkSwitch(themeConfig);
</script>
</div>
</form>
<ul id="listGroup" class="list-group text-left"></ul>
</div>
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Saved Achievements</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul id="pinnedGroup" class="list-group"></ul>
<ul id="completedGroup" class="list-group"></ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="onClearClicked()">Clear</button>
<button type="button" class="btn btn-primary" onclick="onCopyClicked()">Copy</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content bg-light">
<div class="modal-header">
<h5 class="modal-title">How to Use</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-justify">
<p>
Before beginning, consult the general steps outlined in
<a href="https://github.com/r-pufky/payday2-secret">this guide</a>.
This tool serves as an alternative to Ctrl-F on the GitHub page.
</p>
<h6>Prefix Mode</h6>
<p>
Enter the translation of the symbols in the text field.
Remember that the riddles are read from right to left, top to bottom.
The more letters you type, the further you can narrow down the list of achievements.
When only one is left, you can stop translating the symbols.
</p>
<h6>Three-Symbol Mode</h6>
<p>
This is a more sophisticated way of translating the riddles.
Instead of starting at the top right, you only have to translate three specific symbols.
They are chosen in such a way that they narrow down the list to one achievement every time.
These symbols are, in the order you have to enter them into the text field:
</p>
<ul>
<li>The second from the bottom left.</li>
<li>The sixth from the bottom left.</li>
<li>The fifth from the top right.</li>
</ul>
<p>
In some cases, you can stop after one or two letters with only one achievement left.
</p>
<h5>Example</h5>
<p>
Say you have the following screenshot:
</p>
<p>
<img class="img-fluid" src="img/example.png" alt="Example Screenshot"/>
</p>
<p>
You first find the symbols listed above:
</p>
<p>
<img class="img-fluid" src="img/example_highlighted.png"
alt="Example Screenshot with Highlighted Symbols">
</p>
<p>
The second symbol from the bottom left is <kbd>A</kbd>.
The sixth symbol from the bottom left is <kbd>E</kbd>.
The fifth symbol from the top right translates to <kbd>O</kbd>.
You enter <kbd>AEO</kbd> into the search box.
Now the only achievement left is <b>Let Them Boogie</b>, which corresponds to the screenshot.
</p>
<h6>Saved Achievements</h6>
<p>
By clicking the <img class="icon" src="img/check.svg" alt="Add to Completed"> icon of an
achievement,
you can add it to your list of completed achievements.
They are shown under "Saved Achievements" in blue.
The <img class="icon" src="img/pin.svg" alt="Add to Pinned"> icon adds it to the pinned
achievements,
shown in gray.
This way, you can track which achievements you already have and which ones you have to complete in
order to
meet the secret ending criteria.
</p>
<p>
To remove an achievement from the saved list, you can click on
<img class="icon" src="img/x.svg" alt="Remove from Pinned/Completed">.
Click "Clear" to remove all achievements at once from the list.
</p>
<p>
All saved achievements are stored locally in your browser and will be restored the next time you
open the
page.
Click "Copy" to copy a list of names of all saved achievements to the clipboard.
You can then paste and store them elsewhere.
</p>
<h5>Shortcuts</h5>
<p>
Press <kbd>Enter</kbd> to pin the first search result and <kbd>Shift+Enter</kbd> to mark it as
completed.
This works in both modes.
</p>
<h6>Contact</h6>
<p>
For bug reports, feature requests or general questions you can
<a href="https://github.com/Clashsoft/payday2-secret/issues/new/choose">create an issue on
GitHub</a> and I
will be happy to assist.
Changes in the form of <a href="https://github.com/Clashsoft/payday2-secret/pulls">pull requests</a>
are
also welcome.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer>
<div class="text-center">
<small>
Copyright © 2019 - 2020, Clashsoft
•
<a href="LICENSE.md">License</a>
</small>
</div>
</footer>
<!-- Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="index.js"></script>
</body>
</html>