MonkeyGG2
184 lines
7.6 KiB
HTML
184 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>戳泡泡</title>
|
|
<link rel="stylesheet" href="style/picnic.min.css">
|
|
<link rel="stylesheet" type="text/css" href="style/main.css">
|
|
<link rel="stylesheet" type="text/css" href="style/font.css">
|
|
<link rel="icon" href="favicon.png">
|
|
<script src="scripts/launchgame.js"></script>
|
|
<script src="scripts/downloader.js"></script>
|
|
<script src="scripts/addbeatmaplist.js"></script>
|
|
<script src="scripts/jsloader.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="game-area" id="game-area" hidden>
|
|
</div>
|
|
|
|
<div class="pause-menu" id="pause-menu" hidden>
|
|
<div class="paused-title">paused</div>
|
|
<div class="button-list">
|
|
<div class="pausebutton continue" id="pausebtn-continue">
|
|
<div class="inner">Continue</div>
|
|
</div>
|
|
<div class="pausebutton retry" id="pausebtn-retry">
|
|
<div class="inner">Retry</div>
|
|
</div>
|
|
<div class="pausebutton quit" id="pausebtn-quit">
|
|
<div class="inner">Quit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav id="main-nav">
|
|
<div class="nav-link">
|
|
<a href="index.html" class="brand">Osaka Salmon University!</a>
|
|
<a href="new.html" class="pseudo button">最新</a>
|
|
<a href="hot.html" class="pseudo button">热门</a>
|
|
<a href="genre.html" class="pseudo button">分类</a>
|
|
</div>
|
|
<div class="nav-search">
|
|
<form action="search.html">
|
|
<input type="text" name="q" placeholder="谱面关键词或sid"/>
|
|
<input type="image" class="search-button" src="research.svg">
|
|
</form>
|
|
</div>
|
|
<div class="nav-tool">
|
|
<a href="local.html" class="pseudo button">收藏夹</a>
|
|
<a href="faq.html" class="pseudo button">常见问题</a>
|
|
<a href="settings.html" class="pseudo button">设置</a>
|
|
<a onclick="document.documentElement.requestFullscreen();" class="pseudo button">进入全屏</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="main-page" id="main-page">
|
|
<div class="main-content">
|
|
<div class="beatmap-list" id="beatmap-list">
|
|
<!-- to be filled in script -->
|
|
<h1 id="hint">谱面预览加载中</h1>
|
|
</div>
|
|
<div class="text">推荐使用最新版本 Firefox 或 Chrome.</div>
|
|
<div class="text">内测版v1.4.3. <a href="https://github.com/111116/osu">Github</a></div>
|
|
<div class="text">由<a href="https://osu.sayobot.cn/">Sayobot</a>提供谱面</div>
|
|
</div>
|
|
<!-- <div class="side-panel">
|
|
to be activated in script
|
|
</div> -->
|
|
<div class="statuslines" id="statuslines">
|
|
<div class="progress" id="script-progress">
|
|
Scripts
|
|
<div class="lds-dual-ring"></div>
|
|
</div>
|
|
<div class="progress" id="skin-progress">
|
|
Skin
|
|
<div class="lds-dual-ring"></div>
|
|
</div>
|
|
<div class="progress" id="sound-progress">
|
|
Hitsounds
|
|
<div class="lds-dual-ring"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let cururl = new URL(window.location.href);
|
|
let sid = cururl.searchParams.get("sid");
|
|
let bid = cururl.searchParams.get("bid");
|
|
// version look up
|
|
let version = null;
|
|
{
|
|
let xhr = new XMLHttpRequest();
|
|
let url = "https://api.sayobot.cn/v2/beatmapinfo?T=1&K=" + bid;
|
|
xhr.responseType = 'text';
|
|
xhr.open("GET", url);
|
|
xhr.onload = function() {
|
|
let res = JSON.parse(xhr.response);
|
|
console.log(res)
|
|
for (let i=0; i<res.data.bid_data.length; ++i)
|
|
if (res.data.bid_data[i].bid == bid)
|
|
version = res.data.bid_data[i].version;
|
|
}
|
|
xhr.send();
|
|
}
|
|
// download beatmap
|
|
let url = "https://txy1.sayobot.cn/beatmaps/download/mini/" + sid;
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'arraybuffer';
|
|
xhr.open("GET", url);
|
|
// create download progress bar
|
|
let container = document.createElement("div");
|
|
let title = document.createElement("div");
|
|
let bar = document.createElement("progress");
|
|
container.className = "download-progress";
|
|
title.className = "title";
|
|
title.innerText = sid;
|
|
container.appendChild(title);
|
|
container.appendChild(bar);
|
|
// insert so that download list from recent to old
|
|
let statuslines = document.getElementById("statuslines");
|
|
statuslines.insertBefore(container, statuslines.children[3]);
|
|
bar.max = 1;
|
|
bar.value = 0;
|
|
// async part
|
|
function start(){
|
|
function f(){
|
|
window.game.autoplay = true;
|
|
launchGame(window.oszblob, bid, version);
|
|
function wtf(){
|
|
if (window.playback)
|
|
window.playback.pause = function(){};
|
|
else
|
|
window.setTimeout(wtf, 50);
|
|
}
|
|
wtf();
|
|
window.removeEventListener("click",f);
|
|
document.getElementById("hint").innerText = "如果谱面预览未开始，可能谱包或数据有错。";
|
|
};
|
|
window.addEventListener("click",f);
|
|
document.getElementById("hint").innerText = "点击任意处以开始";
|
|
}
|
|
xhr.onload = function() {
|
|
window.oszblob = new Blob([xhr.response]);
|
|
bar.className = "finished";
|
|
function checktostart(){
|
|
if (!window.scriptReady || !window.soundReady || !window.skinReady) {
|
|
window.setTimeout(checktostart, 50);
|
|
return;
|
|
}
|
|
start();
|
|
}
|
|
checktostart();
|
|
}
|
|
xhr.onprogress = function(e) {
|
|
bar.value = e.loaded / e.total;
|
|
}
|
|
xhr.onerror = function() {
|
|
console.error("download failed");
|
|
alert("Beatmap download failed.")
|
|
log_to_server("fail " + box.sid);
|
|
}
|
|
xhr.send();
|
|
|
|
if (window.beatmaplistLoadedCallback) {
|
|
window.beatmaplistLoadedCallback();
|
|
window.beatmaplistLoadedCallback = null;
|
|
// to make sure it's called only once
|
|
}
|
|
</script>
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169262247-1"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-169262247-1');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- attribution -->
|
|
<!-- play icon made by https://www.flaticon.com/authors/those-icons -->
|
|
<!-- search icon made by https://www.flaticon.com/authors/good-ware -->
|