33 lines
1.7 KiB
Vue
33 lines
1.7 KiB
Vue
<script setup>
|
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
|
|
|
const props = defineProps({ realm: { type: Object, required: true } });
|
|
const ping = ref(props.realm.ping ?? 38);
|
|
const isOnline = computed(() => props.realm.online !== false);
|
|
const players = computed(() => typeof props.realm.players === 'number' ? props.realm.players.toLocaleString('ru-RU') : '-');
|
|
const factions = computed(() => props.realm.factions || { alliance: 50, horde: 50 });
|
|
let timer;
|
|
|
|
onMounted(() => {
|
|
if (!isOnline.value) return;
|
|
timer = window.setInterval(() => {
|
|
ping.value = Math.max(20, Math.min(80, ping.value + Math.round((Math.random() - 0.5) * 6)));
|
|
}, 2200);
|
|
});
|
|
|
|
onBeforeUnmount(() => window.clearInterval(timer));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="wrap realm reveal">
|
|
<div class="realm-panel">
|
|
<div class="realm-status"><span class="orb"></span><span class="label">{{ isOnline ? 'Онлайн' : 'Оффлайн' }}</span></div>
|
|
<div class="realm-name">{{ realm.name || "Elune's Grace" }}<small>{{ realm.mode || 'PvE · x1 rate · RU' }}</small></div>
|
|
<div class="realm-stat"><span class="k">Игроков</span><span class="v">{{ players }}</span></div>
|
|
<div class="realm-stat"><span class="k">Аптайм</span><span class="v small">{{ realm.uptime || '99.94%' }}</span></div>
|
|
<div class="realm-stat"><span class="k">Пинг</span><span class="v small">{{ isOnline ? `${ping} ms` : '-' }}</span></div>
|
|
<div class="realm-stat"><span class="k">Фракции</span><span class="v small">{{ factions.alliance }} / {{ factions.horde }}</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|