-
-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
309 lines (278 loc) · 16.6 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
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
<!DOCTYPE html>
<html>
<head>
<title>phi-chart-render</title>
<meta name="description" content="A Phigros chart render based on Pixi.js" />
<meta name="author" content="MisaLiu" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="./icons/favicon.ico" />
<link href="src/style/index.css" rel="stylesheet" />
<!--script src="./eruda.min.js"></script>
<script>eruda.init();</script-->
<script>
// 全屏相关。代码来自 lchzh3473
const fullscreen = {
// 切换全屏状态
toggle(elem, inDocument = false) {
// if (!this.enabled) return false;
if (this.element) {
if (!inDocument) {
if (document.exitFullscreen) return document.exitFullscreen();
if (document.cancelFullScreen) return document.cancelFullScreen();
if (document.webkitCancelFullScreen) return document.webkitCancelFullScreen();
if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
if (document.msExitFullscreen) return document.msExitFullscreen();
}
if (this.element == elem) {
elem.style.position = 'relative';
elem.style.top = 'unset';
elem.style.left = 'unset';
elem.style.zIndex = 'unset';
document.body.style.overflow = 'auto';
document.inDocumentFullscreenElement = null;
if (global.functions.resizeCanvas) global.functions.resizeCanvas();
return true;
}
return false;
} else {
if (!inDocument) {
if (!(elem instanceof HTMLElement)) elem = document.body;
if (elem.requestFullscreen) return elem.requestFullscreen();
if (elem.webkitRequestFullscreen) return elem.webkitRequestFullscreen();
if (elem.mozRequestFullScreen) return elem.mozRequestFullScreen();
if (elem.msRequestFullscreen) return elem.msRequestFullscreen();
}
if (elem != document.body) {
elem.style.position = 'fixed';
elem.style.top = '0';
elem.style.left = '0';
elem.style.zIndex = '5050';
document.body.style.overflow = 'hidden';
document.inDocumentFullscreenElement = elem;
if (global.functions.resizeCanvas) global.functions.resizeCanvas();
return true;
}
return false;
}
},
// 检查当前全屏的元素
check(elem) {
if (!(elem instanceof HTMLElement)) elem = document.body;
return this.element == elem;
},
// 返回当前浏览器的全屏组件。
get element() {
return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.inDocumentFullscreenElement;
},
// 返回当前浏览器是否支持全屏 API。
get enabled() {
return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
},
// 返回当前的全屏模式。2 == 网页内全屏，1 == API 全屏，0 == 没有开启全屏
get type() {
if (document.inDocumentFullscreenElement) {
return 2;
} else if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
return 1;
} else {
return 0;
}
}
};
function getSearchString(name)
{
let searchString = window.location.search.substring(1, window.location.search.length);
let searchStrings = searchString.split('&');
if (!name || name == '') return null;
if (searchStrings.length <= 0) return null;
for (const singleString of searchStrings)
{
if (singleString.indexOf(name + '=') >= 0)
{
let stringValue = singleString.replace(name + '=', '');
return decodeURIComponent(stringValue);
}
}
return null;
}
if (getSearchString('debug') === 'true')
{
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () =>
{
if (xhr.readyState === 4 && xhr.status === 200)
{
eval(xhr.responseText);
window.vConsole = new window.VConsole();
console.warn(
'You\'re using debug mode, which will enable vConsole for mobile device debuging.\n' +
'You SHOULDN\'T use debug mode in normal use, and don\'t run ANY code here from people that you don\'t know.'
);
console.warn(
'你正在使用 debug 模式，该模式将启用 vConsole 以方便在移动设备上进行调试。\n' +
'你【不应该】在正常使用中启用 debug 模式，并不要在这里运行【任何】来自你不认识的人的代码。'
);
}
}
xhr.open('GET', 'https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js');
xhr.send();
}
</script>
</head>
<body>
<div class="file-select">
<div>
<b>For iOS users:</b><br>
Please use Quark Browser for better experience (not ad) .
</div>
<hr />
<div>
Due to some performance issue on FireFox Android, consider using <a href="https://github.com/kiwibrowser/src.next/releases" target="_blank">Kiwi Browser</a> or <a href="https://viayoo.com/" target="_blank">Via</a> or <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a>.
</div>
<hr />
<a href="https://t.bilibili.com/820800655803285656" target="_blank">致中国大陆用户的公告</a>
<hr />
<div class="loading" id="loading-status">Loading scripts...</div>
<hr />
<div class="tab">
<div class="bar">
<div data-tab-id="file" class="active">File</div>
<div data-tab-id="visual">Visual</div>
<div data-tab-id="sound">Sound</div>
<div data-tab-id="other">Other</div>
<div data-tab-id="phizone">PhiZone</div>
</div>
<div class="content">
<div id="tab-file">
<label>Select chart file(s): <input type="file" id="file-chart-pack" multiple disabled></label><br>
<div class="loading" id="file-read-progress">Please wait until assets loaded...</div>
<hr />
<label>Chart: <select id="file-chart"></select></label><br>
<label>Music: <select id="file-music"></select></label><br>
<label>BG: <select id="file-bg"></select></label>
</div>
<div id="tab-visual">
<label>Custom skin pack: <input type="file" id="file-skin-pack" disabled /></label> <a href="./skin.example.zip" download="skin.example.zip">Download example skin pack</a><br>
<div class="loading" id="loading-skin-pack">No skinpack selected.</div>
<hr />
<label><input type="checkbox" id="settings-show-bg" checked />Show BG</label><br>
<label><input type="checkbox" id="settings-multi-note-hl" checked />Highlight same time notes</label><br>
<label><input type="checkbox" id="settings-show-ap-status" checked />Show AP status</label><br>
<label><input type="checkbox" id="settings-show-input-point" checked />Show input point</label><br>
<label><input type="checkbox" id="settings-anti-alias" checked />Anti-alias</label><br>
<label><input type="checkbox" id="settings-low-resolution" />Low resolution mode</label><br>
<label><input type="checkbox" id="settings-prpr-extra" checked />Use prpr's extra.json (experimental)</label>
<hr />
<label>BG quality: <select id="settings-bg-quality">
<option value="0">Low (480P)</option>
<option value="1" default selected>Medium (720P)</option>
<option value="2">High (1080P)</option>
<option value="3">Original</option>
</select></label>
<hr />
<label>Note scale: <input type="range" id="settings-note-scale" min="0" max="4000" value="2000"></label><br>
<label>Background dim: <input type="range" id="settings-bg-dim" min="0" max="1" step="0.01" value="0.5"></label><br>
<label>BG blur: <input type="range" id="settings-bg-blur" min="0" max="100" value="50" /></label>
</div>
<div id="tab-sound">
<label>Chart offset: <input type="number" id="settings-audio-offset" placeholder="0" style="width:4em" />ms</label><br>
<div style="margin-left:20px">(recommended 100ms for Chrome/Chrome based browsers)</div>
<button id="settings-test-input-delay">Tap on this button to test input delay...</button><br>
<label><input type="checkbox" id="settings-use-browser-latency" />Use browser's output latency (experimental)</label><br>
<label>Speed: <input type="range" id="settings-audio-speed" min="0.25" max="1.75" step="0.25" value="1"></label><br>
<hr />
<label><input type="checkbox" id="settings-hitsound" checked />Hitsound</label><br>
<label>Hitsound volume: <input type="range" id="settings-hitsound-volume" min="0" max="1" step="0.01" value="1"></label><br>
</div>
<div id="tab-other">
<label><input type="checkbox" id="settings-challenge-mode" />Challenge Mode</label><br>
<label><input type="checkbox" id="settings-plyndb" />Play like you never did before</label><br>
<label><input type="checkbox" id="settings-autoplay" />AutoPlay</label><br>
<label><input type="checkbox" id="settings-debug" />Debug</label><br>
</div>
<div id="tab-phizone">
<label>Paste chart link/ID from <a href="https://www.phi.zone/" target="_href">PhiZone</a> here: <input id="phizone-chart-link" /></label>
<button id="phizone-download-chart">Download</button>
<hr />
<div class="loading" id="phizone-download-progress">No download task</div>
</div>
</div>
</div>
<hr />
<button id="start" disabled>Start</button>
<hr />
Current version: <%= GIT_VERSION %><br>
GitHub homepage: <a href="https://github.com/MisaLiu/phi-chart-render" target="_blank">https://github.com/MisaLiu/phi-chart-render</a><br>
Report bugs <a href="https://github.com/MisaLiu/phi-chart-render/issues/new/choose" target="_blank">Here</a>
<hr />
Consider <a href="https://patreon.com/HIMlaoS_Misa" target="_blank">support me on Patreon</a> if you like!<br />
喜欢的话可以到 <a href="https://afdian.net/a/MisaLiu" target="_blank">爱发电</a> 支持一下！
<hr />
We uses <a href="https://sentry.io" target="_blank">Sentry.io</a> and <a href="https://analytics.google.com/" target="_blank">Google Analytics</a> to tracking errors and analyze user usage data.
<button onclick="fullscreen.toggle(document.body, false)" class="fullscreen" id="fullscreen">Fullscreen</button>
</div>
<div class="debug-value"></div>
<div class="play-result">
<div class="bg-shadow-cover top"></div>
<div class="bg-shadow-cover"></div>
<div class="song-info">
<div class="title">Song name</div>
<div class="subtitle artist">Artist</div>
<div class="subtitle diff">SP Lv.?</div>
</div>
<div class="judge-icon">S</div>
<div class="extra-info">FULL COMBO</div>
<div class="info-bar score">
<div class="score">1000000</div>
<div class="acc">Accuracy 100.00%</div>
</div>
<div class="info-bar acc-bar">
<div class="judge-histogram">
<div class="center"></div>
</div>
</div>
<div class="info-bar detail">
<div class="detail">
<div class="detail-single">
<div class="type">Perfect</div>
<div class="value perfect">100</div>
</div>
<div class="detail-single">
<div class="type">Good</div>
<div class="value good">0</div>
</div>
<div class="detail-single">
<div class="type">Bad</div>
<div class="value bad">0</div>
</div>
<div class="detail-single">
<div class="type">Miss</div>
<div class="value miss">0</div>
</div>
</div>
<div class="max-combo">Max Combo 100</div>
</div>
<div class="actions">
<button onclick="history.go(0)">Refresh</button>
<button class="big highlight" onclick="restartGame()">Restart</button>
<button class="big highlight" onclick="exitGame()">Exit</button>
</div>
</div>
<div class="game-paused">
<div class="title">Game paused</div>
<div class="action">
<button onclick="fullscreen.toggle(document.body, false)">Fullscreen</button>
<button onclick="exitGame()">Exit</button>
<button onclick="restartGame()">Restart</button>
<button onclick="pauseGame()">Continue</button>
</div>
</div>
<div class="error-window">
<div>An error has just occurred, if you're sure this is not caused by you, please <a href="https://github.com/MisaLiu/phi-chart-render/issues/new/choose" target="_blank">report it on GitHub</a>. <!--a href="#" onclick="eruda.show();return false;">Show Eruda</a--><button class="close">Close</button></div>
<pre><code class="content">Test Text Not A Real Error</code></pre>
<div>The infomation about this error will upload to <a href="https://sentry.io" target="_blank">Sentry.io</a> for analyze and debug.</div>
</div>
<script type="module" src="/src/index.js"></script>
</body>
</html>