vip about shit

src/App.vue

@@ -58,6 +58,7 @@ import "@/css/text.css";
 import "@/css/baseui.css";
 import "@/css/menus.css";
 import "@/css/tables.css";
+import "@/css/cards.css"
 
 import TabsMenu from "@/components/TabsMenu.vue";
 import LoaderPage from "@/components/Others/Loader/LoaderPage.vue";

src/api/VipApi.js

@@ -8,6 +8,12 @@ export default class VipAPI {
     freevip_players = -1;
     vip_players = -1;
 
+    about = {}
+
+    constructor() {
+        this.about = require('@/assets/vip_about.json');
+    }
+
     async getVipPrices(stages) {
         console.log(`[API] load: vip prices`);
         stages.add("vip prices");

src/assets/resize_img.bat

@@ -0,0 +1,2 @@
+for /r %%i in (*) do ffmpeg -y -i %%i -vf "crop=w='min(iw\,ih)':h='min(iw\,ih)',scale=666:666,setsar=1" -vframes 1 %%i
+pause

src/assets/vip_about.json

@@ -0,0 +1,173 @@
+{
+  "main": {
+    "name": "Премущество над другими игроками",
+    "about": "Возможности которые не вызываются командами",
+    "img": "_main.jpg",
+    "elements": [
+      {
+        "name": "Где угодно",
+        "about": "Одна випка на все наши сервера",
+        "img": "main/1inall.jpg"
+      },
+      {
+        "name": "Резервный слот",
+        "about": "Тебя не кикнет если сервер заполнится и кикнет обычного игрока",
+        "img": "main/reservedslot.jpg"
+      },
+      {
+        "name": "AFK",
+        "about": "Можешь стоять и чесать яйца, афк тебя не кикнет за бездействие",
+        "img": "main/afk2.jpg"
+      },
+      {
+        "name": "Префикс чата",
+        "about": "[РОТЕНБЕРГ] если ты купил вип или [ХАЛЯВЩИК] если ты получил ее бесплатно",
+        "img": "main/prefix.jpg"
+      },
+      {
+        "name": "Хук",
+        "about": "Позволяет летать по карте используя паутину. Чтоб работало забинди кнопку: bind R +hook",
+        "img": "main/hook.jpg"
+      },
+      {
+        "name": "Веревка",
+        "about": "Позволяет висеть как говно. Чтоб работало забинди кнопку: bind R +rope",
+        "img": "main/rope.jpg"
+      },
+      {
+        "name": "Реклама",
+        "about": "Аудио рекламы фактов 13 не будет воиспроизводится",
+        "img": "main/sound_ads.jpg"
+      },
+      {
+        "name": "Бумбокс",
+        "about": "Раздатчик теперь играет музыку, чтоб все видели что ты крутой(нет)",
+        "img": "main/disprencer.jpg"
+      },
+      {
+        "name": "Меняй себя",
+        "about": "Менять свой класс используя команду !class игнорируя ограничения",
+        "img": "main/class.jpg"
+      },
+      {
+        "name": "Плохой ник",
+        "about": "Если в вашем нике есть реклама трейдов, вас не переименует сервер",
+        "img": "main/tradenick.jpg"
+      },
+      {
+        "name": "KD / RTD",
+        "about": "КД у RTD, всегда будет равное двум минутам.",
+        "img": "main/kdrtd.jpg"
+      },
+      {
+        "name": "Аньюжки",
+        "about": "\"Бесплатные\" аньюжки, каждая на каждый сервер, на каждый класс",
+        "img": "main/freeunusual.jpg"
+      }
+    ]
+  },
+  "menu": {
+    "name": "Новые команды в меню",
+    "about": "В игровом меню через !menu появится новый пункт VIP-команды",
+    "img": "_menu.png",
+    "elements": [
+      {
+        "name": "Выбор аньюжки",
+        "about": "Позволяет установить эффект на шапку текущего класса",
+        "img": "menu/changeunusual.jpg"
+      },
+      {
+        "name": "Изменить свои следы",
+        "about": "Добавляет эффект следов от ботинок как у спелов",
+        "img": "menu/steps.jpg"
+      },
+      {
+        "name": "Изменить свой голос",
+        "about": "Меняет голос персонажа",
+        "img": "menu/voice.jpg"
+      },
+      {
+        "name": "Эффект возрождения",
+        "about": "добавляет разнообразные эффекты при респе",
+        "img": "menu/renew.jpg"
+      },
+      {
+        "name": "Бесконечные патроны",
+        "about": "дает бесконечный арсенал боезапаса, включая патроны, метал, заряды и т.д",
+        "img": "menu/aia.jpg"
+      },
+      {
+        "name": "Скорострельность",
+        "about": "дает сильный прирост скорости стрельбы",
+        "img": "menu/rof.jpg"
+      },
+      {
+        "name": "Здоровье",
+        "about": "позволяет установить себе любое количество хп",
+        "img": "menu/sethealth.jpg"
+      },
+      {
+        "name": "Установить скорость",
+        "about": "изменяет скорость персонажа",
+        "img": "menu/speedme.jpg"
+      },
+      {
+        "name": "Сбросить скорость",
+        "about": "сбрасывает скорость до нормального значения",
+        "img": "menu/speedmereset.jpg"
+      }
+    ]
+  },
+  "commands": {
+    "name": "Крутые команды через чат",
+    "about": "Напиши в чат !команда и она исполнится",
+    "img": "_command.jpg",
+    "elements": [
+      {
+        "name": "!ususual",
+        "about": "Аньюжка на выбор (если на твоего чела надета хоть одна шапка, поддерживающая ношение анюжки)",
+        "img": "command/unusual.jpg"
+      },
+      {
+        "name": "!rof",
+        "about": "Скорострельность оружия, например !rof 3",
+        "img": "command/rof.jpg"
+      },
+      {
+        "name": "!aia",
+        "about": "бесконечные патроны",
+        "img": "command/aia.jpg"
+      },
+      {
+        "name": "!speedme",
+        "about": "скорость передвижения, например speedme 520",
+        "img": "command/speedme.jpg"
+      },
+      {
+        "name": "!speedmereset",
+        "about": "сбросить скорость до нормальной",
+        "img": "command/speedmereset.jpg"
+      },
+      {
+        "name": "!footsteps",
+        "about": "Изменить свои следы",
+        "img": "command/voicefx.jpg"
+      },
+      {
+        "name": "!voicefx",
+        "about": "Изменить свой голос",
+        "img": "command/voicefx.jpg"
+      },
+      {
+        "name": "!rsfx",
+        "about": "Эффект возрождения",
+        "img": "command/rsfx.jpg"
+      },
+      {
+        "name": "!sethealth",
+        "about": "Здоровье, где число это количество хп, например !sethealth 99999",
+        "img": "command/sethealth.jpg"
+      }
+    ]
+  }
+}

src/components/Others/Auth/AuthWindow.vue

@@ -19,14 +19,14 @@
             <p class="p-auth" style="margin-bottom: -5%">Выйти</p>
             <p class="p-auth-logout">{{this.$API.player.discord!==null?this.$API.player.discord.username:''}}</p>
           </div>
-          <div v-else v-on:click="moveTo('login', 'discord')" class="clickable md-layout-item md-size-40">
+          <div v-if="!this.$API.player.auth('discord') && this.$API.player.auth('steam')" v-on:click="moveTo('login', 'discord')" class="clickable md-layout-item md-size-40">
             <DiscordSvg class="img-server"/>
             <p class="p-auth" style="margin-bottom: -5%">Войти через Discord</p>
             <p class="p-auth-logout">если хочешь на наш дискорд сервер, а так не надо</p>
           </div>
         </div>
         <div class="md-layout md-alignment-bottom-center">
-          <div class="clickable md-layout-item md-size-15">
+          <div class="clickable md-layout-item">
             <md-button class="md-right btn-default" v-on:click="closeAW()">Не хочу</md-button>
           </div>
         </div>

src/components/TabsMenuElements/VipView/Components/AboutVIP/AboutVIPCard.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :class="ifItem()">
+    <div style="padding-right: 2.5%; padding-left: 2.5%; cursor: pointer" v-on:click="dialog_active=true">
+      <md-card class="md-card-base">
+        <md-tooltip class="tooltip" md-direction="top">Подробнее</md-tooltip>
+        <md-card-media-cover md-solid style="border-radius: 15px">
+          <md-card-media md-ratio="1/1" class="md-card-media-base">
+            <img :src="getImg()" alt="ebalo">
+          </md-card-media>
+          <md-card-area class="md-card-area-base">
+            <md-card-header>
+              <span v-if="'elements' in about" class="md-subhead" style="text-align: right; font-family: tf2secondary">{{about.name}}</span>
+              <span v-else class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px">{{about.name}}</span>
+            </md-card-header>
+          </md-card-area>
+        </md-card-media-cover>
+      </md-card>
+    </div>
+    <md-dialog :md-active.sync="dialog_active" @close="dialog_active=false" v-if="'elements' in about" style="z-index: 998">
+      <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
+        <div class="md-layout-item md-size-5"/>
+        <div class="md-layout-item rounded-and-colored md-size-90 md-small-size-90">
+          <h3 class="txt-innert" style="text-align: center; margin: 2% 0%; line-height: 100%">{{about.name}}</h3>
+        </div>
+        <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="dialog_active=false">
+          <h3 class="txt-innert" style="text-align: center; margin: 25% 0%">X</h3>
+        </div>
+      </div>
+      <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
+          <div style="padding-top: 2.5%" class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+            <div class="md-layout md-alignment-bottom-center md-gutter">
+              <AboutVIPCard v-for="el in about.elements" :key="el.name" :about="el"/>
+            </div>
+          </div>
+      </div>
+    </md-dialog>
+    <md-dialog :md-active.sync="dialog_active" @close="dialog_active=false" v-else style="z-index: 999">
+      <div class="md-layout md-alignment-bottom-right" style="z-index: 1">
+        <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="dialog_active=false">
+          <h3 class="txt-innert" style="text-align: center; margin: 25% 0%">X</h3>
+        </div>
+      </div>
+      <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%; padding-bottom: 2.5%">
+        <div style="padding-top: 2.5%;" class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
+          <h4 style="text-align: center; margin: 0% 2.5%; padding: 1% 0%">{{about.about}}</h4>
+        </div>
+      </div>
+    </md-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AboutVIPCard",
+  props: {
+    about: {
+      type: Object,
+      //default() {return {"img":"765756.jpg", "name":"", "about":""}}
+    },
+    box_in_item: {
+      type: Boolean,
+      default: true
+    },
+    md_size: {
+      type: Number,
+      default: 30
+    }
+  },
+  data: () => ({
+    dialog_active: false
+  }),
+  methods: {
+    getImg() {
+      const path = require("@/assets/images/about_vip/" + this.about.img)
+      //console.log(path)
+      return path;
+    },
+    ifItem() {
+      if ("elements" in this.about) {
+        //console.log("elements");
+        return this.box_in_item ? `md-layout-item md-size-${this.md_size} md-xsmall-size-90 md-small-size-50` : '';
+      //} else if ("about" in this.about) {
+      //  console.log("about");
+      //  return "md-layout-item";
+      } else {
+        //console.log("inner")
+        return `md-layout-item md-size-${this.md_size*1}`;
+      }
+    }
+  }
+}
+</script>

src/components/TabsMenuElements/VipView/Components/VipCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div :class="ifItem()" style="padding-right: 2.5%; padding-left: 2.5%; cursor: pointer" v-on:click="$refs.vbd.openVBD()">
-    <md-card class="md-card-vip">
+    <md-card class="md-card-base">
       <md-tooltip class="tooltip" md-direction="top">Нажми чтоб посмотреть</md-tooltip>
       <md-card-media-cover md-solid>
-        <md-card-media md-ratio="1:1" class="md-card-media-vip">
+        <md-card-media md-ratio="1:1" class="md-card-media-base">
           <img :src="getImg()" :alt="price.human_duration">
         </md-card-media>
-        <md-card-area class="md-card-area-vip">
+        <md-card-area class="md-card-area-base">
           <md-card-header>
             <span class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px solid">VIP ({{price.human_duration}})</span>
             <span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{price.money_price}} P</span>
@@ -45,20 +45,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.md-card-vip {
-  border-radius: 15px;
-  margin: 7% 0%;
-}
-
-.md-card-media-vip {
-  border-radius: 15px;
-}
-
-.md-card-area-vip {
-  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;
-}
-</style>

src/components/TabsMenuElements/VipView/VipView.vue

@@ -26,10 +26,11 @@
             <h4 style="text-align: center; font-family: tf2secondary">Что дает випка</h4>
           </div>
         </div>
-        <div class="md-layout md-alignment-center-center" style="margin: 2%">
-          <div :class="`md-layout-item md-size-${d_size} md-small-size-${s_size}`">
-            <p class="txt" v-for="gived in getVipStuff()" :key="rnd()+gived.substr(0,0)">> {{gived}}</p>
-            <p class="txt" style="color: #fd8846; text-decoration-line: underline; cursor: pointer" v-on:click="ee()">Подробнее...</p>
+        <div class="md-layout md-alignment-bottom-center">
+          <div class="md-layout-item md-size-100 md-alignment-bottom-center">
+            <div class="md-layout md-alignment-bottom-center md-gutter">
+              <AboutVIPCard v-for="st in $API.vip.about" :key="st.name" :about="st"/>
+            </div>
           </div>
         </div>
       </div>
@@ -41,10 +42,11 @@
 <script>
 import VipCard from "@/components/TabsMenuElements/VipView/Components/VipCard.vue";
 import CharacterImage from "@/components/Others/Images/CharacterImage.vue";
+import AboutVIPCard from "@/components/TabsMenuElements/VipView/Components/AboutVIP/AboutVIPCard.vue";
 
 export default {
   name: 'VipView',
-  components: {VipCard, CharacterImage},
+  components: {AboutVIPCard, VipCard, CharacterImage},
   props: {
     d_size: {
       type:Number,
@@ -56,6 +58,7 @@ export default {
     }
   },
   methods: {
+    //require('../../../../../assets/images/about_vip/'+about.img)
     rnd() {
       return Math.random().toString(36).slice(4);
     },

src/css/cards.css

@@ -0,0 +1,14 @@
+.md-card-base {
+    border-radius: 15px;
+    margin: 7% 0%;
+}
+
+.md-card-media-base {
+    border-radius: 15px;
+}
+
+.md-card-area-base {
+    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;
+}