keenangun.com
unknown
plain_text
3 years ago
235 kB
4
Indexable
<!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>Editor is loading...