index.html

<!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>&nbsp;<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>