Skip to content

Commit

Permalink
Version 0.4.0. PixiJS version updated to v6. Slight visible changes m…
Browse files Browse the repository at this point in the history 
…ade to website design. Frontpage structure modified for experimentation.
  • Loading branch information
@Mostlime12195
Mostlime12195 committed Dec 19, 2024
1 parent 75dbb2b commit 045ad15
Show file tree
Hide file tree
Showing 18 changed files with 708 additions and 530 deletions.
0 local.html → favourites.html
View file
File renamed without changes.
14 changes: 7 additions & 7 deletions footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<footer>
<div class="text">Supports touchscreen devices.</div>
<div class="text">
<div style="text-align: center;">
<h3 class="text">Supports touchscreen devices.</h3>
<h3 class="text">
Version 0.3.0, see our
<a href="https://github.com/WebOsu-2/webosu-2.github.io">Github page.</a>
</div>
<div class="text">
</h3>
<h3 class="text">
Our beatmap provider is SayoBot
</div>
</footer>
</h3>
</div>
0 genre.html → genres.html
View file
File renamed without changes.
270 changes: 96 additions & 174 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@

<meta charset="utf-8" />
<title>WebOsu 2.0!</title>
<meta name="description" content="Play WebOsu – A browser-based rhythm game inspired by osu!std. Experience fast-paced gameplay with an extensive beatmap library. No downloads,play free online now!">
<meta name="description"
content="Play WebOsu – A browser-based rhythm game inspired by osu!std. Experience fast-paced gameplay with an extensive beatmap library. No downloads, play free online now!">
<link rel="stylesheet" href="style/picnic.min.css" />
<link rel="stylesheet" type="text/css" href="style/main.css" />
<!-- <link href="//fonts.googleapis.com/css?family=Exo+2:400,600italic" rel="stylesheet" type="text/css"> -->
Expand Down Expand Up @@ -57,39 +58,15 @@
</script>

<div class="main-page" id="main-page">
<div class="main-content">
<div class="column left">
</div>
<div class="main-content column">

<div class="announcement">
Announcement: This site is still under development. If you encounter
any issues, read <a href="faq.html">the FAQ</a>.
</div>
<br />
<!-- <div class="index-area"> commented out cuz the leaderboard doesn't work.
<h2>Live plays</h2>
<hr/>
<table>
<thead>
<tr>
<td>Player</td>
<td>Beatmap</td>
<td>Combo</td>
<td>Score</td>
<td>Accuracy</td>
<td>Mods</td>
<td>Time</td>
</tr>
</thead>
<tbody id="activity-list">
</tbody>
</table>
</div>
<div class="index-area">
<h2>Recently Played</h2>
<a href="history.html" class="more">View your play history</a>
<hr />
<div class="beatmap-list" id="beatmap-list-history">
// To be filled in script
</div>
</div> -->
<div class="index-area">
<a onclick="genRandomList()" class="more" style="cursor:pointer;">Get new random Beatmaps</a>
<h2>Random Beatmaps<h2>
Expand All @@ -100,176 +77,121 @@ <h2>Random Beatmaps<h2>
</div>
<div class="index-area">
<h2>Latest Beatmaps</h2>
<a href="new.html" class="more">View more latest beatmaps</a>
<a href="latest.html" class="more">View more latest beatmaps</a>
<hr />
<div class="beatmap-list" id="beatmap-list-new">
<!-- to be filled in script -->
</div>
</div>
<div class="index-area">
<h2>Favourited Beatmaps</h2>
<a href="local.html" class="more">View more favourited beatmaps</a>
<a href="favourites.html" class="more">View more favourited beatmaps</a>
<hr />
<div class="beatmap-list" id="beatmap-list-liked">
<!-- to be filled in script -->
</div>
</div>
<div class="index-area">
<h2>Popular Beatmaps</h2>
<a href="hot.html" class="more">View more popular beatmaps</a>
<a href="popular.html" class="more">View more popular beatmaps</a>
<hr />
<div class="beatmap-list" id="beatmap-list-hot">
<!-- to be filled in script -->
</div>
</div>
<div id="footer"></div>
<script>
fetch("footer.html")
.then(response => response.text())
.then(content => {
document.getElementById("footer").innerHTML = content;
});
</script>

<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>
/* All commented out because leaderboard doesn't work
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))));
<div class="column right">
</div>
</div>
<footer id="footer"></footer>
<script>
fetch("footer.html")
.then(response => response.text())
.then(content => {
document.getElementById("footer").innerHTML = content;
});
</script>

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

<script>
// recently played
if (window.localforage) {
let listhistory = document.getElementById("beatmap-list-history");
localforage.getItem("playhistory1000", function (err, item) {
if (err) {
listhistory.innerText = "Could not fetch play history.";
return;
}
}
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", "http://api.osugame.online/fetch/");
xhr.onload = function () {
showActivity(JSON.parse(xhr.response));
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)
}
xhr.onerror = function () {
console.error("failed fetching activities");
else {
listhistory.innerText = "Play any beatmap to add them here.";
}
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 = "Could not fetch play history.";
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 = "Play any beatmap to add them here.";
}
})
}
// 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");
})
}
// 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 = "Could not get liked beatmaps.";
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 = "Heart any beatmap to add them here.";
}
});
}
else {
alert("localforage not supported")
}
</script>
// 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 = "Could not get liked beatmaps.";
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 = "Heart any beatmap to add them here.";
}
});
}
else {
alert("localforage not supported")
}
</script>
</body>

</html>
Expand Down
0 new.html → latest.html
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="nav-link">
<a href="index.html" class="brand">WebOsu 2.0!</a>
<a href="new.html" class="pseudo button">Latest</a>
<a href="hot.html" class="pseudo button">Popular</a>
<a href="genre.html" class="pseudo button">Genres</a>
<a href="latest.html" class="pseudo button">Latest</a>
<a href="popular.html" class="pseudo button">Popular</a>
<a href="genres.html" class="pseudo button">Genres</a>
</div>
<div class="nav-search">
<form action="search.html">
Expand Down
0 hot.html → popular.html
View file
File renamed without changes.
Loading

0 comments on commit 045ad15

Please sign in to comment.