diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js new file mode 100644 index 0000000..188a986 --- /dev/null +++ b/public/elotracker/chart-integration.js @@ -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; +} \ No newline at end of file diff --git a/public/elotracker/get.php b/public/elotracker/get.php new file mode 100644 index 0000000..9dac816 --- /dev/null +++ b/public/elotracker/get.php @@ -0,0 +1,9 @@ +entries[$puuid]); \ No newline at end of file diff --git a/public/elotracker/index.php b/public/elotracker/index.php index c417ab3..c556440 100644 --- a/public/elotracker/index.php +++ b/public/elotracker/index.php @@ -4,6 +4,7 @@ UEM Elo Tracker + UEM LoL Elo-Challenge"; +echo "
"; +echo "
"; +echo "
"; +$placement_counter = 1; foreach ($tracker->getProgressions() as $puuid => $progress){ + echo "
"; $entries = $tracker->entries[$puuid]; $account = $tracker->accounts[$puuid]; + $start_elo = reset($entries); + if ($start_elo->tier == "MASTER" || $start_elo->tier == "GRANDMASTER" || $start_elo->tier == "CHALLENGER") $start_elo->rank = ""; + $current_elo = end($entries); + if ($current_elo->tier == "MASTER" || $current_elo->tier == "GRANDMASTER" || $current_elo->tier == "CHALLENGER") $current_elo->rank = ""; + $progress = ($progress>=0) ? "+$progress" : $progress; + $tier_lowercase = strtolower($current_elo->tier); + $start_tier_lowercase = strtolower($start_elo->tier); + $tier_ucfirst = ucfirst($tier_lowercase); + $start_tier_ucfirst = ucfirst($start_tier_lowercase); + $gained_lp_sign = ($progress > 0) ? " plus-lp" : (($progress < 0) ? " minus-lp" : "no-lp"); + + echo "$placement_counter."; + + echo "
+ +

$account->gameName#$account->tagLine

+

$progress LP

+
"; + + echo "
"; - echo "

$account->gameName#$account->tagLine: $progress

"; - foreach ($entries as $date => $elo){ - $eloValue = $elo->value(); - echo "$date → $eloValue
"; - } + echo "
+
+ + {$start_tier_ucfirst} {$start_elo->rank}
{$start_elo->points} LP +
+ → +
+ + {$tier_ucfirst} {$current_elo->rank}
{$current_elo->points} LP +
+
"; + echo "
"; + echo ""; + $placement_counter++; } +echo "
"; +echo "
"; ?> + diff --git a/public/elotracker/styles.css b/public/elotracker/styles.css index e69de29..7e3f100 100644 --- a/public/elotracker/styles.css +++ b/public/elotracker/styles.css @@ -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; +} \ No newline at end of file diff --git a/public/img/uem-logo.png b/public/img/uem-logo.png new file mode 100644 index 0000000..a3352db Binary files /dev/null and b/public/img/uem-logo.png differ