diff options
Diffstat (limited to 'src/components/ServerStatus.vue')
-rw-r--r-- | src/components/ServerStatus.vue | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/src/components/ServerStatus.vue b/src/components/ServerStatus.vue new file mode 100644 index 0000000..c35e916 --- /dev/null +++ b/src/components/ServerStatus.vue @@ -0,0 +1,73 @@ +<template> + <aside> + <a v-if="Online && Players" target="_blank" href="https://server.themanaworld.org">Online: {{Players}} players</a> + <a v-if="Online && !Players" target="_blank" href="https://server.themanaworld.org">Online</a> + <a v-if="!Online" class="offline" target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ILVfzx5Pe-A">Offline</a> + </aside> +</template> + +<style scoped> +aside :any-link { + text-decoration: none; + color: green; + display: block; + padding: 8px; + + &.offline { + color: #d42424; + } +} +</style> + +<script lang="ts"> +import Vue from "vue" +import Component from "vue-class-component" + +interface StatusResponse { + serverStatus: string; + playersOnline?: number; +} + +@Component +export default class ServerStatus extends Vue { + Players = 0; + Online = true; + + private async getStatus () { + const req = new Request(`${process.env.VUE_APP_API}/tmwa/server`, { + mode: "cors", + referrer: "no-referrer", + }); + + try { + const raw_response = await fetch(req); + const data: StatusResponse = await raw_response.json(); + + this.Online = data.serverStatus === "Online"; + this.Players = data.playersOnline || 0; + + if (Reflect.has(self, "localStorage")) { + localStorage.setItem("onlinePlayers", `${this.Players}`); + localStorage.setItem("serverOnline", this.Online ? "true": "false"); + } + } catch (err) { + // API unreachable (assume it's online anyway) + this.Online = true; + } + + setTimeout(this.getStatus, 8000); + } + + mounted () { + // use the last cached value to populate prior to first fetch: + if (Reflect.has(self, "localStorage")) { + this.Players = +(localStorage.getItem("onlinePlayers") || 99); + this.Online = !!(localStorage.getItem("serverOnline") || true); + } else { + this.Players = 99; + } + + this.getStatus(); + } +} +</script> |