Skip to content

Commit

Permalink
Merge pull request #46 from cardano-scaling/feat/stats-landing-page
Browse files Browse the repository at this point in the history 
feat: display leaderboard and stats on landing page
  • Loading branch information
@Quantumplation
Quantumplation committed Aug 13, 2024
2 parents ac8e328 + 951314e commit 1cf7d10
Show file tree
Hide file tree
Showing 5 changed files with 370 additions and 88 deletions.
147 changes: 128 additions & 19 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
name="description"
content="Experience Doom running on Blockchain powered by Cardano’s Hydra technology in this tech demo."
/>
<link rel="icon" type="image/png" href="assets/images/favicon.png" />
<link rel="icon" type="image/png" href="/assets/images/favicon.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
Expand All @@ -21,13 +21,13 @@
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hydra.family" />
<meta property="og:image" content="assets/images/social-image.png" />
<meta property="og:image" content="/assets/images/social-image.png" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Hydra Doom" />
<meta
name="twitter:image"
content="assets/images/social-image-twitter.png"
content="/assets/images/social-image-twitter.png"
/>
</head>
<body>
Expand Down Expand Up @@ -88,6 +88,112 @@ <h1 class="doom-logo js-hide-when-modal-opens">
<span>Play Doom On Hydra</span>
</button>
</div>
<div class="js-hide-when-modal-opens">
<div class="landing-tables">
<div class="landing-stats">
<article class="block landing-tables-globals">
<h3>Global Totals</h3>
<div class="card card--stats">
<table>
<tr>
<td>games (all-time):</td>
<td class="global-games">--</td>
</tr>
<tr>
<td>games (active):</td>
<td class="global-games-active">--</td>
</tr>
<tr>
<td>transactions:</td>
<td class="global-txs" class="animate"></td>
</tr>
<tr>
<td>bytes:</td>
<td class="global-bytes" class="animate"></td>
</tr>
<tr>
<td>kills:</td>
<td class="global-kills">--</td>
</tr>
<tr>
<td>items:</td>
<td class="global-items">--</td>
</tr>
<tr>
<td>secrets:</td>
<td class="global-secrets">--</td>
</tr>
<tr>
<td>play_time:</td>
<td class="global-play-time">--</td>
</tr>
</table>
</div>
</article>
<article class="block landing-global-tps">
<h3>Global TPS</h3>
<div class="global speedometer">
<div
class="global speedometer__tick"
data-speedometer-value="0"
></div>
<div class="global speedometer-min">0</div>
<div class="global speedometer-max">100</div>
<div class="global speedometer-value">0</div>
</div>
</article>
</div>
<div class="all-time-tables">
<div class="tabs">
<button
class="js-tab-button tab-button active"
data-tab="landing-kills"
id="tab-landing-kills"
>
Kills
</button>
<button
class="js-tab-button tab-button"
data-tab="landing-items"
id="tab-landing-items"
>
Items
</button>
<button
class="js-tab-button tab-button"
data-tab="landing-secrets"
id="tab-landing-secrets"
>
Secrets
</button>
</div>
<div class="js-tab-content tab-content active" id="landing-kills">
<table class="js-all-time-kills-leaderboard leaderboard">
<tr>
<th>Player</th>
<th>Score</th>
</tr>
</table>
</div>
<div class="js-tab-content tab-content" id="landing-items">
<table class="js-all-time-items-leaderboard leaderboard">
<tr>
<th>Player</th>
<th>Score</th>
</tr>
</table>
</div>
<div class="js-tab-content tab-content" id="landing-secrets">
<table class="js-all-time-secrets-leaderboard leaderboard">
<tr>
<th>Player</th>
<th>Score</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</main>
<div class="layer--bg">
<img
Expand Down Expand Up @@ -298,35 +404,35 @@ <h4 class="block__heading">Global Totals</h4>
<table>
<tr>
<td>games (all-time):</td>
<td id="global-games">--</td>
<td class="global-games">--</td>
</tr>
<tr>
<td>games (active):</td>
<td id="global-games-active">--</td>
<td class="global-games-active">--</td>
</tr>
<tr>
<td>transactions:</td>
<td id="global-txs" class="animate"></td>
<td class="global-txs" class="animate"></td>
</tr>
<tr>
<td>bytes:</td>
<td id="global-bytes" class="animate"></td>
<td class="global-bytes" class="animate"></td>
</tr>
<tr>
<td>kills:</td>
<td id="global-kills">--</td>
<td class="global-kills">--</td>
</tr>
<tr>
<td>items:</td>
<td id="global-items">--</td>
<td class="global-items">--</td>
</tr>
<tr>
<td>secrets:</td>
<td id="global-secrets">--</td>
<td class="global-secrets">--</td>
</tr>
<tr>
<td>play_time:</td>
<td id="global-play-time">--</td>
<td class="global-play-time">--</td>
</tr>
</table>
</div>
Expand Down Expand Up @@ -784,7 +890,10 @@ <h1>Leaderboard</h1>
All Time
</button>
</div>
<div class="js-tab-content tab-content active" id="current">
<div
class="js-tab-content tab-content tab-three-columns active"
id="current"
>
<div>
<h3>Kills</h3>
<table
Expand Down Expand Up @@ -822,12 +931,14 @@ <h3>Secrets</h3>
</table>
</div>
</div>
<div class="js-tab-content tab-content" id="all-time">
<div
class="js-tab-content tab-content tab-three-columns"
id="all-time"
>
<div>
<h3>Kills</h3>
<table
id="all-time-kills-leaderboard"
class="leaderboard"
class="js-all-time-kills-leaderboard leaderboard"
>
<tr>
<th>Player</th>
Expand All @@ -838,8 +949,7 @@ <h3>Kills</h3>
<div>
<h3>Items</h3>
<table
id="all-time-items-leaderboard"
class="leaderboard"
class="js-all-time-items-leaderboard leaderboard"
>
<tr>
<th>Player</th>
Expand All @@ -850,8 +960,7 @@ <h3>Items</h3>
<div>
<h3>Secrets</h3>
<table
id="all-time-secrets-leaderboard"
class="leaderboard"
class="js-all-time-secrets-leaderboard leaderboard"
>
<tr>
<th>Player</th>
Expand Down
28 changes: 20 additions & 8 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,26 @@ if (process.env.REGION) {
tabButtons.forEach((button) => {
button.addEventListener("click", () => {
const tab = button.getAttribute("data-tab");
document.querySelectorAll(".js-tab-content").forEach((content) => {
content.classList.remove("active");
});
document.querySelectorAll(".js-tab-button").forEach((content) => {
content.classList.remove("active");
});
if (tab) document.getElementById(tab)?.classList.add("active");
if (tab) document.getElementById(`tab-${tab}`)?.classList.add("active");
button.parentElement?.parentElement
?.querySelectorAll(".js-tab-content")
.forEach((content) => {
content.classList.remove("active");
});
button.parentElement?.parentElement
?.querySelectorAll(".js-tab-button")
.forEach((content) => {
content.classList.remove("active");
});
if (tab) {
button.parentElement?.parentElement
?.querySelector(`#${tab}`)
?.classList.add("active");
}
if (tab) {
button.parentElement
?.querySelector(`#tab-${tab}`)
?.classList.add("active");
}
});
});

Expand Down
24 changes: 17 additions & 7 deletions src/speedometer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@ const local: SpeedometerElements = {
value: document.querySelector(".local.speedometer-value"),
};

const global: SpeedometerElements = {
tick: document.querySelector(".global.speedometer__tick"),
max: document.querySelector(".global.speedometer-max"),
value: document.querySelector(".global.speedometer-value"),
const global: {
tick: NodeListOf<HTMLDivElement>
max: NodeListOf<HTMLDivElement>
value: NodeListOf<HTMLDivElement>
} = {
tick: document.querySelectorAll(".global.speedometer__tick"),
max: document.querySelectorAll(".global.speedometer-max"),
value: document.querySelectorAll(".global.speedometer-value"),
};

// Map a value from one range to another
Expand All @@ -30,7 +34,9 @@ function mapRange(
export let MAX_SPEED = 40;
export let GLOBAL_MAX_SPEED = 30 * 100;
local.max!.innerText = MAX_SPEED.toString();
global.max!.innerText = GLOBAL_MAX_SPEED.toString();
global.max.forEach((max) => {
max.innerText = GLOBAL_MAX_SPEED.toString();
})

// Set the speedometer value in the range [0, MAX_SPEED]
export function setLocalSpeedometerValue(value: number) {
Expand All @@ -50,6 +56,10 @@ export function setGlobalSpeedometerValue(value: number) {
global.max!.innerText = GLOBAL_MAX_SPEED.toString();
}
const degree = mapRange(value, 0, GLOBAL_MAX_SPEED, 0, 180);
global.tick!.style.transform = `rotate(${degree}deg)`;
global.value!.innerText = value.toString();
global.tick.forEach((tick) => {
tick.style.transform = `rotate(${degree}deg)`;
});
global.value.forEach((v) => {
v.innerText = value.toString();
});
}
Loading

0 comments on commit 1cf7d10

Please sign in to comment.