keenangun.com

mail@pastecode.io avatar
unknown
plain_text
2 years ago
235 kB
0
Indexable
Never
<!doctype html>
<html>
<head>
    <title>Venge.io - FPS io game</title>

    <meta name="description" content="Venge is an objective-based first person shooter. On this awesome first person shooter game every match is an intense unique experience. Best IO game you can play it on browser, no download, and free!">

    <meta name="keywords" content="multiplayer, io, 3D Shooter, objective-based, FPS, no download, browser game, game, web game">

    <link rel="canonical" href="https://venge.io" />

    <link rel="icon" href="favicon-96x96.png" type="image/x-icon">
    <meta content="https://venge.io/thumbnail.jpg" property="og:image">

    <meta property="og:type" content="website">

    <meta property="og:title" content="Play Venge.io!">
    <meta property="og:description" content="Click on this link to start a game with your friend! Venge is an objective-based first-person shooter. Play it on browser, no download, and free!">

    <meta property="og:url" content="https://venge.io/">
    <meta property="og:site_name" content="venge.io">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <meta charset="utf-8">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
          rel="stylesheet"
    />
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@100&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/hint.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css?v=1.0">
    <link rel="stylesheet" type="text/css" href="css/chat.css">
    <link rel="stylesheet" type="text/css" href="css/friends.css">
    <link rel="stylesheet" type="text/css" href="css/tab.css">
    <link rel="stylesheet" type="text/css" href="css/shop.css?v=1.0">
    <link rel="stylesheet" type="text/css" href="css/reforge.css">
    <link rel="stylesheet" type="text/css" href="css/result.css?v=1.0">
    <link rel="stylesheet" type="text/css" href="css/pause.css?v=1.0">
    <link rel="stylesheet" type="text/css" href="css/map-loading.css">
    <link rel="stylesheet" type="text/css" href="css/main-responsive.css">

    <script src="https://www.google.com/recaptcha/api.js?render=6Leo6QcaAAAAAJ-Hf0qOqmcZF-c9pn3uTKka07SN"></script>
    <script src="https://kit.fontawesome.com/4f818e8f9d.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>

    <script type="text/javascript">
        var VERSION = '41e7a5';
        var VERSION_CODE = '1.1.40';
    </script>

    <script type="text/javascript">
        var isClient  = false;
        var referral  = window.location.href;
        var quantcast = true;
        var SDKLoaded = true;

        var adblockEnabled = false;

        if(referral && referral.search('poki') > -1){
            quantcast = false;
        }

        //try to reach localStorage
        try{
            var wasClient = window.localStorage.getItem('client_version');

            if(wasClient){
                isClient = true;
            }
        }catch(e){
            //not available
        }

        if(referral.search('client_version') > -1){
            isClient = true;
            window.localStorage.setItem('client_version', 'TRUE');
        }
    </script>


    <script src="//game-cdn.poki.com/scripts/v2/poki-sdk.js"></script>
    <script type="text/javascript">
        var adblockEnabled = false;
        var pokiSDKInitialized = false;

        if(!isClient){
            PokiSDK.init({ volume: 0.4 }).then(function(){
                adblockEnabled = false;
                pokiSDKInitialized = true;

                if(typeof app != 'undefined'){
                    app.defineMonetization();
                }
                
                console.log('Poki SDK successfully initialized');
            }).catch(function(){
                adblockEnabled = true;

                if(typeof app != 'undefined'){
                    app.defineMonetization();
                }
                console.log('Initialized, but the user likely has adblock');
            });
        }
    </script>

    <script type="text/javascript" src="adblock.js"></script>
    <script type="text/javascript" src="playcanvas-stable.min.js?v=1.1.40"></script>
    <script type="text/javascript" src="__settings__.js?v=1.1.38"></script>

    <!-- Quantcast Choice. Consent Manager Tag v2.0 (for TCF 2.0) -->
<script type="text/javascript" async=true>
    (function() {
      var host = 'venge.io';
      var element = document.createElement('script');
      var firstScript = document.getElementsByTagName('script')[0];
      var url = 'https://cmp.quantcast.com'
        .concat('/choice/', 'VzKDgYuw-1KTr', '/', host, '/choice.js?tag_version=V2');
      var uspTries = 0;
      var uspTriesLimit = 3;
      element.async = true;
      element.type = 'text/javascript';
      element.src = url;
    
      firstScript.parentNode.insertBefore(element, firstScript);
    
      function makeStub() {
        var TCF_LOCATOR_NAME = '__tcfapiLocator';
        var queue = [];
        var win = window;
        var cmpFrame;
    
        function addFrame() {
          var doc = win.document;
          var otherCMP = !!(win.frames[TCF_LOCATOR_NAME]);
    
          if (!otherCMP) {
            if (doc.body) {
              var iframe = doc.createElement('iframe');
    
              iframe.style.cssText = 'display:none';
              iframe.name = TCF_LOCATOR_NAME;
              doc.body.appendChild(iframe);
            } else {
              setTimeout(addFrame, 5);
            }
          }
          return !otherCMP;
        }
    
        function tcfAPIHandler() {
          var gdprApplies;
          var args = arguments;
    
          if (!args.length) {
            return queue;
          } else if (args[0] === 'setGdprApplies') {
            if (
              args.length > 3 &&
              args[2] === 2 &&
              typeof args[3] === 'boolean'
            ) {
              gdprApplies = args[3];
              if (typeof args[2] === 'function') {
                args[2]('set', true);
              }
            }
          } else if (args[0] === 'ping') {
            var retr = {
              gdprApplies: gdprApplies,
              cmpLoaded: false,
              cmpStatus: 'stub'
            };
    
            if (typeof args[2] === 'function') {
              args[2](retr);
            }
          } else {
            if(args[0] === 'init' && typeof args[3] === 'object') {
              args[3] = Object.assign(args[3], { tag_version: 'V2' });
            }
            queue.push(args);
          }
        }
    
        function postMessageEventHandler(event) {
          var msgIsString = typeof event.data === 'string';
          var json = {};
    
          try {
            if (msgIsString) {
              json = JSON.parse(event.data);
            } else {
              json = event.data;
            }
          } catch (ignore) {}
    
          var payload = json.__tcfapiCall;
    
          if (payload) {
            window.__tcfapi(
              payload.command,
              payload.version,
              function(retValue, success) {
                var returnMsg = {
                  __tcfapiReturn: {
                    returnValue: retValue,
                    success: success,
                    callId: payload.callId
                  }
                };
                if (msgIsString) {
                  returnMsg = JSON.stringify(returnMsg);
                }
                if (event && event.source && event.source.postMessage) {
                  event.source.postMessage(returnMsg, '*');
                }
              },
              payload.parameter
            );
          }
        }
    
        while (win) {
          try {
            if (win.frames[TCF_LOCATOR_NAME]) {
              cmpFrame = win;
              break;
            }
          } catch (ignore) {}
    
          if (win === window.top) {
            break;
          }
          win = win.parent;
        }
        if (!cmpFrame) {
          addFrame();
          win.__tcfapi = tcfAPIHandler;
          win.addEventListener('message', postMessageEventHandler, false);
        }
      };
    
      makeStub();
    
      var uspStubFunction = function() {
        var arg = arguments;
        if (typeof window.__uspapi !== uspStubFunction) {
          setTimeout(function() {
            if (typeof window.__uspapi !== 'undefined') {
              window.__uspapi.apply(window.__uspapi, arg);
            }
          }, 500);
        }
      };
    
      var checkIfUspIsReady = function() {
        uspTries++;
        if (window.__uspapi === uspStubFunction && uspTries < uspTriesLimit) {
          console.warn('USP is not accessible');
        } else {
          clearInterval(uspInterval);
        }
      };
    
      if (typeof window.__uspapi === 'undefined') {
        window.__uspapi = uspStubFunction;
        var uspInterval = setInterval(checkIfUspIsReady, 6000);
      }
    })();
    </script>
    <!-- End Quantcast Choice. Consent Manager Tag v2.0 (for TCF 2.0) -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": ["VideoGame", "Game"],
        "name": "Venge.io",
        "gameLocation": "http://venge.io/",
        "url": "https://venge.io/",
        "publisher": "Poki",
        "inLanguage": "English",
        "image": "https://venge.io/Thumbnail-001.jpg",
        "genre": ["Action Shooter", "3D", "io game", "FPS"],
        "gamePlatform": ["Browser", "PC Client"],
        "author": {
          "@type": "Organization",
          "name": "Onrush Studio",
          "url": "https://onrush.studio/",
          "foundingDate": "2018",
          "founder": "Cem Demir"
        },
        "description": "A fast paced, character based action First Person Shooter with customizable weapon loadout system, playable heroes with special abilities, fully moddable standalone client, several maps and custom games to play on and many more features.
        Play and test your strenght across several official mythologically inspired maps and thousands of custom games made with built-in map editor.
        Find your path in this easy to play, hard to master arena shooter.
        Gain points and VG with doing quests, in-game challenges, daily rewards, tournaments, and of course, kills. In addition, customize your experience in highly customizable controls and user interface, you can get your place in leaderboards, build your clan and fight as a team, easily invite friends and add them to your friends list, make your own weapon skin and submit to our Discord server, make your own custom map and play it with your friends, sell your items in player market, earn VG and; buy new characters weapon skins, character skins, charms, emotes and sprays. ",
        "playMode" : "MultiPlayer",
        "director" : "Cem Demir"
      }
    </script>
</head>
<body>
    <div id="wrapper" v-if="mode != 'Game'" :class="{'poki-layout' : isPoki()}">
        <div v-if="mode == 'Menu'">
            <div style="display: none;">
                <h2>Best fps io game?</h2>
                <p>I think we know the answer.</p>

                <p>Venge.io is a FPS shooter io game, a game you can play on your browser without downloading anything. It's free and it always be free. </p>
                    
                <p>It's the best FPS io game you can play on browser, there are 4 different heroes you can unlock, each of them has different weapons, abilities and cards. Especially if you like hero shooter games, you'll love Venge.io FPS shooter game. We have 1.000+ different, unique game maps that is designed by community members. Some of them has top-down shooter views.</p>

                <h3>About Venge.io</h3>
                <p>Venge.io is biggest and best IO game ever produced. It has more than 3.000.000 monthly players and it's growing every day.</p>
                <p>Venge .io FPS is a fast-paced online shooter IO game that pits teams of players against each other in intense, head-to-head shooting combat.</p>
                <p>Choose from various weapons and abilities to take down your opponents, and take control of the battlefield!</p>
                <p>Venge .io is a multiplayer shooting IO game, where players must shoot their way in fps io game controls and create strategies against each other using fps io game mechanics.</p>
                <p>Unlike in other fps IO games, Venge IO shooter offers unique heroes, custom weapon load-outs, custom skins for both heroes and guns, and much more never seen before shooter io game features that in any FPS.IO games.</p>
                <p>Venge io fps game is the shooter game that changed the IO games scene, compelling other fps IO games to as much quality content as Venge offers.</p>

                <h4>Instructions:</h4>

                <p>Move: WASD 
                Aim/Shoot: Mouse 
                Change Weapon: 1-9 
                Ability: F
                </p>

                <p>Play and test your strenght across several official mythologically inspired maps and thousands of custom games made with built-in map editor.
                </p>

                <p>Find your path in this easy to play, hard to master arena shooter.
                    Gain points and VG with doing quests, in-game challenges, daily rewards, tournaments, and of course, kills.
                </p> 

                <p>In addition, customize your experience in highly customizable controls and user interface, you can get your place in leaderboards, build your clan and fight as a team, easily invite friends and add them to your friends list, make your own weapon skin and submit to our Discord server, make your own custom map and play it with your friends, sell your items in player market, earn VG and; buy new characters weapon skins, character skins, charms, emotes and sprays.</p>

                <p>Play <a href="https://venge.io/?fps-game">fps io game</a> now!</p>
            </div>
            <div v-if="!loaded" id="full-screen-loading" :style="{'backgroundImage' : 'url(Thumbnail-00' + thumbnailIndex + '.jpg)'}">
                <a id="logo" href=""><img src="images/Logo.png"></a>
                <div id="tips">
                    <i class="fa fa-info-circle" aria-hidden="true"></i> 
                    {{currentTipMessage}}
                </div>
                <div id="loading-bar">
                    <div class="loading-bar-fill"></div>
                </div>
            </div>

            <div v-if="fullLoading" id="half-screen-loading">
                <div class="loader loader-center"></div>
            </div>
            <div v-if="alertText" id="mini-alert">
                <div :class="success ? 'success' : ''" class="alert-container">
                    {{alertText}}
                </div>
            </div>

            <div v-if="alertMessage">
                <div class="background-shadow" v-on:click="closeMessage()"></div>
                <div class="popup popup-inspect" id="alert-message">
                    <div class="popup-title">
                        Message
                        <div class="popup-close" v-on:click="closeMessage();"></div>
                    </div>
                    <div class="popup-content">
                        <p>
                            <i class="fa fa-info-circle" aria-hidden="true"></i> {{alertMessage}}
                        </p>
                        <button class="btn btn-primary btn-right" v-on:click="closeMessage()"><i class="fa fa-check" aria-hidden="true"></i> OKAY</button>
                    </div>
                </div>
            </div>


            <div v-if="shop.notEnoughPopup">
                <div class="background-shadow" v-on:click="popupClose()"></div>

                <div class="popup popup-inspect popup-option-content" id="not-enough-vg">
                    <div class="popup-title">
                        Select a method
                        <div class="popup-close" v-on:click="popupClose();"></div>
                    </div>
                    <div class="popup-content">
                        <p><i class="fa fa-info-circle" aria-hidden="true"></i> You don't have enough coins, please select a method to proceed.</p>
                        <div v-on:click="popupClose(), openBuyVG()" class="popup-option">
                            <i class="fa fa-diamond" aria-hidden="true"></i>
                            <span>Buy VG</span>
                            <small>You can buy coins with real currency.</small>
                        </div>
                        <div v-if="!canWatchReward()" class="popup-option popup-disabled">
                            <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                            <span>Watch ads</span>
                            <small>Please wait 5 minute before another ads!</small>
                        </div>
                        <div v-if="canWatchReward()" v-on:click="popupClose(), watchRewardAds()" class="popup-option">
                            <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                            <span>Watch ads</span>
                            <small>You can get more VGs to your account with ads.</small>
                        </div>
                    </div>
                </div>
            </div>

            <div v-show="popup" id="buy-popup" style="display:none">
                <div class="background-shadow" v-on:click="popupClose()"></div>
            
                <div v-if="!lootbox.active && !buyVG.active && !quest.active" class="popup popup-inspect">
                    <div class="popup-title">
                        Inspect
                        <div class="popup-close" v-on:click="popupClose();"></div>
                    </div>
                    <div class="popup-content">
                        <img class="popup-thumbnail" :style="{'backgroundColor' : '#' + popup.color}" :src="'https://assets.venge.io/' + popup.icon">

                        <div class="popup-information">
                            <label class="popup-field"><span>Name :</span><b>{{popup.name}}</b></label>
                            <label class="popup-field"><span>Price :</span><b>{{popup.price}}</b></label>
                            <label class="popup-field"><span>Seller :</span><b>{{popup.owner}}</b></label>
                            <label class="popup-field"><span>Rarity :</span><b class="rarity" :class="popup.rarity">{{popup.rarity}}</b></label>

                            <div class="popup-account-balance">Account Balance: <b>{{session.balance}}</b></div>

                            <button v-if="canBuy()" v-on:click="buyOffer(popup)" class="popup-buy-button">
                                <img src="images/Cart-Icon.png"> Buy Item
                            </button>

                            <button v-if="!canBuy() && claimCampaign" v-on:click="unlockClaimCampaign(popup)" class="popup-buy-button">
                                <i class="fa fa-gift" aria-hidden="true"></i> Try Luck Crate
                            </button>
                        </div>
                    </div>
                </div>

                <div v-if="lootbox.active" class="popup popup-inspect">
                    <div class="popup-title">
                        Unlock Crate
                        <div class="popup-close" v-on:click="popupClose()"></div>
                    </div>
                    <div class="popup-content">
                        <h3 id="rarities" class="centered-title">
                            {{lootbox.crate.name}}
                            <li :class="rarity.name + ' ' + (currentRarity == rarity ? 'animate__animated animate__heartBeat animate__fast' : '') " class="rarity" v-for="rarity in lootbox.crate.rarities">{{rarity.name}} {{rarity.percentage}}%</li>
                        </h3>
                        <div v-if="lootbox.unlocking" id="unlock-slider">
                            <img id="unlocking-caret" src="images/Unlocking-Caret.png">
                            <div id="unlock-slider-content" class="unlocking">
                                <li v-for="(item, index) in lootbox.items" class="item-rarity" :class="item.rarity + ' ' + (index == 23 ? 'active' : '')">
                                    <img :src="'https://assets.venge.io/' + item.thumbnail">
                                    <b class="name">{{item.name}}</b>
                                </li>
                            </div>
                        </div>

                        <img id="lootbox-icon" class="animate__animated animate__bounce animate__fast animate__infinite" v-if="!lootbox.unlocking" :src="'images/crates/' + lootbox.crate.icon">

                        <div v-if="rewardTime <= 0">
                            <div v-if="session.hash && !canBuy()">
                                <div class="popup-account-balance popup-account-balance-timer">Account Balance: <b>{{session.balance}} / {{lootbox.crate.price}}</b></div>

                                <!--<button v-on:click="watchAdsToBuy()" class="popup-buy-button">
                                    Watch Ads to Buy ({{getLootboxAdsRatio()}})
                                </button>-->
                                Not enough coins!
                            </div>

                            <button v-if="session.hash && !lootbox.animating && !lootbox.freeCrate && canBuy()" v-on:click="openLootbox()" class="unlock-button btn-primary">Unlock <small>{{lootbox.crate.price}}</small></button>

                            <button v-if="lootbox.freeCrate && !lootbox.animating" v-on:click="equipLootboxItem()" class="unlock-button btn-primary">Equip Item</button>

                            <span v-if="!session.hash && !canBuy()">
                                Please login first!
                                <a v-on:click="goAccount()" class="block-button-link">Login / Signup</a>
                            </span>

                            <!--<span v-if="!session.hash && !lootbox.animating">
                                Create an account to claim reward!
                                <a v-on:click="goAccount()" class="block-button-link">Signup</a>
                            </span>-->
                        </div>

                        <div class="reward-timer" v-if="rewardTime > 0">
                            <i class="fa fa-clock-o"></i>
                            {{rewardTime}}s for next ads
                            <div class="reward-bar">
                                <div class="reward-bar-fill" :style="{'width' : (rewardTime * 100 / 60) + '%'}"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="buyVG.active" class="popup popup-buy-vg">
                    <div class="popup-title">
                        BUY MORE VG
                        <div class="popup-close" v-on:click="popupClose()"></div>
                    </div>
                    <div v-if="buyVG.state == 'Pack'" class="popup-content buy-vg-content">
                        <li v-on:click="selectVGPack(pack)" v-for="pack in buyVG.packs" class="buy-vg-pack">
                            <img :src="'images/packs/Pack-' + pack.thumbnailIndex + '.jpg'">
                            <b>{{pack.price}} USD</b>
                            <span>{{pack.amount}} VG</span>
                        </li>

                        <div v-if="buyVG.appliedCreatorCode" class="creator-code-form">
                            <p><i class="fa fa-rocket"></i> {{buyVG.appliedCreatorCode}} will get share from your payment!</p>
                        </div>

                        <div v-if="!buyVG.appliedCreatorCode" class="creator-code-form">
                            <div v-if="error" class="alert animate__animated animate__shakeX">
                                <img src="images/Error-Icon.png"> {{error}}
                            </div>

                            <p><i class="fa fa-rocket"></i> Support your favorite creator</p>

                            <div class="group-input">
                                <input placeholder="Enter creator code" id="creator-code" placeholder="Enter creator code" type="text" v-on:keyup.enter="applyCreatorCode()" v-model="buyVG.creatorCode">
                                <button v-on:click="applyCreatorCode()" type="button" class="side-button">Apply</button>
                            </div>
                        </div>
                    </div>
                    <div class="matchmaking-players" v-if="buyVG.state == 'Redirecting'">
                        <div class="loader loader-center"></div>
                        <div class="text">Please wait, loading payment...</div>
                        <br>
                    </div>
                </div>

                <div v-if="quest.active" class="popup popup-inspect popup-quest">
                    <div class="popup-title">
                        <img src="images/icons/BlackCoin-Icon.png" alt="Quests"> Quests
                        <div class="popup-close" v-on:click="popupClose()"></div>
                    </div>
                    <div class="popup-content">
                        <ul>
                            <li v-for="item in quest.list">
                                <img class="quest-img" :src="'images/quests/' + item.icon" alt="">
                                <div class="quest-content">
                                    <div class="quest-info">
                                    <p>{{item.title}}</p>
                                    <div class="quest-rewards">
                                        <div class="reward">
                                            <img src="images/icons/Jump-Icon.png" alt="">
                                            <p>{{item.xp_reward}}</p>
                                        </div>
                                        <div class="reward">
                                            <img src="images/icons/Gold.png" alt="">
                                            <p>{{item.coin_reward}}</p>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="quest-progress">
                                        <div class="quest-experience-bar">
                                            <span :style="{ width: 100 * item.percentage + '%' }"></span>
                                        </div>
                                        <p>{{item.completed_goal}}</p>

                                        <button v-if="item.can_claim" @click="claimQuestReward(item.index)" class="quest-claim button-sound">
                                            <img src="images/icons/Check-Icon.png" alt="">
                                            Claim Reward
                                        </button>

                                        <div v-if="item.is_claimed" class="quest-claimed">
                                            <img src="images/icons/Check-Icon.png" alt="">
                                            <p>Reward Claimed!</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div v-if="quest.can_reset"  class="popup-bottom-content">
                        <button class="btn btn-primary button-sound" @click="newQuests()">
                            Get New Quests 
                            <img src="images/icons/Caret-Icon.png" alt="">
                        </button>
                    </div>
                </div>
            </div>

            <div id="home" class="fullscreen" :class="{'fullscreen-alpha' : page == 'Home' && mode == 'Menu'}" v-if="page == 'Home'">
                <a id="logo" href=""><img src="images/Logo.png"></a>
                <a id="twitch" class="button-sound extended" v-if="twitch.link && !isMobile() && !isPoki()" :href="twitch.link" target="_blank">
                    <i v-if="!twitch.is_stream" class="fa fa-play-circle-o" aria-hidden="true"></i> 
                    <span v-if="twitch.is_stream" ><span class="record"></span> LIVE : </span> {{twitch.username}}
                </a>

                <!-- removed for improving retention <div id="main-banner"></div>-->
                <div v-show="!isMobile()" id="home-banner" :style="{'transform' : 'scale(' + homeBannerScale + ')'}"></div>

                <div id="menu" :class="{'extended' : profile.username}">

                    <div class="profile-extend-holder">
                        <a v-if="session.hash" 
                        @click="openFriendsMenu()" 
                        class="menu-button quest-menu hint--left button-sound" 
                        aria-label="Online Friends (SHIFT + C)"
                        href="javascript:;">
                            <img src="images/icons/People-Icon.png">
                            <p>{{friends.online}} / {{friends.list.length}}</p>
                        </a>

                        <a v-if="profile.completed_quests" 
                        @click="getQuests()" 
                        class="menu-button quest-menu hint--left button-sound" 
                        aria-label="Quest List"
                        href="javascript:;">
                            <img src="images/icons/BlackCoin-Icon.png">
                            <p>{{profile.completed_quests}} / 3 </p>
                        </a>

                        <a v-on:click="goAccount(), tab = 'General'"
                        class="menu-button account hint--left button-sound" 
                        aria-label="Account" 
                        href="javascript:;">
                            <img v-if="!profile.username" src="images/Account-Icon.png">
                            <div class="user-detail" v-if="profile.username">
                                <p class="username">
                                    <img v-show="profile.verified == 1" class="verified" src="images/Verified-Icon.png">
                                    <span v-html="formatMarkup(profile.username)"></span>
                                </p>
                                <div class="profile-experience">
                                    <div class="profile-experience-bar">
                                        <span :style="{ width: 100 * profile.experience_bar + '%' }"></span>
                                    </div> 
                                    <span class="profile-level" v-html="profile.level + 'Lv - ' + parseFloat(100 * profile.experience_bar).toFixed(2) + ' %'"></span>
                                </div>
                            </div>
                            <span v-if="session.inboxNotification > 0" class="notification-badge"><i class="fa fa-envelope" aria-hidden="true"></i> {{session.inboxNotification}}</span>
                        </a>
                    </div>

                    <div class="profile-extend-holder flex-end">
                        <div id="shop-banner" :style="{'backgroundImage' : getRandomShopBanner()}" v-if="page == 'Home'" v-on:click="goShop()" class="animate__animated animate__fadeIn animate__fast">
                            <h1><i class="fa fa-shopping-cart" aria-hidden="true"></i> Visit new shop</h1>
                            <span class="small-corner-button"><i class="fa fa-caret-square-o-right" aria-hidden="true"></i></span>
                        </div>


                        <div class="column-extender">
                            <!--<a v-on:click="goShop()" class="menu-button shop hint--left button-sound" aria-label="Shop" href="javascript:;">
                                <img src="images/Cart-Icon.png">
                            </a>-->

                            <a v-on:click="goLeaderboard()" class="menu-button shop hint--left button-sound" aria-label="Leaderboards" href="javascript:;">
                                <i class="fa fa-trophy" aria-hidden="true"></i>
                            </a>
                            
                            <a v-on:click="goSettings()" class="menu-button settings hint--left button-sound" aria-label="Settings" href="javascript:;">
                                <img src="images/Settings-Icon.png">
                            </a>
                        </div>
                        
                    </div>
                    

                    
                </div>

                <div class="game-links">
                    <div id="character" class="animate__animated animate__slideInLeft animate__fast button-sound" :class="{'character-small' : isPoki()}" v-on:click="goHeroes()">
                        <img class="mini-character-thumbnail" :src="'images/thumbnails/' + session.character + '-Thumbnail-1.png'">
                        
                        {{session.character}}<small><i class="fa fa-exchange" aria-hidden="true"></i> SELECT</small>
                    </div>
                    
                    <!--
                    <a v-if="!isMobile()" class="social-hub button-sound hint--right" 
                    aria-label="Link to Social Hub"  
                    href="https://social.venge.io/" target="_blank">
                        Social Hub 
                        <img src="images/icons/Social-Hub.png">
                    </a>
                    -->

                    <div v-if="!isMobile() && !isPoki()" class="links-wrap">
                        <a class="discord border-design button-sound" href="https://discord.gg/3Zdf42gPsJ" target="_blank">
                            <img src="images/icons/Discord-Icon.png" alt="">
                        </a> 
                        <a class="twitter button-sound" href="https://twitter.com/vengeio" target="_blank">
                            <img src="images/icons/Twitter.png" alt="">
                        </a>
                        <a class="poki button-sound" href="https://poki.com" target="_blank">
                            <img src="images/icons/poki.jpg" alt="">
                        </a>
                    </div>

                
                
                </div>

                <div v-if="!isMatchmaking" id="home-play" class="animate__animated animate__slideInRight animate__fast button-sound">
                    <div v-if="!isMobile()" id="server-settings" v-on:click="page = 'ServerSettings', getCustomMaps()">
                        <span class="no-cursor version-code"><a href="https://about.venge.io/" target="_blank">v{{session.version}}</a></span>
                        <span class="no-cursor">Online: {{session.online}}</span>
                        <!--<span>Region: <b>{{session.country}}</b> <img src="images/Caret-Down-Icon.png"></span>-->
                        <span>Map : <b>{{session.map}}</b> <img src="images/Caret-Down-Icon.png"></span>
                    </div>

                    <div class="hint--left" aria-label="Play with friends" id="invite-button" v-on:click="openInvite()" href="javascript:;">
                        <img src="images/Invite-Icon.png">
                    </div>

                    <div v-if="!disableMatchmakingButton" id="play-button" v-on:click="startMatchmaking()" class="animate__animated animate__pulse animate__infinite animate__fast button-sound">
                        {{getTranslation('PLAY NOW')}}
                    </div>
                </div>
            </div>

            <div id="pause" v-if="page == 'Pause' && pause.isPaused && transition.completed" class="fullscreen">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="continueGame()">
                    
                    {{session.map}} - {{session.mode}}

                    <a href="javascript:;" v-on:click="playWhooshSound(), leaveGame()" class="btn-leave">Leave <i class="fa fa-caret-right"></i></a>
                    
                    <a href="javascript:;" v-on:click="playWhooshSound(), goSettings()" class="btn-settings"><i class="fa fa-cogs"></i> Settings</a>
                </h3>

                <div id="pause-players">
                    <h4><i class="fa fa-users" aria-hidden="true"></i> Players</h4>
                    <table class="player-list">
                        <tr v-for="player in pause.players">
                            <td width="50">
                                <img class="hero-thumbnail-mini" :src="'https://assets.venge.io/' + player.heroThumbnail">
                            </td>
                            <td>
                                <a :href="'https://social.venge.io/#' + formatMarkup(player.username)" class="username" target="_blank" v-html="formatMarkup(player.username)">
                                </a>
                            <td>
                                <span class="kills"><i class="fa fa-crosshairs" aria-hidden="true"></i> {{player.kill}}<small>kills</small>
                            </td>
                            <td>
                                <span class="deaths"><i class="fa fa-times" aria-hidden="true"></i> {{player.death}}<small>deaths</small></span>
                            </td>
                            <td>
                                <span class="headshots"><i class="fa fa-star" aria-hidden="true"></i> {{player.score}}<small>score</small></span>
                            </td>
                            <td width="100">
                                <button aria-label="Report" v-on:click="reportPlayer(player.username)" class="button danger hint--bottom hint--rounded" type="button"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></button>

                                <button aria-label="Add friend" v-if="hasFriend(player.username)" v-on:click="addFriend(player.username)" class="button hint--bottom hint--rounded" type="button"><i class="fa fa-user-plus" aria-hidden="true"></i></button>
                            </td>
                        </tr>
                    </table>
                </div>

                <div v-if="session.mode != 'CUSTOM' && session.mode != 'GUNGAME'" id="pause-loadout">
                    <h4><i class="fa fa-bolt" aria-hidden="true"></i> TRY NEW STUFF</h4>
                    <li v-on:click="pauseTry(item)" v-for="item in pause.try.slice(0, 2)">
                        <img class="weapon-thumbnail" :src="'https://assets.venge.io/' + item.thumbnail">

                        <span class="weapon-name">
                            <img :src="'https://assets.venge.io/' + item.icon"> 
                            <i v-if="item.favorite" class="fa fa-star favorite-icon" aria-hidden="true"></i>
                            {{item.name}}
                        </span>
                        <p>
                            {{item.description}}
                        </p>
                        <div class="weapon-stats">
                            <span v-for="feature in item.features" class="feature">{{feature.value}} <span class="property">{{feature.key}}</span></span>
                        </div>
                        <button v-if="!item.unlocked" class="shop-unlock">
                            <i class="fa fa-play-circle-o" aria-hidden="true"></i> Redeem 
                            <small>With Ads</small>
                        </button>
                        <button v-if="item.unlocked" class="shop-unlock shop-equip">
                            <i class="fa fa-random" aria-hidden="true"></i> Apply 
                        </button>
                    </li>
                </div>

                <div v-show="!isMobile()" id="pause-banner" :style="{'transform' : 'scale(' + homeBannerScale + ')'}"></div>

                <div id="home-play">
                    <div id="play-button" v-on:click="continueGame()">
                        <span v-if="session.isWaitingJoin">{{getTranslation('Join')}}</span>
                        <span v-if="!session.isWaitingJoin">{{getTranslation('Continue')}}</span>
                    </div>
                </div>
            </div>

            <div id="login" v-if="page == 'Login'" class="fullscreen echo-side">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), page = 'Home'">
                    {{getTranslation('ACCOUNT')}}
                </h3>

                <form class="action-form action-form-half">
                    <div v-if="error" class="alert animate__animated animate__shakeX">
                        <img src="images/Error-Icon.png"> {{error}}
                    </div>
                    <p class="white-info-text"><i class="fa fa-info-circle fa-margin-right"></i>{{getTranslation('LOGIN_REASON')}}</p>
                    <div class="field">
                        <label>{{getTranslation('Username')}}</label>
                        <input type="text" name="username" v-model="form.username" v-on:keyup.enter="login">
                    </div>

                    <div class="field">
                        <label>{{getTranslation('Password')}}</label>
                        <input type="password" name="password" v-model="form.password" v-on:keyup.enter="login">
                    </div>

                    <div class="field button" v-show="!loading">
                        <small>With registering account, you accept <a href="https://venge.io/tos.txt" target="_blank">T.O.S.</a></small>
                        <button type="button" v-on:click="login()" class="btn btn-primary">{{getTranslation('LOGIN')}}</button>
                        <button type="button" v-on:click="register()" class="btn btn-secondary">{{getTranslation('REGISTER')}}</button>
                    </div>

                    <div class="field" v-show="loading">
                        <div class="loader pull-right"></div>
                    </div>
                </form>
            </div>

            <div id="invite" v-if="page == 'Invite'" class="fullscreen fullscreen-darker">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), cancelInvite()">
                    PLAY WITH FRIENDS: {{session.map}}

                    <button v-if="!isMapSelected" type="button" v-on:click="createInvite()" class="btn btn-primary pull-right button-sound">CREATE LINK <i class="fa fa-caret-right"></i></button>

                    <span v-if="isMapSelected">
                        <div v-if="isStarted" class="pull-right title-description">
                            <i class="fa fa-clock-o" aria-hidden="true"></i> Connecting...
                        </div>
                        <button v-if="!isStarted" v-if="invite.isOwner" type="button" v-on:click="startInviteSession()" class="btn btn-primary pull-right button-sound">START SESSION <i class="fa fa-caret-right"></i></button>

                        <span v-if="!invite.isOwner">
                            <button type="button" v-on:click="setSpectateToggle()" class="btn btn-switch pull-right" :class="{'active' : isSpectating}"><i class="fa " :class="{'fa-toggle-on' : isSpectating, 'fa-toggle-off' : !isSpectating}" aria-hidden="true"></i> SPECTATE</button>

                            <div class="pull-right title-description">
                                <i class="fa fa-clock-o" aria-hidden="true"></i> 
                                Waiting for owner to start server...
                            </div>
                        </span>
                    </span>
                </h3>

                <form class="action-form" action="javascript:;">
                    <div v-if="isMapSelected">
                        <div class="field">
                            <label>Invite Link (Share)</label>

                            <div class="group-input">
                                <input type="url" name="url" v-model="invite.link">
                                <button v-on:click="copyLink(invite.link)" type="button" class="side-button"><i class="fa fa-clipboard" aria-hidden="true"></i> Copy</button>
                            </div>
                        </div>
                        <div class="field chat-area">
                            <!--
                            <label>Joined Players ({{invite.players.length}}/6)</label>

                            <div class="invite-players">
                                {{invite.players.join(', ')}}
                            </div>
                            -->

                            <div class="field-content">
                                <chat-module v-if="invite.hash" :room-id="invite.hash"></chat-module>
                            </div>
                            <div class="field-sidebar">
                                <h4>Players <small class="small-margin-left">{{invite.players.length}}/6</small></h4>
                                <ul class="players-list">
                                    <li v-for="player in invite.players">
                                        <i class="fa fa-user" aria-hidden="true"></i> {{player}}
                                    </li>
                                </ul>

                                <br>

                                <div class="field-info">
                                    <p>Create a private game to play with friends. Share the link with other users, wait for them to join the lobby, then click "Start Session".</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="tab-container" v-if="!isMapSelected">
                    <div id="tab-sidebar">
                        <li v-on:mouseover="playHoverSound()" :class="{'active' : tab == 'General'}" v-on:click="tab = 'General'"><span class="icon-container"><i class="fa fa-asterisk" aria-hidden="true"></i></span> Official</li>

                        <li v-on:mouseover="playHoverSound()" :class="{'active' : category == 'Parkour' && tab == 'Custom'}" v-on:click="tab = 'Custom', getCustomMapsByCategory('Parkour')"><span class="icon-container"><i class="fa fa-reply-all" aria-hidden="true"></i></span> Parkour</li>

                        <li v-on:mouseover="playHoverSound()" :class="{'active' : category == 'Sniper' && tab == 'Custom'}" v-on:click="tab = 'Custom', getCustomMapsByCategory('Sniper')"><span class="icon-container"><i class="fa fa-crosshairs" aria-hidden="true"></i></span> Sniper</li>

                        <!--<li v-on:mouseover="playHoverSound()" :class="{'active' : category == 'Team' && tab == 'Custom'}" v-on:click="tab = 'Custom', getCustomMapsByCategory('Team')"><span class="icon-container"><i class="fa fa-users" aria-hidden="true"></i></span> Team</li>-->

                        <li v-on:mouseover="playHoverSound()" :class="{'active' : tab == 'Search'}" v-on:click="tab = 'Search'"><span class="icon-container"><i class="fa fa-search" aria-hidden="true"></i></span> Search</li>
                    </div>
                    <div id="tab-content" class="tab-scroll">
                        <div v-if="tab == 'General'">
            
                            <div class="field field-selection">
                                <label>Official Maps</label>
                                <div  class="map-selection">
                                    <li v-on:click="selectMapAndCreateLink(map)" v-for="map in maps" :class="{'active' : session.map == map.name}">
                                        <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                        <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                        <b>{{map.name}}</b>
                                    </li>
                                </div>
                            </div>
                        </div>

                        <div v-if="tab == 'Custom'">
                            <div class="field-info">
                                <p>You can play community create maps, invite your friends and create rooms with custom maps. We selected the best maps for you and categorize them. </p>
                            </div>
                            <div class="map-selection">
                                <li v-on:click="selectMapAndCreateLink(map)" v-for="map in customMaps" :class="{'active' : session.map == map.name}">
                                    <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                    <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                    <b>{{map.name}}</b>
                                </li>
                            </div>
                        </div>

                        <div v-if="tab == 'Search'">
                            <div class="search-bar">
                                <input placeholder="Sniper, parkour eg." v-on:keyup.enter="searchCustomMap()" type="search" v-model="form.search">
                                <button v-on:click="searchCustomMap()">Search <i class="fa fa-search"></i></button>
                            </div>

                            <div class="field-info">
                                <p>You wanna share the best maps with us? Please share those maps on our Discord, so we can feature them. <a href="https://discord.gg/3Zdf42gPsJ" target="_blank">
                                    Join Discord
                                </a> </p>
                            </div>
                            <div class="map-selection">
                                <li v-on:click="selectMapAndCreateLink(map)" v-for="map in customMaps" :class="{'active' : session.map == map.name}">
                                    <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                    <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                    <b>{{map.name}}</b>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="page == 'Result' && mode == 'Menu' && !transition.active" class="fullscreen fullscreen-alpha" :class="{'fade-out' : result.fadeOut}">
                <div id="time-bar" :class="{'victory' : result.isWinning}"></div>
                <div id="character-mvp" class="fade-out-content">
                    <span class="title">MVP</span>
                    <span class="name" v-html="formatMarkup(result.mvp.username)"></span>
                    <span class="stats">{{result.mvp.better}}% better than other players, {{result.mvp.kdr}} KDR</span>
                </div>
                <div id="match-result">
                    <div id="match-header" class="fade-out-content">
                        <div id="result-part">
                            <div class="result" :class="{'victory' : result.isWinning}">
                                <i class="fa fa-trophy" v-if="result.isWinning" aria-hidden="true"></i> 
                                <i class="fa fa-close" v-if="!result.isWinning" aria-hidden="true"></i> 
                                {{result.isWinning ? 'Victory' : 'Defeat'}}</div>
                            <div class="map-name">{{session.map}} - <span>{{session.mode}}</span></div>
                        </div>

                        <div id="next-map">
                            <span class="next-game">RETURNING</span>
                            <span class="begins-in">TO LOBBY IN:</span>
                            <span class="time">{{result.time}}<small>s</small></span>

                            <a href="javascript:;" v-on:click="playWhooshSound(), continueNextGame()" class="big-play-button">Continue <i class="fa fa-caret-right"></i></a>

                            <a href="javascript:;" v-on:click="playWhooshSound(), leaveGame()" class="big-leave-button">Leave <i class="fa fa-caret-right"></i></a>
                            <!--
                            <span class="timer"><i class="fa fa-clock-o" aria-hidden="true"></i> Next map in <span>{{result.time}} seconds</span></span>
                            <span class="map-name">
                                <img :src="'https://assets.venge.io/' + result.nextMap + '-512x.jpg'">
                                {{result.nextMap}}
                            </span>
                            -->
                        </div>
                    </div>
                    <div id="match-table">
                        <li v-for="(player, index) in result.players" :class="{'me' : player.isMe, 'winner' : index === 0}">
                            <img class="character-thumbnail" :src="'https://assets.venge.io/' + player.heroThumbnail">
                            <span class="username">
                                <span v-html="formatMarkup(player.username)"></span>
                                <span class="actions" v-if="!player.isMe">
                                    <a v-if="hasFriend(player.username) && hasReported(player.username)" class="button" href="javascript:;" v-on:click="addFriend(player.username)">
                                        <i class="fa fa-user-plus" aria-hidden="true"></i>
                                    </a>
                                    <a v-if="hasCommended(player.username) && hasReported(player.username)" class="button" href="javascript:;" v-on:click="commendPlayer(player.username)">
                                        <i class="fa fa-handshake-o" aria-hidden="true"></i>
                                    </a>
                                    <span class="seperator"></span>
                                    <a v-if="hasFriend(player.username) && hasCommended(player.username) && hasReported(player.username)" class="button danger" href="javascript:;" v-on:click="reportPlayer(player.username)">
                                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                                    </a>
                                </span>
                                <span class="actions" v-if="player.isMe">
                                    <span class="action-line"><i class="fa fa-circle-o" aria-hidden="true"></i> XP  <b>+{{player.experience}}</b></span>
                                    <span class="action-line"><i class="fa fa-diamond" aria-hidden="true"></i> LVL  <b>{{player.level}}</b></span>
                                    <span class="action-line"><i class="fa fa-database" aria-hidden="true"></i> Earned  <b class="coin">+{{player.coins}} VG</b></span>
                                </span>
                            </span>
                            <span class="kills"><i class="fa fa-crosshairs" aria-hidden="true"></i> {{player.kill}}<small>kills</small></span>
                            <span class="deaths"><i class="fa fa-times" aria-hidden="true"></i> {{player.death}}<small>deaths</small></span>
                            <span class="headshots"><i class="fa fa-deaf" aria-hidden="true"></i> {{player.headshot}}<small>headshots</small></span>
                            <span class="rank">{{index + 1}}</span>
                        </li>
                    </div>
                </div>
                <div id="result-chat" class="fade-out-content">
                    <li v-for="message in chat.messages">
                        <a :href="'https://social.venge.io/#' + cleanMarkup(message.username)" 
                            v-html="formatMarkup(message.username)"
                        target="_blank">
                        </a>
                        : {{message.message}}</li>
                    <input id="chat-message" v-model="chat.message" v-on:keyup.enter="sendChatMessage()" placeholder="Press [ENTER] to type message..." type="text">
                </div>
                <div v-show="!isMobile()" id="result-banner" :style="{'transform' : 'scale(' + homeBannerScale + ')'}"></div>
            </div>

            <div v-if="page == 'ServerSettings'" class="fullscreen fullscreen-darker">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), page = 'Home'">
                    SERVER AND MAP: {{session.map}}
                </h3>

                <div id="tab-container">
                    <div id="tab-sidebar">
                        <li v-on:mouseover="playHoverSound()" :class="{'active' : tab == 'General'}" v-on:click="tab = 'General'"><span class="icon-container"><i class="fa fa-asterisk" aria-hidden="true"></i></span> Official</li>

                        <li v-on:mouseover="playHoverSound()" :class="{'active' : category == 'Parkour' && tab == 'Custom'}" v-on:click="tab = 'Custom', getCustomMapsByCategory('Parkour')"><span class="icon-container"><i class="fa fa-reply-all" aria-hidden="true"></i></span> Parkour</li>

                        <li v-on:mouseover="playHoverSound()" :class="{'active' : category == 'Sniper' && tab == 'Custom'}" v-on:click="tab = 'Custom', getCustomMapsByCategory('Sniper')"><span class="icon-container"><i class="fa fa-crosshairs" aria-hidden="true"></i></span> Sniper</li>

                        <!--<li v-on:mouseover="playHoverSound()" :class="{'active' : category == 'Team' && tab == 'Custom'}" v-on:click="tab = 'Custom', getCustomMapsByCategory('Team')"><span class="icon-container"><i class="fa fa-users" aria-hidden="true"></i></span> Team</li>-->

                        <li v-on:mouseover="playHoverSound()" :class="{'active' : tab == 'Search'}" v-on:click="tab = 'Search'"><span class="icon-container"><i class="fa fa-search" aria-hidden="true"></i></span> Search</li>
                    </div>
                    <div id="tab-content" class="tab-scroll">
                        <div v-if="tab == 'General'">
                            <div class="field">
                                <label>Server Region</label>
            
                                <select class="half-option" v-model="session.country" v-on:change="setMenu(), refreshMenu()">
                                    <option value="EU">EU (Europe / Frankfurt) - {{session.regions.EU}} online</option>
                                    <option value="NA">NA (North America / Atlanta, California) - {{session.regions.NA}} online</option>
                                    <option value="AS">AS (Asia / Singapore) - {{session.regions.AS}} online</option>
                                    <option value="AU">AU (Oceania / Sydney) - {{session.regions.AU}} online</option>
                                    <option value="SA">SA (South America / Sao Paulo) - {{session.regions.SA}} online</option>
                                </select>
                            </div>
            
                            <div class="field field-selection">
                                <label>Official Maps</label>
                                <div  class="map-selection">
                                    <li v-on:click="selectMap(map)" v-for="map in maps" :class="{'active' : session.map == map.name}">
                                        <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                        <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                        <b>{{map.name}}</b>
                                    </li>
                                </div>
                            </div>
                        </div>

                        <div v-if="tab == 'Custom'">
                            <div class="field-info">
                                <p>You can play community create maps, invite your friends and create rooms with custom maps. We selected the best maps for you and categorize them. </p>
                            </div>
                            <div class="map-selection">
                                <li v-on:click="selectMap(map)" v-for="map in customMaps" :class="{'active' : session.map == map.name}">
                                    <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                    <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                    <b>{{map.name}}</b>
                                </li>
                            </div>
                        </div>

                        <div v-if="tab == 'Search'">
                            <div class="search-bar">
                                <input placeholder="Sniper, parkour eg." v-on:keyup.enter="searchCustomMap()" type="search" v-model="form.search">
                                <button v-on:click="searchCustomMap()">Search <i class="fa fa-search"></i></button>
                            </div>

                            <div class="field-info">
                                <p>You wanna share the best maps with us? Please share those maps on our Discord, so we can feature them. <a href="https://discord.gg/3Zdf42gPsJ" target="_blank">
                                    Join Discord
                                </a> </p>
                            </div>
                            <div class="map-selection">
                                <li v-on:click="selectMap(map)" v-for="map in customMaps" :class="{'active' : session.map == map.name}">
                                    <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                    <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                    <b>{{map.name}}</b>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>

                <form v-if="false" class="action-form" action="javascript:;">
                    <!--
                    <div class="field field-selection">
                        <label>Unofficial custom maps</label>
                        <div class="search-bar">
                            <input placeholder="Sniper, parkour eg." v-on:keyup.enter="searchCustomMap()" type="search" v-model="form.search">
                            <button v-on:click="searchCustomMap()">Search <i class="fa fa-search"></i></button>
                        </div>
                        <div class="map-selection">
                            <li v-on:click="selectMap(map)" v-for="map in customMaps" :class="{'active' : session.map == map.name}">
                                <span class="online" v-if="getOnlineUsersByMap(map.name)">{{getOnlineUsersByMap(map.name)}} Online</span>
                                <img :src="'https://maps.venge.io/' + map.name + '-512x.jpg'">
                                <b>{{map.name}}</b>
                            </li>
                        </div>
                    </div>
                    -->
                </form>
            </div>

            <div v-if="page == 'Heroes' && profile.username" class="fullscreen fullscreen-darker">
                <h3>
                    <a href="javascript:;" class="back-button-wrap">
                        <p v-on:click="playWhooshSound(), goBackLoadout(), activeLoadout('Prev')">{{backButton}}</p>
                        <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), goBackLoadout(), activeLoadout('Prev')">
                    </a>
                    
                    {{activeLoadoutMainCategory}}: {{activeLoadoutAltCategory}}

                    <a target="_blank" href="https://social.venge.io/?market#market:inventory" class="btn btn-primary pull-right">SELL OR BUY <i class="fa fa-caret-right"></i></a>
                </h3>
                <div v-if="tab == 'General'" class="loadout-container">
                    <div v-for="(category, index) in loadout" v-on:click="setLoadoutCategory(category), activeLoadout(category)" :class="{'loadout-full' : (category.type == 'Hero' || category.type == 'Charm')}" class="loadout" :style="{'backgroundImage' : 'url(https://assets.venge.io/' + category.thumbnail + ')'}">
                        <b>{{category.type}}</b>
                        <span>{{category.weapon_name}}</span>
                    </div>
                </div>

                <div v-if="tab == 'Loadout'" class="loadout-container loadout-selection" :class="{'loadout-section-detail' : loadoutCurrent.type != 'Charm'}">
                    <div  v-on:click="setLoadout(weapon), activeLoadout(weapon)" v-for="weapon in loadoutCategory" 
                        v-on:mouseover="setLoadoutDetail(weapon.name, loadoutCurrent.type)"
                        v-on:mouseleave="loadoutItemDetail.prevWeapon=''"
                        class="loadout" 
                        :class="{'locked' : weapon.locked, 'loadout-active' : weapon.active}" 
                        :style="{'backgroundImage' : 'url(https://assets.venge.io/' + weapon.thumbnail + ')'}">
                        <b>{{weapon.name}}</b> 
                    </div>
                </div>

                <div v-if="tab == 'Skins'" class="loadout-container loadout-selection" :class="{'loadout-section-detail' : loadoutCurrent.type != 'Charm'}">
                    <div v-on:click="equipItem(item), activeLoadout(item)" v-for="item in currentSkins" class="loadout" :class="{'loadout-active' : item.equiped}" :style="{'backgroundImage' : 'url(https://assets.venge.io/' + item.thumbnail + ')'}">
                        <b>{{item.name}} ({{item.quantity}})</b>
                    </div>
                </div>

                <!--<div v-if="loadContent" class="loader-container">
                    <div class="loader loader-center"></div>
                </div>-->

                <div :class="{'active' : (tab == 'Loadout' || tab == 'Skins') &&  loadoutCurrent.type != 'Charm' }" id="loadout-thumbnail">

                    <div class="thumbnail-wrap" v-if="currentLoadoutThumbnail">
                        <div class="loadout-thumbnail-head">
                            <h1 :class="{'animate__backOutUp animate__faster loadoutItemRarityColor' : loadContent, 'animate__slideInUp loadoutItemRarityColor' : !loadContent}" 
                                class="animate__animated animate__fast">{{loadoutItemName}}</h1>
                            <div id="rarities" 
                                :class="{'animate__backOutUp animate__faster' : loadContent, 'animate__slideInUp' : !loadContent}"
                                class="animate__animated animate__fast">
                                <h2 :class="loadoutItemRarityColor"  >{{loadoutItemRarity}}</h2>
                            </div>
                        </div>
                        <img  class="animate__animated animate__fast" 
                            :class="{'animate__backOutUp animate__faster' : loadContent, 'animate__slideInUp' : !loadContent}"
                            :src="'https://assets.venge.io/' + currentLoadoutThumbnail + '?v=1.0'">
                    </div>
                    

                    <button v-if="loadoutCurrent.type != 'Charm' && tab != 'Skins' && tab != 'General'" 
                            v-on:click="customizeItem()" 
                            class="customize-button animate__animated animate__pulse animate__infinite animate__fast">
                            <!--<i class="fa fa-pencil"></i>-->
                            CUSTOMIZE
                    </button>

                    <!--
                    <div v-if="inventory.length > 0" id="equipment">
                        <div id="equipment-slider" :style="{'left' : sliderPosition + 'px'}">
                            <li v-on:click="equipItem(item)" v-if="loadoutCurrent.weapon_name == item.class" v-for="item in inventory" :class="{'active' : item.equiped}">
                                <img :src="'https://assets.venge.io/' + item.thumbnail">
                            </li>
                        </div>

                        <div v-on:click="sliderPosition+=90" id="equipment-left-button" class="equipment-side-button">
                            <i class="fa fa-caret-left"></i>
                        </div>

                        <div v-on:click="sliderPosition-=90" id="equipment-right-button"class="equipment-side-button">
                            <i class="fa fa-caret-right"></i>
                        </div>
                    </div>
                    -->
                </div>

                <div v-if="(tab == 'Loadout' || tab == 'Skins') && loadoutCurrent.type != 'Charm' " id="loadout-detail" class="animate__animated animate__fast animate__slideInRight" :class="">
                <div class="item-title">
                    {{loadoutItemDetail.name}}
                </div>
                <div class="item-detail">
                    <ul class="detail-box-wrap">
                    <li v-if="loadoutItemDetail.type == 'Hero'"> 
                        <div class="detail-box">
                        <p>
                            HEALTH POINT 
                        </p> 
                        <ul>
                            <li class="text">{{loadoutItemDetail.hero.HP}}</li>
                        </ul>
                        </div>
                        <div class="detail-box">
                        <p>
                            COMPLEXITY 
                        </p>
                        <ul class="stats">
                            <li v-for="(item, index) in loadoutItemDetail.count" :class="{'active' : index < loadoutItemDetail.hero.complexity, green : loadoutItemDetail.hero.complexity <= 2, orange : loadoutItemDetail.hero.complexity == 3, dark_orange : loadoutItemDetail.hero.complexity == 4, red : loadoutItemDetail.hero.complexity == 5}"></li>
                        </ul>
                        </div>
                    </li>
                    <li>
                        <p>
                        {{loadoutItemDetail.story}}
                        </p>  
                    </li>
                    <li class="ability-box" v-if="loadoutItemDetail.type == 'Hero'">
                        <img :src="'images/heroes/skills/' + loadoutItemDetail.name +'-Throw.png'" alt="">
                        <div class="detail-box-column">
                        <p class="title">{{loadoutItemDetail.hero.mainAbilityTitle}}</p>
                        <p>
                            {{loadoutItemDetail.hero.mainAbility}}
                        </p>
                        </div>
                    </li>
                    <li class="ability-box" v-if="loadoutItemDetail.type == 'Hero'">
                        <img :src="'images/heroes/skills/' + loadoutItemDetail.name +'-Melee.png'" alt="">
                        <div class="detail-box-column">
                            <p class="title">{{loadoutItemDetail.hero.secondAbilityTitle}}</p>
                            <p>
                            {{loadoutItemDetail.hero.secondAbility}}
                            </p>
                        </div>
                    </li>
                    <li class="column-list">
                        <div v-if="loadoutItemDetail.type == 'Hero'" class="detail-box-column">
                        <div class="ability-box">
                            <p class="title">Fighter</p>
                            <ul class="ability">
                                <li v-for="(item, index) in loadoutItemDetail.count" :class="{'active' : index < loadoutItemDetail.hero.fighter}"></li>
                            </ul>
                        </div>
                        <div class="ability-box">
                            <p class="title">Defender</p>
                            <ul class="ability">
                                <li v-for="(item, index) in loadoutItemDetail.count" :class="{'active' : index < loadoutItemDetail.hero.defender}"></li>
                            </ul>
                        </div>
                        <div class="ability-box">
                            <p class="title">Utility</p>
                            <ul class="ability">
                                <li v-for="(item, index) in loadoutItemDetail.count" :class="{'active' : index < loadoutItemDetail.hero.utility}"></li>
                            </ul>
                        </div>
                        </div>

                        <div v-if="loadoutItemDetail.type != 'Hero'" class="column-info-text">
                        <p>
                            You can hover the guns to compare the specs.
                        </p>
                        </div>
                        <div v-if="loadoutItemDetail.type != 'Hero'" class="detail-box-column">

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.damage">DAMAGE</p>
                            <img v-if="loadoutItemDetail.currentWeapon.damage < loadoutItemDetail.prevWeapon.damage && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.damage > loadoutItemDetail.prevWeapon.damage ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.damage < loadoutItemDetail.prevWeapon.damage ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.damage) / 100 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.damage, loadoutItemDetail.prevWeapon.damage, 100), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.damage, loadoutItemDetail.prevWeapon.damage, 100)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.damage > loadoutItemDetail.prevWeapon.damage, 
                                            'green' : loadoutItemDetail.currentWeapon.damage < loadoutItemDetail.prevWeapon.damage }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.shootTime">SHOOT RATE</p>
                            <img v-if="loadoutItemDetail.currentWeapon.shootTime < loadoutItemDetail.prevWeapon.shootTime && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.shootTime > loadoutItemDetail.prevWeapon.shootTime ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.shootTime < loadoutItemDetail.prevWeapon.shootTime ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.shootTime) / 1.2 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.shootTime, loadoutItemDetail.prevWeapon.shootTime, 1.2), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.shootTime, loadoutItemDetail.prevWeapon.shootTime, 1.2)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.shootTime > loadoutItemDetail.prevWeapon.shootTime, 
                                            'green' : loadoutItemDetail.currentWeapon.shootTime < loadoutItemDetail.prevWeapon.shootTime }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.recoilRate">RECOIL</p>
                            <img v-if="loadoutItemDetail.currentWeapon.recoilRate > loadoutItemDetail.prevWeapon.recoilRate && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.recoilRate < loadoutItemDetail.prevWeapon.recoilRate ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.recoilRate > loadoutItemDetail.prevWeapon.recoilRate ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.recoilRate) / 2 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.recoilRate, loadoutItemDetail.prevWeapon.recoilRate, 2), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.recoilRate, loadoutItemDetail.prevWeapon.recoilRate, 2)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.recoilRate < loadoutItemDetail.prevWeapon.recoilRate, 
                                            'green' : loadoutItemDetail.currentWeapon.recoilRate > loadoutItemDetail.prevWeapon.recoilRate }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.spreadRate">SPREAD</p>
                            <img v-if="loadoutItemDetail.currentWeapon.spreadRate > loadoutItemDetail.prevWeapon.spreadRate && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.spreadRate < loadoutItemDetail.prevWeapon.spreadRate ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.spreadRate > loadoutItemDetail.prevWeapon.spreadRate ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.spreadRate) / 4000 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.spreadRate, loadoutItemDetail.prevWeapon.spreadRate, 4000), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.spreadRate, loadoutItemDetail.prevWeapon.spreadRate, 4000)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.spreadRate < loadoutItemDetail.prevWeapon.spreadRate, 
                                            'green' : loadoutItemDetail.currentWeapon.spreadRate > loadoutItemDetail.prevWeapon.spreadRate }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.focusSpreadRate">FOCUS SPREAD</p>
                            <img v-if="loadoutItemDetail.currentWeapon.focusSpreadRate > loadoutItemDetail.prevWeapon.focusSpreadRate && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.focusSpreadRate < loadoutItemDetail.prevWeapon.focusSpreadRate ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.focusSpreadRate > loadoutItemDetail.prevWeapon.focusSpreadRate ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.focusSpreadRate) / 1000 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.focusSpreadRate, loadoutItemDetail.prevWeapon.focusSpreadRate, 1000), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.focusSpreadRate, loadoutItemDetail.prevWeapon.focusSpreadRate, 1000)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.focusSpreadRate < loadoutItemDetail.prevWeapon.focusSpreadRate, 
                                            'green' : loadoutItemDetail.currentWeapon.focusSpreadRate > loadoutItemDetail.prevWeapon.focusSpreadRate }">
                                </span>
                            </span>
                            </div>
                        </div>
                        </div>
                        <div v-if="loadoutItemDetail.type != 'Hero'" class="detail-box-column">
                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.ammoCapacity">AMMO</p>
                            <img v-if="loadoutItemDetail.currentWeapon.ammoCapacity < loadoutItemDetail.prevWeapon.ammoCapacity && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.ammoCapacity > loadoutItemDetail.prevWeapon.ammoCapacity ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.ammoCapacity < loadoutItemDetail.prevWeapon.ammoCapacity ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.ammoCapacity) / 30 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.ammoCapacity, loadoutItemDetail.prevWeapon.ammoCapacity, 30), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.ammoCapacity, loadoutItemDetail.prevWeapon.ammoCapacity, 30)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.ammoCapacity > loadoutItemDetail.prevWeapon.ammoCapacity, 
                                            'green' : loadoutItemDetail.currentWeapon.ammoCapacity < loadoutItemDetail.prevWeapon.ammoCapacity }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.reloadingTime">RELOAD TIME</p>
                            <img v-if="loadoutItemDetail.currentWeapon.reloadingTime < loadoutItemDetail.prevWeapon.reloadingTime && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.reloadingTime > loadoutItemDetail.prevWeapon.reloadingTime ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.reloadingTime < loadoutItemDetail.prevWeapon.reloadingTime ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.reloadingTime) / 3 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.reloadingTime, loadoutItemDetail.prevWeapon.reloadingTime, 3), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.reloadingTime, loadoutItemDetail.prevWeapon.reloadingTime, 3)}"
                                    :class="{
                                    'red' : loadoutItemDetail.currentWeapon.reloadingTime > loadoutItemDetail.prevWeapon.reloadingTime, 
                                    'green' : loadoutItemDetail.currentWeapon.reloadingTime < loadoutItemDetail.prevWeapon.reloadingTime 
                                }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.distanceMultiplier">DISTANCE</p>
                            <img v-if="loadoutItemDetail.currentWeapon.distanceMultiplier < loadoutItemDetail.prevWeapon.distanceMultiplier && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.distanceMultiplier > loadoutItemDetail.prevWeapon.distanceMultiplier ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.distanceMultiplier < loadoutItemDetail.prevWeapon.distanceMultiplier ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.distanceMultiplier) / 1 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.distanceMultiplier, loadoutItemDetail.prevWeapon.distanceMultiplier, 1), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.distanceMultiplier, loadoutItemDetail.prevWeapon.distanceMultiplier, 1)}"
                                    :class="{'red' : loadoutItemDetail.currentWeapon.distanceMultiplier > loadoutItemDetail.prevWeapon.distanceMultiplier, 
                                    'green' : loadoutItemDetail.currentWeapon.distanceMultiplier < loadoutItemDetail.prevWeapon.distanceMultiplier }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.visionVibrate">VISION VIBRATE</p>
                            <img v-if="loadoutItemDetail.currentWeapon.visionVibrate < loadoutItemDetail.prevWeapon.visionVibrate && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.visionVibrate > loadoutItemDetail.prevWeapon.visionVibrate ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.visionVibrate < loadoutItemDetail.prevWeapon.visionVibrate ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.visionVibrate) / 40 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.visionVibrate, loadoutItemDetail.prevWeapon.visionVibrate, 40), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.visionVibrate, loadoutItemDetail.prevWeapon.visionVibrate, 40)}"
                                    :class="{
                                    'red' : loadoutItemDetail.currentWeapon.visionVibrate > loadoutItemDetail.prevWeapon.visionVibrate, 
                                    'green' : loadoutItemDetail.currentWeapon.visionVibrate < loadoutItemDetail.prevWeapon.visionVibrate 
                                    }">
                                </span>
                            </span>
                            </div>
                        </div>

                        <div class="detail-wrapper">
                            <div class="detail-wrap-title">
                            <p class="button-sound hint--right" :aria-label="loadoutItemDetail.currentWeapon.focusFOV">FOCUS FOV</p>
                            <img v-if="loadoutItemDetail.currentWeapon.focusFOV < loadoutItemDetail.prevWeapon.focusFOV && loadoutItemDetail.prevWeapon" 
                                :src="'images/icons/weapons/'+(loadoutItemDetail.currentWeapon.focusFOV > loadoutItemDetail.prevWeapon.focusFOV ? loadoutItemDetail.name : (loadoutItemDetail.currentWeapon.focusFOV < loadoutItemDetail.prevWeapon.focusFOV ? loadoutItemDetail.prevName : loadoutItemDetail.name))+'-Thumbnail-White.png'"
                                class="animate__animated animate__fadeIn">
                            </div>
                            <div class="star">
                            <span class="bar">
                                <span :style="{ width: (100 * loadoutItemDetail.currentWeapon.focusFOV) / 50 + '%' }"></span>
                                <span class="prev-bar"
                                    :style="{ width: loadoutCompareBar(loadoutItemDetail.currentWeapon.focusFOV, loadoutItemDetail.prevWeapon.focusFOV, 50), left: loadoutCompareBarPosition(loadoutItemDetail.currentWeapon.focusFOV, loadoutItemDetail.prevWeapon.focusFOV, 50)}"
                                    :class="{
                                    'red' : loadoutItemDetail.currentWeapon.focusFOV > loadoutItemDetail.prevWeapon.focusFOV, 
                                    'green' : loadoutItemDetail.currentWeapon.focusFOV < loadoutItemDetail.prevWeapon.focusFOV 
                                    }">
                                </span>
                            </span>
                            </div>
                        </div>
                        </div>
                    </li>
                    </ul>
                </div>
                </div>
            </div>

            <div v-if="page == 'Shop'" class="fullscreen fullscreen-alpha">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), goHome()">
                    SHOP
                    <span v-if="session.hash" v-on:click="openBuyVG()" class="buy-vg-header">
                        <i class="fa fa-unlock" aria-hidden="true"></i> PURCHASE VG
                    </span>
                    <span v-if="session.hash" class="balance">
                        Balance: 
                        <b>
                            {{session.balance}} 
                            <img src="images/icons/Coin-Icon.png" alt="">
                        </b> 
                    </span>
                </h3>
                <div id="tab-container">
                    <div id="tab-sidebar">
                        <li v-on:mouseover="playHoverSound()" v-for="item in shop.menu" :class="{'active' : tab == item.tab}" v-on:click="setShopTab(item)"><span class="icon-container"><i class="fa" :class="item.icon" aria-hidden="true"></i></span> {{item.name}}</li>

                        <li v-on:mouseover="playHoverSound()" v-if="session.hash" :class="{'active' : tab == 'Inventory'}" v-on:click="setShopTab({ tab : 'Inventory' }), fetchInventory()" ><span class="icon-container"><i class="fa fa-briefcase" aria-hidden="true"></i></span> Inventory</li>
                        
                        <li v-on:mouseover="playHoverSound()" v-if="session.hash" :class="{'active' : tab == 'Reforge'}" v-on:click="setShopTab({ tab : 'Reforge' }), getReforge()" class="new"><span class="icon-container with-img"><img src="images/icons/tool_anvil_icon.png" alt=""></span> Reforge</li>
                        
                        <li v-on:mouseover="playHoverSound()" ><a href="https://social.venge.io/?market#market:public" target="_blank"><span class="icon-container"><i class="fa fa-shopping-basket" aria-hidden="true"></i></span> Market</a></li>

                        <li v-on:mouseover="playHoverSound()" v-if="session.hash" v-on:click="openBuyVG()" class="highlighted"><span class="icon-container"><i class="fa fa-diamond" aria-hidden="true"></i></span> Buy VG</li>
                    </div>
                    <div id="tab-content" class="shop-content">
                        <div v-if="tab == 'General'">
                            <div class="shop-featured">
                                <div class="tab-title-wrap">
                                    <h4>
                                        <i class="fa fa-bullhorn" aria-hidden="true"></i> FEATURED
                                    </h4>
                                    <span class="slider-arrows">
                                        <li v-on:click="setShopSlider(), shop.slideIndex = index" :class="{'active' : shop.slideIndex == index}" v-for="(slide, index) in shop.slides"></li>
                                    </span>
                                </div>
                                
                                <div id="slider-container">
                                    <li v-for="(slide, index) in shop.slides" v-on:click="setShopTab({ tab : slide.tab })" class="big-content" :style="{'backgroundImage' : 'url(' + slide.image + ')', 'left' : (-shop.slideIndex * shop.slideWidth + index * shop.slideWidth) + 'vw'}">
                                        <div class="box-bottom-gradient">
                                            <span class="title">{{slide.title}}</span>
                                            <p>{{slide.description}}</p>
                                        </div>
                                    </li>
                                </div>
                            </div>
                            <div class="shop-weekly-offerings">
                                <div class="tab-title-wrap">
                                    <h4>
                                        <i class="fa fa-bolt" aria-hidden="true"></i> WEEKLY OFFERINGS
                                    </h4>
                                    <small>
                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                        {{shop.time_left}}
                                    </small>
                                </div>

                                <div id="item-list" class="shop-list-content">
                                    <li v-on:click="tab = 'Offers', showItem3D(item)" v-for="item in shop.offers" class="shop-item legendary">
                                        <img class="item-thumbnail" :src="'https://assets.venge.io/' + item.thumbnail">
                                        
                                        <span class="title">{{item.name}}</span>
                                        <span class="type">{{item.class}}</span>
                                        <span class="rarity"><span class="square" :class="item.rarity"></span>{{item.rarity}}</span>
                                        <span class="price discount">
                                            <img class="coin-icon" src="images/icons/Coin-Icon.png" alt="">
                                            <span v-if="item.original_price > 0" class="original-price">{{numberFormat(item.original_price)}}  VG</span>
                                            <span class="price-value">{{numberFormat(item.price)}} VG</span>
                                        </span>
                                    </li>
                                </div>
                            </div>
                        </div>
                        <div v-if="tab == 'Crates'" class="shop-weekly-offerings shop-main-content">
                            <div class="tab-title-wrap">
                                <h4>
                                    <i class="fa fa-archive" aria-hidden="true"></i> CRATES - Mist of Change
                                </h4>
                            </div>
                           

                            <div id="item-list" class="shop-list-content">
                                <li v-on:click="tab = 'Crates', showItem3D(item)" v-for="item in shop.crates" class="shop-item legendary" :class="{'active' : item.name == shop.activeItem.name}">
                                    <img class="item-thumbnail" :src="'https://assets.venge.io/' + item.thumbnail">
                                    
                                    <span class="title">{{item.name}}</span>
                                    <span class="type">{{item.class}}</span>

                                    <span class="price discount">
                                        <img class="coin-icon" src="images/icons/Coin-Icon.png" alt="">
                                        <span v-if="item.original_price > 0" class="original-price">{{numberFormat(item.original_price)}}  VG</span>
                                        <span class="price-value">{{numberFormat(item.price)}} VG</span>
                                    </span>
                                </li>
                            </div>

                            <div id="crate-content" v-if="shop.activeItem.content">
                                <div class="tab-title-wrap">
                                    <h4>
                                        <i class="fa fa-star" aria-hidden="true"></i> {{shop.activeItem.name}} - New {{shop.activeItem.content.length}} items
                                    </h4>
                                </div>
                               

                                <div id="scroll-table">
                                    <table class="item-details">
                                        <tr v-for="item in shop.activeItem.content">
                                            <td>
                                                <img :src="'https://assets.venge.io/' + item.thumbnail">
                                            </td>
                                            <td>{{item.name}}</td>
                                            <td><span class="square" :class="item.rarity"></span>{{item.rarity}}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div v-if="tab == 'Offers'" class="shop-weekly-offerings shop-main-content">
                            <div class="tab-title-wrap">
                                <h4>
                                    <i class="fa fa-bolt" aria-hidden="true"></i> WEEKLY OFFERINGS
                                </h4>
                                <small><i class="fa fa-clock-o" aria-hidden="true"></i> {{shop.time_left}}</small>
                            </div>
                           

                            <div id="item-list" class="shop-list-content">
                                <li v-on:click="tab = 'Offers', showItem3D(item)" v-for="item in shop.offers" class="shop-item legendary" :class="{'active' : item.name == shop.activeItem.name}">
                                    <img class="item-thumbnail" :src="'https://assets.venge.io/' + item.thumbnail">
                                    
                                    <span class="title">{{item.name}}</span>
                                    <span class="type">{{item.class}}</span>
                                    <span class="rarity"><span class="square" :class="item.rarity"></span>{{item.rarity}}</span>
                                    <span class="price discount">
                                        <img class="coin-icon" src="images/icons/Coin-Icon.png" alt="">
                                        <span v-if="item.original_price > 0" class="original-price">{{numberFormat(item.original_price)}}  VG</span>
                                        <span class="price-value">{{numberFormat(item.price)}} VG</span>
                                    </span>
                                </li>
                            </div>
                        </div>
                        <div v-if="tab == 'Inventory'" class="shop-weekly-offerings">
                            <div class="tab-title-wrap">
                                <h4>
                                    <i class="fa fa-briefcase" aria-hidden="true"></i> INVENTORY
                                </h4>
                                <form class="filter-form">
                                    <select v-model="shop.rarity">
                                        <option value="">Rarity:</option>
                                        <option v-for="rarity in shop.rarities">{{rarity}}</option>
                                    </select>
                                    <select v-model="shop.type">
                                        <option value="">Type:</option>
                                        <option v-for="type in shop.types">{{type}}</option>
                                    </select>
                                </form>
                            </div>
                         
                            <div id="inventory-scroll">
                                <table class="item-details">
                                    <tr v-on:click="showItem3D(item)" v-if="filterInventory(item)" v-for="item in inventory" :class="{'favorite-item' : item.favorite}">
                                        <td>
                                            <span class="favorite-button" v-on:click="setFavoriteItem(item)">
                                                <i v-if="!item.favorite" class="fa fa-star-o" aria-hidden="true"></i>
                                                <i v-if="item.favorite" class="fa fa-star" aria-hidden="true"></i>
                                            </span>
                                        </td>
                                        <td>
                                            <img :src="'https://assets.venge.io/' + item.thumbnail">
                                        </td>
                                        <td>
                                            {{item.name}}
                                        </td>
                                        <td>
                                            <span class="table-rarity">
                                                <span class="square" :class="item.rarity"></span>{{item.rarity}} 
                                            </span>
                                        </td>
                                        <td>
                                            <span>
                                                ({{item.quantity}})
                                            </span>
                                        </td>
                                        <td>
                                            <button v-on:click="resellItem(item, true)" class="btn btn-side-end">
                                                <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                                            </button>
                                            
                                            <button v-on:click="resellItem(item)" class="btn btn-secondary btn-side-start hint--bottom hint--rounded badge-icon"
                                            :aria-label="item.resell">Resell</button>

                                            <button v-if="!item.equiped" v-on:click="equipItem(item)" class="btn btn-primary">Equip</button>
                                            <button v-if="item.equiped" v-on:click="unequipItem(item)" class="btn btn-cancel"><i class="fa fa-close" aria-hidden="true"></i> Unequip</button>
                                            
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div v-if="tab == 'Reforge'" class="reforge-wrapper">
                            <div class="reforge-inventory">
                                <div class="tab-title-wrap">
                                    <h4>
                                        <i class="fa fa-briefcase" aria-hidden="true"></i> INVENTORY
                                    </h4>
                                    <form class="filter-form">
                                        <select v-model="shop.rarity">
                                            <option value="">Rarity:</option>
                                            <option v-for="rarity in shop.rarities" v-if="rarity != 'Legendary' && rarity != 'Mythical'">{{rarity}}</option>
                                        </select>
                                        <select v-model="shop.type">
                                            <option value="">Type:</option>
                                            <option v-for="type in shop.types">{{type}}</option>
                                        </select>
                                    </form>
                                </div>
                              
                                <div id="inventory-scroll">
                                    <table class="item-details">
                                        <tr v-if="filterInventory(item) && filterReforgeItem(item) && item.rarity != 'Mythical' && item.rarity != 'Legendary'" v-for="item in inventory" >
                                            <td>
                                                <img :src="'https://assets.venge.io/' + item.thumbnail">
                                              
                                            </td>
                                            <td>
                                                {{item.name}}
                                            </td>
                                            <td>
                                                <span class="table-rarity">
                                                    <span class="square" :class="item.rarity"></span>
                                                    {{item.rarity}} ({{item.quantityNumber}}x)
                                                </span>
                                            </td>
                                            <td>
                                                <button v-if="item.quantityNumber > 0 && !reforge.isWaiting" v-on:click="selectReforgeItem(item)" class="btn btn-primary">Select</button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="reforge">
                                <div class="reforge-content animate__animated animate__slower" :class="{'animate__zoomOut' : reforge.isWaiting}">
                                    <div class="reforge-content-fill-wrap">
                                        <div class="reforge-fill-mask">
                                            <div class="lock-reforge" :class="{'active' : reforge.isWaiting}">
                                                <span class="frame">
                                                    <i v-if="!reforge.isWaiting" class="fa fa-lock" aria-hidden="true"></i>
                                                </span>
                                            </div>
                                            <ul class="rune-wrapper" :class="{'active' : reforge.isWaiting}">
                                                <li v-for="key in reforge.runeCount" :style="'--i:' + key">
                                                    <img :src="'images/icons/runes/rune-'+key+'.png'" alt="Venge Reforge">
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="item-wrapper animate__animated" :class="{'animate__fadeOut' : reforge.isWaiting}">
                                    <div class="info button-sound hint--top hint--medium" :aria-label="reforge.info">
                                        <i class="fa fa-question" aria-hidden="true"></i>
                                    </div>

                                    <div class="item fa" :class="{'active' : item !== 0}" v-for="item in reforge.selected" v-on:click="removeReforgeItem(item)">
                                        <img v-if="item !== 0" :src="'https://assets.venge.io/' + item.thumbnail" alt="">
                                    </div>
                                </div>

                                <div id="active-item" v-if="shop.activeItem">
                                    <span class="item-name">{{shop.activeItem.name}}</span>
                                    <span class="item-type">{{shop.activeItem.class}}</span>
                                    
                                    <div id="loot-box-content" class="animate__animated animate__slideInDown animate__faster">
                                        <span class="rarity"><span class="square" :class="shop.activeItem.rarity"></span> {{shop.activeItem.rarity}}</span>
                                    </div>
                                </div>
                                
                                <button class="shop-unlock" :class="{'shop-unequip' : (reforge.isUnlocking)}" v-on:click="reforgeItems()">
                                    <span v-if="!reforge.isUnlocking && !reforge.ready">
                                        <i class="fa fa-unlock-alt" aria-hidden="true"></i> Reforge 
                                    </span>

                                    <span v-if="!reforge.isUnlocking && reforge.ready">
                                        Next 
                                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                                    </span>
                                    <div v-if="reforge.isUnlocking" class="loader loader-center"></div>
                                </button>
                            </div>
                        </div>
                        <div v-if="tab == 'Heroes'" class="shop-weekly-offerings shop-main-content">
                            <div class="tab-title-wrap">
                                <h4>
                                    <i class="fa fa-street-view" aria-hidden="true"></i> HEROES
                                </h4>
                            </div>
                           

                            <div id="item-list" class="shop-list-content">
                                <li v-on:click="showItem3D(item)" v-for="item in shop.heroes" class="shop-item legendary" :class="{'active' : item.name == shop.activeItem.name}">
                                    <img class="item-thumbnail" :src="'https://assets.venge.io/' + item.thumbnail">
                                    
                                    <span class="title">{{item.name}}</span>
                                    <span class="type">{{item.class}}</span>
                                    <span class="rarity"><span class="square" :class="item.rarity"></span>{{item.rarity}}</span>
                                    <span class="price discount">
                                        <img class="coin-icon" src="images/icons/Coin-Icon.png" alt="">
                                        <span v-if="item.original_price > 0" class="original-price">{{numberFormat(item.original_price)}}  VG</span>
                                        <span class="price-value">{{numberFormat(item.price)}} VG</span>
                                    </span>
                                </li>
                            </div>
                        </div>
                        <div id="active-item" v-if="shop.activeItem && tab != 'General' && tab != 'Reforge'">
                            <div id="active-item-loading" v-if="shop.isCustomSkinLoaded">
                                <div class="loader loader-center"></div>
                            </div>
                            <span v-if="tab != 'Crates'" class="item-name">{{shop.activeItem.name}}</span>
                            <span v-if="tab != 'Crates'" class="item-type">{{shop.activeItem.class}}</span>
                            
                            <div v-if="tab == 'Crates' && shop.lootboxContent" id="loot-box-content" class="animate__animated animate__slideInDown animate__faster">
                                <span class="title">{{shop.lootboxContent.name}}</span>
                                <span class="rarity"><span class="square" :class="shop.lootboxContent.rarity"></span> {{shop.lootboxContent.rarity}}</span>
                            </div>

                            <div v-if="tab != 'Crates' && tab != 'Heroes'">
                                <span class="item-rarity"><span class="square" :class="shop.activeItem.rarity"></span>{{shop.activeItem.rarity}}</span>

                                <span class="item-type" v-if="shop.activeItem.owner != 'Venge'">By {{shop.activeItem.owner}}</span>
                            </div>

                            <div v-if="tab == 'Crates'">
                                <div id="rarities">
                                    <li v-for="rarity in formatCrateRarities(shop.activeItem.crate_rarities)"><span class="square" :class="rarity"></span> {{rarity}}</li>
                                </div>
                                <div v-if="session.hash">
                                    <button class="shop-unlock" v-on:click="unlockCrate(shop.activeItem)">
                                        <div v-if="shop.isUnlocking" class="loader loader-center"></div>

                                        <span v-if="!shop.isUnlocking">
                                            <i class="fa fa-unlock-alt" aria-hidden="true"></i> Unlock 
                                            <small v-if="session.hash">{{numberFormat(shop.activeItem.price)}} VG</small>
                                        </span>
                                    </button>
                                </div>

                                <div v-if="!session.hash">

                                </div>
                                
                            </div>

                            <div v-if="tab == 'Offers'">
                                <button v-if="!isUnlockedSkin(shop.activeItem)" class="shop-unlock" v-on:click="buyItem(shop.activeItem)">
                                    <i class="fa fa-unlock-alt" aria-hidden="true"></i> Unlock 
                                    <small v-if="session.hash">{{numberFormat(shop.activeItem.price)}} VG</small>
                                    <small v-if="!session.hash">With Ads</small>
                                </button>

                                <div id="unlocked-local-skin" v-if="!session.hash && isUnlockedSkin(shop.activeItem)">
                                    <i class="fa fa-unlock" aria-hidden="true"></i> Skin unlocked, try it on game!
                                </div>

                                <div v-if="session.hash && isUnlockedSkin(shop.activeItem)">
                                    <button v-if="!isItemEquiped(shop.activeItem)" class="shop-unlock shop-equip" v-on:click="equipItem(shop.activeItem)">
                                        <i class="fa fa-check" aria-hidden="true"></i> Equip
                                    </button>

                                    <button v-if="isItemEquiped(shop.activeItem)" class="shop-unlock shop-unequip" v-on:click="unequipItem(shop.activeItem)">
                                        <i class="fa fa-close" aria-hidden="true"></i> Unequip
                                    </button>
                                </div>
                            </div>

                            <div v-if="tab == 'Crates' && !session.hash">
                                <!--Todo for this area, we'll change it-->
                                <!--<div v-on:click="goAccount()" id="unlocked-local-skin" v-if="!session.hash">
                                    <i class="fa fa-unlock" aria-hidden="true"></i> Please login to unlock crates!
                                </div>
                                -->

                                <button class="shop-unlock" :class="{'shop-equip' : shop.canUnlockWithAds > 0}" v-on:click="unlockCrateWithAds(shop.activeItem)">
                                    <div v-if="shop.isUnlocking" class="loader loader-center"></div>

                                    <span v-if="!shop.isUnlocking">
                                        <span v-if="shop.canUnlockWithAds === 0">
                                            <i class="fa fa-play-circle-o" aria-hidden="true"></i> Redeem 
                                            <small>With Ads</small>
                                        </span>

                                        <span v-if="shop.canUnlockWithAds > 0">
                                            <i class="fa fa-unlock-alt" aria-hidden="true"></i> Unlock 
                                            <small>{{shop.canUnlockWithAds}} / {{shop.maxUnlockWithAds}}</small>
                                        </span>
                                    </span>
                                </button>
                            </div>

                            <div v-if="tab == 'Heroes'">
                                <div v-if="session.hash && !isUnlockedSkin(shop.activeItem)">
                                    <button class="shop-unlock" v-on:click="buyItem(shop.activeItem)">
                                        <i class="fa fa-unlock-alt" aria-hidden="true"></i> Unlock 
                                        <small v-if="session.hash">{{numberFormat(shop.activeItem.price)}} VG</small>
                                    </button>
                                </div>

                                <div v-if="session.hash && isUnlockedSkin(shop.activeItem)">
                                    <button class="shop-unlock shop-equip" v-on:click="goCharacterSelection()">
                                        <i class="fa fa-check" aria-hidden="true"></i> Equip
                                    </button>
                                </div>
                                
                                <!--
                                <div v-on:click="goAccount()" id="unlocked-local-skin" v-if="!session.hash">
                                    <i class="fa fa-unlock" aria-hidden="true"></i> Please login to unlock heroes!
                                </div>
                                -->

                                <button v-if="!session.hash && !isUnlockedSkin(shop.activeItem)" class="shop-unlock" v-on:click="unlockHeroWithAds(shop.activeItem)">
                                    <i class="fa fa-play-circle-o" aria-hidden="true"></i> Redeem 
                                    <small>With Ads</small>
                                </button>

                                <button v-if="!session.hash && isUnlockedSkin(shop.activeItem)" class="shop-unlock" v-on:click="unlockHeroWithAds(shop.activeItem)">
                                    Select
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="page == 'Leaderboard'" class="fullscreen">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), goHome()">
                    LEADERBOARDS
                    <span v-if="session.hash" v-on:click="openBuyVG()" class="buy-vg-header">
                        <i class="fa fa-unlock" aria-hidden="true"></i> PURCHASE VG
                    </span>
                    <span v-if="session.hash" class="balance">
                        Balance: 
                        <b>
                            {{session.balance}} 
                            <img src="images/icons/Coin-Icon.png" alt="">
                        </b> 
                    </span>
                </h3>

                <div id="tab-container">
                    <div id="tab-sidebar">
                        <li v-on:mouseover="playHoverSound()" v-for="item in leaderboard.menu" 
                        :class="{'active' : tab == item.tab}" v-on:click="setLeaderboardTab(item)">
                            <span class="icon-container">
                                <i class="fa" :class="item.icon" aria-hidden="true"></i>
                            </span> {{item.name}}
                        </li>
                    </div>
                    <div id="tab-content" class="tab-content-scroll">
                        <h4>
                            <i class="fa" :class="leaderboard.icon" aria-hidden="true"></i> {{leaderboard.title}} LEADERBOARD
                        </h4>

                        <div v-if="tab == 'General' || tab == 'Weekly' || tab == 'Global'">
                            <table class="table">
                                <tr>
                                  <th>#</th>
                                  <th v-if="tab == 'General'" width="15">-</th>
                                  <th>USERNAME</th>
                                  <th>KILLS</th>
                                  <th>DEATHS</th>
                                  <th>KDR</th>
                                  <th>SCORE</th>
                                  <th>PROFILE</th>
                                </tr>
                      
                                <tr v-for="(item, rank) in leaderboard.table">
                                  <td width="15">{{rank + 1}}.</td>
                                  <td v-if="tab == 'General'">
                                    <img
                                            class="rank-icon"
                                            v-show="item.current_rank < item.previous_rank"
                                            src="images/icons/Caret-Up.png"
                                    />
                                    <img
                                            class="rank-icon"
                                            v-show="item.current_rank > item.previous_rank"
                                            src="images/icons/Caret-Down.png"
                                    />
                                    <img
                                            class="rank-icon"
                                            v-show="item.current_rank == item.previous_rank"
                                            src="images/icons/Caret-None.png"
                                    />
                                  </td>
                                  <td>
                                    <a
                                       class="leaderboard-items"
                                       :href="'https://social.venge.io/?profile#' + item.raw_username" target="_blank">
                                      <img
                                              v-show="item.hero"
                                              class="hero-thumbnail-image"
                                              :src="'https://assets.venge.io/' + item.hero + '-Thumbnail-1.png'"
                                              :alt="item.hero"
                                              :title="item.hero"
                                      />
                                      <img
                                              v-show="item.verified == 1"
                                              class="verified-small"
                                              src="images/Verified-Icon.png"
                                      />
                                      <span v-if="item.emoji == 'DollarSign'">🤑</span>
                                      <span v-if="item.emoji == 'Crazy'">🤪</span>
                                      <span v-if="item.emoji == 'Dizzy'">😵</span>
                                      <span v-if="item.emoji == 'Exploding'">🤯</span>
                                      <span v-if="item.emoji == 'Mask'">😷</span>
                                      <span v-if="item.emoji == 'Rage'">😡</span>
                                      <span v-if="item.emoji == 'Smiling'">😊</span>
                                      <span v-if="item.emoji == 'SunGlass'">ğŸ˜Ž</span>
                                      <span v-if="item.emoji == 'Thinking'">🤔</span>
                                      <span v-if="item.emoji == 'Triumph'">😤</span>
                                      <b v-html="formatMarkup(item.username)"></b>
                                    </a>
                                  </td>
                                  <td>{{item.kills}}</td>
                                  <td>{{item.deaths}}</td>
                                  <td>{{item.kdr}}</td>
                                  <td>{{item.experience}}</td>
                                  <td>
                                    <a class="button" :href="'https://social.venge.io/?profile#' + item.raw_username" target="_blank">
                                        <i class="fa fa-user" aria-hidden="true"></i> 
                                        PROFILE
                                    </a>
                                  </td>
                                </tr>
                              </table>
                        </div>

                        <div v-if="tab == 'Popular'">
                            <table class="table">
                                <tr>
                                  <th>#</th>
                                  <th>USERNAME</th>
                                  <th>FOLLOWERS</th>
                                  <th>PROFILE</th>
                                </tr>
                      
                                <tr v-for="(item, rank) in leaderboard.table">
                                  <td width="15">{{rank + 1}}.</td>
                                  <td>
                                    <a
                                      class="leaderboard-items"
                                      :href="'https://social.venge.io/?profile#' + cleanMarkup(item.username)" target="_blank">
                                      <img
                                              v-show="item.hero"
                                              class="hero-thumbnail-image"
                                              :src="'https://assets.venge.io/' + item.hero + '-Thumbnail-1.png'"
                                              :alt="item.hero"
                                              :title="item.hero"
                                      />
                                      <img
                                              v-show="item.verified == 1"
                                              class="verified-small"
                                              src="images/Verified-Icon.png"
                                      />
                      
                                      <span v-if="item.emoji == 'DollarSign'">🤑</span>
                                      <span v-if="item.emoji == 'Crazy'">🤪</span>
                                      <span v-if="item.emoji == 'Dizzy'">😵</span>
                                      <span v-if="item.emoji == 'Exploding'">🤯</span>
                                      <span v-if="item.emoji == 'Mask'">😷</span>
                                      <span v-if="item.emoji == 'Rage'">😡</span>
                                      <span v-if="item.emoji == 'Smiling'">😊</span>
                                      <span v-if="item.emoji == 'SunGlass'">ğŸ˜Ž</span>
                                      <span v-if="item.emoji == 'Thinking'">🤔</span>
                                      <span v-if="item.emoji == 'Triumph'">😤</span>
                      
                                      <b v-html="formatMarkup(item.username)"></b>
                                    </a>
                                  </td>
                                  <td><b>{{item.followers}}</b></td>
                                  <td>
                                    <a
                                        class="button"
                                        :href="'https://social.venge.io/?profile#' + cleanMarkup(item.username)" target="_blank">
                                            <i class="fa fa-user" aria-hidden="true"></i> PROFILE
                                    </a
                                    >
                                  </td>
                                </tr>
                              </table>
                        </div>

                        <div v-if="tab == 'Headshots'">
                            <table class="table">
                                <tr>
                                  <th>#</th>
                                  <th>USERNAME</th>
                                  <th>HEADSHOTS</th>
                                  <th>HEADSHOT RATE</th>
                                  <th>PROFILE</th>
                                </tr>
                      
                                <tr v-for="(item, rank) in leaderboard.table">
                                  <td width="15">{{rank + 1}}.</td>
                                  <td>
                                    <a
                                      class="leaderboard-items"
                                      :href="'https://social.venge.io/?profile#' + item.raw_username" target="_blank">
                                      <img
                                              v-show="item.hero"
                                              class="hero-thumbnail-image"
                                              :src="'https://assets.venge.io/' + item.hero + '-Thumbnail-1.png'"
                                              :alt="item.hero"
                                              :title="item.hero"
                                      />
                                      <img
                                              v-show="item.verified == 1"
                                              class="verified-small"
                                              src="images/Verified-Icon.png"
                                      />
                      
                                      <span v-if="item.emoji == 'DollarSign'">🤑</span>
                                      <span v-if="item.emoji == 'Crazy'">🤪</span>
                                      <span v-if="item.emoji == 'Dizzy'">😵</span>
                                      <span v-if="item.emoji == 'Exploding'">🤯</span>
                                      <span v-if="item.emoji == 'Mask'">😷</span>
                                      <span v-if="item.emoji == 'Rage'">😡</span>
                                      <span v-if="item.emoji == 'Smiling'">😊</span>
                                      <span v-if="item.emoji == 'SunGlass'">ğŸ˜Ž</span>
                                      <span v-if="item.emoji == 'Thinking'">🤔</span>
                                      <span v-if="item.emoji == 'Triumph'">😤</span>
                      
                                      <b v-html="formatMarkup(item.username)"></b>
                                    </a>
                                  </td>
                                  <td><b>{{item.headshots}}</b></td>
                                  <td><b>{{item.headshot_rate}}</b></td>
                                  <td>
                                    <a class="button" :href="'https://social.venge.io/?profile#' + item.raw_username" target="_blank">
                                        <i class="fa fa-user" aria-hidden="true"></i> PROFILE
                                    </a>
                                  </td>
                                </tr>
                              </table>
                        </div>

                        <div v-if="tab == 'Kills'">
                            <table class="table">
                                <tr>
                                  <th>#</th>
                                  <th>USERNAME</th>
                                  <th>KILLS</th>
                                  <th>PROFILE</th>
                                </tr>
                      
                                <tr v-for="(item, rank) in leaderboard.table">
                                  <td width="15">{{rank + 1}}.</td>
                                  <td>
                                    <a
                                      class="leaderboard-items"
                                      :href="'https://social.venge.io/?profile#' + item.raw_username" target="_blank">
                                      <img
                                              v-show="item.hero"
                                              class="hero-thumbnail-image"
                                              :src="'https://assets.venge.io/' + item.hero + '-Thumbnail-1.png'"
                                              :alt="item.hero"
                                              :title="item.hero"
                                      />
                                      <img
                                              v-show="item.verified == 1"
                                              class="verified-small"
                                              src="images/Verified-Icon.png"
                                      />
                      
                                      <span v-if="item.emoji == 'DollarSign'">🤑</span>
                                      <span v-if="item.emoji == 'Crazy'">🤪</span>
                                      <span v-if="item.emoji == 'Dizzy'">😵</span>
                                      <span v-if="item.emoji == 'Exploding'">🤯</span>
                                      <span v-if="item.emoji == 'Mask'">😷</span>
                                      <span v-if="item.emoji == 'Rage'">😡</span>
                                      <span v-if="item.emoji == 'Smiling'">😊</span>
                                      <span v-if="item.emoji == 'SunGlass'">ğŸ˜Ž</span>
                                      <span v-if="item.emoji == 'Thinking'">🤔</span>
                                      <span v-if="item.emoji == 'Triumph'">😤</span>
                      
                                      <b v-html="formatMarkup(item.username)"></b>
                                    </a>
                                  </td>
                                  <td><b>{{item.kills}}</b></td>
                                  <td>
                                    <a class="button" :href="'https://social.venge.io/?profile#' + item.raw_username" target="_blank">
                                        <i class="fa fa-user" aria-hidden="true"></i> PROFILE
                                        </a>
                                  </td>
                                </tr>
                              </table>
                        </div>

                        <div v-if="tab == 'Clans'">
                            <table class="table">
                                <tr>
                                  <th>#</th>
                                  <th>CLAN NAME</th>
                                  <th>TAG</th>
                                  <th>MEMBERS</th>
                                  <th>KDR</th>
                                  <th>SCORE</th>
                                  <th>LEVEL</th>
                                  <th>OWNER</th>
                                  <th>VIEW</th>
                                </tr>
                      
                                <tr v-for="(item, rank) in leaderboard.table">
                                  <td>{{rank + 1}}.</td>
                                  <td>
                                    <a :href="'https://social.venge.io/?clans#' + cleanMarkup(item.slug).replaceAll(/\s/g,'')" target="_blank">
                                      <b>{{item.clan_name}}</b>
                                    </a>
                                  </td>
                                  <td>
                                     <a :href="'https://social.venge.io/?clans#' + cleanMarkup(item.slug).replaceAll(/\s/g,'')" target="_blank">
                                      <span v-if="item.emoji == 'DollarSign'">🤑</span>
                                      <span v-if="item.emoji == 'Crazy'">🤪</span>
                                      <span v-if="item.emoji == 'Dizzy'">😵</span>
                                      <span v-if="item.emoji == 'Exploding'">🤯</span>
                                      <span v-if="item.emoji == 'Mask'">😷</span>
                                      <span v-if="item.emoji == 'Rage'">😡</span>
                                      <span v-if="item.emoji == 'Smiling'">😊</span>
                                      <span v-if="item.emoji == 'SunGlass'">ğŸ˜Ž</span>
                                      <span v-if="item.emoji == 'Thinking'">🤔</span>
                                      <span v-if="item.emoji == 'Triumph'">😤</span>
                      
                                      <b v-html="formatMarkup(item.slug)"></b>
                                    </a>
                                  </td>
                                  <td>{{item.members_count}}</td>
                                  <td>{{item.kdr}}</td>
                                  <td>{{item.experience}}</td>
                                  <td>{{item.level}}</td>
                                  <td>
                                    <a :href="'https://social.venge.io/?profile#' + item.owner_username" target="_blank">
                                      {{item.owner_username}}
                                    </a>
                                  </td>
                                  <td>
                                    <a class="button" :href="'https://social.venge.io/?clans#' + cleanMarkup(item.slug).replaceAll(/\s/g,'')" target="_blank">
                                        <i class="fa fa-users" aria-hidden="true"></i> View Clan
                                    </a>
                                  </td>
                                </tr>
                              </table>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="page == 'Profile'" class="fullscreen fullscreen-darker">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), page = 'Home'">
                    PROFILE
                </h3>

                <form class="action-form" action="javascript:;" :class="{'no-scroll' : tab == 'Inbox'}">

                    <div class="profile-field">
                        <a href="javascript:;" class="pull-right" v-on:click="logout()">
                            Logout <img src="images/icons/Caret-Icon.png" alt="">
                        </a>
                    </div>

                    <div class="tabs">
                        <li v-on:click="tab = 'General';" :class="{'active' : tab == 'General'}" class="button-sound">
                            STATS
                        </li>
                        <li v-on:click="tab = 'Clan', getTableData('clans'), clanDetails();" class="button-sound" :class="{'active' : tab == 'Clan'}">
                            CLAN
                        </li>
                        <li v-on:click="tab = 'Inbox', getInbox(), getFriendList();" class="button-sound" :class="{'active' : tab == 'Inbox'}">
                            INBOX <span v-if="session.inboxNotification > 0" class="notification-badge">{{session.inboxNotification}}</span>
                        </li>
                        <li v-on:click="tab = 'Followings', getTableData('followings');" :class="{'active' : tab == 'Followings'}" class="button-sound">
                            FOLLOWING
                        </li>
                        <li v-on:click="tab = 'Followers', getTableData('followers');" :class="{'active' : tab == 'Followers'}" class="button-sound">
                            FOLLOWERS
                        </li>
                        <li v-on:click="tab = 'Settings', getProfileSettings();" :class="{'active' : tab == 'Settings'}" class="button-sound">
                            SETTINGS
                        </li>
                    </div>

                    <div class="tab" v-if="tab == 'General'">
                        <div class="profile">
                        <div class="profile-header">
                            <div class="profile-info">
                                <div class="profile-info-wrap">
                                    <div class="level">{{profile.level}}<span>LVL</span></div>
                                    <img
                                        v-show="profile.hero"
                                        class="hero-thumbnail-image-profile"
                                        :src="'https://assets.venge.io/' + profile.hero + '-Thumbnail-1.png'"
                                        :alt="profile.hero"
                                        :title="profile.hero"
                                        />
                                    <h1 class="username">
                                        <img
                                        v-show="profile.verified == 1"
                                        class="verified"
                                        src="images/Verified-Icon.png"
                                        />
                                        <span v-if="profile.emoji == 'DollarSign'">🤑</span>
                                        <span v-if="profile.emoji == 'Crazy'">🤪</span>
                                        <span v-if="profile.emoji == 'Dizzy'">😵</span>
                                        <span v-if="profile.emoji == 'Exploding'">🤯</span>
                                        <span v-if="profile.emoji == 'Mask'">😷</span>
                                        <span v-if="profile.emoji == 'Rage'">😡</span>
                                        <span v-if="profile.emoji == 'Smiling'">😊</span>
                                        <span v-if="profile.emoji == 'SunGlass'">ğŸ˜Ž</span>
                                        <span v-if="profile.emoji == 'Thinking'">🤔</span>
                                        <span v-if="profile.emoji == 'Triumph'">😤</span>
                                        <a :href="'https://social.venge.io/#' + cleanMarkup(profile.username)" 
                                            v-html="formatMarkup(profile.username)"
                                        target="_blank">
                                        </a>
                                    </h1>
                                </div>
                                <div class="profile-exp-wrapper">
                                    <div class="profile-exp-bar">
                                        <span :style="{ width: 200 * profile.experience_bar+ 'px' }"></span>
                                    </div>
                                    <p>{{profile.experience}} / {{profile.experience_next}} XP</p>
                                </div>
                            </div>
                            <div class="stat-holder">
                                <!--<div class="stat-card stat-social">
                                    <span class="value">{{profile.following}}</span>
                                    <span class="label">FOLLOWING</span>
                                </div>
                                <div class="stat-card stat-social">
                                    <span class="value">{{profile.followers}}</span>
                                    <span class="label">FOLLOWERS</span>
                                </div>
                                <div class="stat-seperator"></div>-->
                                <div class="stat-card">
                                    <span class="value">{{profile.kdr}}</span>
                                    <span class="label">KDR %</span>
                                </div>
                                <div class="stat-card">
                                    <span class="value">{{profile.deaths}}</span>
                                    <span class="label">DEATHS</span>
                                </div>
                                <div class="stat-card">
                                    <span class="value">{{profile.kills}}</span>
                                    <span class="label">KILLS</span>
                                </div>
                            </div>
                        </div>
                        <div class="profile-content">
                            <ul class="stats-col">
                                <h4>KILLS / DEATHS</h4>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Skull-Icon.png" alt=""> 
                                        KILLS
                                    </span>
                                    <span class="value">{{profile.kills}}</span>
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Death-Icon.png" alt=""> 
                                        DEATHS
                                    </span>
                                    <span class="value">{{profile.deaths}}</span>
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Crosshair-Icon.png" alt=""> 
                                        HEADSHOT
                                    </span>
                                    <span class="value">{{profile.headshots}}</span>
                                </li>
                                <h4>LAST MATCH</h4>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Skull-Icon.png" alt=""> 
                                        LAST MATCH KILLS
                                    </span>
                                    <span class="value">{{profile.last_match_kills}}</span>
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Crosshair-Icon.png" alt=""> 
                                        LAST MATCH HEADSHOTS
                                    </span>
                                    <span class="value">{{profile.last_match_headshots}}</span>
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Crown-Icon.png" alt=""> 
                                        LAST MATCH RANK
                                    </span>
                                    <span class="value">{{profile.last_match_position}}</span>
                                </li>
                            </ul>
                            <ul class="stats-col">
                                <h4>OVERALL</h4>
                                <li>
                                    <span class="label"
                                    ><i class="fa fa-clock-o" aria-hidden="true"></i> GAME
                                    TIME</span
                                    >
                                    <span class="value"
                                    >{{numberFormat(profile.total_game_time, 'time')}}</span
                                    >
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Capture-Icon.png" alt=""> 
                                        GAMES PLAYED
                                    </span>
                                    <span class="value">{{profile.total_games_played}}</span>
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Revenge-Icon.png" alt=""> 
                                        GAMES WON
                                    </span>
                                    <span class="value">{{profile.total_games_won}}</span>
                                </li>
                                <li>
                                    <span class="label">
                                        <img src="images/icons/Tier-3.png" alt=""> 
                                        SCORE
                                    </span>
                                    <span class="value">{{profile.experience}}</span>
                                </li>
                                <h4>BADGES</h4>
                                <li class="badges-area">
                                    <span
                                    v-for="item in profile.badges"
                                    class="hint--bottom hint--rounded badge-icon"
                                    :aria-label="item.description"
                                    >
                                    <img
                                        :src="'images/' + item.icon"
                                        alt="profile-badge"
                                        class="profile-badge"
                                        />
                                    <p>{{item.name}}</p>
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div class="profile-links">
                            <a :href="'https://social.venge.io/#' + cleanMarkup(profile.username)" target="_blank">
                                    <i class="fa fa-external-link" aria-hidden="true"></i>
                                    Social Hub Profile
                                </a>
                        </div>
                        </div>
                    </div>

                    <div class="tab" v-if="tab == 'Clan' && !clan.details">
                        <div class="vertical-tabs-wrap">
                            <div class="vertical-tabs">
                                <li v-on:click="verticalTab = 'General', getTableData('clans');" 
                                    :class="{'active' : verticalTab == 'General'}">
                                    Clan List
                                </li>
                                <li v-on:click="verticalTab = 'Create';" 
                                    :class="{'active' : verticalTab == 'Create'}">
                                    Create Clan
                                </li>
                                <li v-on:click="verticalTab = 'Settings';" 
                                    :class="{'active' : verticalTab == 'Settings'}">
                                    Clan Request
                                </li>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'General'">
                                <div class="input-field">
                                    <p>
                                        Enter Clan Name or Code: 
                                    </p>
                                    <input type="text" v-model="clan.name" 
                                        placeholder="Clan Name or Code" 
                                        v-on:keyup.enter="getTableData('clans', clan.name)">

                                    <button type="button" @click="getTableData('clans', clan.name)">
                                        Search Clan
                                    </button>
                                </div>
                                <hr>
                                <table class="table">
                                    <tr>
                                        <th>Clan Name</th>
                                        <th>Code</th>
                                        <th>Owner</th>
                                        <th>Members</th>
                                        <th>KDR</th>
                                        <th class="pull-right">Actions</th>
                                    </tr>

                                    <tr v-for="(item, key) in table">
                                        <td>{{item.name}}</td>
                                        <td v-html="formatMarkup(item.slug)"></td>
                                        <td>{{item.owner}}</td>
                                        <td>{{item.members}}</td>
                                        <td>{{item.kdr}}</td>
                                        <td>
                                            <button type="button" class="btn-table pull-right" v-bind:id="item.id" @click="joinClan(item.id)">Request to Join</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'Create'">
                                <div class="field-info">
                                    <p>Enter your clan name and clan code to start your clan. Players can join to your clan after you create them.
                                    </p>
                                </div>
                                <hr>
                            <div class="field">
                                    <label for="text">Clan Name</label>
                                    <input type="text" id="clanName" placeholder="Clan Name" v-model="clan.name">
                                </div>
                                <div class="field">
                                    <label for="text">Clan Tag</label>
                                    <input type="text" id="clanTag" placeholder="Clan Tag" v-model="clan.slug">
                                </div>
                                <div class="field with-alt">
                                    <label for="text">Social Link (Discord) <span>Optional</span> </label>
                                    <input type="text" id="clanSocialLink" placeholder="Clan Social Link - Discord" v-model="clan.social_link">
                                </div>
                                <div class="field">
                                    <button type="button" class="btn btn-primary" @click="createClan()">
                                        Create Clan 
                                        <img src="images/icons/Caret-Icon.png" alt="">
                                    </button>
                                </div>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'Settings'">
                                <div class="field-info">
                                    <p>Cancel Request - You can cancel current clan requests with cancel button.</p>
                                </div>
                                <hr>
                                <div class="field">
                                    <button type="button" class="btn btn-cancel" @click="quitClan()">
                                        <img src="images/icons/Close-Icon.png" alt="">
                                        Cancel Requests 
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab" v-if="tab == 'Inbox'">
                        <div class="vertical-tabs-wrap">
                            <div class="vertical-tabs">
                                <li v-on:click="verticalTab = 'General', getInbox()" 
                                    :class="{'active' : verticalTab == 'General'}">
                                    <span class="icon-container">
                                        <i class="fa fa-inbox" aria-hidden="true"></i>
                                    </span>
                                    Inbox
                                </li>
                                <li v-on:click="verticalTab = 'FriendList', getFriendList()" 
                                    :class="{'active' : verticalTab == 'FriendList'}">
                                    <span class="icon-container">
                                        <i class="fa fa-users" aria-hidden="true"></i>
                                    </span>
                                    Friend List
                                </li>
                                <li v-on:click="getMessages(false);" 
                                    :class="{'active' : verticalTab == 'Message'}">
                                    <span class="icon-container">
                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                    </span>
                                    Send
                                </li>
                            </div>

                            <div class="vertical-tabs-content tab-content-scroll" v-if="verticalTab == 'General'">

                                <!--<div class="field field-checkbox with-border">
                                    <label for="disableMessages">Disable All Messages</label>
                                    <div class="field-toggle-wrapper">
                                        <input class="toggle" type="checkbox" id="disableMessages"
                                               v-model="session.message.disabled">
                                        <label for="disableMessages"></label>
                                    </div>
                                </div>
                                <hr />-->
                                <table class="table table-clickable">
                                    <tr>
                                        <th>From</th>
                                        <th>Message</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>

                                    <tr v-for="(item, key) in session.inbox">
                                        <td>{{item.sender}}</td>
                                        <td>{{item.message.substring(0, 50)}}...</td>
                                        <td>{{item.time_ago}}</td>
                                        <td>
                                            <button type="button" class="btn-table hint--right" @click="getMessages(item)" aria-label="Reply Message">
                                                <i class="fa fa-reply" aria-hidden="true"></i>
                                            </button>

                                            <!--<button type="button" class="btn-table hint--top" @click="setBlockedUsers(item)" :aria-label="(hasBlocked(item.sender) ? 'Unblock User' : 'Block User')">
                                                <i class="fa" :class="(hasBlocked(item.sender) ? 'fa-user-plus' : 'fa-user-times')" aria-hidden="true" ></i>
                                            </button>-->
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div class="vertical-tabs-content tab-content-scroll" v-if="verticalTab == 'FriendList'">
                                <table class="table table-clickable">
                                    <tr>
                                        <th>Active</th>
                                        <th>In Game</th>
                                        <th>Username</th>
                                        <th>Last Login</th>
                                        <th>Actions</th>
                                    </tr>

                                    <tr v-on:click="getMessages(item), session.message.username = item.username" v-for="(item, key) in friends.list">
                                        <td><span class="status center-space" :class="{'online' : item.active}"></span></td>
                                        <td><span class="status center-space" :class="{'online' : item.inGame}"></span></td> 
                                        <td>{{item.username}}</td>
                                        <td>{{item.lastLogin}}</td>
                                        <td>
                                            <button type="button" class="btn-table">
                                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            
                            <div class="vertical-tabs-content" v-if="verticalTab == 'Message'">

                                 <!--<div class="info">
                                    <p>
                                        <i class="fa fa-info-circle" aria-hidden="true"></i> 
                                        Start your conversation with someone by typing their username below.</p>
                                </div>-->

                                <div class="message-head-wrapper">
                                    <div id="message-send-to">
                                        <span>To: </span>
                                        <input id="message-to-input" :class="{'selected' : session.message.isSelected}" v-on:keyup.enter="selectSearchResult(session.message.username)" v-on:keydown="searchFriends(session.message.username)" type="text" v-model="session.message.username" placeholder="Username">
                                        <span class="suggestions">
                                            <span v-on:click="selectSearchResult(username)" v-for="username in session.message.searchResults">
                                                <i class="fa fa-user" aria-hidden="true"></i>
                                                {{username}}
                                            </span>
                                        </span>
                                    </div>

                                    <div v-if="session.message.username" class="field field-checkbox">
                                        <label for="disableMessages">Disable All Messages From That User</label>
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" type="checkbox" id="disableMessages"
                                                   v-on:change="setBlockedUsers(session.message.username)"
                                                   v-model="session.message.isBlockedUser">
                                            <label for="disableMessages"></label>
                                        </div>
                                    </div>
                                </div>
                               

                                <div id="message-inbox">
                                    <div class="message" v-for="message in session.message.pastMessages">
                                        <a target="_blank" :href="'https://social.venge.io/#' + cleanMarkup(message.sender)" class="username">{{cleanMarkup(message.sender)}}</a>
                                        <span class="content">{{message.message}}</span>
                                    </div>
                                </div>

                                <input id="message-box" v-on:keyup.enter="sendMessage()" type="text" v-model="session.message.message" placeholder="Enter your message and press [ENTER] to send">
                            </div>
                        </div>
                    </div>

                    <div class="tab" v-if="tab == 'Clan' && clan.details">
                        <div class="vertical-tabs-wrap">
                            <div class="vertical-tabs">
                                <li v-on:click="verticalTab = 'General'" 
                                    :class="{'active' : verticalTab == 'General'}">
                                    <span class="icon-container">
                                        <i class="fa fa-home" aria-hidden="true"></i>
                                    </span>
                                    Home
                                </li>
                                <li v-on:click="verticalTab = 'Matches', clanMatches();" 
                                    :class="{'active' : verticalTab == 'Matches'}">
                                    <span class="icon-container">
                                        <i class="fa fa-crosshairs" aria-hidden="true"></i>
                                    </span>
                                    Matches
                                </li>
                                <li v-on:click="verticalTab = 'Bank', clanBank();" 
                                    :class="{'active' : verticalTab == 'Bank'}">
                                    <span class="icon-container">
                                        <i class="fa fa-university" aria-hidden="true"></i>
                                    </span>
                                    Bank
                                </li>
                                <li v-on:click="verticalTab = 'Members', clanMembers();" 
                                    :class="{'active' : verticalTab == 'Members'}">
                                    <span class="icon-container">
                                        <i class="fa fa-users" aria-hidden="true"></i>
                                    </span>
                                    Members
                                </li>
                                <li v-on:click="verticalTab = 'Settings', clanMembers();" 
                                    :class="{'active' : verticalTab == 'Settings'}">
                                    <span class="icon-container">
                                        <i class="fa fa fa-cog" aria-hidden="true"></i>
                                    </span>
                                    Settings
                                </li>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'General'">
                            <div class="clan-home">
                                <div class="clan-header">
                                        <div class="clan-info">
                                            <div class="clan-level">
                                                <img :src="'images/icons/Clan-Level-' + clan.details.level + '.png'" v-bind:alt="clan.details.level" accept="image/*">
                                                <p>
                                                    {{clan.details.level}} 
                                                    <span>LVL</span>
                                                </p>
                                            </div>

                                            <div class="clan-status">
                                                <div class="clan-name">
                                                    [{{clan.details.slug}}] - {{clan.details.clan_name}}
                                                </div>
                                                <div class="clan-owner">
                                                    <img src="images/icons/People-Icon.png" alt="">
                                                    {{clan.details.roles[0].username}} {{clan.details.roles[0].role}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clan-amount">
                                            <div class="amount">
                                                <img src="images/icons/Coin-Icon.png" alt="">
                                                <p>Bank : {{formatNumber(clan.details.bank)}} VG</p>
                                            </div>
                                            <div class="deposit">
                                                <div class="deposit-field">
                                                    <button type="button" class="btn-clan" @click="verticalTab = 'Bank', clanBank();">Deposit</button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                </div>
                                <hr>
                                <div class="clan-content">
                                    <chat-module :room-id="clan.details.clan_chat"></chat-module>
                                    <div class="clan-details">
                                        <ul>
                                            <li>{{clan.details.level}}  <span>LEVEL</span></li>
                                            <li>{{formatNumber(clan.details.experience)}} <span>EXP</span></li>
                                            <li>{{clan.details.members}} <span>MEMBERS</span></li>
                                            <li>{{formatNumber(clan.details.kills)}} <span>KILLS</span></li>
                                            <li>{{clan.details.kdr}} <span>KDR %</span></li>
                                        </ul>
                                            
                                            <hr>

                                        <div class="clan-social">
                                            <a :href="clan.details.social_link">
                                                    <img src="images/icons/Discord-Icon.png" alt="">
                                                    Join {{clan.details.slug}} <br> Community
                                                </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'Matches'">
                                <div class="clan-header">
                                    <div class="clan-info">
                                        <div class="clan-level">
                                            <img :src="'images/icons/Clan-Level-' + clan.details.level + '.png'" v-bind:alt="clan.details.level" accept="image/*">
                                            <p>
                                                {{clan.details.level}} 
                                                <span>LVL</span>
                                            </p>
                                        </div>

                                        <div class="clan-status">
                                            <div class="clan-name">
                                                [{{clan.details.slug}}] - {{clan.details.clan_name}}
                                            </div>
                                            <div class="clan-owner">
                                                <img src="images/icons/People-Icon.png" alt="">
                                                {{clan.details.roles[0].username}} {{clan.details.roles[0].role}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clan-amount">
                                        <div class="amount">
                                            <img src="images/icons/Coin-Icon.png" alt="">
                                            <p>Bank : {{formatNumber(clan.details.bank)}} VG</p>
                                        </div>
                                        <div class="deposit">
                                            <div class="deposit-field">
                                                <button type="button" class="btn-clan" @click="verticalTab = 'Bank', clanBank();">Deposit</button>
                                            </div>
                                            
                                        </div>
                                    </div>
                            </div>
                            <hr>
                            <table class="table">
                                    <tr>
                                        <th>Username</th>
                                        <th>Experience</th>
                                        <th>Kills</th>
                                        <th>Deaths</th>
                                        <th>Date</th>
                                        <th>Rank</th>
                                    </tr>

                                    <tr v-for="(item, key) in table">
                                        <td>
                                            <a :href="'https://social.venge.io/#' + formatMarkup(item.username)" target="_blank">
                                                {{formatMarkup(item.username)}}
                                            </a>
                                        </td>
                                        <td>
                                            {{item.experience}}
                                        </td>
                                        <td>
                                            {{item.kills}}
                                        </td>
                                        <td>
                                            {{item.deaths}}
                                        </td>
                                        <td>
                                            {{item.date}}
                                        </td>
                                        <td>
                                            {{item.rank}}
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'Bank'">
                                <div class="clan-header">
                                        <div class="clan-info">
                                            <div class="clan-level">
                                                <img :src="'images/icons/Clan-Level-' + clan.details.level + '.png'" v-bind:alt="clan.details.level" accept="image/*">
                                                <p>
                                                    {{clan.details.level}} 
                                                    <span>LVL</span>
                                                </p>
                                            </div>

                                            <div class="clan-status">
                                                <div class="clan-name">
                                                    [{{clan.details.slug}}] - {{clan.details.clan_name}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clan-owner">
                                            <img src="images/icons/People-Icon.png" alt="">
                                            {{clan.details.roles[0].username}} {{clan.details.roles[0].role}}
                                        </div>
                                </div>
                                <hr>
                                <div class="bank-content">
                                    <div class="clan-bank-wrapper">
                                        <div class="clan-amount">
                                            <div class="amount">
                                                <img src="images/icons/Coin-Icon.png" alt="">
                                                <p>Bank : {{formatNumber(clan.bankBalance.bank)}} VG</p>
                                                <img class="space" src="images/icons/Coin-Icon.png" alt="">
                                                <p>Your Balance : {{clan.bankCoin.balance}}</p>
                                            </div>
                                            <div class="deposit">
                                                <div class="deposit-field">
                                                    <input type="text" placeholder="Amount VG" v-model="clan.depositCoin" 
                                                    v-on:keyup.enter="depositCoin(clan.depositCoin)">
                                                    <button type="button" class="btn btn-primary" @click="depositCoin(clan.depositCoin)">Deposit</button>
                                                </div>
                                                <p>WARNING : You cannot withdraw from the clan bank! (Temporarily)</p>
                                            </div>
                                        </div>

                                        <div class="top-donator">
                                            <div class="top-donator-head">
                                            <img src="images/icons/Crown-Icon.png" alt="">
                                            <h2> Top Donators</h2>
                                            </div>
                                            <ul>
                                            <li v-for="item in clan.bankBalance.top_donators">
                                                <img src="images/icons/Caret-Icon.png">
                                                {{item.username + ' - ' + formatNumber(item.amount) + ' VG'}}
                                            </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="clan-levels">
                                        <h2>Clan Level System</h2>
                                        <ul>
                                            <li v-for="(item, key) in clan.levels.list">
                                                <div class="icons" :style="'background:' + item.color" :class="item.class">
                                                    <img v-if="item.thumbnail" :class="item.class" :src="'images/icons/' + item.thumbnail"  :alt="item.name">
                                                    <img class="icon" src="images/icons/Jump-Icon.png" alt="">
                                                    <p>{{item.name}}</p>
                                                </div>
                                                <div class="level-detail">
                                                    <p>{{item.cost}}</p>
                                                    <p>{{item.invite}}</p>
                                                    <p v-if="item.extra">{{item.extra}}</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'Members'">
                                <div class="clan-header">
                                    <div class="clan-info">
                                        <div class="clan-level">
                                            <img :src="'images/icons/Clan-Level-' + clan.details.level + '.png'" v-bind:alt="clan.details.level" accept="image/*">
                                            <p>
                                                {{clan.details.level}} 
                                                <span>LVL</span>
                                            </p>
                                        </div>

                                        <div class="clan-status">
                                            <div class="clan-name">
                                                [{{clan.details.slug}}] - {{clan.details.clan_name}}
                                            </div>
                                            <div class="clan-owner">
                                                <img src="images/icons/People-Icon.png" alt="">
                                                {{clan.details.roles[0].username}} {{clan.details.roles[0].role}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clan-amount">
                                        <div class="amount">
                                            <img src="images/icons/Coin-Icon.png" alt="">
                                            <p>Bank : {{formatNumber(clan.details.bank)}} VG</p>
                                        </div>
                                        <div class="deposit">
                                            <div class="deposit-field">
                                                <button type="button" class="btn-clan" @click="verticalTab = 'Bank', clanBank();">Deposit</button>
                                            </div>
                                            
                                        </div>
                                    </div>
                            </div>
                            <hr>
                            <h2>Members</h2>
                                <table class="table">
                                    <tr>
                                        <th>Username</th>
                                        <th>Level</th>
                                        <th>Kills</th>
                                        <th>Deaths</th>
                                        <th>Kdr</th>
                                        <th>Last Login</th>
                                        <th v-if="profile.is_clan_owner || clan.member_access" class="pull-right">Action</th>
                                    </tr>

                                    <tr v-for="(item, key) in table">
                                        <td>
                                            <a :href="'https://social.venge.io/#' + formatMarkup(item.username)" target="_blank">
                                                {{formatMarkup(item.username)}}
                                            </a>
                                        </td>
                                        <td>
                                            {{item.level}}
                                        </td>
                                        <td>
                                            {{formatNumber(item.kills)}}
                                        </td>
                                        <td>
                                            {{formatNumber(item.deaths)}}
                                        </td>
                                        <td>
                                            {{item.kdr}}
                                        </td>
                                        <td>
                                            {{item.last_login}}
                                        </td>
                                        <td v-if="profile.is_clan_owner || clan.member_access" class="pull-right">
                                            <button type="button" @click="clanMemberKick(item.username)" class="btn-table">Kick</button>
                                        </td>
                                    </tr>
                                </table>

                                <div v-if="profile.is_clan_owner || clan.member_access" class="pending-request">
                                    <h2>Pending Request</h2>
                                    <table class="table">
                                        <tr>
                                            <th>Username</th>
                                            <th>Level</th>
                                            <th>Kdr</th>
                                            <th class="pull-right">Action</th>
                                        </tr>

                                        <tr v-for="(item, key) in clan.pending_request">
                                            <td>
                                                <a :href="'https://social.venge.io/#' + formatMarkup(item.username)" target="_blank">
                                                    {{formatMarkup(item.username)}}
                                                </a>
                                            </td>
                                            <td>
                                                {{item.level}}
                                            </td>
                                            <td>
                                                {{item.kdr}}
                                            </td>
                                            <td class="pull-right">
                                                <button type="button" 
                                                        class="btn btn-cancel" 
                                                        @click="clanMemberKick(item.username)">
                                                    Decline
                                                </button>
                                                <button type="button" 
                                                        class="btn btn-primary" 
                                                        @click="clanMemberApprove(item.username)">
                                                    Approve
                                                </button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                
                            </div>

                            <div class="vertical-tabs-content" v-if="verticalTab == 'Settings'">
                                <div class="clan-header">
                                    <div class="clan-info">
                                        <div class="clan-level">
                                            <img :src="'images/icons/Clan-Level-' + clan.details.level + '.png'" v-bind:alt="clan.details.level" accept="image/*">
                                            <p>
                                                {{clan.details.level}} 
                                                <span>LVL</span>
                                            </p>
                                        </div>

                                        <div class="clan-status">
                                            <div class="clan-name">
                                                [{{clan.details.slug}}] - {{clan.details.clan_name}}
                                            </div>
                                            <div class="clan-owner">
                                                <img src="images/icons/People-Icon.png" alt="">
                                                {{clan.details.roles[0].username}} {{clan.details.roles[0].role}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clan-amount">
                                        <div class="amount">
                                            <img src="images/icons/Coin-Icon.png" alt="">
                                            <p>Bank : {{formatNumber(clan.details.bank)}} VG</p>
                                        </div>
                                        <div class="deposit">
                                            <div class="deposit-field">
                                                <button type="button" class="btn-clan" @click="verticalTab = 'Bank', clanBank();">Deposit</button>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                                <hr>

                                <div v-if="profile.is_clan_owner" class="admin-setting">
                                    <div class="field-wrap">
                                        <div class="field">
                                            <label for="welcome_message">Welcome Message</label>
                                            <input type="text" id="welcome_message" placeholder="Enter Message" v-model="clan.welcome_message">
                                        </div>
                                        <div class="field">
                                            <label for="social_link">Discord Invite Link</label>
                                            <input type="text" id="social_link" placeholder="Discord Invite Link" v-model="clan.social_link">
                                        </div>
                                        <button type="button" class="btn btn-primary" @click="updateClanSettings()">
                                            Save Changes 
                                            <img src="images/icons/Caret-Icon.png" alt="">
                                        </button>
                                    </div>
                                    <hr>
                                    <div class="clan-roles">
                                        <div class="clan-member-roles">
                                            <h2>Roles</h2>
                                            <table class="table">
                                                <tr>
                                                    <th>Username</th>
                                                    <th class="pull-right">Actions</th>
                                                </tr>

                                                <tr v-for="(item, key) in table">
                                                    <td>
                                                        <a :href="'https://social.venge.io/#' + formatMarkup(item.username)" target="_blank">
                                                            {{formatMarkup(item.username)}}
                                                        </a>
                                                    </td>
                                                    <td class="pull-right">
                                                        <button type="button" class="btn-table" @click="getClanRoles(item.username)">
                                                            Roles
                                                        </button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="edit-role">
                                            <h2>User Role Details</h2>
                                            <div class="role-form">
                                                <div class="field">
                                                    <label for="username">Username</label>
                                                    <input type="text" id="username" placeholder="Select Member" class="readdonly" v-model="clan.roles.username" readonly>
                                                </div>
                                                <div class="field" v-if="clan.roles.role">
                                                    <label for="role_title">Username</label>
                                                    <input type="text" id="role_title" placeholder="Role Title" v-model="clan.roles.role">
                                                </div>

                                                <div class="field-wrap">
                                                    <div class="field">
                                                        <label for="role_title">Can Accept Request :</label>
                                                        <input
                                                            type="checkbox"
                                                            v-model="clan.roles.can_accept_requests == 1 ? true : false"
                                                            v-on:input="clan.can_accept_requests = $event.target.checked ? true : false"
                                                        />
                                                    </div>
                                                    <div class="field">
                                                        <label for="role_title">Can Manage Chat :</label>
                                                        <input
                                                            type="checkbox"
                                                            v-model="clan.roles.can_manage_chat == 1 ? true : false"
                                                            v-on:input="clan.can_manage_chat = $event.target.checked ? true : false"
                                                        />
                                                    </div>
                                                </div>

                                                <div class="field right-align">
                                                    <button type="button" class="btn btn-cancel" @click="removeClanRole(clan.roles.username)">Remove Role</button>
                                                    <button type="button" class="btn btn-primary" @click="updateClanRole()">Update Role</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="field-wrap">
                                        <div class="field-info half">
                                            <h2>Delete Clan</h2>
                                            <p>If you want to delete clan, click "Delete Clan" button. <br>
                                            WARNING : This action cannot be undone.
                                            </p>
                                        </div>
                                    
                                        <div class="field zero-space">
                                            <button type="button" class="btn btn-cancel mini-style" @click="deleteClan()">
                                                Delete Clan
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <div v-if="!profile.is_clan_owner" class="member-settings">
                                    <div class="field-wrap">
                                        <div class="field-info half">
                                            <h2>Leave Clan</h2>
                                            <p>Leaving a clan is irreversible. Are you sure want to leave?</p>
                                        </div>
                                    
                                        <div class="field zero-space">
                                            <button type="button" class="btn btn-cancel mini-style" @click="leaveClan()">
                                                Leave Clan
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                

                            </div>
                            
                        </div>
                    </div>

                    <div class="tab" v-if="tab == 'Followers'">
                        <table class="table">
                            <tr>
                                <th width="30">#</th>
                                <th >Username</th>
                                <th class="pull-right">Actions</th>
                            </tr>

                            <tr v-for="(item, key) in table">
                                <td>{{key + 1}}</td>
                                <td>
                                    <a :href="'https://social.venge.io/#' + formatMarkup(item.username)" target="_blank">
                                        {{formatMarkup(item.username)}}
                                    </a>
                                </td>
                                <td>
                                    <button type="button" class="btn-table" @click="addFriend(item.username)">
                                        <i class="fa fa-user-plus" aria-hidden="true"></i>
                                        Follow
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="tab" v-if="tab == 'Followings'">
                        <div class="input-field">
                            <p>
                                Search and add friend : 
                            </p>
                            <input type="text" v-model="form.username" placeholder="Username" v-on:keyup.enter="addFriend(form.username)">
                            <button type="button" @click="addFriend(form.username)">
                                <i class="fa fa-user-plus" aria-hidden="true"></i>
                                Add User
                            </button>
                        </div>
                        <hr>
                        <table class="table">
                            <tr>
                                <th width="30">#</th>
                                <th>Username</th>
                                <th>Actions</th>
                            </tr>

                            <tr v-for="(item, key) in table">
                                <td>{{key + 1}}</td>
                                <td>
                                    <a :href="'https://social.venge.io/#' + formatMarkup(item.username)" target="_blank">
                                        {{formatMarkup(item.username)}}
                                    </a>
                                </td>
                                <td>
                                    <button type="button" class="btn-table" @click="removeFriend(item.username)">
                                        <i class="fa fa-user-times" aria-hidden="true"></i>
                                        Unfollow
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="tab" v-if="tab == 'Settings'">

                        <div class="field">
                            <label for="text">Select Emoji</label>
                            <div class="field-btn-wrap">
                                <select name="emoji" id="emoji" v-model="emoji.selected" v-on:change="setEmoji()">
                                    <option :selected="item == emoji.selected" 
                                            v-for="item in emoji.list" 
                                            :value="item">
                                            {{item}}
                                    </option>
                                </select>
                                <button type="button" class="btn btn-secondary" @click="setEmoji()">
                                    Select 
                                    <img src="images/icons/Caret-Icon.png" alt="">
                                </button>
                            </div>
                        </div>

                        <div class="field">
                            <label for="text">Kill Message</label>
                            <div class="field-btn-wrap">
                                <select id="killMessage" placeholder="Kill Message" v-model="killMessage.message" v-on:change="setKillMessage()">
                                    <option :selected="item == killMessage.message" 
                                            v-for="item in killMessage.list" 
                                            :value="item">
                                            {{item}}
                                    </option>
                                </select>
                                <button type="button" class="btn btn-secondary" @click="setKillMessage()">
                                    Update 
                                    <img src="images/icons/Caret-Icon.png" alt="">
                                </button>
                            </div>
                        </div>

                        <hr>
                        <div class="field-wrap">
                            <div class="field">
                                <label for="password">New Password</label>
                                <input type="password" id="password" placeholder="Password" v-model="form.new_password">
                            </div>
                            <div class="field">
                                <label for="text">E-mail</label>
                                <input type="text" id="email" placeholder="E-mail" v-model="form.email">
                            </div>
                        </div>

                        <div class="field with-input-text">
                            <label for="text">Twitch Username</label>
                            <div class="with-text-wrapper">
                                <input type="text" id="twitchUsername" placeholder="Venge" v-model="form.twitch">
                                <span class="input-text">https://twitch.tv/</span>
                            </div>
                           
                        </div>

                        <div class="field button">
                            <button type="button" class="btn btn-primary" @click="setProfileSettings()">Update</button>
                        </div>
                    </div>

                </form>
            </div>

            <div id="settings" v-if="page == 'Settings'" class="fullscreen">
                <h3>
                    <img class="back-button" src="images/Back-Icon.png" v-on:click="playWhooshSound(), goBackFromSettings()">
                    SETTINGS
                </h3>

                <div class="tab-container">
                    <div class="tab-sidebar">
                        <li v-on:mouseover="playHoverSound()" 
                            v-for="item in settingsTabs" 
                            :class="{'active' : tab == item.tab}" 
                            v-on:click="tab = item.tab, item.tab == 'Controls' ? loadKeyboardBindings() : ''">
                                <span class="icon-container">
                                    <i class="fa" :class="item.icon" aria-hidden="true"></i>
                                </span> 
                                {{item.name}}
                        </li>
                    </div>
                    <div class="tab-content tab-scroll settings-content ">
                        <form >
                            <div class="content" v-if="tab == 'General'">
                                <div class="field">
                                    <label>Language - {{currentLanguage}}</label>
                                    <select v-model="currentLanguage" v-on:change="onLanguageChange(currentLanguage)">
                                        <option v-for="item in languages.list" 
                                                :selected="item.code == currentLanguage"
                                                :value="item.code">
                                                {{item.text}}
                                        </option>
                                    </select>
                                </div>
                                
                                <br/>
                                <div class="field">
                                    <label for="weaponBobbing">Weapon Bobbing</label>

                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.weaponBobbing}}
                                        </div>
                                        
                                        <input id="weaponBobbing" v-on:change="onSettingsChange()" 
                                               type="range" min="0" max="100" 
                                               v-model="settings.weaponBobbing">
                                    </div>
                                </div>
        
                                <div class="field">
                                    <label>Weapon Swaying</label>
                                    
                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.weaponLeaning}}
                                        </div>
                                        
                                        <input v-on:change="onSettingsChange()" 
                                               type="range" min="0" max="100" 
                                               v-model="settings.weaponLeaning">
                                    </div>
                                </div>

                                <div class="field-wrap">
                                    <div class="field field-checkbox">
                                        <label for="censorUsername">Censor Usernames</label>
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                                   type="checkbox" id="censorUsername"
                                                   v-model="settings.hideUsernames">
                                            <label for="censorUsername"></label>
                                        </div>
                                    </div>

                                    <div class="field field-checkbox">
                                        <label for="hideCharms">Hide Charms</label>
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                                   type="checkbox" id="hideCharms"
                                                   v-model="settings.hideCharms">
                                            <label for="hideCharms"></label>
                                        </div>
                                    </div>
            
                                    <div class="field field-checkbox">
                                        <label for="hideChatMessages">Hide Chat Messages</label>
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="hideChatMessages"
                                            v-model="settings.hideChat">
                                            <label for="hideChatMessages"></label>
                                        </div>
                                    </div>
                                </div>

                                <div class="field-wrap">
                                    <div class="field field-checkbox">
                                        <label for="hideWeaponHands">Hide Weapon & Hands</label>
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="hideWeaponHands"
                                            v-model="settings.hideArms">
                                            <label for="hideWeaponHands"></label>
                                        </div>
                                    </div>

                                    <div class="field field-checkbox">
                                        <label for="hideUIElements">Hide UI Elements For Gameplay</label>
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="hideUIElements"
                                            v-model="settings.hideUIElements">
                                            <label for="hideUIElements"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
        
                            <div class="content" v-if="tab == 'Graphics'">
                                <div class="field">
                                    <label class="title" for="fov">Field of View (FOV)</label>

                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.fov}}
                                        </div>
                                        
                                        <input id="fov" v-on:change="onSettingsChange()" 
                                               type="range" min="10" max="120"
                                               v-model="settings.fov">
                                    </div>
                                </div>

                                <div class="field">
                                    <label class="title" for="resolution">Graphic Quality (Resolution)</label>

                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.quality}}
                                        </div>
                                        
                                        <input id="resolution" v-on:change="onSettingsChange()" 
                                               type="range" min="20" max="100"
                                               v-model="settings.quality">
                                    </div>
                                </div>
                                <br/>
                                
                                <div class="field-wrap">
                                    <div class="field field-checkbox">
                                        <label for="fpsCounter"> FPS & Ping Counter</label>
    
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="fpsCounter"
                                            v-model="settings.fpsCounter">
                                            <label for="fpsCounter"></label>
                                        </div>
                                    </div>
            
                                    <div class="field field-checkbox">
                                        <label for="disableSpecialEffects">Disable Special Effects</label>
    
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="disableSpecialEffects"
                                            v-model="settings.disableSpecialEffects">
                                            <label for="disableSpecialEffects"></label>
                                        </div>
                                    </div>
            
                                    <div class="field field-checkbox">
                                        <label for="disableShadows">Disable Shadows</label>
    
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="disableShadows"
                                            v-model="settings.disableShadows">
                                            <label for="disableShadows"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
        
                            <div class="content" v-if="tab == 'Controls'">
                                <div class="field">
                                    <label>Aim Down Sight Sensivity</label>
                                
                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.adsSensivity}}
                                        </div>
                                        
                                        <input v-on:change="onSettingsChange()" 
                                           type="range" min="0" max="200" 
                                           v-model="settings.adsSensivity">
                                    </div>
                                </div>
        
                                <div class="field">
                                    <label>Mouse Sensivity</label>

                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.sensivity}}
                                        </div>
                                        
                                        <input v-on:change="onSettingsChange()" 
                                           type="range" min="0" max="200" 
                                           v-model="settings.sensivity">
                                    </div>
                                </div>
                                

                                <div class="field-wrap">
                                    <div class="field field-checkbox">
                                        <label for="invertMouse">Invert Mouse (Vertical Axis)</label>
    
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="invertMouse"
                                            v-model="settings.invertMouse">
                                            <label for="invertMouse"></label>
                                        </div>
                                    </div>
                                </div>

                                <br/>
        
                                <table class="table">
                                    <tr>
                                        <th>Function</th>
                                        <th>Key</th>
                                        <th>Action</th>
                                    </tr>
        
                                    <tr v-for="item in keyboardConfiguration">
                                        <td><span v-if="!item.waiting">{{item.function}}</span>{{item.waiting ? 'PRESS ANY KEY...' : ''}}</td>
                                        <td><p v-on:click="updateKeyboardBind(item)" class="keyboard-key">{{item.key}}</p></td>
                                        <td>
                                            <button v-on:click="updateKeyboardBind(item)" class="btn-table" type="button">Update</button>
                                            <button v-on:click="resetKeyboardBind(item)" class="btn-table" type="button">Reset</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
        
                            <div class="content" v-if="tab == 'Audio'">
                                <div class="field">
                                    <label>Audio</label>

                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.volume}}
                                        </div>
                                        
                                        <input v-on:change="onSettingsChange()" 
                                           type="range" min="0" max="200" 
                                           v-model="settings.volume">
                                    </div>
                                </div>
                            </div>
        
                            <div class="content" v-if="tab == 'Customs'">
                                <div class="field field-info">
                                    You can download different type of crosshairs from Kenney's asset pack, here is the link : 
                                    <a target="_blank" href="https://www.kenney.nl/assets/crosshair-pack">https://www.kenney.nl/assets/crosshair-pack</a>
                                </div>
                                <div class="field field-upload">
                                    <label>
                                        Custom Crosshair Image (.png)
                                        <input v-on:change="fileUpload($event.target, 'Crosshair_Image', 'default')" type="file">
                                    </label>
                                    <div class="field-thumbnail">
                                        <img :src="crosshair.default ? crosshair.default : 'images/Crosshair.png'" accept="image/*">
                                        <button type="button" v-on:click="clearUpload('Crosshair_Image', 'default')" class="pull-right">Reset</button>
                                    </div>
                                </div>
        
                                <div class="field field-upload">
                                    <label>
                                        Custom Sniper Scope Image (.png)
                                        <input v-on:change="fileUpload($event.target, 'CustomScope', 'sniper')" type="file">
                                    </label>
                                    <div class="field-thumbnail">
                                        <img :src="crosshair.sniper ? crosshair.sniper : 'images/Scope_Texture.png'">
                                        <button type="button" v-on:click="clearUpload('CustomScope', 'sniper')" class="pull-right">Reset</button>
                                    </div>
                                </div>
        
                                <div class="field">
                                    <label> Crosshair Size </label>

                                    <div class="input-slider-wrapper">
                                        <div class="input-slider-text">
                                            {{settings.crosshairScale}}
                                        </div>
                                        
                                        <input v-on:change="onSettingsChange()" 
                                           type="range" min="60" max="100" 
                                           v-model="settings.crosshairScale">
                                    </div>
                                </div>
                                
                                <div class="field-wrap">
                                    <div class="field field-checkbox">
                                        <label for="hideCrosshair">Hide Crosshair</label>
    
                                        <div class="field-toggle-wrapper">
                                            <input class="toggle" v-on:change="onSettingsChange()" 
                                            type="checkbox" id="hideCrosshair"
                                            v-model="settings.hideCrosshair">
                                            <label for="hideCrosshair"></label>
                                        </div>
                                    </div>
                                </div>
                               
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div v-if="isMatchmaking" id="matchmaking" class="shadow">
                <div class="popup matchmaking-popup">
                    <div class="popup-title">
                        Please wait...
                        <div class="popup-close" v-on:click="stopMatchmaking()"></div>
                    </div>
                    <div class="matchmaking-players">
                        <div class="loader loader-center"></div>
                        <div class="text">Match found, connecting...</div>
                    </div>
                    <div class="matchmaking-bottom animated-gradient">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="portrait-control">
        <div class="logo-wrap">
            <a href="/">
                <img src="images/Logo.png">
            </a>
        </div>
        <p>Please turn your device</p>
    </div>
    
    <script src="__modules__.js"></script>
    <script src="__start__.js?v=1.0.0"></script>
    <script src="__loading__.js?v=2.0.2"></script>

    <div id="preroll"></div>

    <div id="about" style="display: none;">
        <p>Venge.io is an online shooter where you will be playing against real players from all around the world in an arena. There are several weapons to choose from such as Scar, Shotgun, Tec-9 and even a Sniper rifle!</p>

        <p>You must find the green areas on the map and capture that area before your opponents do. By capturing the area you will receive special skill cards that you can use, to improve your equipment and make you stronger.</p>

        <p>Play different heroes, with different weapons! Create your own games, or join any community made game instantly!</p>

        <a href="https://venge.io/tos.txt" target="_blank">Read TOS</a>
        <a href="https://social.venge.io/client.html" target="_blank">Download Windows Client</a>
    </div>

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56170709-45"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-56170709-45');
    </script>

    <script type="text/javascript" src="js/MessagePack.js"></script>
    <script type="text/javascript" src="js/friends.js?v=1.1"></script>
    <script type="text/javascript" src="js/app.js?v=1.99"></script>
    <script type="text/javascript" src="js/chat.js"></script>

    <!--
    <script type="text/javascript" src="js/BatchManager.js"></script>
    <script type="text/javascript" src="js/MapManager.js"></script>
    <script type="text/javascript" src="js/MapLoader.js"></script>
    -->
    
</body>
</html>