<title>owu! | Home</title>

<link rel=”canonical” href=”https://owu.vercel.app/”/>

<meta name="description" content="owu = osu! + web | The unofficial web port of the rhythm game osu!">

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<link rel="icon" href="favicon.png">

<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">

<script src="scripts/launchgame.js"></script>

<script src="scripts/downloader.js"></script>

<script src="scripts/addbeatmaplist.js"></script>

<script src="scripts/settings.js"></script>

<script src="scripts/jsloader.js"></script>

<script src="scripts/lib/localforage.min.js"></script>

<script async src="https://arc.io/widget.min.js#f6CePGyv"></script>

<!--Pause menu-->

<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="paused-desc">You're not gonna do what I think you're gonna do, are you?</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 Bar-->

<nav id="main-nav">

<div class="nav-link">

<a href="index.html" class="brand">owu!</a>

<a href="new.html" class="pseudo button">Updated</a>

<a href="hot.html" class="pseudo button">Popular</a>

<a href="browse.html" class="pseudo button">Browse</a>

</div>

<div class="nav-search">

<form action="search.html">

<input type="text" name="q" placeholder="Beatmap or SID" />

<input type="image" class="search-button" src="research.svg">

</form>

</div>

<div class="nav-tool">

<a href="faq.html" class="pseudo button">FAQ</a>

<a href="local.html" class="pseudo button">Favorites</a>

<a href="settings.html" class="pseudo button">Settings</a>

<a onclick="document.documentElement.requestFullscreen();" class="pseudo button">Fullscreen</a>

</div>

</nav>

<!--Main page-->

<div class="main-page" id="main-page">

<div class="main-content">

<div class="announcement">Announcement: New domain! Check out the <a href="https://webosu.online/changes.html">changelog</a> for more info!</div>

<br>

<div class="index-area">

<h2>Public plays (W.I.P)</h2>

<hr/>

<table>

<thead>

<tr>

<td>Player</td>

<td>Song</td>

<td>Combo</td>

<td>Score</td>

<td>Acc</td>

<td>Mods</td>

<td>Time</td>

</tr>

</thead>

<tbody id="activity-list">

<!-- will be filled in script -->

</tbody>

</table>

</div>

<div class="index-area">

<h2>Popular beatmaps</h2>

<a href="hot.html" class="more">See more Popular Beatmaps</a>

<hr />

<div class="beatmap-list" id="beatmap-list-hot">

<!-- Beatmaps will be here -->

</div>

</div>

<div class="index-area">

<h2>Recently Played</h2>

<a href="history.html" class="more">See your play history</a>

<hr />

<div class="beatmap-list" id="beatmap-list-history">

<!-- Beatmaps will be here -->

</div>

</div>

<div class="index-area">

<h2>Favorited Beatmaps</h2>

<a href="local.html" class="more">See all favorited Beatmaps</a>

<hr />

<div class="beatmap-list" id="beatmap-list-liked">

<!-- Beatmaps will be here -->

</div>

</div>

<div class="index-area">

<h2>Latest Beatmaps</h2>

<a href="new.html" class="more">See all latest Beatmaps</a>

<hr />

<div class="beatmap-list" id="beatmap-list-new">

<!-- Beatmaps will be here -->

</div>

</div>

<div class="index-area">

<h2>Random Beatmaps<h2>

<a onclick="genRandomList()" class="more" style="cursor:pointer;">Randomize Beatmaps</a>

<hr />

<div class="beatmap-list" id="beatmap-list-random">

<!-- to be filled in script -->

</div>

</div>

<!--Footer-->

<div class="text"></div>

<div class="text">Join the <a href="https://discord.gg/gHgcR92QMy">Discord!</a></div>

<div class="text">Translation by: <a href="https://github.com/BlaNKtext">BlaNK</a>#1154</div>

<div class="text">Beatmap API made by: <a href="https://osu.sayobot.cn/">Sayobot</a></div>

</div>

<!--Loader progress-->

<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>

// what's happening

let tbody = document.getElementById("activity-list");

function formattime(date) {

let m;

return date.getHours() + ":" + ((m=date.getMinutes())<10?('0'+m):m);

}

function showActivity(records) {

records = records.reverse();

while (tbody.firstChild)

tbody.removeChild(tbody.firstChild);

for (let i=0; i<records.length && i<10; ++i) {

let tr = document.createElement("tr");

tbody.appendChild(tr);

function nexttd(content) {

let td = document.createElement("td");

tr.appendChild(td);

if (!content) return;

if (content.tagName)

td.appendChild(content);

else

td.innerText = content;

}

let b = records[i].ip.split(".");

b[0]="**";

if (b.length>3) b[3]="**";

nexttd(b.join("."));

let title = document.createElement("a");

title.innerText = records[i].title + " [" + records[i].version + "]";

title.title = records[i].title + " [" + records[i].version + "]";

if (records[i].sid == "undefined")

records[i].sid = undefined;

title.href = "search.html?q=" + (records[i].sid || records[i].title);

nexttd(title);

nexttd(records[i].combo + "x");

nexttd(parseInt(records[i].score).toLocaleString());

let acc = document.createElement("span");

acc.innerText = records[i].acc;

acc.className = records[i].grade;

nexttd(acc);

nexttd(records[i].mods);

nexttd(formattime(new Date(parseInt(records[i].time))));

}

}

let b={ip:"",title:"",version:"loading",score:0,combo:0,acc:0};

showActivity([b,b,b,b,b,b,b,b,b,b])

function refreshLivescore(){

let xhr = new XMLHttpRequest();

xhr.responseType = 'text';

xhr.open("GET", "https://3000-magenta-cockroach-8wmgi1ls.ws-us09.gitpod.io/");

xhr.onload = function() {

showActivity(JSON.parse(xhr.response));

}

xhr.onerror = function() {

console.error("Failed to fetch uploaded plays");

}

xhr.send();

}

refreshLivescore();

window.setInterval(refreshLivescore, 5000);

// recently played

if (window.localforage) {

let listhistory = document.getElementById("beatmap-list-history");

localforage.getItem("playhistory1000", function (err, item) {

if (err) {

listhistory.innerText = "Failed to load recently played";

return;

}

if (item && item.length) {

item = item.reverse();

sid = [];

for (let i = 0; i < item.length; ++i) {

if (item[i].sid)

sid.push(item[i].sid);

}

sid = [...new Set(sid)]; // uniq

for (let i = 0; i < 4 && i < sid.length; ++i)

addBeatmapSid(sid[i], listhistory)

} else {

listhistory.innerText =

"You haven't played any Beatmaps yet! Click on a Beatmap and select the difficulty to start playing!";

}

})

}

// new

addBeatmapList("https://api.sayobot.cn/beatmaplist?0=20&1=0&2=2&5=1",

document.getElementById("beatmap-list-new"),

function (t) {

return (t.modes & 1) != 0;

}, 4);

// random

function genRandomList() {

// clear list

let list = document.getElementById("beatmap-list-random");

// fill list

let randstart = Math.floor(Math.random() * 20000);

addBeatmapList("https://api.sayobot.cn/beatmaplist?0=10&1=" + randstart + "&2=1&5=1", list,

function (t) {

while (list.firstChild) list.removeChild(list.firstChild);

return (t.modes & 1) != 0;

}, 4);

}

genRandomList();

// hot

addBeatmapList("https://api.sayobot.cn/beatmaplist?0=4&1=0&2=1&5=1", document.getElementById(

"beatmap-list-hot"));

// liked

if (window.localforage) {

window.localforage.getItem("likedsidset", function (err, val) {

if (err) {

document.getElementById("beatmap-list-liked").innerText = "Failed to load favorites list.";

return;

}

if (val && val.size) {

let listlike = document.getElementById("beatmap-list-liked");

list = Array.from(val);

for (let i = 0; i < list.length && i < 4; ++i)

addBeatmapSid(list[i], listlike);

} else {

document.getElementById("beatmap-list-liked").innerText =

"You haven't favorited any Beatmaps yet! Click on the heart in the lower right corner of the Beatmap to save it.";

}

});

} else {

alert("Oh no, localforage isn't supported on this browser")

}

</script>