mirror of
https://github.com/psforever/PSFPortal.git
synced 2026-01-19 18:14:45 +00:00
Auto-refresh player list + empire stats
This commit is contained in:
Chord
parent
96fcbba812
commit
26f743d907
|
|
@ -23,7 +23,6 @@ api.get('/stats', async (req, res, next) => {
|
|||
console.log("WARNING: cannot find player info '" + players[i] + "'")
|
||||
}
|
||||
|
||||
console.log(stats)
|
||||
info.players = player_info
|
||||
res.status(200).json({ ...stats, ...info });
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,24 +14,49 @@
|
|||
let stats;
|
||||
let alert;
|
||||
let players;
|
||||
let next_update = 30;
|
||||
let next_update_label = "";
|
||||
let empire_stats;
|
||||
|
||||
function format_account(account) {
|
||||
return `<a href="/user/${account.id}">${account.username}</a>`
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const resp = await axios.get("/api/stats")
|
||||
stats = resp.data;
|
||||
players = stats.players
|
||||
alert.message("")
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
alert.message("Failed to fetch stats from server")
|
||||
}
|
||||
await update_stats()
|
||||
update_stats_label()
|
||||
setInterval(update_stats_label, 1000)
|
||||
|
||||
ready = true
|
||||
})
|
||||
|
||||
async function update_stats_label() {
|
||||
if (next_update == 1) {
|
||||
next_update = 30;
|
||||
await update_stats()
|
||||
empire_stats.refresh()
|
||||
} else {
|
||||
next_update -= 1
|
||||
}
|
||||
|
||||
if (next_update == 1)
|
||||
next_update_label = next_update + " second"
|
||||
else
|
||||
next_update_label = next_update + " seconds"
|
||||
}
|
||||
|
||||
async function update_stats() {
|
||||
try {
|
||||
const resp = await axios.get("/api/stats")
|
||||
stats = resp.data;
|
||||
players = stats.players
|
||||
stats.empires = stats.empires
|
||||
alert.message("")
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
alert.message("Failed to fetch stats from server")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -42,44 +67,47 @@
|
|||
|
||||
{#if stats}
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-12">
|
||||
<h1>PSForever Live Server</h1>
|
||||
<div class="col-md-8 col-12">
|
||||
<h1>PSForever Live Server</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{#if !$loggedIn}
|
||||
<a class="btn btn-primary" href="/login" role="button">Login</a>
|
||||
<a class="btn btn-primary" href="/register" role="button">Create Account</a>
|
||||
{/if}
|
||||
<a class="btn btn-secondary" href="https://docs.google.com/document/d/1ZMx1NUylVZCXJNRyhkuVWT0eUKSVYu0JXsU-y3f93BY/edit" role="button">Setup Instructions</a>
|
||||
</div>
|
||||
</div><br/>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{#if !$loggedIn}
|
||||
<a class="btn btn-primary" href="/login" role="button">Login</a>
|
||||
<a class="btn btn-primary" href="/register" role="button">Create Account</a>
|
||||
{/if}
|
||||
<a class="btn btn-secondary" href="https://docs.google.com/document/d/1ZMx1NUylVZCXJNRyhkuVWT0eUKSVYu0JXsU-y3f93BY/edit" role="button">Setup Instructions</a>
|
||||
</div>
|
||||
</div><br/>
|
||||
|
||||
<p>
|
||||
<strong>Server address:</strong> <code>play.psforever.net:51000</code>
|
||||
<button type="button" class="btn btn-sm" class:btn-success={stats.status == "UP"}
|
||||
<p>
|
||||
<strong>Server address:</strong> <code>play.psforever.net:51000</code>
|
||||
<button type="button" class="btn btn-sm" class:btn-success={stats.status == "UP"}
|
||||
class:btn-danger={stats.status != "UP"}>Server {stats.status}</button><br/>
|
||||
<strong>Last character created:</strong> <CharacterLink character={stats.last.character} /> (<span title={moment(stats.last.character.created).format(`MMMM Do YYYY, h:mm:ss a`)}>{moment(stats.last.character.created).fromNow()}</span>)<br/>
|
||||
<strong># Accounts:</strong> {stats.accounts.toLocaleString()}<br/>
|
||||
<strong># Characters:</strong> {stats.characters.toLocaleString()}
|
||||
</p>
|
||||
<strong>Last character created:</strong> <CharacterLink character={stats.last.character} /> (<span title={moment(stats.last.character.created).format(`MMMM Do YYYY, h:mm:ss a`)}>{moment(stats.last.character.created).fromNow()}</span>)<br/>
|
||||
<strong># Accounts:</strong> {stats.accounts.toLocaleString()}<br/>
|
||||
<strong># Characters:</strong> {stats.characters.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>Online Players ({players.length})</h2>
|
||||
<p>Next update in {next_update_label}</p>
|
||||
</div>
|
||||
<div class="col-md-8 col-12">
|
||||
<div class="row">
|
||||
{#each players as char, i}
|
||||
<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if players}
|
||||
<h2>Online Players ({players.length})</h2>
|
||||
<div class="row">
|
||||
{#each players as char, i}
|
||||
<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-12 mt-md-0 mt-3">
|
||||
<EmpireStats stats={stats.empires} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-4 col-12 mt-md-0 mt-3">
|
||||
{#if stats.empires}
|
||||
<EmpireStats bind:this={empire_stats} bind:stats={stats.empires} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue