серверы и фон

src/App.vue

@@ -118,6 +118,10 @@ a {
 }
 
 .md-tabs {
+  /*background-color: #131213;*/
+}
+
+.md-tabs-navigation {
   background-color: #131213;
 }
 

src/assets/server.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#fdecc1" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 60 60" xml:space="preserve">
+<g>
+	<path d="M0,24.108v11.783c0,0.974,0.314,1.868,0.835,2.608h58.329C59.686,37.76,60,36.865,60,35.892V24.108
+		c0-0.974-0.314-1.868-0.835-2.608H0.835C0.314,22.24,0,23.135,0,24.108z M52,30.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1
+		S51.448,30.5,52,30.5z M50,27.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S49.448,27.5,50,27.5z M48,30.5c0.552,0,1,0.448,1,1
+		s-0.448,1-1,1s-1-0.448-1-1S47.448,30.5,48,30.5z M46,27.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S45.448,27.5,46,27.5z
+		 M44,30.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S43.448,30.5,44,30.5z M42,27.5c0.552,0,1,0.448,1,1s-0.448,1-1,1
+		s-1-0.448-1-1S41.448,27.5,42,27.5z M40,30.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S39.448,30.5,40,30.5z M38,27.5
+		c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S37.448,27.5,38,27.5z M36,30.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1
+		S35.448,30.5,36,30.5z M34,27.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S33.448,27.5,34,27.5z M10.5,25.5
+		c2.481,0,4.5,2.019,4.5,4.5s-2.019,4.5-4.5,4.5S6,32.481,6,30S8.019,25.5,10.5,25.5z"/>
+	<path d="M59.165,19.5C59.686,18.76,60,17.865,60,16.892V5.108C60,2.567,57.933,0.5,55.392,0.5H4.608C2.067,0.5,0,2.567,0,5.108
+		v11.783c0,0.974,0.314,1.868,0.835,2.608H59.165z M52,11.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S51.448,11.5,52,11.5z
+		 M50,8.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S49.448,8.5,50,8.5z M48,11.5c0.552,0,1,0.448,1,1s-0.448,1-1,1
+		s-1-0.448-1-1S47.448,11.5,48,11.5z M46,8.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S45.448,8.5,46,8.5z M44,11.5
+		c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S43.448,11.5,44,11.5z M42,8.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1
+		S41.448,8.5,42,8.5z M40,11.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S39.448,11.5,40,11.5z M38,8.5c0.552,0,1,0.448,1,1
+		s-0.448,1-1,1s-1-0.448-1-1S37.448,8.5,38,8.5z M36,11.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S35.448,11.5,36,11.5z
+		 M34,8.5c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S33.448,8.5,34,8.5z M10.5,6.5c2.481,0,4.5,2.019,4.5,4.5
+		s-2.019,4.5-4.5,4.5S6,13.481,6,11S8.019,6.5,10.5,6.5z"/>
+	<path d="M0.835,40.5C0.314,41.24,0,42.135,0,43.108v11.783C0,57.433,2.067,59.5,4.608,59.5h50.783c2.541,0,4.608-2.067,4.608-4.608
+		V43.108c0-0.974-0.314-1.868-0.835-2.608H0.835z M10.5,53.5C8.019,53.5,6,51.481,6,49s2.019-4.5,4.5-4.5S15,46.519,15,49
+		S12.981,53.5,10.5,53.5z M34,48.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S34.552,48.5,34,48.5z M36,51.5
+		c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S36.552,51.5,36,51.5z M38,48.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1
+		S38.552,48.5,38,48.5z M40,51.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S40.552,51.5,40,51.5z M42,48.5c-0.552,0-1-0.448-1-1
+		s0.448-1,1-1s1,0.448,1,1S42.552,48.5,42,48.5z M44,51.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S44.552,51.5,44,51.5z
+		 M46,48.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S46.552,48.5,46,48.5z M48,51.5c-0.552,0-1-0.448-1-1s0.448-1,1-1
+		s1,0.448,1,1S48.552,51.5,48,51.5z M50,48.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S50.552,48.5,50,48.5z M52,51.5
+		c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S52.552,51.5,52,51.5z"/>
+</g>
+</svg>

src/components/PublicMethods.js

@@ -36,6 +36,27 @@ export default {
                 console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`);
             })
     },
+    getServers(){
+        console.log("[PublicMethods] request api/stats/servers");
+        return axios.get("/api/stats?filter=servers")
+            .then(response => response.data['servers'])
+            .then(response => {
+                let srvs = {
+                    'w':[],
+                    "e":[],
+                    'n':[]
+                };
+                for (let srv in response) {
+                    if (response[srv]['status'] == false) srvs.n.push(response[srv]);
+                    else if (response[srv]['player_count'] > 0) srvs.w.push(response[srv]);
+                    else srvs.e.push(response[srv]);
+                }
+                return srvs;
+            })
+            .catch(err => {
+                console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`);
+            });
+    },
     getUniq(){
         console.log("[PublicMethods] request api/stats/uniq");
         return axios.get("/api/stats?filter=uniq")

src/components/TabsMenu.vue

@@ -1,5 +1,6 @@
 <template>
 <div>
+  <BackgroundImage/>
   <md-tabs md-alignment="centered" :md-active-tab="current_tab">
     <MainView :current_tab="current_tab"/>
     <RulesView/>
@@ -9,22 +10,25 @@
     <EmptyTab lb=""/>
     <EmptyTab lb=""/>
     <ProfileView/>
+    <BackendStatus/>
   </md-tabs>
 </div>
 </template>
 
 <script>
 import RulesView from "@/components/TabsMenuElements/RulesView/RulesView.vue";
-import ServersView from "@/components/TabsMenuElements/ServersView.vue";
+import ServersView from "@/components/TabsMenuElements/ServersView/ServersView.vue";
 import ProfileView from "@/components/TabsMenuElements/ProfileView.vue";
 import VipView from "@/components/TabsMenuElements/VipView.vue";
 import AboutView from "@/components/TabsMenuElements/AboutView.vue";
 import EmptyTab from "@/components/TabsMenuElements/EmptyTab.vue";
 import MainView from "@/components/TabsMenuElements/MainView/MainView.vue";
+import BackendStatus from "@/components/TabsMenuElements/BackendStatus.vue";
+import BackgroundImage from "@/components/Others/BackgroundImage.vue";
 
 export default {
     name: 'TabsMenu',
-    components: {MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView},
+    components: {BackendStatus, MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView, BackgroundImage},
     data: () => ({
       current_tab: ""
     })

src/components/TabsMenuElements/BackendStatus.vue

@@ -0,0 +1,17 @@
+<template>
+  <md-tab id="backendView" :md-icon="this.s_icon">
+    <p>backend status</p>
+  </md-tab>
+</template>
+
+<script>
+export default {
+  name: "BackendStatus",
+  props: {
+    s_icon: {
+      type: String,
+      default: require('@/assets/server.svg')
+    }
+  }
+}
+</script>

src/components/TabsMenuElements/MainView/MainView.vue

@@ -1,19 +1,17 @@
 <template>
   <md-tab id="mainView" md-label="Факты 13" :style="toStyle()">
-    <BackgroundImage/>
     <LogoWithCharacters/>
     <WhyNot/>
   </md-tab>
 </template>
 
 <script>
-import BackgroundImage from "@/components/Others/BackgroundImage.vue";
 import LogoWithCharacters from "@/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue";
 import WhyNot from "@/components/TabsMenuElements/MainView/Components/WhyNot.vue";
 
 export default {
   name: 'MainViewElement2',
-  components: {WhyNot, LogoWithCharacters, BackgroundImage},
+  components: {WhyNot, LogoWithCharacters},
   methods: {
     toStyle() {
       return {};

src/components/TabsMenuElements/RulesView/Components/RuleCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="ifItem()">
-    <md-card>
+    <md-card class="md-card-rule">
       <md-card-media-cover md-solid>
-        <md-card-media md-ratio="1:1">
+        <md-card-media md-ratio="1:1" class="md-card-media-rule">
           <img :src="getImg()" :alt="this.title_text">
         </md-card-media>
-        <md-card-area>
+        <md-card-area class="md-card-area-rule">
           <md-card-header>
             <span class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px solid">{{this.title_text}}</span>
             <span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{this.main_text}}</span>
@@ -38,16 +38,16 @@ export default {
 </script>
 
 <style>
-.md-card {
+.md-card-rule {
   border-radius: 15px;
   margin: 7% 0%;
 }
 
-.md-card-media {
+.md-card-media-rule {
   border-radius: 15px;
 }
 
-.md-card-area {
+.md-card-area-rule {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.9)) !important;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;

src/components/TabsMenuElements/RulesView/RulesView.vue

@@ -1,6 +1,5 @@
 <template>
   <md-tab id="rulesView" md-label="Правила">
-    <BackgroundImage/>
     <div class="md-layout md-alignment-bottom-center">
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/>
     </div>
@@ -33,14 +32,13 @@
 </template>
 
 <script>
-import BackgroundImage from "@/components/Others/BackgroundImage.vue";
 import CharacterImage from "@/components/Others/CharacterImage.vue";
 import RuleCard from "@/components/TabsMenuElements/RulesView/Components/RuleCard.vue";
 import PublicMethods from "@/components/PublicMethods";
 
 export default {
   name: 'RulesView',
-  components: {RuleCard, BackgroundImage, CharacterImage},
+  components: {RuleCard,  CharacterImage},
   data: () => ({
     rules: Object
   }),

src/components/TabsMenuElements/ServersView.vue

@@ -1,11 +0,0 @@
-<template>
-  <md-tab id="serversView" md-label="Серверы">
-    <p>servers</p>
-  </md-tab>
-</template>
-
-<script>
-export default {
-  name: 'ServersView'
-}
-</script>

src/components/TabsMenuElements/ServersView/ServerCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="md-layout-item md-size-100">
+    <md-card>
+      <md-card-media-cover md-solid>
+        <md-card-media>
+          <img :src="serverImage" :alt="serverName">
+        </md-card-media>
+        <md-card-area>
+          <md-card-header>
+            <span class="md-title">{{serverName}}</span>
+            <span class="md-subhead">{{serverCurrentPlayer}}/{{serverMaxPlayer}}</span>
+          </md-card-header>
+        </md-card-area>
+      </md-card-media-cover>
+    </md-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ServerCard',
+  props: {
+    serverImage: String,
+    serverName: String,
+    serverCurrentPlayer: Number,
+    serverMaxPlayer: Number,
+    serverData: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>

src/components/TabsMenuElements/ServersView/ServersView.vue

@@ -0,0 +1,40 @@
+<template>
+  <md-tab id="serversView" md-label="Серверы">
+    <div class="md-layout md-alignment-bottom-center" style="margin-bottom: -1%; margin-top: 1%">
+      <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">
+      <div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored-without-bottom">
+        <h3 style="text-align: center; margin: 4% 0%">Список серверов</h3>
+      </div>
+    </div>
+    <div class="md-layout md-alignment-bottom-center" style="padding-top: 1%">
+      <div class="md-layout-item md-size-60 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" :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" :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" :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>
+  </md-tab>
+</template>
+
+<script>
+import CharacterImage from "@/components/Others/CharacterImage.vue";
+import PublicMethods from "@/components/PublicMethods";
+import ServerCard from "@/components/TabsMenuElements/ServersView/ServerCard.vue";
+export default {
+  name: 'ServersView',
+  components: {ServerCard, CharacterImage},
+  data:() => ({
+    servers: null
+  }),
+  async created() {
+    this.servers = await PublicMethods.getServers();
+  }
+}
+</script>