PSForever/PSFPortal
1
0
Fork 0
mirror of https://github.com/psforever/PSFPortal.git synced 2026-07-16 00:44:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Auto-refresh player list + empire stats

Browse source
This commit is contained in:
Chord 2020-05-13 22:57:07 +02:00
parent 96fcbba812
commit 26f743d907
3 changed files with 116 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

63
app/components/EmpireStats.svelte
View file

@ -3,34 +3,61 @@
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const progress = tweened(0, {
export let progress = tweened(0, {
delay: 100,
duration: 1000,
easing: cubicOut
});
export let stats = { "TR" : 0, "NC" : 0, "VS" : 0};
let total = stats.TR + stats.NC + stats.VS;
let percentages = { "TR" : stats.TR/total,
let total = 0
$: {
total = stats.TR + stats.NC + stats.VS;
if (total == 0)
total = 1
}
$: percentages = { "TR" : stats.TR/total,
"NC" : stats.NC/total,
"VS" : stats.VS/total}
let tr, nc, vs;
onMount(() => {
tr.style.height = "1px";
nc.style.height = "1px";
vs.style.height = "1px";
let tr = 1, nc = 1, vs = 1;
let tr_to = 1, nc_to = 1, vs_to = 1;
let tr_from = 1, nc_from = 1, vs_from = 1;
function update(v) {
tr = tr_from + (tr_to-tr_from)*v;
nc = nc_from + (nc_to-nc_from)*v;
vs = vs_from + (vs_to-vs_from)*v;
}
export function refresh() {
tr_from = tr
nc_from = nc
vs_from = vs
tr_to = percentages.TR*165
nc_to = percentages.NC*165
vs_to = percentages.VS*165
if (tr_from == tr_to && nc_from == nc_to &&
vs_from == vs_to)
return
progress = tweened(0, {
delay: 100,
duration: 1000,
easing: cubicOut
});
progress.subscribe((v) => {
if (!tr || !nc || !vs)
return;
tr.style.height = v*percentages.TR*200 + "px";
nc.style.height = v*percentages.NC*200 + "px";
vs.style.height = v*percentages.VS*200 + "px";
update(v)
})
setTimeout(() => progress.set(1.0), 100);
}
onMount(() => {
refresh()
})
</script>
@ -84,8 +111,8 @@
</style>
<div class="empire-stats clearfix">
<div class="empire-stats-header">Empire Need</div>
<div title={stats.TR} bind:this={tr} class="empire-stat faction-tr-bg"><strong>TR</strong><br/>{Math.round(percentages.TR*100*$progress)}%</div>
<div title={stats.NC} bind:this={nc} class="empire-stat faction-nc-bg"><strong>NC</strong><br/>{Math.round(percentages.NC*100*$progress)}%</div>
<div title={stats.VS} bind:this={vs} class="empire-stat faction-vs-bg"><strong>VS</strong><br/>{Math.round(percentages.VS*100*$progress)}%</div>
<div class="empire-stats-header">Empire %</div>
<div title="{stats.TR} TR" style="height: {tr}px" class="empire-stat faction-tr-bg"><strong>TR</strong><br/>{Math.round(percentages.TR*100*$progress)}%</div>
<div title="{stats.NC} NC" style="height: {nc}px" class="empire-stat faction-nc-bg"><strong>NC</strong><br/>{Math.round(percentages.NC*100*$progress)}%</div>
<div title="{stats.VS} VS" style="height: {vs}px" class="empire-stat faction-vs-bg"><strong>VS</strong><br/>{Math.round(percentages.VS*100*$progress)}%</div>
</div>