observe

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <TabsMenu></TabsMenu>
+    <FailLoad v-if="f"/>
+    <TabsMenu v-else/>
+    <LoaderPage v-if="l"/>
   </div>
 </template>
 
@@ -28,10 +30,27 @@ Vue.use(MdProgress);
 Vue.use(MdSnackbar);
 
 import TabsMenu from "@/components/TabsMenu.vue";
+import LoaderPage from "@/components/Others/LoaderPage.vue";
+import FailLoad from "@/components/Others/FailLoad.vue";
 export default {
   name: 'App',
   components: {
+    FailLoad,
+    LoaderPage,
     TabsMenu
+  },
+  data: () => ({
+    l:true,
+    f:true
+  }),
+  beforeMount() {
+    this.$API.load().then(() => {
+      this.l = this.$API.loading;
+      this.f = this.$API.failed;
+      console.log('s', this.l,this.f);
+    }).catch(() => {
+      console.log('e', this.l,this.f);
+    })
   }
 }
 </script>
@@ -173,4 +192,8 @@ a {
 .md-progress-bar-buffer {
   color: black;
 }
+
+.clickable:hover {
+  cursor: pointer;
+}
 </style>

src/api/AdminApi.js

@@ -17,12 +17,16 @@ export default class AdminApi {
                 });
     }
 
-    async load() {
+    async load(stages) {
         console.log(`[AdminAPI] request permissions`);
         console.log(document.cookie);
         if (document.cookie.indexOf("steam64=") === -1) return;
-        await this.checkPermition('ban')
-        await this.checkPermition('mute')
-        await this.checkPermition('kick')
+        stages.add("permitions")
+        await Promise.all([
+            this.checkPermition('ban'),
+            this.checkPermition('mute'),
+            this.checkPermition('kick')
+            ]);
+        stages.remove("permitions");
     }
 }

src/api/GlobalApi.js

@@ -1,25 +1,41 @@
 import axios from "axios";
 import AdminApi from "@/api/AdminApi";
 import PlayerApi from "@/api/PlayerApi";
+import Stages from "@/api/Stages";
 
 export default class GlobalApi {
     stats = {
-        'statistic':null,
-        'servers': null,
+        'statistic':{
+            working_servers:0,
+            player_now:0,
+            player_max:0,
+            total_servers:0
+        },
+        'servers':{
+            "w":[],
+            "e":[],
+            "n":[]
+        },
         'uniq': null
     }
     loading = false;
+    failed = false;
 
     admin = new AdminApi()
     player = new PlayerApi()
 
     builddate = process.env.BUILDDATE === undefined ? null : process.env.BUILDDATE;
 
+    current_window = "";
+
+    load_stages = new Stages();
+
     constructor() {
     }
 
     async fillThis(value) {
         console.log(`[API] load: ${value}`);
+        this.load_stages.add(value);
         return await axios.get(`/api/stats?filter=${value}`)
             .then(response => response.data)
             .then(response => {
@@ -27,10 +43,14 @@ export default class GlobalApi {
             })
             .catch(err => {
                 console.log(`[API] cannot request ${value}, err: ${err}`);
+                throw new Error("BLYA");
+            }).finally(() => {
+                this.load_stages.remove(value);
             })
     }
 
     async fillServers() {
+        this.load_stages.add("servers")
         console.log(`[API] load: servers`);
         return axios.get("/api/stats?filter=servers")
             .then(response => response.data['servers'])
@@ -49,17 +69,29 @@ export default class GlobalApi {
             })
             .catch(err => {
                 console.log(`[API] cannot request servers, err: ${err}`);
+                throw new Error("BLYA SERVERS");
+            })
+            .finally(() => {
+                this.load_stages.remove("servers");
             });
     }
 
     async load() {
         this.loading = true;
-        await this.fillThis('statistic');
-        await this.fillThis('uniq');
-        await this.fillServers();
-        await this.admin.load();
-        await this.player.load();
-        this.loading = false;
+        await Promise.all(
+            [this.fillThis('statistic'),
+            this.fillThis('uniq'),
+            this.fillServers(),
+            this.admin.load(this.load_stages),
+            this.player.load(this.load_stages)]
+        ).then(() => {
+            console.log("end loading");
+            this.loading = false;
+        }).catch(() => {
+            this.loading = false;
+            this.failed = true;
+            console.log("some error in loading");
+        });
     }
 
     getRandomBackground() {

src/api/PlayerApi.js

@@ -47,9 +47,11 @@ export default class PlayerApi {
             });
     }
 
-    async load() {
+    async load(stages) {
         console.log(`[PlayerAPI] request info`);
+        stages.add("profile");
         if (this.auth('steam')) await this.loadFull();
         if (this.auth('discord')) await this.loadDiscord();
+        stages.remove("profile");
     }
 }

src/api/Stages.js

@@ -0,0 +1,21 @@
+export default class Stages {
+    stages = [];
+
+    add(s) {
+        this.stages.push(s)
+    }
+
+    remove(s) {
+        const p = this.stages.indexOf(s);
+        if (p !== -1) this.stages.splice(p)
+    }
+
+    human(s) {
+        switch (s) {
+            case 'servers':return 'информация о серверах...';
+            case 'uniq': return 'уникальные игроки...';
+            case 'statistic': return 'сейчас играют...';
+            default: return s;
+        }
+    }
+}

src/components/Others/BackgroundImage.vue

@@ -5,9 +5,16 @@
 <script>
 export default {
   name: 'BackgroundImage',
-  data: () => ({
-    blur_px: 5
-  }),
+  props: {
+    fail: {
+      type: Boolean,
+      default: false
+    },
+    blur_px: {
+      type: Number,
+      default: 5
+    }
+  },
   methods: {
     getStyle(){
       return {
@@ -20,7 +27,7 @@ export default {
         "z-index": -1,
         "width":"100%",
         "height":"100%",
-        "background-image": `url('${this.$API.getRandomBackground()}')`,
+        "background-image": `url('${this.fail?require('@/assets/images/pivo.png'):this.$API.getRandomBackground()}')`,
           "-webkit-filter": `blur(${this.blur_px}px)`,
         "-moz-filter": `blur(${this.blur_px}px)`,
         "-o-filter": `blur(${this.blur_px}px)`,

src/components/Others/FailLoad.vue

@@ -0,0 +1,13 @@
+<template>
+  <BackgroundImage :fail="true" :blur_px="0"/>
+</template>
+
+<script>
+
+import BackgroundImage from "@/components/Others/BackgroundImage.vue";
+
+export default {
+  name: "FailLoad",
+  components: {BackgroundImage}
+}
+</script>

src/components/Others/LoaderPage.vue

@@ -0,0 +1,32 @@
+<template>
+  <md-dialog :md-active.sync="this.l" class="bbb">
+    <md-progress-spinner :md-diameter="200" :md-stroke="10" md-mode="indeterminate"/>
+    <h1 style="color: #fd8846">Загрузка</h1>
+    <p v-for="stage in this.$API.load_stages.stages" :key="stage" style="text-align: center; margin: 0%">{{$API.load_stages.human(stage)}}</p>
+  </md-dialog>
+</template>
+
+<script>
+export default {
+  name: 'LoaderPage',
+  data: () => ({
+    l: true
+  }),
+  methods: {
+    setL(v) {
+      this.l = v;
+    }
+  }
+}
+</script>
+
+<style>
+.md-progress-spinner {
+  stroke: #fd8846 !important;
+  margin: 60px;
+}
+
+.bbb {
+  background: black;
+}
+</style>

src/components/TabsMenu.vue

@@ -2,7 +2,7 @@
 <div>
   <BackgroundImage/>
   <md-tabs md-alignment="centered" :md-active-tab="current_tab">
-    <MainView :current_tab="current_tab"/>
+    <MainView/>
     <RulesView/>
     <ServersView/>
     <VipView/>
@@ -31,10 +31,7 @@ export default {
     components: {BackendStatus, MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView, BackgroundImage},
     data: () => ({
       current_tab: ""
-    }),
-  beforeCreate() {
-      console.log("wait data to render");
-  }
+    })
 }
 </script>
 

src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue

@@ -5,7 +5,7 @@
         <div class="md-layout-item md-size-5">
           <h4 style="text-align: left">{{' > '}}</h4>
         </div>
-        <div class="md-layout-item">
+        <div class="md-layout-item" v-on:click="moveToServer()">
           <h4 style="text-align: center;">ПОДКЛЮЧИТЬСЯ К СЕРВЕРУ</h4>
         </div>
         <div class="md-layout-item md-size-5">
@@ -19,6 +19,11 @@
 <script>
 /* eslint-disable */
 export default {
-  name: 'ConnectButton'
+  name: 'ConnectButton',
+  methods: {
+    moveToServer() {
+      this.$API.current_window = "serversView";
+    }
+  }
 }
 </script>

src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue

@@ -36,6 +36,9 @@ export default {
   data: () => ({
     puff_size: 10,
     space_size: 5
-  })
+  }),
+  beforeMount() {
+
+  }
 }
 </script>

src/components/TabsMenuElements/MainView/MainView.vue

@@ -16,9 +16,6 @@ export default {
     toStyle() {
       return {};
     }
-  },
-  props: {
-    current_tab: String
   }
 }
 </script>

src/components/TabsMenuElements/ProfileView/AuthWindow.vue

@@ -1,23 +1,23 @@
 <template>
   <md-dialog :md-active.sync="showAuthDialog">
     <div style="justify-content: center; display: flex; max-width: 80%; margin-left: 10%; padding-top: 5%" class="rounded-only">
-      <div style="max-width: 40%; float: left;" v-if="this.$API.player.auth('steam')" v-on:click="moveTo('logout', 'steam')">
+      <div style="max-width: 40%; float: left;" v-if="this.$API.player.auth('steam')" v-on:click="moveTo('logout', 'steam')" class="clickable">
         <SteamSvg class="img-server"/>
         <p class="p-auth" style="margin-bottom: -5%">Выйти</p>
         <p class="p-auth-logout">{{this.$API.player.store.steam_data['nickname']}}</p>
       </div>
-      <div style="max-width: 40%; float: left;" v-else v-on:click="moveTo('login', 'steam')">
+      <div style="max-width: 40%; float: left;" v-else v-on:click="moveTo('login', 'steam')" class="clickable">
         <SteamSvg class="img-server"/>
         <p class="p-auth" style="margin-bottom: -5%">Войти через Steam</p>
         <p class="p-auth-logout">(жми на иконку)</p>
       </div>
       <!-- -------------------------------------------------------------------- -->
-      <div style="max-width: 40%; float: left;" v-if="this.$API.player.auth('discord')" v-on:click="moveTo('logout', 'discord')">
+      <div style="max-width: 40%; float: left;" v-if="this.$API.player.auth('discord')" v-on:click="moveTo('logout', 'discord')" class="clickable">
         <DiscordSvg class="img-server"/>
         <p class="p-auth" style="margin-bottom: -5%">Выйти</p>
         <p class="p-auth-logout">{{this.$API.player.discord.username}}</p>
       </div>
-      <div style="max-width: 40%; float: left;" v-else v-on:click="moveTo('login', 'discord')">
+      <div style="max-width: 40%; float: left;" v-else v-on:click="moveTo('login', 'discord')" class="clickable">
         <DiscordSvg class="img-server"/>
         <p class="p-auth" style="margin-bottom: -5%">Войти через Discord</p>
         <p class="p-auth-logout">если хочешь на наш дискорд сервер, а так не надо</p>

src/components/TabsMenuElements/ProfileView/ProfileView.vue

@@ -12,7 +12,7 @@
       <div class="md-layout-item md-size-50 md-alignment-bottom-center rounded-only">
         <br>
         <hr width="50%">
-        <div v-if="this.$API.player.auth('steam') === false">
+        <div v-if="this.$API.player.auth('steam') === false" class="clickable">
           <h2 class="auth-button" v-on:click="openAW()">АВТОРИЗОВАТЬСЯ</h2>
         </div>
         <div v-else>

src/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr v-on:click="openPEI()">
+  <tr v-on:click="openPEI()" class="clickable">
     <td class="player-border-top server-table-padding" style="text-align: left; font-family: tf2secondary; font-size: 2em; color: #131213;">{{player['name']}}</td>
     <td class="player-border-top server-table-padding" style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213">{{player['score']}}</td>
     <td class="player-border-top server-table-padding" style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213">{{player['duration']}}</td>

src/components/TabsMenuElements/ServersView/Components/ServerCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-layout-item md-size-100" style="padding-bottom: 1%" v-on:click="openServerFullInfo()">
+  <div class="md-layout-item md-size-100 clickable" style="padding-bottom: 1%" v-on:click="openServerFullInfo()">
     <md-card>
       <md-card-media-cover md-solid>
         <md-card-media class="card-size" md-ratio="16:9">

src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

@@ -6,7 +6,7 @@
         <div class="md-layout-item rounded-and-colored md-size-60">
           <h3 style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
         </div>
-        <div class="md-layout-item rounded-and-colored-circle md-size-5" v-on:click="closeFIF()">
+        <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closeFIF()">
           <h3 style="text-align: center; margin: 25% 0%">X</h3>
         </div>
       </div>
@@ -18,17 +18,17 @@
             <hr width="30%">
           </div>
           <div style="justify-content: center; display: flex; margin-top: 2.5%">
-            <div style="max-width: 40%; float: left;" v-on:click="onMove('steam')">
+            <div style="max-width: 40%; float: left;" v-on:click="onMove('steam')" class="clickable">
               <TerminalSvg class="img-server"/>
               <p class="p-server" style="margin-bottom: -5%">Подключиться</p>
               <p class="p-server-address">{{serverData['address']}}</p>
             </div>
-            <div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')">
+            <div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')" class="clickable">
               <SteamSvg class="img-server"/>
               <p class="p-server" style="margin-bottom: -5%">Workshop</p>
               <p class="p-server-address">by Пельмень</p>
             </div>
-            <div style="max-width: 40%; float: left;" v-else v-on:click="onMove('fastdl')">
+            <div style="max-width: 40%; float: left;" v-else v-on:click="onMove('fastdl')" class="clickable">
               <img :src="require('@/assets/images/logo/download.svg')" class="img-server">
               <p class="p-server" style="margin-bottom: -5%">FastDL</p>
               <p class="p-server-address">by Добродей</p>

src/components/TabsMenuElements/ServersView/ServersView.vue

@@ -4,7 +4,7 @@
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/>
     </div>
     <div class="md-layout md-alignment-bottom-center" v-on:click="updateServers()">
-      <div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
+      <div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored clickable" style="z-index: 1">
         <h3 style="text-align: center; margin: 4% 0%">Список серверов</h3>
       </div>
     </div>
@@ -12,12 +12,12 @@
       <div class="md-layout-item md-size-50 md-alignment-bottom-center rounded-only">
         <h4 style="text-align: center">Для подключения к серверу нажми на него</h4>
         <hr>
-        <h5 style="text-align: center" v-if="servers['w'].length>0">где сейчас играют карлики</h5>
-        <ServerCard v-for="srv in servers['w']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
-        <h5 style="text-align: center" v-if="servers['e'].length>0">где сейчас никого нет</h5>
-        <ServerCard v-for="srv in servers['e']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
-        <h5 style="text-align: center" v-if="servers['n'].length>0">где сейчас играют карлики</h5>
-        <ServerCard v-for="srv in servers['n']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
+        <h5 style="text-align: center" v-if="this.$API.stats.servers['w'].length>0">где сейчас играют карлики</h5>
+        <ServerCard v-for="srv in this.$API.stats.servers['w']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
+        <h5 style="text-align: center" v-if="this.$API.stats.servers['e'].length>0">где сейчас никого нет</h5>
+        <ServerCard v-for="srv in this.$API.stats.servers['e']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
+        <h5 style="text-align: center" v-if="this.$API.stats.servers['n'].length>0">где сейчас играют карлики</h5>
+        <ServerCard v-for="srv in this.$API.stats.servers['n']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
       </div>
     </div>
     <SnackLoader ref="s_loader" s_text="Обновление списка серверов"/>
@@ -34,9 +34,6 @@ export default {
   data:() => ({
     servers: {'w':[], 'n':[], 'e':[]}
   }),
-  beforeMount() {
-    this.servers = this.$API.stats.servers;
-  },
   methods: {
     updateServers() {
       this.$refs.s_loader.setLoading(true);

src/main.js

@@ -3,9 +3,8 @@ import App from './App.vue'
 import GlobalApi from './api/GlobalApi'
 
 Vue.config.productionTip = false
-Vue.prototype.$API = new GlobalApi();
-Vue.prototype.$API.load().then(() => {
-  new Vue({
-    render: h => h(App),
-  }).$mount('#app')
-});
+Vue.prototype.$API = Vue.observable(new GlobalApi());
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')