fix player badge from not showing
This commit is contained in:
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,165 +7,200 @@ 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',
|
? [
|
||||||
title: null,
|
{
|
||||||
value: playerStats.topPp,
|
label: "Best PP",
|
||||||
digits: 2,
|
title: null,
|
||||||
suffix: 'pp',
|
value: playerStats.topPp,
|
||||||
fluid: true,
|
digits: 2,
|
||||||
bgColor: 'var(--ppColour)',
|
suffix: "pp",
|
||||||
}] : [])
|
fluid: true,
|
||||||
|
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"] : []
|
||||||
const value = playerStats[key] ? playerStats[key] : null;
|
).reduce((cum, key) => {
|
||||||
if (!value && !Number.isFinite(value)) return cum;
|
const value = playerStats[key] ? playerStats[key] : null;
|
||||||
|
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))
|
||||||
else scoresStatsTweened[tweenKey].set(value);
|
scoresStatsTweened[tweenKey] = tweened(value, TWEEN_DURATION);
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (metricData)
|
if (metricData)
|
||||||
cum.push({
|
cum.push({
|
||||||
...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))
|
||||||
else scoresStatsTweened[badge.label].set(value);
|
scoresStatsTweened[badge.label] = tweened(value, TWEEN_DURATION);
|
||||||
|
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
|
||||||
fluid: true,
|
? `< ${badge.max}%`
|
||||||
digits: 0,
|
: !badge.max
|
||||||
}
|
? `> ${badge.min}%`
|
||||||
})
|
: `${badge.min}% - ${badge.max}%`,
|
||||||
|
fluid: true,
|
||||||
|
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),
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
Reference in New Issue
Block a user