-
Notifications
You must be signed in to change notification settings - Fork 57
/
options.html
363 lines (337 loc) · 17.4 KB
/
options.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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animal Crossing Music - Options</title>
<link rel="stylesheet" href="css/chrome-bootstrap.css">
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/options.css">
<script src="scripts/options/zepto.min.js"></script>
<script src="scripts/options/navigation.js"></script>
<script src="scripts/global/tune_player.js"></script>
<script src="scripts/options/tune_editor.js"></script>
<script src="scripts/background/KKSongs.js"></script>
<script src="scripts/options/options.js"></script>
<script src="scripts/options/contributors.js"></script>
<style>
.chrome-bootstrap .frame .view {
-webkit-margin-start: 180px;
}
</style>
</head>
<body class="chrome-bootstrap">
<div class="frame">
<div class="navigation">
<h1 style="color: #5C6166;">Animal Crossing Music</h1>
<ul class="menu" style="margin-top: 4em;">
<li class="selected">
<a href="#options">Options</a>
</li>
<li class="town-tune-link" id ="town-tune-button">
<a href="#town-tune">Town Tune Editor</a>
</li>
<li class="help-link">
<a href="#about">About</a>
</li>
<li class="changelog-link">
<a href="#changelog">Changelog</a>
</li>
</ul>
<table class="nav-buttons">
<td><a target="_blank" href="https://chrome.google.com/webstore/detail/animal-crossing-music/fcedlaimpcfgpnfdgjbmmfibkklpioop"><button type="button" class="nav-button" title="Chrome Webstore"><img src="img/social/webstore.png" /></button></a></td>
<td><a target="_blank" href="https://discord.gg/4FMrEF8"><button type="button" class="nav-button" title="Discord Server"><img src="img/social/discord.png" /></button></a></td>
<td><a target="_blank" href="https://github.com/animal-crossing-music-extension/ac-music-extension"><button type="button" class="nav-button" title="GitHub"><img src="img/social/github.png" /></button></a></td>
</table>
<table class="nav-buttons nav-buttons-2">
<td><a target="_blank" href="https://twitter.com/ac_music_ext"><button type="button" class="nav-button" title="Twitter"><img src="img/social/twitter.png" /></button></a></td>
<td><a target="_blank" href="https://acmusicext.com"><button type="button" class="nav-button" title="Website"><img src="img/social/website.png" /></button></a></td>
</table>
</div>
<div class="mainview view">
<div id="options" class="selected">
<header>
<h1>Options</h1>
</header>
<div class="content">
<section>
<h3>Volume</h3>
<p>Adjust the volume that the extension's music plays at</p>
<span class="checkbox">
<label>
<input aria-label="Volume" id="volume" type="range" min="0" max="1" step="0.01">
</label>
</span>
<span id="volumeText"></span>
</section>
<section id="music-selection"> <h3>Music</h3>
<p>Select which game's music you wish to listen to</p>
<div class="radio">
<input id="animal-crossing" name="music-choice" type="radio"><label for="animal-crossing"><span><span></span></span>Animal Forest/Animal Crossing</label>
</div>
<div class="radio">
<input id="wild-world" name="music-choice" type="radio"><label for="wild-world"><span><span></span></span>Wild World/City Folk/Let's Go to the City</label>
</div>
<div class="radio">
<input id="new-leaf" name="music-choice" type="radio"><label for="new-leaf"><span><span></span></span>New Leaf</label>
</div>
<div class="radio">
<input id="new-horizons" name="music-choice" type="radio"><label for="new-horizons"><span><span></span></span>New Horizons</label>
</div>
<div class="radio">
<input id="game-random" name="music-choice" type="radio"><label for="game-random"><span><span></span></span>Random!</label>
</div>
</section>
<section id="weather-selection"> <h3>Weather</h3>
<p>Select the weather variation you wish to listen to</p>
<div class="radio">
<input id="sunny" name="weather-choice" type="radio"><label for="sunny"><span><span></span></span>Sunny/Normal</label>
</div>
<div class="radio">
<input id="snowing" name="weather-choice" type="radio"><label for="snowing"><span><span></span></span>Snowing</label>
</div>
<div class="radio">
<input id="raining" name="weather-choice" type="radio"><label for="raining"><span><span></span></span>Raining</label>
</div>
<div class="radio">
<input id="live" name="weather-choice" type="radio"><label for="live"><span><span></span></span>Live Weather <a href="#live-weather-location" id="live-weather-location-link" class="exclamation">!</a></label>
</div>
<div class="radio">
<input id="weather-random" name="weather-choice" type="radio"><label for="weather-random"><span><span></span></span>Random!</label>
</div>
</section>
<section>
<h3>K.K. Slider</h3>
<p>Customize K.K. Slider's behaviour</p>
<h4>Play Times</h4>
<div class="radio">
<input id="no-kk" name="enable-kk" type="radio"><label for="no-kk"><span><span></span></span>Do not play K.K. Slider songs</label>
</div>
<div class="radio">
<input id="enable-kk" name="enable-kk" type="radio"><label for="enable-kk"><span><span></span></span>Play K.K. Slider songs on Saturdays from
8pm–12am</label>
</div>
<div class="radio">
<input id="always-kk" name="enable-kk" type="radio"><label for="always-kk"><span><span></span></span>Play K.K. Slider songs at all times</label>
</div>
</section>
<section id="kk-version-selection">
<h4>Version Choice</h4>
<div class="radio">
<input id="kk-version-live" name="kk-version" type="radio"><label for="kk-version-live"><span><span></span></span>Live</label>
</div>
<div class="radio">
<input id="kk-version-aircheck" name="kk-version" type="radio"><label for="kk-version-aircheck"><span><span></span></span>Aircheck</label>
</div>
<div class="radio">
<input id="kk-version-both" name="kk-version" type="radio"><label for="kk-version-both"><span><span></span></span>Both</label>
</div>
</section>
<section>
<h4>Select songs</h4>
<div class="checkbox">
<input id="kk-songs-selection-enable" type="checkbox"><label for="kk-songs-selection-enable"><span></span>Only play the selected K.K. songs</label>
</div>
<select id="kk-songs-selection" style="height: 25vh" multiple></select>
<label for="kk-songs-selection" style="display: block"><b>Strg/Cmd + Click</b> for mutliple selection</label>
</section>
<section>
<h3>Town Tune <a id="town-tune-button-link" class="exclamation">!</a></h3>
<p>Customize your custom town tune's behaviour</p>
<div class="checkbox">
<input id="enable-town-tune" type="checkbox"><label for="enable-town-tune"><span></span>Play your custom town tune on the hour</label>
</div>
<div class="checkbox">
<input id="absolute-town-tune" type="checkbox"><label for="absolute-town-tune"><span></span>Play your custom town tune regardless if the music is paused</label>
</div>
</section>
<section>
<h3>Tab Audio Behaviour</h3>
<p>Control what the extension does while a tab is playing audio</p>
<div class="radio" style="height: 21px">
<input id="tab-audio-reduce" name="tab-audio" type="radio"><label for="tab-audio-reduce" style="line-height: unset"><span
style="vertical-align: middle;"><span></span></span>Reduce the extension's music by <input id="tab-audio-reduce-value" name="tab-audio" type="number"
max="100" min="0">%</label>
</div>
<div class="radio">
<input id="tab-audio-pause" name="tab-audio" type="radio"><label for="tab-audio-pause"><span><span></span></span>Pause the extension's music</label>
</div>
<div class="radio">
<input id="tab-audio-nothing" name="tab-audio" type="radio"><label for="tab-audio-nothing"><span><span></span></span>Do nothing</label>
</div>
</section>
<section>
<h3>Other</h3>
<p>Other various options that don't fit in any other category</p>
<div class="checkbox">
<input id="enable-notifications" type="checkbox"><label for="enable-notifications"><span></span>Enable Chrome notifications on song change</label>
</div>
<div class="checkbox">
<input id="enable-badge" type="checkbox"><label for="enable-badge"><span></span>Display text on badge</label>
</div>
<div class="checkbox">
<input id="enable-background" type="checkbox"><label for="enable-background"><span></span>Allow for music to play when Chrome is closed. <a target="_blank" href="https://kb.nmsu.edu/73071">Background apps must also be enabled in Chrome's settings.</a></label>
</div>
</section>
<section id="live-weather-location">
<h3>Live Weather Location</h3>
<p>Select the location to fetch the live weather information from. The live weather synchronizes with the extension's music.<br />The first box is your <a href="https://worldpostalcode.com/" target="_blank">zip/post code</a>, the second is your <a href="https://countrycode.org/" target="_blank">ISO code (the two letters)</a></p> <div class="text">
<input type="text" id="zip-code" aria-label="Zip/Post Code" value="98052" placeholder="Zip/Post Code">
<input type="text" id="country-code" aria-label="ISO Code" value="US" placeholder="ISO Code">
<button type="button" id="update-location">Update Location</button>
<p id="weather-response"></p>
</div>
</section>
</div>
</div>
<div id="town-tune">
<header>
<h1>Town Tune Editor</h1>
</header>
<div class="content">
<section>
<p>Compose a tune to be played every hour on the hour</p>
<div class="pitch-template hidden">
<input class="pitch-name" type="text" maxlength="2" size="2">
<input class="pitch-slider" type="range" min="0" max="16" step="1" orient="vertical">
</div>
<div class="staff staff1"></div>
<div class="staff staff2"></div>
<br>
<p>Town tune volume:</p>
<input id="townTuneVolume" type="range" min="0" max="1" step="0.01">
<span id="townTuneVolumeText"></span>
</section>
<header>
<div style="padding: 0; margin: 0; height:18px;"></div>
<div class="controls">
<button class="play-tune">Play!</button>
<div class="spacer"></div>
<button class="reset-tune">Reset to Default</button>
<button class="randomize-tune">Randomize</button>
<div class="spacer"></div>
<button class="save-tune">Save</button>
</div>
</header>
</div>
</div>
<div id="about">
<header>
<h1>About</h1>
</header>
<div class="content about-content">
<div class="image-container">
<img src="img/icons/icon/128.png" width="48" height="48">
<div class="image-container-text">
<h2>Animal Crossing Music</h2>
<span>Play Animal Crossing's smooth background music in real-time throughout your day.</span>
<br />
<span id="version-number"></span>
</div>
</div>
<div>
<a target="_blank" href="https://discord.gg/4FMrEF8"><button role="link">Join our Discord Server to get help using this extension</button></a>
<a target="_blank" href="https://github.com/animal-crossing-music-extension/ac-music-extension/issues"><button role="link">Report an issue</button></a>
<a target="_blank" href="https://github.com/animal-crossing-music-extension/ac-music-extension"><button role="link">GitHub Repository</button></a>
</div>
<br />
<h3>Contributors</h3>
<p>These people have helped make the extension possible!</p>
<p id="contributors-failed">Failed to load contributors :(</p>
<table>
<tbody id="contributors-table"></tbody>
</table>
<br />
<p>Extension originally created by <a href="https://www.neogaf.com/members/andrex.20593/">Andrex</a> from <a href="https://www.neogaf.com/threads/real-time-animal-crossing-music.473164/post-37661922">NeoGAF</a>.</p>
<p>Extension improved by <a href="https://www.neogaf.com/members/blazescorch2.142800/">blazescorch2</a>.</p>
<p>Idea for extension taken from <a href="http://tane.us/ac/">tane.us</a>.</p>
<p>This options page uses <a href="https://github.com/roykolak/chrome-bootstrap">Chrome Bootstrap</a> by Roy Kolak under the MIT License.</p>
</div>
</div>
<div id="changelog">
<header>
<h1>Changelog</h1>
</header>
<div class="content">
<h3>Version 4.2.0<span class="changelog-date"> - 28th of March 2020</span></h3>
<ul class="changelog-list">
<li>Added support for New Horizons.</li>
<li>Fixed a bug causing the extension to sometimes not run in the background when the feature was enabled.</li>
</ul>
<h3>Version 4.1.1<span class="changelog-date"> - 14th of March 2020</span></h3>
<ul class="changelog-list">
<li>Removed the F1 note as it was not meant to exist</li>
<li>Fixed a bug causing the E3 note to be silent in hourly playback</li>
<li>Fixed a bug causing the town tune to be slightly out of tune in hourly playback</li>
</ul>
<h3>Version 4.1.0<span class="changelog-date"> - 23rd of February 2020</span></h3>
<ul class="changelog-list">
<li>Added checks for MediaSession API fixing the issue where music would not play in some browsers and older versions of Chrome</li>
<li>Fixed a bug causing the Tab Audio Handler to not work as intended on some browsers</li>
<li>Fixed a bug causing the Tab Audio Handler to get stuck in the wrong state if tabs stopped playing audio while the music was paused and vice-versa</li>
<li>Clarified what country code to use</li>
<li>Changed zip/post code reference link</li>
<li>Added a note for users with a space in their post code</li>
<li>Fixed a bug causing songs to sometimes loop incorrectly</li>
<li>Removed the need for the tabs permission for the Tab Audio Behaviour/Handling function</li>
<li>Change default Tab Audio Behaviour to pause rather than nothing</li>
<li>Fixed a bug causing the music to not click over to the next hour and get stuck on a single hour</li>
<li>Overhauled about page</li>
<li>Changed API endpoints and domain</li>
<li>Added a built-in option to stop the extension from playing music when Chrome is closed</li>
<li>Added an option to edit the town tune's volume</li>
<li>Updated the default town tune</li>
<li>Overhauled Town Tune Editor</li>
<li>Added ? notes support to Town Tune Editor</li>
<li>Added reset to default and randomize buttons to Town Tune Editor</li>
<li>Fixed a bug causing the town tune to play while Tab Audio Behaviour is set to paused and a tab is playing audio</li>
<li>Fixed a bug causing the volume to not update if the volume was changed while the extension was paused</li>
<li>Fixed a bug causing the badge text to become incorrect if the extension was paused when an hour ticked over</li>
</ul>
<h3>Version 4.0.0<span class="changelog-date"> - 8th of February 2020</span></h3>
<ul class="changelog-list">
<li>Added Wild World/City Folk/Let's Go to the City Snowing and Raining weather alternatives</li>
<li>Made time checker more accurate</li>
<li>Made Town Tune Editor look nicer</li>
<li>Added Live Weather option</li>
<li>Decreased volume step amount</li>
<li>Add option to toggle badge text</li>
<li>Use Chrome Bootstrap on the options page</li>
<li>Made weather and game options separate</li>
<li>Added Animal Crossing Snowing weather alternative</li>
<li>Updated extension icon</li>
<li>Added more extension badges</li>
<li>Updated K.K. Slider icon to a New Leaf render</li>
<li>Removed white background on hourly notification icon</li>
<li>Added K.K. Slider Aircheck and Live version choices</li>
<li>Updated badge text to show full hour (E.g. 8pm rather than 8p)</li>
<li>Added support for Chrome's Media Session service</li>
<li>Added support for remote streaming for music rather than bundling music with the extension</li>
<li>Updated every song to be of the highest possible quality, removing any static where possible, bad loops and lowering any excessively high bitrates</li>
<li>Added every single K.K. Slider song (all 91 songs)</li>
<li>Reorganised extension's file structure</li>
<li>Added dynamic Contributors/Credits list</li>
<li>Added credit links to original authors</li>
<li>Added support for more desktop notifications</li>
<li>Added dynamic loop times function</li>
<li>Added an option to pause or reduce music volume while a tab is playing audio</li>
<li>Added an option to play the town tune regardless if the extension's music is paused</li>
<li>Added better error handling</li>
<li>Polished options page</li>
<li>Many other various additions, bug fixes, code refactors and changes to make Animal Crossing Music Extension the BEST Animal Crossing extension ever!</li>
</ul>
</div>
</div>
</div>
</div>
<div id="tabAudioModal" class="modal">
<div class="modal-content">
<p id="modal-title"></p>
<p id="modal-text"></p>
<a id="modal-link" target="_blank"></a>
<br />
<br />
<button id="tabAudioModalDismiss"></button>
</div>
</div>
</body>
</html>