Lang, Simon
7 months ago
parent
856b76f3d7
commit
4aeeceebc9
5 changed files with 334 additions and 5 deletions
@ -0,0 +1,117 @@ |
||||
window.onload = async function(){ |
||||
const charts = document.getElementsByClassName("progress-chart"); |
||||
for (const chart of charts) { |
||||
let puuid = chart.id.split("-"); |
||||
puuid.splice(0,2); |
||||
puuid = puuid.join("-"); |
||||
fetch(`get.php?puuid=${puuid}`, { |
||||
method: "GET", |
||||
}) |
||||
.then(res => res.json()) |
||||
.then(entries => { |
||||
let xValues = []; |
||||
let yValues = []; |
||||
for (const entriesKey in entries) { |
||||
let points = rank_to_points(entries[entriesKey]["tier"], entries[entriesKey]["rank"], entries[entriesKey]["points"]); |
||||
xValues.push(entriesKey); |
||||
yValues.push(points); |
||||
} |
||||
new Chart(`progress-chart-${puuid}`, { |
||||
type: "line", |
||||
data: { |
||||
labels: xValues, |
||||
datasets: [{ |
||||
fill: false, |
||||
borderColor: "rgba(150,150,175)", |
||||
backgroundColor: "rgba(150,150,175)", |
||||
data: yValues |
||||
}] |
||||
}, |
||||
options: { |
||||
plugins: { |
||||
legend: {display: false}, |
||||
tooltip: { |
||||
callbacks: { |
||||
label: function(context) { |
||||
return format_rank(entries[context.label]["tier"],entries[context.label]["rank"],entries[context.label]["points"]) |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
scales: { |
||||
y: { |
||||
display: true, |
||||
stepSize: 100, |
||||
ticks: { |
||||
callback: (value) => { |
||||
return points_to_rankstring(value,false); |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
} |
||||
}); |
||||
}) |
||||
.catch(e => console.error(e)) |
||||
} |
||||
|
||||
}; |
||||
|
||||
function rank_to_points(tier,rank,lp) { |
||||
const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER"); |
||||
const tiers = { |
||||
"DIAMOND": 2400, |
||||
"EMERALD": 2000, |
||||
"PLATINUM": 1600, |
||||
"GOLD": 1200, |
||||
"SILVER": 800, |
||||
"BRONZE": 400, |
||||
"IRON": 0, |
||||
}; |
||||
const ranks = { |
||||
"I": 300, |
||||
"II": 200, |
||||
"III": 100, |
||||
"IV": 0, |
||||
}; |
||||
if (apex_tiers) { |
||||
return 2800 + lp; |
||||
} else { |
||||
return tiers[tier] + ranks[rank] + lp; |
||||
} |
||||
} |
||||
function points_to_rankstring(points, include_LP = true) { |
||||
const apex_tiers = (points >= 2800); |
||||
let lp = (apex_tiers) ? points - 2800 : points%100 |
||||
let rank = (points-lp)%400; |
||||
let tier = (points-lp-rank); |
||||
const tiers = { |
||||
2400: "Diamond", |
||||
2000: "Emerald", |
||||
1600: "Platinum", |
||||
1200: "Gold", |
||||
800: "Silver", |
||||
400: "Bronze", |
||||
0: "Iron", |
||||
}; |
||||
const ranks = { |
||||
300: "I", |
||||
200: "II", |
||||
100: "III", |
||||
0: "IV", |
||||
}; |
||||
|
||||
let rank_string = (apex_tiers) ? "Master" : tiers[tier]; |
||||
if (!apex_tiers) rank_string += ` ${ranks[rank]}`; |
||||
if (include_LP || apex_tiers) rank_string += ` ${lp} LP`; |
||||
return rank_string; |
||||
} |
||||
|
||||
function format_rank(tier,rank,lp) { |
||||
tier = tier.charAt(0).toUpperCase()+tier.slice(1).toLowerCase(); |
||||
const apex_tiers = (tier === "Master" || tier === "Grandmaster" || tier === "Challenger"); |
||||
let rank_string = tier; |
||||
if (!apex_tiers) rank_string += ` ${rank}`; |
||||
rank_string += ` ${lp} LP`; |
||||
return rank_string; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
<?php |
||||
if (!isset($_GET["puuid"]) && $_GET["puuid"]!=null) exit; |
||||
|
||||
require_once "Tracker.php"; |
||||
|
||||
$tracker = new Tracker(); |
||||
$puuid = $_GET["puuid"]; |
||||
|
||||
echo json_encode($tracker->entries[$puuid]); |
||||
@ -0,0 +1,162 @@ |
||||
:root { |
||||
--def-grey: hsl(110 00% 82% / 1); |
||||
--plus-green: hsl(110 80% 82% / 1); |
||||
--minus-red: hsl(0 80% 82% / 1); |
||||
--gold-1: #d29b35; |
||||
--silver-2: #b7b7b7; |
||||
--bronze-3: #b76833; |
||||
} |
||||
html { |
||||
color-scheme: dark; |
||||
} |
||||
body { |
||||
background: #161c21; |
||||
color: #d2d2d2; |
||||
font-family: Verdana, sans-serif; |
||||
} |
||||
h1 { |
||||
text-align: center; |
||||
} |
||||
|
||||
.uem-logo-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 24px; |
||||
} |
||||
img.uem-logo { |
||||
height: 120px; |
||||
} |
||||
|
||||
.leaderboard { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
.leaderboard-list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: stretch; |
||||
gap: 16px; |
||||
max-width: 600px; |
||||
} |
||||
.leaderboard-element { |
||||
display: grid; |
||||
grid-template-columns: 64px 1fr auto; |
||||
grid-template-rows: 1.5fr 0.5fr; |
||||
border: solid 4px #6a818f; |
||||
border-radius: 20px; |
||||
padding: 16px 16px 16px 36px; |
||||
transition: background-color 200ms ease-out; |
||||
} |
||||
.leaderboard-element:hover { |
||||
background-color: #1f2931; |
||||
} |
||||
.leaderboard-element.place-1 { |
||||
border: solid 4px var(--gold-1); |
||||
} |
||||
.leaderboard-element.place-1 .placement { |
||||
color: var(--gold-1); |
||||
} |
||||
.leaderboard-element.place-2 { |
||||
border: solid 4px #b7b7b7; |
||||
} |
||||
.leaderboard-element.place-2 .placement { |
||||
color: var(--silver-2); |
||||
} |
||||
.leaderboard-element.place-3 { |
||||
border: solid 4px #b76833; |
||||
} |
||||
.leaderboard-element.place-3 .placement { |
||||
color: var(--bronze-3); |
||||
} |
||||
|
||||
.leaderboard-element .ranked-emblem { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 0 16px; |
||||
} |
||||
.leaderboard-element .ranked-emblem img { |
||||
width: 72px; |
||||
aspect-ratio: 1/1; |
||||
} |
||||
.leaderboard-element img.ranked-mini-crest { |
||||
width: 24px; |
||||
aspect-ratio: 1/1 |
||||
} |
||||
|
||||
.leaderboard-element .placement { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
grid-row-start: 1; |
||||
grid-row-end: 3; |
||||
font-size: 2.5em; |
||||
font-weight: 700; |
||||
margin-right: 24px; |
||||
} |
||||
|
||||
.leaderboard-element .player-info { |
||||
display: grid; |
||||
grid-template-rows: 1fr 0.9fr; |
||||
grid-template-columns: 72px auto; |
||||
align-items: center; |
||||
grid-column: 2; |
||||
} |
||||
.leaderboard-element .ranked-emblem { |
||||
grid-column: 3; |
||||
} |
||||
|
||||
.playername .riot-tag { |
||||
color: #707070; |
||||
} |
||||
.player-info>img { |
||||
grid-row-start: 1; |
||||
grid-row-end: 3; |
||||
grid-column: 1; |
||||
border-radius: 8px; |
||||
} |
||||
.player-info .playername { |
||||
grid-row: 1; |
||||
grid-column: 2; |
||||
margin: 0; |
||||
} |
||||
.player-info .lp-gained { |
||||
align-self: flex-start; |
||||
grid-row: 2; |
||||
grid-column: 2; |
||||
font-size: 1.5em; |
||||
margin: 0; |
||||
padding-left: 12px; |
||||
} |
||||
.player-info .lp-gained.plus-lp { |
||||
color: var(--plus-green); |
||||
} |
||||
.player-info .lp-gained.minus-lp { |
||||
color: var(--minus-red); |
||||
} |
||||
.player-info .lp-gained.no-lp { |
||||
color: var(--def-grey); |
||||
} |
||||
|
||||
.leaderboard-element .elo-gained { |
||||
grid-column-start: 2; |
||||
grid-column-end: 4; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 4px; |
||||
} |
||||
.rank { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
.rank .rank-desc { |
||||
text-align: center; |
||||
} |
||||
.elo-gained .rank-LP { |
||||
font-size: 0.8em; |
||||
} |
||||
|
After Width: | Height: | Size: 29 KiB |
Loading…
Reference in new issue