lukasdotcom/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the UI for the leaderboard and update title

Browse Source
This commit is contained in:
Lukasdotcom
2023-06-04 12:05:30 -04:00
parent 3f1029ed60
commit b33a8b3294
5 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
html/css/website.css
View File

@@ -231,6 +231,7 @@ input[type="number"] {
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
max-height: 90%;
}
.popup-content {
@@ -240,6 +241,8 @@ input[type="number"] {
border: 1px solid green;
margin-left: 260px;
margin-right: 40px;
overflow: scroll;
max-height: inherit;
}
.notification {

2
html/include/all.php
View File

@@ -9,7 +9,7 @@ include 'functions.php';
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.5" />
<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.6" />
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script defer="true" type="text/javascript" src="/javascript/jquery-ui.min.js"></script>
<link defer="true" rel="stylesheet" href="/css/jquery-ui.min.css">

2
html/index.php
View File

@@ -3,7 +3,7 @@
<html dir="ltr" lang="en">
<?php
if (!file_exists("config.json")) {
echo '<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.5" />';
echo '<link rel="stylesheet" type="text/css" href="/css/website.css?v=1.0.6" />';
echo "<h2>Missing configuration please input configuration</h2>";
}
?>

5
html/klumpy/leaderboard.js
View File

@@ -7,11 +7,13 @@ const leaderboard = {
data: [],
unique: [],
};
// Will show the historical game UI when needed and hide it when needed. This also downloads the historical game data.
async function render_historical() {
await new Promise((res) => setTimeout(res, 2));
const hash = window.location.hash.replace("#", "");
if (hash === "") {
$("#historicalGame").hide();
$("title").text("Klumpy Leaderboard");
return;
}
$("#historicalGame").show();
@@ -30,7 +32,7 @@ async function render_historical() {
historicalState.history = JSON.parse(game_data.history);
historicalState.hash = hash;
$("#username").text(game_data.username);
$("title").text("Game from " + game_data.username);
$("#slider").slider({
max: historicalState.history.length,
change: update_view,
@@ -38,6 +40,7 @@ async function render_historical() {
});
update_view();
}
// This is used to upadte the historical game UI
function update_view() {
if (window.location.hash.replace("#", "") !== historicalState.hash) {
render_historical();

6
html/klumpy/leaderboard.php
View File

@@ -35,7 +35,7 @@
<p>Slide this to go through the game</p>
<div id="slider"></div>
<h3>Game Field</h3>
<table id="game">
<table class="game" id="game">
<tr>
<td></td>
<td></td>
@@ -68,7 +68,7 @@
<p>Unique Number Bonus<span title="A bonus of 50 points if you have all the numbers on the board" style="cursor: help" class="help ui-icon ui-icon-info"></span>: <span id="all_number_scores"></span></p>
<p>Score: <span id="score"></span></p>
<h3>Hand</h3>
<table id="hand">
<table class="game" id="hand">
<tr>
<td></td>
<td></td>
@@ -80,7 +80,7 @@
</div>
<script src="render.js?v=1.0.1"></script>
<script src="score.js?v=1.0.0"></script>
<script src="leaderboard.js?v=1.0.1"></script>
<script src="leaderboard.js?v=1.0.2"></script>
</body>
</html>