fix player badge from not showing

This commit is contained in:
Lee 2023-10-17 23:31:20 +01:00
parent 4095d8d2b3
commit c17c2a8b76

@ -1,6 +1,5 @@
import {SS_HOST} from '../../../network/queues/scoresaber/page-queue' import tweened from "../../../svelte-utils/tweened";
import tweened from '../../../svelte-utils/tweened'; import { opt } from "../../../utils/js";
import {opt} from '../../../utils/js'
const TWEEN_DURATION = 300; const TWEEN_DURATION = 300;
@ -8,98 +7,124 @@ const scoresStatsTweened = {};
function updateScoresStats(playerData, playerStats) { function updateScoresStats(playerData, playerStats) {
if (!playerData) return null; if (!playerData) return null;
const scoreStats = opt(playerData, 'scoreStats'); const scoreStats = opt(playerData, "scoreStats");
const statsDef = scoreStats const statsDef = scoreStats
? [ ? [
{key: "totalPlayCount", label: 'Total play count', bgColor: 'var(--selected)'}, {
{key: "totalScore", label: 'Total score', bgColor: 'var(--selected)'}, key: "totalPlayCount",
{key: "rankedPlayCount", label: 'Ranked play count', bgColor: 'var(--ppColour)'}, label: "Total play count",
{key: "totalRankedScore", label: 'Total ranked score', bgColor: 'var(--ppColour)'}, bgColor: "var(--selected)",
{key: "averageRankedAccuracy", label: 'Average', title: 'Average ranked accuracy', digits: 2, suffix: '%', bgColor: 'var(--selected)'} },
{ key: "totalScore", label: "Total score", bgColor: "var(--selected)" },
{
key: "rankedPlayCount",
label: "Ranked play count",
bgColor: "var(--ppColour)",
},
{
key: "totalRankedScore",
label: "Total ranked score",
bgColor: "var(--ppColour)",
},
{
key: "averageRankedAccuracy",
label: "Average",
title: "Average ranked accuracy",
digits: 2,
suffix: "%",
bgColor: "var(--selected)",
},
] ]
: []; : [];
return statsDef return statsDef
.map(s => { .map((s) => {
const value = scoreStats && scoreStats[s.key] ? scoreStats[s.key] : null; const value = scoreStats && scoreStats[s.key] ? scoreStats[s.key] : null;
if (!value && !Number.isFinite(value)) return null; if (!value && !Number.isFinite(value)) return null;
if (!scoresStatsTweened.hasOwnProperty(s.key)) scoresStatsTweened[s.key] = tweened(value, TWEEN_DURATION); if (!scoresStatsTweened.hasOwnProperty(s.key))
scoresStatsTweened[s.key] = tweened(value, TWEEN_DURATION);
else scoresStatsTweened[s.key].set(value); else scoresStatsTweened[s.key].set(value);
return { return {
label: s.label, label: s.label,
title: opt(s, 'title', ''), title: opt(s, "title", ""),
value: scoresStatsTweened[s.key], value: scoresStatsTweened[s.key],
digits: opt(s, 'digits', 0), digits: opt(s, "digits", 0),
suffix: opt(s, 'suffix', ''), suffix: opt(s, "suffix", ""),
fluid: true, fluid: true,
bgColor: opt(s, 'bgColor', 'var(--dimmed)'), bgColor: opt(s, "bgColor", "var(--dimmed)"),
} };
}) })
.concat( .concat(
(playerStats && playerStats.topPp && Number.isFinite(playerStats.topPp) ? [{ playerStats && playerStats.topPp && Number.isFinite(playerStats.topPp)
label: 'Best PP', ? [
{
label: "Best PP",
title: null, title: null,
value: playerStats.topPp, value: playerStats.topPp,
digits: 2, digits: 2,
suffix: 'pp', suffix: "pp",
fluid: true, fluid: true,
bgColor: 'var(--ppColour)', bgColor: "var(--ppColour)",
}] : []) },
]
: []
) )
.filter(s => s && (!playerStats || s.label !== 'Average')); .filter((s) => s && (!playerStats || s.label !== "Average"));
} }
function updateAccStats(playerStats) { function updateAccStats(playerStats) {
if (!playerStats) return null; if (!playerStats) return null;
return (playerStats ? ['topAcc', 'avgAcc', 'medianAcc', 'stdDeviation'] : []) return (
.reduce((cum, key) => { playerStats ? ["topAcc", "avgAcc", "medianAcc", "stdDeviation"] : []
).reduce((cum, key) => {
const value = playerStats[key] ? playerStats[key] : null; const value = playerStats[key] ? playerStats[key] : null;
if (!value && !Number.isFinite(value)) return cum; if (!value && !Number.isFinite(value)) return cum;
const tweenKey = key === 'avgAcc' ? 'averageRankedAccuracy' : key const tweenKey = key === "avgAcc" ? "averageRankedAccuracy" : key;
if (!scoresStatsTweened.hasOwnProperty(tweenKey)) scoresStatsTweened[tweenKey] = tweened(value, TWEEN_DURATION); if (!scoresStatsTweened.hasOwnProperty(tweenKey))
scoresStatsTweened[tweenKey] = tweened(value, TWEEN_DURATION);
else scoresStatsTweened[tweenKey].set(value); else scoresStatsTweened[tweenKey].set(value);
let metricData = null; let metricData = null;
switch(key) { switch (key) {
case 'avgAcc': case "avgAcc":
metricData = { metricData = {
key, key,
label: 'Average', label: "Average",
title: 'Average ranked accuracy', title: "Average ranked accuracy",
bgColor: 'var(--selected)' bgColor: "var(--selected)",
}; };
break; break;
case 'medianAcc': case "medianAcc":
metricData = { metricData = {
key, key,
label: 'Median', label: "Median",
title: 'Median ranked accuracy', title: "Median ranked accuracy",
bgColor: 'var(--ppColour)' bgColor: "var(--ppColour)",
}; };
break; break;
case 'stdDeviation': case "stdDeviation":
metricData = { metricData = {
key, key,
label: 'Std deviation', label: "Std deviation",
title: 'Standard deviation ranked accuracy', title: "Standard deviation ranked accuracy",
bgColor: 'var(--decrease)' bgColor: "var(--decrease)",
}; };
break; break;
case 'topAcc': case "topAcc":
metricData = { metricData = {
key, key,
label: 'Best', label: "Best",
title: 'Best ranked accuracy', title: "Best ranked accuracy",
bgColor: 'rgba(60,179,113,.75)' bgColor: "rgba(60,179,113,.75)",
}; };
break; break;
} }
@ -109,64 +134,73 @@ function updateAccStats(playerStats) {
...metricData, ...metricData,
value: scoresStatsTweened[tweenKey], value: scoresStatsTweened[tweenKey],
digits: 2, digits: 2,
suffix: '%', suffix: "%",
fluid: true, fluid: true,
}); });
return cum; return cum;
}, []) }, []);
} }
function updateAccBadges(playerStats) { function updateAccBadges(playerStats) {
if (!playerStats || !playerStats.badges) return null; if (!playerStats || !playerStats.badges) return null;
return playerStats.badges return playerStats.badges.map((badge) => {
.map(badge => {
const value = badge.value; const value = badge.value;
if (!scoresStatsTweened.hasOwnProperty(badge.label)) scoresStatsTweened[badge.label] = tweened(value, TWEEN_DURATION); if (!scoresStatsTweened.hasOwnProperty(badge.label))
scoresStatsTweened[badge.label] = tweened(value, TWEEN_DURATION);
else scoresStatsTweened[badge.label].set(value); else scoresStatsTweened[badge.label].set(value);
return { return {
...badge, ...badge,
value: scoresStatsTweened[badge.label], value: scoresStatsTweened[badge.label],
title: !badge.min ? `< ${badge.max}%` : (!badge.max ? `> ${badge.min}%` : `${badge.min}% - ${badge.max}%`), title: !badge.min
? `< ${badge.max}%`
: !badge.max
? `> ${badge.min}%`
: `${badge.min}% - ${badge.max}%`,
fluid: true, fluid: true,
digits: 0, digits: 0,
} };
}) });
} }
function updateSsBadges(playerData) { function updateSsBadges(playerData) {
if (!opt(playerData, 'playerInfo.badges.length')) return null; if (!opt(playerData, "playerInfo.badges.length")) return null;
return playerData.playerInfo.badges.map(b => ({src: `${SS_HOST}/imports/images/badges/${b.image}`, title: b.description})); return playerData.playerInfo.badges.map((b) => ({
src: `https://cdn.scoresaber.com/badges/${b.image}`,
title: b.description,
}));
} }
const playerInfoTweened = {}; const playerInfoTweened = {};
export default (playerData, playerStats) => { export default (playerData, playerStats) => {
if (!playerData && !playerStats) return {}; if (!playerData && !playerStats) return {};
const playerInfo = {...opt(playerData, 'playerInfo', null)}; const playerInfo = { ...opt(playerData, "playerInfo", null) };
['pp', 'rank'].forEach(key => { ["pp", "rank"].forEach((key) => {
const value = playerInfo && playerInfo[key] ? playerInfo[key] : 0; const value = playerInfo && playerInfo[key] ? playerInfo[key] : 0;
if (!playerInfoTweened.hasOwnProperty(key)) playerInfoTweened[key] = tweened(value, TWEEN_DURATION); if (!playerInfoTweened.hasOwnProperty(key))
playerInfoTweened[key] = tweened(value, TWEEN_DURATION);
else playerInfoTweened[key].set(value); else playerInfoTweened[key].set(value);
if (playerInfo) { if (playerInfo) {
playerInfo[key + 'Value'] = playerInfo[key]; playerInfo[key + "Value"] = playerInfo[key];
playerInfo[key] = playerInfoTweened[key]; playerInfo[key] = playerInfoTweened[key];
} }
}); });
const firstCountryRank = opt(playerInfo, 'countries.0.rank') const firstCountryRank = opt(playerInfo, "countries.0.rank");
if (Number.isFinite(firstCountryRank)) { if (Number.isFinite(firstCountryRank)) {
playerInfo.countries = playerInfo.countries.map(c => ({...c})) playerInfo.countries = playerInfo.countries.map((c) => ({ ...c }));
const key = 'countryRank' const key = "countryRank";
const value = playerInfo.countries[0].rank; const value = playerInfo.countries[0].rank;
if (!playerInfoTweened.hasOwnProperty(key)) playerInfoTweened[key] = tweened(value, TWEEN_DURATION); if (!playerInfoTweened.hasOwnProperty(key))
playerInfoTweened[key] = tweened(value, TWEEN_DURATION);
else playerInfoTweened[key].set(value); else playerInfoTweened[key].set(value);
playerInfo.countries[0].rankValue = value; playerInfo.countries[0].rankValue = value;
@ -175,10 +209,10 @@ export default (playerData, playerStats) => {
return { return {
playerInfo, playerInfo,
prevInfo: opt(playerData, 'prevInfo', null), prevInfo: opt(playerData, "prevInfo", null),
scoresStats: updateScoresStats(playerData, playerStats), scoresStats: updateScoresStats(playerData, playerStats),
accStats: updateAccStats(playerStats), accStats: updateAccStats(playerStats),
accBadges: updateAccBadges(playerStats), accBadges: updateAccBadges(playerStats),
ssBadges: updateSsBadges(playerData), ssBadges: updateSsBadges(playerData),
} };
} };