Website's Game source code

2019年11月12日 阅读数:682
这篇文章主要向大家介绍Website's Game source code,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

A Darkroom by doublespeakgames

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/CreativeWork">
<head>
    <meta charset="UTF-8"/>
    <!--  
        A Dark Room (v1.4)
        ==================
        
        A minimalist text adventure by Michael Townsend and all his friends.
        Inspired by Candy Box (http://candies.aniwey.net/)
        Contribute on GitHub! (https://github.com/doublespeakgames/adarkroom/)
    -->
    <title>A Dark Room</title>
    <meta itemprop="description" name="description" property="og:description" content="A minimalist text adventure">
    <meta itemprop="image" property="og:image" content="img/adr.png" />
    <meta itemprop="name" property="og:title" content="A Dark Room" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="image_src" href="img/adr.png" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://www.dropbox.com/static/api/dropbox-datastores-1.1-latest.js" type="text/javascript"></script>
    <script>
        if(!window.jQuery) {
            document.write('<script src="lib/jquery.min.js"><\/script>')
        }
    </script>
    <script src="lib/jquery.color-2.1.2.min.js"></script>
    <script src="lib/jquery.event.move.js"></script>
    <script src="lib/jquery.event.swipe.js"></script>
    <script src="lib/base64.js"></script>
    <script src="lib/translate.js"></script>
    
    <script src="lang/langs.js"></script>
    
    <script>
        // try to read "lang" param's from url
        var lang = decodeURIComponent((new RegExp('[?|&]lang=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
        // if no language requested, try to read it from local storage
        if(!lang){
            try {
                lang = localStorage.lang;
            } catch(e) {}
        }
        // if a language different than english requested, load all translations
        if(lang && lang != 'en'){
            document.write('<script src="lang/'+lang+'/strings.js"><\/script>');
            document.write('<link rel="stylesheet" type="text/css" href="lang/'+lang+'/main.css" \/>');
        }
    </script>
    
    <script src="script/Button.js"></script>
    <script src="script/engine.js"></script>
    <script src="script/state_manager.js"></script>
    <script src="script/header.js"></script>
    <script src="script/notifications.js"></script>
    <script src="script/events.js"></script>
    <script src="script/dropbox.js"></script>
    <script src="script/room.js"></script>
    <script src="script/outside.js"></script>
    <script src="script/world.js"></script>
    <script src="script/path.js"></script>
    <script src="script/ship.js"></script>
    <script src="script/space.js"></script>
    <script src="script/prestige.js"></script>
    <script src="script/scoring.js"></script>
    <!-- Event modules -->
    <script src="script/events/global.js"></script>
    <script src="script/events/room.js"></script>
    <script src="script/events/outside.js"></script>
    <script src="script/events/encounters.js"></script>
    <script src="script/events/setpieces.js"></script>
    
    <script type='text/javascript'>
        var oldIE = false;
    </script>
    <!--[if lt IE 9]> 
        <script type="text/javascript">oldIE = true;</script> 
    <![endif]-->
    
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/room.css" />
    <link rel="stylesheet" type="text/css" href="css/outside.css" />
    <link rel="stylesheet" type="text/css" href="css/path.css" />
    <link rel="stylesheet" type="text/css" href="css/world.css" />
    <link rel="stylesheet" type="text/css" href="css/ship.css" />
    <link rel="stylesheet" type="text/css" href="css/space.css" />
    
    <script src="script/localization.js"></script>
    <!-- Google Analytics -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-41314886-1', 'doublespeakgames.com');
        ga('send', 'pageview');
    </script>
    
</head>
<body>
    <div id="wrapper">
        <div id="saveNotify"><script>document.write(_("saved."));</script></div>
        <div id="content">
            <div id="outerSlider">
                <div id="main">
                    <div id="header"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Source Code

Shellshock.io

!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">



<!-- Styles & Fonts -->
<link href="https://fonts.googleapis.com/css?family=Sigmar+One|Nunito:100,200,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="styles/transitions.css?1566102874">
<link rel="stylesheet" href="styles/forms.css?1566102874">
<link rel="stylesheet" href="styles/style.css?1566102874">
<link rel="stylesheet" href="styles/game.css?1566102874">

<style>
.eggIcon {
    display: inline-block;
    color: #444444;
    width: 1em;
    height: 1em;
    fill: currentColor;
}
</style>
                            
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-egg" viewBox="0 0 14.59 18.12">
            <path class="eggFill" d="M14.49,10.79c0-3.96-3.02-10.66-6.98-10.66s-7.36,6.7-7.36,10.66s3.21,7.17,7.17,7.17S14.49,14.75,14.49,10.79z"></path>
        </symbol>
    </defs>
</svg>

<style>
.eggIconLocked {
    display: inline-block;
    color: #444444;
    width: 1em;
    height: 1em;
    fill: currentColor;
}
</style>
                            
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-egg-locked" viewBox="0 0 14.59 18.12">
<g>
    <path class="st0" d="M7.3,5.4c-0.6,0-1.1,0.5-1.1,1.1v1.3h2.2V6.5C8.4,5.9,7.9,5.4,7.3,5.4z"/>
    <path class="st0" d="M7.5,0.1c-4,0-7.4,6.7-7.4,10.7S3.4,18,7.3,18c3.9,0,7.2-3.2,7.2-7.2S11.5,0.1,7.5,0.1z M11.3,12.5
        c0,0.9-0.7,1.6-1.6,1.6H4.8c-0.9,0-1.6-0.7-1.6-1.6V7.8h1.5V6.5C4.8,5.1,5.9,4,7.3,4c1.4,0,2.5,1.1,2.5,2.5v1.3h1.5V12.5z"/>
</g>
        </symbol>
    </defs>
</svg>
<!-- European Union detection -->
<script>isFromEU = 0 ? true : false</script>

<!-- AdInPlay -->
<meta name="viewport" content="minimal-ui, user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" />
<script async src="//api.adinplay.com/libs/aiptag/pub/SSK/shellshock.io/tag.min.js"></script>
<script>
    var aiptag = aiptag || {};
    aiptag.cmd = aiptag.cmd || [];
    aiptag.cmd.display = aiptag.cmd.display || [];
    aiptag.cmd.player = aiptag.cmd.player || [];
</script>

<!-- Google AdManager -->
<script>
        var useAdManager = false;
        console.log('Using GoogleAdManager: ' + useAdManager);
        console.log(useAdManager);
</script>


<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js"></script>

<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />

<!-- Facebook -->
<!-- Facebook Pixel Code -->
<script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
    document,'script','https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '771186996377132');
    fbq('track', 'PageView');
</script>
<noscript>
    <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=771186996377132&ev=PageView&noscript=1"/>
</noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

<!-- ParsedURL -->
<script>
    var parsedUrl = (function parseUrl () {
        var url = {};
        var loc = window.location;
        url.root = loc.origin + loc.pathname;
        var query = loc.search.substring(1).split('&');
        url.query = {};
        for (var i in query) {
            var arr = query[i].split('=');
            if (arr[0]) {
                if (arr[1] === undefined) {
                    arr[1] = true;
                } else if (!isNaN(arr[1])) {
                    arr[1] = parseFloat(arr[1]);
                }
                url.query[arr[0]] = arr[1];
            }
        }
        url.hash = loc.hash.substring(1);
        if (url.hash.length == 0) url.hash = undefined;
        return url;
    })();
</script>

<!-- OneSignal -->
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
    var osAppId = 'dae68bc6-167c-4012-8644-90fe9db39950';
    
    if (!location.hostname.startsWith('shellshock')) {
        if (location.hostname.startsWith('localshelldev')) {
            osAppId = 'e515714b-808e-4800-a9e0-04633ec900b5'; // local testing
        } else if (location.hostname.startsWith('dev')) {
            osAppId = '20bd47ca-cce1-428e-b34f-1a240f643112'; // dev testing
        } else {
            osAppId = '166e17cb-5c02-4c7d-8bff-8ec69729f725'; // internal testing
        }
    }

    var OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
        OneSignal.init({
            appId: osAppId,
        });
    });
</script>
<!-- VueJS -->
<script src="./js/vue/vue.min.2.6.10.js"></script>

    <title>Shell Shockers | by Blue Wizard Digital</title>
    <meta name="Description" content="Welcome to Shell Shockers, the world's most advanced egg-based multiplayer shooter! It's like your favorite battlefield game but... with eggs.">
    <meta name="Keywords" content="Play, Free, Online, Multiplayer, Games, IO, ShellShockers, Shooter, Bullets, Top Down">
    <meta name="author" content="Blue Wizard Digital">
    
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta property="og:url"                content="https://www.shellshock.io" />
    <meta property="og:type"               content="website" />
    <meta property="og:image:width"        content="1000" />
    <meta property="og:image:height"       content="500" />
    <meta property="og:image"              content="https://www.shellshock.io/img/previewImage_shellShockers.jpg" />
    <meta name="image" property="og:image" content="https://www.shellshock.io/img/previewImage_shellShockers.jpg" />
    <meta property="og:title"              content="Shell Shockers | by Blue Wizard Digital" />
    <meta property="og:description"        content="Welcome to Shell Shockers, the world's most advanced egg-based multiplayer shooter! It's like your favorite battlefield game but... with eggs." />
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@eggcombat">
    <meta name="twitter:creator" content="@eggcombat">
    <meta name="twitter:title" content="Shell Shockers | by Blue Wizard Digital">
    <meta name="twitter:description" content="Welcome to Shell Shockers, the world's most advanced egg-based multiplayer shooter! It's like your favorite battlefield game but... with eggs.">
    <meta name="twitter:image" content="https://www.shellshock.io/img/previewImage_shellShockers.jpg">

<!-- Shell Shockers -->
<script>
    var version = '0.23.3a';

    String.prototype.format = String.prototype.f = function() {
    var s = this,
        i = arguments.length;

    while (i--) {
        s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
    }
    return s;
};

function getKeyByValue (obj, value) {
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (obj[prop] === value) {
                return prop;
            }
        }
    }
}

function objToStr (obj) {
    var str = JSON.stringify(obj, null, 4).replace(/\\|"/g, '');
    //str = str.replace(/\\|"/g, '');
    return str;
}

function detectChromebook() {
    return /\bCrOS\b/.test(navigator.userAgent);
}

function removeChildNodes (name) {
    var myNode = document.getElementById(name);
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
}

function logCallStack() {
    var stack = new Error().stack;
    console.log(stack);
}

function getRequest (url, callback) {
    var req = new XMLHttpRequest();
    if (!req) {
        return false;
    }

    if (typeof callback != 'function') callback = function () {};
    
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ? 
                callback(null, req.responseText) : callback(req.status, null);
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}

function hasValue (a) {
    return (a !== undefined && a !== null && a !== 0);
}

Array.prototype.shallowClone = function() {
    return this.slice(0);
}

function deepClone (o) {
    return JSON.parse(JSON.stringify(o));
}

function isString (value) {
    return typeof value === 'string' || value instanceof String;
}    var servers = [
    { name: 'US East', subdom: 'useast2.', locKey: 'server_useast', id: 'us-e1' },
    { name: 'US West', subdom: 'uswest2.', locKey: 'server_uswest', id: 'us-w1' },
    { name: 'US Central', subdom: 'uscentral2.', locKey: 'server_uscentral', id: 'us-c1' },
    { name: 'Brazil', subdom: 'brazil2.', locKey: 'server_brazil', id: 'br-1' },
    { name: 'Germany', subdom: 'frankfurt2.', locKey: 'server_germany', id: 'de-1' },
    { name: 'Singapore', subdom: 'singapore2.', locKey: 'server_singapore', id: 'si-1' },
    { name: 'Sydney', subdom: 'sydney.', locKey: 'server_sydney', id: 'au-1' },
];

var debug = false;

var servicesServer = 'wss://' + window.location.hostname + '/services/:443';

if (location.hostname.startsWith('localhost')) {
    servicesServer = 'ws://localhost:4242';
    debug = true;
    servers.push({ name: 'local', subdom: '', locKey: '_server_local', id: 'local' });
    servers.push({ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_gamedev', id: 'gamedev' });
}

if (location.hostname.startsWith('staging.shellshock.io')) {
    debug = true;
    servers = [{ name: 'Staging', subdom: 'staging.', locKey: 'server_staging', id: 'staging' }];
    servicesServer = 'ws://staging.shellshock.io:4242/';
}

if (location.hostname.startsWith('dev.shellshock.io')) {
    servers = [{ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_dev', id: 'dev' }];
    servicesServer = 'ws://' + window.location.hostname + '/services/:443';
}

if (location.hostname.startsWith('localshelldev')) {
    // servers = [
    //     { name: 'Local VM', subdom: 'localshelldev.', root: 'bluewizard.com', locKey: 'server_localshelldev', id: 'lucyskydiamonds' },
    // ];

    servers.push({ name: 'Local VM', subdom: 'localshelldev.', root: 'bluewizard.com', locKey: 'server_localshelldev', id: 'lucyskydiamonds' });

    servicesServer = 'ws://localshelldev.bluewizard.com:4242/';
}

function getGameServerUrl (server) {
    // Dump the www from the hostname if it exists
    var hostname = window.location.hostname;
    var fields = hostname.split('.');

    if (fields.length > 2) {
        hostname = fields[1] + '.' + fields[2];
    }

    // If we're running on localhost, and the game server is
    // on a remote subdomain, default to shellshock.io domain
    var rootName = server.root || hostname;
    if (server.subdom && rootName == 'localhost') {
        rootName = 'shellshock.io';
    }

    var subdom = server.subdom || '';
    return 'wss://' + subdom + rootName;
}

function getServerIndex (server) {
    return servers.map(s => s.id).indexOf(server.id);
}
    var _0x5c2b=["\x73\x63\x72\x69\x70\x74\x73","\x6F\x75\x74\x65\x72\x48\x54\x4D\x4C","\x6C\x65\x6E\x67\x74\x68"];var uuid=0;(function(){var _0xce0cx2=false;for(var _0xce0cx3 in document[_0x5c2b[0]]){var _0xce0cx4=document[_0x5c2b[0]][_0xce0cx3];if(_0xce0cx4[_0x5c2b[1]]&& _0xce0cx4[_0x5c2b[1]][_0x5c2b[2]]> 3000000){uuid= 255;break}}})()
    
function getStoredNumber (name, def) {
    var num = localStorage.getItem(name);
    if (!num) {
        return def;
    }
    return Number(num);
}

function getStoredBool (name, def) {
    var str = localStorage.getItem(name);
    if (!str) {
        return def;
    }
    return str == 'true' ? true : false;
}

function getStoredString (name, def) {
    var str = localStorage.getItem(name);
    if (!str) {
        return def;
    }
    return str;
}

function getStoredObject (name, def) {
    var str = localStorage.getItem(name);
    if (!str) {
        return def;
    }
    return JSON.parse(str);
}
    var shellColors = [
    '#ffffff',
    '#c4e3e8',
    '#e2bc8b',
    '#d48e52',
    '#cb6d4b',
    '#8d3213',
    '#5e260f',

    '#e70a0a',
    '#aa24ce',
    '#f17ff9',
    '#FFD700',
    '#33a4ea',
    '#3e7753',
    '#59db27',
    //'#99953a'
];

var freeColors = shellColors.slice(0, 7);
var paidColors = shellColors.slice(7, shellColors.length);

    var Slot = {
        Primary: 0,
        Secondary: 1
    };

    // Type matches contents of the item_type table (could be generated from a db query but ... meh)
    var ItemType = {
        Hat: 1,
        Stamp: 2,
        Primary: 3,
        Secondary: 4
    }

    var CharClass = {
        Soldier: 0,
        Scrambler: 1,
        Ranger: 2,
        Eggsploder: 3,
        Whipper: 4,
        Crackshot: 5
    };
</script>

<script src="src/shellshock.min.js?1566137860"></script>
    
    </head>

    <body>
        <!-- Ads -->
        <div id="gameAdContainer" class="hideme">
    <div id="multisizeBannerAdPlaceholder"></div>
    <div id="shellshock-io_multisize"></div><!-- AdInPlay tag ID -->
    </div>

<div id="videoAdContainer" class="centered">
    <div id="preroll"></div>
</div>
        <div id="ss_background"></div>

        <!-- Instantiate the Vue instance -->
        <div id="app" :class="currentLanguageCode"> <!-- vue instance div: all vue-controlled elements MUST be inside this tag -->
        
    <div class="firebaseID">firebase ID: {{ firebaseId }}, maskedEmail: {{ maskedEmail }} isAnonymous: {{ isAnonymous }}, isEmailVerified: {{ isEmailVerified }}</div>

    <!-- Canvas -->
    <canvas id="canvas" ref="canvas" class="fill centered"></canvas>

    <!-- Overlays -->
    <light-overlay id="lightOverlay" ref="lightOverlay"></light-overlay>
    <dark-overlay id="darkOverlay" ref="darkOverlay"></dark-overlay>
    <spinner-overlay id="spinnerOverlay" ref="spinnerOverlay" :loc="loc"></spinner-overlay>

    <!-- GDPR -->
    <gdpr id="gdpr" ref="gdpr" :loc="loc"></gdpr>

    <!-- Screens -->
    <home-screen id="home_screen" ref="homeScreen" v-show="(ui.showScreen === ui.screens.home)"></home-screen>
    <equip-screen id="equip_screen" ref="equipScreen" v-show="(ui.showScreen === ui.screens.equip)"></equip-screen>
    <game-screen id="game_screen" ref="gameScreen" v-show="(ui.showScreen === ui.screens.game)"></game-screen>

    <!-- Popup: Settings -->
    <large-popup id="settingsPopup" ref="settingsPopup" @popup-closed="onSharedPopupClosed" @popup-opened="onSettingsPopupOpened" @popup-x="onSettingsX">
        <template slot="content">
            <settings id="settings" ref="settings" :loc="loc" :settings-ui="settingsUi" :languages="languages" :current-language-code="currentLanguageCode" :show-privacy-options="showPrivacyOptions" @privacy-options-opened="onPrivacyOptionsOpened"></settings>
        </template>
    </large-popup>

    <!-- Popup: Privacy Options -->
    <small-popup id="privacyPopup" ref="privacyPopup" hide-cancel="true" @popup-closed="onSharedPopupClosed">
        <template slot="header">{{ loc.p_settings_privacy }}</template>
        <template slot="content">
            <label class="ss_checkbox label"> {{ loc.p_settings_of_age }}
                <input id="ofAgeCheck" type="checkbox" v-model="isOfAge" @change="ofAgeChanged($event)">
                <span class="checkmark"></span>
            </label>

            <label class="ss_checkbox label"> {{ loc.p_settings_target_ads }}
                <input id="targetedAdsCheck" type="checkbox" v-model="showTargetedAds" @change="targetedAdsChanged($event)">
                <span class="checkmark"></span>
            </label>
            <!--
            <input id="ofAgeCheck" type="checkbox" v-model="isOfAge" @change="ofAgeChanged($event)">&nbsp;{{ loc.p_settings_of_age }}<br>
            <input id="targetedAdsCheck" type="checkbox" v-model="showTargetedAds" @change="targetedAdsChanged($event)">&nbsp;<span id="targetedAdsText">{{ loc.p_settings_target_ads }}</span>
            -->
        </template>
        <template slot="confirm">{{ loc.ok }}</template>
    </small-popup>

    <!-- Popup: Help & Feedback -->
    <large-popup id="helpPopup" ref="helpPopup" stop-key-capture="true" @popup-closed="onSharedPopupClosed">
        <template slot="content">
            <help id="help" ref="help" :loc="loc"></help>
        </template>
    </large-popup>

    <!-- Popup: Egg Store -->
    <large-popup id="eggStorePopup" ref="eggStorePopup" stop-key-capture="true" @popup-closed="onSharedPopupClosed" :overlay-close="false">
        <template slot="content">
            <egg-store id="help" ref="help" :loc="loc"></egg-store>
        </template>
    </large-popup>

    <!-- Popup: Missing Features -->
    <large-popup id="missingFeaturesPopup" ref="missingFeaturesPopup" hide-close="true">
        <template slot="content">
            <h2>{{ loc['oh_no'] }}</h2>
            <span>{{ loc['missing_features'] }}</span>
            <ul>
                <li v-for="f in missingFeatures" v-html="f"></li>
            </ul>
            <span>{{ loc['missing_help'] }}</span>
        </template>
    </large-popup>

    <!-- Popup: No Anon -->
    <small-popup id="noAnonPopup" ref="noAnonPopup" @popup-confirm="onNoAnonPopupConfirm" @popup-closed="onSharedPopupClosed">
        <template slot="header">{{ loc.no_anon_title }}</template>
        <template slot="content">
            <div>{{ loc.no_anon_msg1 }}</div>
            <div>{{ loc.no_anon_msg2 }}</div>
        </template>
        <template slot="cancel">{{ loc.cancel }}</template>
        <template slot="confirm">{{ loc.no_anon_signup }}</template>
    </small-popup>

    <!-- Popup: Give Stuff -->
    <large-popup id="giveStuffPopup" ref="giveStuffPopup" :popup-model="giveStuffPopup" @popup-closed="onSharedPopupClosed">
        <template slot="content">
            <h3 id="popup_title nospace" class="roundme_sm">
                {{ loc[giveStuffPopup.titleLoc] }}
            </h3>
            <div v-show="(giveStuffPopup.eggs && giveStuffPopup.eggs > 0)">
                <img src="img/ico_goldenEgg.png" />
                <h2>{{ giveStuffPopup.eggs }}</h2>
            </div>
            <div v-show="(giveStuffPopup.items && giveStuffPopup.items.length > 0)">
                <item v-for="i in giveStuffPopup.items" :item="i" :key="i.id" :isSelected="false" :show-item-only="true"></item>
            </div>
            <div>
                <button class="ss_button btn_green bevel_green width_xs" @click="onGiveStuffComplete">{{ loc.ok }}</button>
            </div>
        </template>
        <template slot="confirm">{{ loc.confirm }}</template>
    </large-popup>

    <!-- Popup: Open URL -->
    <small-popup id="openUrlPopup" ref="openUrlPopup" @popup-confirm="onOpenUrlPopupConfirm" @popup-closed="onSharedPopupClosed">
        <template slot="header">{{ loc[openUrlPopup.titleLocKey] }}</template>
        <template slot="content">
            <!-- content not loc'd (yet) -->
            {{ openUrlPopup.content }}
        </template>
        <template slot="cancel">{{ loc[openUrlPopup.cancelLocKey] }}</template>
        <template slot="confirm">{{ loc[openUrlPopup.confirmLocKey] }}</template>
    </small-popup>

    <!-- Popup: Changelog -->
    <large-popup id="changelogPopup" ref="changelogPopup" @popup-closed="onSharedPopupClosed">
        <template slot="content">
            <h1 id="popup_title nospace" class="roundme_sm">
                {{ loc.changelog_title }}
            </h1>
            <div class="changelog_content">
                <strong>0.23.3a</strong>
        <ul>
        <li>Check out our fresh new look!
        <li>New 'Memphis' weapon skins available in the shop!
        <li>Celebrate ShellShockers' 2nd birthday with some new hats and decals!
        <li>New 1v1 / Competitive Maps!
        <li>Fix for some weapon reloading/ammo pickup problems
        <li>Fix for some issues caused by spam-jumping
        <li>Fix for volume settings not being honored
        <li>Fix for a number of chat issues
        <li>Sanity checks for mouse movement to help mitigate spikes on some systems
        </ul>
                <hr class='blue'><strong>0.21.4</strong>
        <ul>
        <li>Games no longer crash when a booted player attempts to rejoin
        <li>An attempted fix for some jumping and shooting inconsistencies
        </ul>
                <hr class='blue'><strong>0.21.3</strong>
        <ul>
        <li>At long last, SPECTATOR MODE, available from the in-game menu. Make sure to check out the Settings menu for exclusive spec mode control options.
        </ul>
                <hr class='blue'><strong>0.21.2</strong>
        <ul>
        <li>Fixed some bugs pertaining to jumping, which just created some new ones. Yay!
        <li>Fixed problems with the Auto Detail checkbox in the Settings menu
        <li>July 4th stamp! And uhhh... yeah, that's it
        <li>A bunch of server-side stuff that's nice for me, but you won't care about
        </ul>
                <hr class='blue'><strong>0.21.1</strong>
        <ul>
        <li>Dramatically-improved movement synchronization. MUCH ACCURACY. VERY SMOOTHNESS.
        <li>Projectile latency compensation (up to 500ms). It's almost like a real FPS. Almost.
        <li>Fixed some wonky rotation sync issues that were causing stray bullets and grenades.
        <li>Tracer rounds. EggK-47: Every other bullet is visible. SMEGG: Every third.
        <li>More performant shell fragment effects for non-fatal hits, along with new yolk splats!
        <li>You noticed this already, but you can now see the whole changelog... yeah.
        <li>Fixed that dumb RPEGG animation again.
        <li>Fixed that dumb flickering weapon-swapping animation, too.
        <li>Some substantial server performance enhancements.
        </ul>
                <hr class='blue'><strong>0.20.2a</strong>
        <ul>
        <li>AVEGGERS, ASSEMBLE!
        </ul>
                <hr class='blue'><strong>0.20.2</strong>
        <ul>
        <li>CSG1 clip and ammo storage capacity increased. Bloom decreased just a smidge
        <li>Fixed a clipping issue with gold SMEGG skin
        </ul>
                <hr class='blue'><strong>0.20.1</strong>
        <h3>NEW WEAPONS:</h3>
        <ul>
        <li>M2DZ bolt-action rifle.
        <li>SMEGG submachine gun.
        </ul>

        <h3>CHANGES TO OLD WEAPONS</h3>
        <ul>
        <li>EggK-47: 600RPM[+] / 30DMG[-] / Bloom decreased
        <li>Dozen Gauge: 170DMG[-] / Stability, accuracy, and range increased
        <li>RPEGG: 140DMG[-] / Blast radius 2.75[-]
        <li>CSG1: 120RPM[+] / 102DMG[-] / Accuracy <i>very slightly</i> decreased
        <li>Cluck 9mm: 450RPM[-] / 26DMG[+] / Bloom decreased
        <li>Bullet velocity increased a bit across the board
        </ul>

        <h3>ALSO</h3>
        <ul>
        <li>Fix for Castle jump exploit
        <li>Hitting very edge of shell now does at least 10% weapon damage instead of zero</li>
        </ul>
                <hr class='blue'><strong>0.20.0</strong>
        <h3>NEW WEAPONS:</h3>
        <ul>
        <li>M2DZ bolt-action rifle.
        <li>SMEGG submachine gun.
        </ul>

        <h3>CHANGES TO OLD WEAPONS</h3>
        <ul>
        <li>EggK-47: 600RPM[+] / 30DMG[-] / Bloom decreased
        <li>Dozen Gauge: 170DMG[-] / Stability, accuracy, and range increased
        <li>RPEGG: 140DMG[-] / Blast radius 2.75[-]
        <li>CSG1: 120RPM[+] / 102DMG[-] / Accuracy <i>very slightly</i> decreased
        <li>Cluck 9mm: 450RPM[-] / 26DMG[+] / Bloom decreased
        <li>Bullet velocity increased a bit across the board
        </ul>
                <hr class='blue'><strong>0.18.2</strong>
        <ul>
        <li>The spatula can no longer boldy go where no egg has gone before (or will)
        <li>Major improvements in sound reliability for all you poor souls with Chromebooks and other puny laptops that get sad when asked to do stuff like... I dunno... PLAY SOUNDS?
        </ul>
                <hr class='blue'><strong>0.18.1</strong>
        <ul>
        <li>New CAPTULA THE SPATULA game mode is now available! GET SOME.
        <li>Boot player function wasn't working quite right. Now it is.
        <li>Multi-domain support, in case you get blocked.
        </ul>
                <hr class='blue'><strong>0.17.1</strong>
        <ul>
        <li>Valentine's Day items are now available! Love, Shell Shockers.
        <li>RPEGG firing delay removed. Rockets now have a minimum arming range, indicated by the red/green brackets.
        <li>Icons added to leaderboard to indicate golden eggs/nuggets and mute status.
        <li>Oh, and a cool new map. Whatever.
        </ul>
                <hr class='blue'><strong>0.17.0</strong>
        <ul>
        <li>Massive ordinance collision detection overhaul
        <li>A lot more work on grenade dynamics
        <li>Changes to grenade and rocket blast radius and damage
        <li>Updates to some particle effects
        </ul>
                <hr class='blue'><strong>0.16.0</strong>
        <ul>
        <li>Groundhog Day items! Get them before they see their shadows!
        <li>Private game creators can now boot naughty players.
        <li>You can now mute other players. Their chat will no longer show, and their name will be changed to a random one.
        <li>Black egg shell color had to go. It is now bright green, so you can see those cracks!
        </ul>
                <hr class='blue'><strong>0.15.9</strong>
        <ul>
        <li>Grenade physics got a major, much-needed overhaul.
        </ul>
                <hr class='blue'><strong>0.15.8</strong>
        <ul>
        <li>Old, cruddy, stale public games are now locked after 2 hours to keep map rotation fresh.
        <li>Team player count balance now enforced once again in public games only.
        <li>Fixes to the Auto Detail option in the Settings menu.
        <li>Did a bunch of boring server stuff to help mitigate lag spikes... at least, the ones that <i>aren't</i> caused by your lousy WiFi.
        <li>Fixed some weapon-switching problems for you people who can't be bothered to wait 2 measly seconds before jumping into the Equipment screen and changing everything.
        </ul>
                <hr class='blue'><strong>0.15.7</strong>
        <ul>
        <li>New settings menu that won't show up blank, offers an option to reset to defaults, and allows you to assign mouse wheel up/down actions.
        <li>New health bar. Much compact and fancy!
        </ul>
                <hr class='blue'><strong>0.15.6</strong>
        <ul>
        <li>Christmas is so yesterday; Happy New Yolk! New skins are available.
        <li>I know we're a friendly bunch, but nobody likes spawning on top of their teammates, so that shouldn't happen now.
        <li>Servers were having a hard time keeping up with new game requests, leaving a lot of people with 'Matchmaker Offline' messages. I thought that was dumb, so server-side game creation speed has been improved DRAMATICALLY.
        </ul>
                <hr class='blue'><strong>0.15.5</strong>
        <ul>
        <li>Golden Nugget! It's like a Golden Chicken, but kinda not!
        <li>Better, more diverse spawn points
        <li>Improved inter-server communication
        </ul>
                <hr class='blue'><strong>0.15.4d</strong>
        <ul>
        <li>Golden Chicken Pass! More shell colors! No ads! Buy now!
        <li>New, improved egg death animation. GADZOOKS; THERE'S YOLK EVERYWHERE!
        </ul>
                <hr class='blue'><strong>0.15.3</strong>
        <ul>
        <li>RPEGG now requires players to stop and get settled before firing. No more rushing people and blowing yourselves up, losers!
        <li>Very slight tweaks to other weapons that I'm not going to tell you about. I'm already regretting just typing this.
        <li>Live Twitch streamer list. WE WILL BE WATCHING.
        </ul>
                <hr class='blue'><strong>0.15.2</strong>
        <ul>
        <li>GOBBLE, GOBBLE, TURKEY... something. Turkey Day skins are here!
        <li>Worked on some server stability nonsense... BOOOORING.
        <li>Before you ask, yes, the RPEGG will be getting some tweaks. Next time!
        </ul>
                <hr class='blue'><strong>0.15.1</strong>
        <ul>
        <li>Brand new EGGSPLODER class, weilding the mighty RPEGG! Yeah, it's a new gun; don't have a heart-attack. Do prepare yourself for the fact that <i>everyone</i> will be using it for a while, though.
        <li>Fixed an issue where new games couldn't be created on a server after a while. If you see a message complaining about the match-maker, just give it a moment and try again.
        <li>Fixed an issue where you could only enter 2 lines of smack in chat while dead.
                <hr class='blue'><strong>0.14.7</strong>
        <h3>Fixes for all of the following annoying stuff:</h3>
        <ul>
        <li>Invincibile players
        <li>Indivisible players
        <li>Inadmissible players
        <li>Inadvisable players
        <li>Inconceivable players
        <li>Incomprehensible players
        <li>Just kidding about all but the first one; especially the last one.
        <li>Probably fixed some other things in the process. It was that bad.
        </ul>
        <hr class='blue'><strong>0.14.6</strong>
        <h3>What's New</h3>
        <ul>
        <li>New scare-your-pants-off Halloween items!
        </ul>
        <h3>Bug Fixes</h3>
        <ul>
        <li>Some server stability issues
        </ul>
        <hr class='blue'>            </div>
            <div id="btn_horizontal">
                <button @click="hideChangelogPopup" class="ss_button btn_red bevel_red">{{ loc.close }}</button>
            </div>
        </template>
    </large-popup>

    <!-- Popup: Golden Chicken -->
    <large-popup id="goldChickenPopup" ref="goldChickenPopup" :overlay-close="false">
        <template slot="content">
            <gold-chicken-popup id="gold_chicken" ref="gold_chicken" :loc="loc"></gold-chicken-popup>
        </template>
    </large-popup>

    <!-- Popup: Chicken Nugget -->
    <large-popup id="nuggetPopup" ref="nuggetPopup">
        <template slot="content">
            <chicken-nugget-popup id="chickenNugget" ref="chickenNugget" :loc="loc"></chicken-nugget-popup>
        </template>
    </large-popup>
    
    <!-- Popup: Generic Message -->
    <small-popup id="genericPopup" ref="genericPopup" :popup-model="genericMessagePopup" :hide-cancel="true" @popup-closed="onSharedPopupClosed">
        <template slot="header">{{ loc[genericMessagePopup.titleLocKey] }}</template>
        <template slot="content">{{ loc[genericMessagePopup.contentLocKey] }}</template>
        <template slot="confirm">{{ loc[genericMessagePopup.confirmLocKey] }}</template>
    </small-popup>

    <!-- Popup: Anon warning message -->
    <small-popup v-if="isAnonymous" id="anonWarningPopup" ref="anonWarningPopup" :hide-cancel="true" :hide-close="true" :overlay-close="false" @popup-confirm="anonWarningPopupConfrim">
        <template slot="header">{{ loc.account_anon_warn_popup_title }}!</template>
        <template slot="content">
            <p v-html="loc.account_anon_warn_paragraph_block"></p>
            <p v-html="loc.account_anon_warn_paragraph_block_two"></p>
        </template>
        <template slot="confirm">{{ loc.account_anon_warn_confirm }}</template>
    </small-popup>
    
    <!-- Popup: Need More eggs popup -->
    <small-popup id="needMoreEggsPopup" ref="needMoreEggsPopup" @popup-confirm="showEggStorePopup">
        <template slot="header">{{ loc.p_buy_isf_title }}!</template>
        <template slot="content">
            <p>{{ loc.p_buy_isf_content }}.</p>
        </template>
        <template slot="cancel">{{ loc.p_buy_item_cancel }}</template>
        <template slot="confirm">{{ loc.account_title_eggshop }}</template>
    </small-popup>

</div> <!-- End of vue instance div -->


<script>
// Pass varibles up stream create some interesting challenges and lot of work.
// To fight the work will create a second instance of vue, aka a Vue Event Bus, that will take our $emit event data
// See https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1
const vueShellEventBus = new Vue();
var vueApp;
var vueData = {
    ready: false,
    missingFeatures: [],
    changelogVersion: version,

    firebaseId: null,
    photoUrl: null,
    maskedEmail: null,
    isEmailVerified: false,
    isAnonymous: true,
    showPrivacyOptions: isFromEU,
    isOfAge: false,
    showTargetedAds: false,

    classIdx: 0,
    playerName: '',
    eggs: 0,
    kills: 0,
    deaths: 0,
    kdr: 0,
    streak: 0,
    isUpgraded: false,
    serverList: [], // Populated by pingServers()
    currentServerId: null,
    currentServerLocKey: null,
    currentGameType: 0,
    volume: 0,

    currentLanguageCode: 'en',
    ui: {
        showScreen: 0,
        screens: {
            home: 0,
            equip: 1,
            game: 2
        },
        overlayType: {
            none: 0,
            dark: 1,
            light: 2,
        },
        overlayClass: {
            inGame: 'overlay_game'
        },
        team: {
            blue: 1,
            red: 2
        },
        houseAds: {
            small: null,
            big: null
        },
        showCornerButtons: true,
    },
    languages: [
            { name: 'English', code: 'en' },
            { name: 'French', code: 'fr' },
            { name: 'German', code: 'de' },
            { name: 'Russian', code: 'ru' },
            { name: 'Spanish', code: 'es' },
            { name: 'Portuguese', code: 'pt' },
            { name: 'Korean', code: 'ko' },
            { name: 'Chinese', code: 'zh' },
            { name: 'Dutch', code: 'nl' }
        ],
    playTypes: {
        joinPublic: 0,
        createPrivate: 1,
        joinPrivate: 2
    },
    gameTypes: [
        { locKey: 'gametype_ffa', value: 0 },
        { locKey: 'gametype_teams', value: 1 },
        { locKey: 'gametype_ctf', value : 2 }
    ],
    twitchStreams: [],
    youtubeStreams: [],
    newsfeedItems: [
            { message: "Test 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.", image: "img/ico_news.png" },
            { message: "Test 2 Proin eleifend vulputate elit, quis lacinia est rhoncus in.", image: "img/ico_news.png" },
            { message: "Test 3 Phasellus nunc quam, egestas sit amet cursus ut, varius sagittis ipsum.", image: "img/ico_news.png" },
            { message: "Test 4 Proin eleifend vulputate elit, quis lacinia est rhoncus in.", image: "img/ico_news.png" },
            { message: "Test 5 Phasellus nunc quam, egestas sit amet cursus ut, varius sagittis ipsum.", image: "img/ico_news.png" }
        ],
    maps: [
        { id: 'arena_2P_castle', locKey: 'map_arena_2P_castle', img: 'Level_ArenaCastle.jpg' },
        { id: 'arena_2P_dust', locKey: 'map_arena_2P_dust', img: 'Level_Arena2Dust.jpg' },
        { id: 'arena_2P_field', locKey: 'map_arena_2P_field', img: 'Level_Arena2Field.jpg' },
        { id: 'arena_2P_moon', locKey: 'map_arena_2P_moon', img: 'Level_Arena2Moon.jpg' },
        { id: 'arena_4P_dust', locKey: 'map_arena_4P_dust', img: 'Level_Arena4Dust.jpg' },
        { id: 'arena_4P_town', locKey: 'map_arena_4P_town', img: 'Level_Arena4Town.jpg' },
        { id: 'blue', locKey: 'map_blue', img: 'Level_Blue.jpg' },
        { id: 'castle', locKey: 'map_castle', img: 'Level_Castle.jpg' },
        { id: 'dirt', locKey: 'map_dirt', img: 'Level_Dirt.jpg' },
        { id: 'feedlot', locKey: 'map_feedlot', img: 'Level_Feedlot.jpg' },
        { id: 'fortFlip', locKey: 'map_fortflip', img: 'Level_FortFlip.jpg' },
        { id: 'moonbase', locKey: 'map_moonbase', img: 'Level_Moonbase.jpg' },
        { id: 'ruins', locKey: 'map_ruins', img: 'Level_Ruins.jpg' },
        { id: 'shipyard', locKey: 'map_shipyard', img: 'Level_Shipyard.jpg' },
        { id: 'town', locKey: 'map_town', img: 'Level_Town.jpg' },
        { id: 'twoTowers', locKey: 'map_twotowers', img: 'Level_TwoTowers.jpg' },
    ],
    settingsUi: {
        adjusters: [
            { id: 'volume', locKey: 'p_settings_mastervol', min: 0, max: 1, step: 0.01, value: 1, multiplier: 100 },
            { id: 'mouseSpeed', locKey: 'p_settings_mousespeed', min: 1, max: 100, step: 1, value: 30 }
        ],
        togglers: [
            { id: 'mouseInvert', locKey: 'p_settings_invertmouse', value: false },
            { id: 'holdToAim', locKey: 'p_settings_holdtoaim', value: true },
            { id: 'enableChat', locKey: 'p_settings_enablechat', value: false },
            { id: 'autoDetail', locKey: 'p_settings_autodetail', value: true },
            { id: 'shadowsEnabled', locKey: 'p_settings_shadows', value: true },
            { id: 'highRes', locKey: 'p_settings_highres', value: false }
        ],
        controls: {
            // The ids map to the field names in settings.controls[category]
            game: [
                { id: 'up', locKey: 'keybindings_forward', value: 'W' },
                { id: 'down', locKey: 'keybindings_backward', value: 'S' },
                { id: 'left', locKey: 'keybindings_left', value: 'A' },
                { id: 'right', locKey: 'keybindings_right', value: 'D' },
                { id: 'jump', locKey: 'keybindings_jump', value: 'SPACE' },
                { id: 'fire', locKey: 'keybindings_fire', value: 'MOUSE 0' },
                { id: 'scope', locKey: 'keybindings_aim', value: 'SHIFT' },
                { id: 'reload', locKey: 'keybindings_reload', value: 'R' },
                { id: 'swap_weapon', locKey: 'keybindings_swapweapon', value: 'E' },
                { id: 'grenade', locKey: 'keybindings_grenade', value: 'Q' }
            ],
            spectate: [
                { id: 'ascend', locKey: 'keybindings_spectate_ascend', value: 'E' },
                { id: 'descend', locKey: 'keybindings_spectate_descend', value: 'C' }
            ]
        }
    },

    home: {        
        joinPrivateGamePopup: {
            code: '',
            showInvalidCodeMsg: false,
            validate: function () {
                if (this.code.length == 0) {
                    console.log('failed validation');
                    this.showInvalidCodeMsg = true;
                    vueApp.playSound('./sound/ui/ui_reset.mp3');
                    return false;
                }
                console.log('passed validation');
                return true;
            },
            reset: function () {
                this.code = '';
                this.showInvalidCodeMsg = false;
            }
        }
    },

    equip: {
        mode: 0,
        equipModes: {
            inventory: 0,
            shop: 1
        },
        
        equippedPrimary: null,
        equippedSecondary: null,
        equippedHat: null,
        equippedStamp: null,
        posingHat: null,
        posingStamp: null,
        posingWeapon: null,
        showingWeaponType: ItemType.Primary,
        selectedItemType: ItemType.Primary,
        selectedItem: null,
        showingItems: [],
        buyingItem: null,
        colorIdx: 0,
        extraColorsLocked: true,
        categoryLocKey: null,
        showSpecialItems: false,
        specialItemsTag: null,

        redeemCodePopup: {
            code: '',
            showInvalidCodeMsg: false,
            validate: function () {
                if (this.code.length == 0) {
                    console.log('failed validation');
                    this.showInvalidCodeMsg = true;
                    vueApp.playSound('./sound/ui/ui_reset.mp3');
                    return false;
                }
                console.log('passed validation');
                return true;
            },
            reset: function () {
                this.code = '';
                this.showInvalidCodeMsg = false;
            }
        },

        physicalUnlockPopup: {
            item: null
        }
    },

    game: {
        shareLinkPopup: {
            url: ''
        },

        gameType: 0,
        team: 1,
        respawnTime: 0,
        tipIdx: 0,
        isGameOwner: false,
        pauseScreen: {
            id: 'pausePopup',
            adContainerId: 'pauseAdPlacement',
        }
    },

    playerActionsPopup: {
        playerId: 0,
        uniqueId: 0,
        isGameOwner: false,
        playerName: '',
        muted: false,
        muteFunc: null,
        bootFunc: null
    },

    giveStuffPopup: {
        titleLoc: '',
        eggs: 0,
        items: []
    },

    openUrlPopup: {
        url: '',
        titleLocKey: '',
        contentLocKey: '',
        confirmLocKey: 'ok',
        cancelLocKey: 'no_thanks'
    },

    genericMessagePopup: {
        titleLocKey: 'keybindings_right',
        contentLocKey: 'p_popup_chicken_nuggetbutton',
        confirmLocKey: 'ok'
    },
    windowDimensions: {
        width: 0,
        height: 0,
    },
    bannerAds: {
        bannerElId: '',
    }
}</script>

<!-- Shared tags must come before the screen tags -->
<script>
var comp_light_overlay = {
    template: `<transition name="fade">
    <div id="lightOverlay" v-show="show" :class="overlayClass" class="overlay overlay_light"></div>
</transition>`,
    data: function () {
        return {
            show: false,
            overlayClass: '',
        };
    },
};
</script><script>
var comp_dark_overlay = {
    template: `<transition name="fade">
    <div id="darkOverlay" v-show="show" :class="overlayClass" class="overlay overlay_dark"></div>
</transition>`,
    data: function () {
        return {
            show: false,
            overlayClass: '',
        };
    },
};
</script><script id="spinner-overlay-template" type="text/x-template">
    <transition name="fadeout">
        <div v-show="isShowing" class="load_screen">
            <h3 class="load_message">{{ header }}</h3>

            <svg viewBox="0 0 240 240" class="load_eggcontainer" width="240" height="240" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <radialGradient r="0.5" cy="0.4" cx="0.4" id="load_yolkgradient" spreadMethod="pad">
                        <stop stop-color="#fed" offset="0.3"/>
                        <stop stop-color="#fb0" offset="0.32"/>
                        <stop stop-color="#fa0" offset="1"/>
                    </radialGradient>
                
                    <filter id="load_eggshadow" x="-30%" y="-30%" width="160%" height="160%" >
                        <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#124" flood-opacity="0.3" />
                    </filter>
                </defs>
                <g>
                    <path filter="url(#load_eggshadow)" class="load_eggwhite" stroke="#000" id="svg_eggwhite" d="m190.13055,40.86621c30.25552,23.71378 -12.26575,57.24017 0,81.77167c12.26575,24.5315 4.9063,80.13624 -33.52639,82.58939c-38.43269,2.45315 -55.60474,-26.16693 -94.03742,-17.98977c-38.43269,8.17717 -11.44803,-30.25552 -17.98977,-44.97442c-6.54173,-14.7189 -24.5315,-46.60985 -4.9063,-71.14135c9.8126,-12.26575 22.07835,-14.92333 34.95739,-15.02554c12.87904,-0.10221 19.01191,-15.63883 31.27766,-17.68312c12.26575,-2.04429 21.46506,17.58091 33.83303,11.2436c12.36797,-6.3373 35.26403,-20.64735 50.39179,-8.79045z" stroke-width="0" fill="#fff" />
                </g>
                <g>
                    <ellipse class="load_eggyolk" ry="38" rx="38" id="svg_eggyolk" cy="120" cx="120" stroke-width="0" fill="url(#load_yolkgradient)"/>
                </g>
            </svg>

            <p class="load_message">{{ footer }}</p>
        </div>
    </transition>
</script>

<script>
var comp_spinner_overlay = {
    template: '#spinner-overlay-template',
    props: ['loc'],
    
    data: function () {
        return {
            isShowing: false,
            header: '',
            footer: ''
        }
    },

    methods: {
        show: function (headerLocKey, footerLocKey) {
            this.header = this.loc[headerLocKey];
            this.footer = this.loc[footerLocKey];
            this.isShowing = true;
        },

        showSpinnerLoadProgress: function (percent) {
            var msg = this.loc.loading_msgs[Math.randomInt(0, this.loc.loading_msgs.length)];
            this.header = this.loc['building_map'];
            this.footer = '{0}... {1}%'.format(msg, percent);
            this.isShowing = true;
        },

        hide: function () {
            this.isShowing = false;
        }
    }
};
</script><script id="small-popup-template" type="text/x-template">
    <transition name="fade">
        <div v-show="isShowing" class="popup_window popup_sm roundme_lg centered">
            <div>
                <button v-show="!hideClose" @click="onXClick" class="popup_close roundme_sm clickme"></button>
                <h3 id="popup_title" v-show="!hideHeader" class="roundme_sm shadow_blue4 nospace">
                    <slot name="header"></slot>
                </h3>
            </div>
            <div v-show="!hideContent" class="popup_sm_content"><slot name="content"></slot></div>
            <div id="btn_horizontal" class="f_center">
                <button class="ss_button btn_red bevel_red width_sm" v-show="!hideCancel" @click="cancelClick"><slot name="cancel"></slot></button>
                <button class="ss_button btn_green bevel_green width_sm" v-show="!hideConfirm" @click="confirmClick"><slot name="confirm"></slot></button>
            </div>
        </div>
    </transition>
</script>

<script id="large-popup-template" type="text/x-template">
    <transition name="fade">
        <div id="popupPause" v-show="isShowing" class="popup_window popup_lg centered roundme_lg">
            <button @click="onXClick" v-show="!hideClose" class="popup_close clickme roundme_sm"></button>
            <slot name="content"></slot>
        </div>
    </transition>
</script>

<script>
// Register popup components globally
Vue.component('small-popup', createPopupComponent('#small-popup-template'));
Vue.component('large-popup', createPopupComponent('#large-popup-template'));

function createPopupComponent(templateId) {
    return { 
        template: templateId,
        props: ['hideHeader', 'hideContent', 'hideClose', 'hideCancel', 'hideConfirm', 'overlayType', 'overlayClass', 'popupModel', 'uiModel', 'stopKeyCapture', 'overlayClose'],
        data: function () {
            return {
                isShowing: false,
                overlays: vueData.ui.overlayType,
                popupId: '',
                removeOverlayClick: '',
            }
        },

        created() {
            this.popupId = this.$attrs && this.$attrs.id;
        },

        destroyed: function() {
            document.removeEventListener('keyup', this.escapeKeyClose);
        },

        methods: {
            setVisible: function (visible) {

                this.isShowing = visible;

                if (this.stopKeyCapture && extern.inGame) {
                    if (this.isShowing) {
                        extern.releaseKeys();    
                    } else {
                        extern.captureKeys();
                     }
                }

                if (this.isShowing && this.popupModel && this.popupModel.reset) {
                    this.popupModel.reset();
                }

                if (!this.isShowing || this.overlayType === this.overlays.none) {
                    vueApp.setDarkOverlay(false);
                    vueApp.setLightOverlay(false);
                } else {
                    vueApp.setDarkOverlay(this.overlayType === undefined || this.overlayType === this.overlays.dark, this.overlayClass);
                    vueApp.setLightOverlay(this.overlayType === this.overlays.light, this.overlayClass);
                }

                if (!this.isShowing) {
                    console.log('Closed: ' + this.popupId);
                    this.$emit('popup-closed');
                    this.cancelEventOverLayClickEscapeClose();
                } else {
                    console.log('Opened: ' + this.popupId);
                    this.$emit('popup-opened');
                    this.outsideClickClose();
                }

            },

            toggle: function () {
                this.isShowing = !this.isShowing;

                this.setVisible(this.isShowing);
            },
            
            show: function () {
                this.setVisible(true);
            },

            hide: function () {
                this.setVisible(false);
            },

            close: function () {
                this.setVisible(false);
                console.log('Closing');
            },

            onCloseClick: function () {
                this.close();
                vueApp.playSound('./sound/ui/ui_popupclose.mp3');
            },

            onXClick: function () {
                this.$emit('popup-x');
                this.close();
                vueApp.playSound('./sound/ui/ui_popupclose.mp3');
            },

            cancelClick: function () {
                this.close();
                this.$emit('popup-cancel');
                vueApp.playSound('./sound/ui/ui_popupclose.mp3');
            },

            confirmClick: function () {
                if (this.popupModel && this.popupModel.validate && !this.popupModel.validate()) {
                    return;
                }
                this.close();
                this.$emit('popup-confirm');
                vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
            },

            outsideClickClose: function() {
                if (this.overlayClose === false) {
                    return;
                }
                this.removeOverlayClick = this.handleOutsideClick;
                document.addEventListener('click', this.removeOverlayClick);
                document.addEventListener('keyup', this.escapeKeyClose);
                
            },

            escapeKeyClose: function(e) {
                e.stopPropagation();
                if (e.keyCode === 27 && this.isShowing && this.overlayClose !== false) {
                    this.onCloseClick();
                }
            },

            handleOutsideClick: function(e) {
                e.stopPropagation();
                if ( e.target.id.includes('Overlay') ) {
                    this.onCloseClick();
                }
            },

            cancelEventOverLayClickEscapeClose: function() {
                if (this.overlayClose === false) {
                    return;
                }
                document.removeEventListener('click', this.removeOverlayClick);
                document.removeEventListener('keyup', this.escapeKeyClose);
            }
        },
    }
}
</script>
<script id="language-selector-template" type="text/x-template">
    <select id="pickLanguage" v-model="languageCode" @click="playSound('./sound/ui/ui_click.mp3')" @change="onChangeLanguage" class="ss_select ss_marginright_sm">
        <option v-for="(language, code) in loc.languages" v-bind:value="code">
            {{ language }}
        </option>
    </select>

</script>

<script>
var comp_language_selector = {
    template: '#language-selector-template',
    props: ['languages', 'selectedLanguageCode', 'loc'],

    data: function () {
        return {
            languageCode: this.selectedLanguageCode,
        }
    },

    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        },

        onChangeLanguage: function () {
            vueApp.changeLanguage(this.languageCode);
            // Update localStorage for selected language.
            localStorage.setItem('selectedLanguage', this.languageCode);
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        }
    },

    watch: {
        selectedLanguageCode: function (code) {
            this.languageCode = code;
        }
    }
};
</script><script id="gdpr-template" type="text/x-template">
    <transition name="fade">
    <div v-show="isShowing">
        <div id="consent" v-show="showingNotification" class="gdpr_banner f_row">
            <div>{{ loc.gdpr_notification }} <a href="http://www.bluewizard.com/privacypolicy" target="_window">{{ loc.gdpr_link }}</a>
            </div>
            <div class="f_row">
                <button @click="onDisagreeClicked()" class="ss_button btn_red bevel_red ss_marginright ss_marginleft">{{ loc.gdpr_disagree }}</button>
                <button @click="onAgreeClicked()" class="ss_button btn_green bevel_green">{{ loc.gdpr_agree }}</button>
            </div>
        </div>

        <div id="doConsent" v-show="showingConsent" class="gdpr_banner f_row">
            <div>{{ loc.gdpr_consent }}</div>
            <div>
                <button @click="close()" class="ss_button btn_green bevel_green btn_md">{{ loc.ok }}</button>
            </div>
        </div>

        <div id="noConsent"v-show="showingNoConsent" class="gdpr_banner f_row">
            <div>{{ loc.gdpr_noConsent }}</div>
            <div>
                <button @click="close()" class="ss_button btn_green bevel_green btn_md">{{ loc.ok }}</button>
            </div>
        </div>
    </div>
    </transition>
</script>

<script>
var comp_gdpr = {
    template: '#gdpr-template',
    props: ['loc'],

    data: function () {
        return {
            isShowing: false,
            showingNotification: false,
            showingConsent: false,
            showingNoConsent: false
        }
    },

    methods: {
        show: function () {
            this.isShowing = true;
            this.showingNotification = true;
            this.showingConsent = false;
            this.showingNoConsent = false;
        },

        close: function () {
            this.isShowing = false;
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        },

        onAgreeClicked: function () {
            this.showingConsent = true;
            this.showingNotification = false;
            extern.doConsent();
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        },

        onDisagreeClicked: function () {
            this.showingNoConsent = true;
            this.showingNotification = false;
            extern.doNotConsent();
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        }
    }
};
</script>
<script id="settings-template" type="text/x-template">
  <div>
    <h1 class="roundme_sm">{{ loc.p_settings_title }}</h1>

    <div id="popupInnards" class="roundme_sm fullwidth f_row f_spaced">
        <div id="account_left">
            <h3 class="nospace">{{ loc.p_settings_keybindings }}</h3>
            
            <div v-for="c in settingsUi.controls.game" class="nowrap">
                <settings-control-binder :loc="loc" :control-id="c.id" :control-value="c.value" @control-captured="onGameControlCaptured"></settings-control-binder>
                <div class="label">{{ loc[c.locKey] }}</div>
            </div>

            <div v-for="c in settingsUi.controls.spectate" class="nowrap">
                <settings-control-binder :loc="loc" :control-id="c.id" :control-value="c.value" @control-captured="onSpectateControlCaptured"></settings-control-binder>
                <div class="label">{{ loc[c.locKey] }}</div>
            </div>

            <h3 class="nospace ss_margintop">{{ loc.p_settings_language }}</h3>
            <language-selector :languages="languages" :loc="loc" :selectedLanguageCode="currentLanguageCode" class="ss_select"></language-selector>
        </div>
        
        <div id="settings_right">
            <div v-for="t in settingsUi.adjusters" class="nowrap">
                <settings-adjuster :loc="loc" :loc-key="t.locKey" :control-id="t.id" :control-value="t.value" :min="t.min" :max="t.max" :step="t.step" :multiplier="t.multiplier" @setting-adjusted="onSettingAdjusted"></settings-adjuster>
            </div>

            <div v-for="t in settingsUi.togglers" class="nowrap">
                <settings-toggler v-if="(t.id === 'shadowsEnabled' || t.id === 'highRes') ? showDetailSettings : true" :loc="loc" :loc-key="t.locKey" :control-id="t.id" :control-value="t.value" @setting-toggled="onSettingToggled"></settings-toggler>
            </div>

            <button v-show="showPrivacyOptions" @click="onPrivacyOptionsClicked" class="ss_button btn_blue bevel_blue btn_md ss_margintop_xl">{{ loc.p_settings_privacy }}</button>
        </div>
    </div>

    <div id="btn_horizontal" class="f_center">
        <button @click="onCloseClick()" class="ss_button btn_red bevel_red btn_sm">{{ loc.cancel }}</button>
        <button @click="onResetClick" class="ss_button btn_yolk bevel_yolk btn_sm">{{ loc.p_settings_reset }}</button>
        <button @click="onSaveClick()" class="ss_button btn_green bevel_green btn_sm">{{ loc.confirm }}</button>
    </div>

  </div>
</script>

<script id="settings-control-binder-template" type="text/x-template">
    <input ref="controlInput" @change="playSound('./sound/ui/ui_onchange.mp3')" type="text" v-model="currentValue" :placeholder="loc.press_key" class="ss_keybind clickme" :class="(currentValue === 'undefined' ? 'ss_keybind_undefined' : '')"
        v-on:mousedown="onMouseDown($event)"
        v-on:keydown="onKeyDown($event)" 
        v-on:keyup="onKeyUp($event)" 
        v-on:wheel="onWheel($event)"
        v-on:focusout="onFocusOut($event)">
</script>

<script>
var comp_settings_control_binder = {
    template: '#settings-control-binder-template',
    props: ['loc', 'controlId', 'controlValue'],
    
    data: function () {
        return {
            currentValue: this.controlValue,
            isCapturing: false
        }
    },

    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        },
        
        reset: function () {
            this.currentValue = this.controlValue;
            this.isCapturing = false;
            this.$refs.controlInput.blur();
        },

        capture: function (value) {
            this.isCapturing = false;
            this.$refs.controlInput.blur();
            this.$emit('control-captured', this.controlId, value);
        },

        onMouseDown: function (event) {
            if (!this.isCapturing) {
                this.currentValue = '';
                this.isCapturing = true;
            } else {
                this.playSound('./sound/ui/ui_onchange.mp3')
                this.capture('MOUSE ' + event.button);
            }
        },

        onKeyDown: function (event) {
            this.currentValue = '';
            event.stopPropagation();
        },

        onKeyUp: function (event) {
            event.stopPropagation();
            var key = event.key;

            if (key == 'Escape' || key == 'Tab' || key == 'Enter') {
                return;
            }

            if (key == ' ') {
                key = 'space';
                event.preventDefault();
            }
            
            this.capture(key);
        },

        onWheel: function (event) {
            if (this.isCapturing) {
                this.playSound('./sound/ui/ui_onchange.mp3')
                if (event.deltaY > 0) {
                    this.capture('WHEEL DOWN');
                } else if (event.deltaY < 0) {
                    this.capture('WHEEL UP');
                }
            }
        },

        onFocusOut: function (event) {
            this.reset();
        }
    },

    watch: {
        // The value prop gets updated by the parent control; watch for changes and update the backing field of the textbox
        controlValue: function (newValue) {
            this.currentValue = (newValue === null) ? 'undefined' : newValue;
        }
    }
};
</script><script id="settings-adjuster-template" type="text/x-template">
    <div>
        <h3 class="center_cont nospace">{{ loc[locKey] }}</h3>

        <div class="f_row ss_margintop">
            <input class="ss_slider" type="range" :min="min" :max="max" :step="step" v-model="currentValue" @change="onChange">
            <label class="ss_slider label">{{ Math.floor(currentValue * (multiplier || 1)) }}</label>
        </div>
    </div>
</script>

<script>
var comp_settings_adjuster = {
    template: '#settings-adjuster-template',
    props: ['loc', 'locKey', 'controlId', 'controlValue', 'min', 'max', 'step', 'multiplier'],

    data: function () {
        return {
            currentValue: this.controlValue
        }
    },

    methods: {
        onChange: function (event) {
            this.$emit('setting-adjusted', this.controlId, this.currentValue);
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        }
    },

    watch: {
        // controlValue prop could change when player X's out or clicks Cancel
        controlValue: function (newValue) {
            if (this.currentValue !== newValue) {
                this.currentValue = newValue;
            }
        }
    }
};
</script><script id="settings-toggler-template" type="text/x-template">
    <label class="ss_checkbox label"> {{ loc[locKey] }}
        <input type="checkbox" v-model="currentValue" @change="onChange($event)">
        <span class="checkmark"></span>
    </label>
</script>

<script>
var comp_settings_toggler = {
    template: '#settings-toggler-template',
    props: ['loc', 'locKey', 'controlId', 'controlValue'],

    data: function () {
        return {
            currentValue: this.controlValue
        }
    },

    methods: {
        onChange: function (event) {
            this.$emit('setting-toggled', this.controlId, this.currentValue);
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        }
    },

    watch: {
        // controlValue prop could change when player X's out or clicks Cancel
        controlValue: function (newValue) {
            if (this.currentValue !== newValue) {
                this.currentValue = newValue;
            }
        }
    }
};
</script>
<script>
var comp_settings = {
    template: '#settings-template',
    components: {
        'settings-control-binder': comp_settings_control_binder,
        'language-selector': comp_language_selector,
        'settings-adjuster': comp_settings_adjuster,
        'settings-toggler': comp_settings_toggler
    },
    props: ['loc', 'settingsUi', 'languages', 'currentLanguageCode', 'showPrivacyOptions'],

    data: function () {
        return {
            originalSettings: {},
            showDetailSettings: false,
            originalLanguage: '',
        }
    },
    
    methods: {
        captureOriginalSettings: function () {
            this.originalSettings = deepClone(vueData.settingsUi);
            this.originalLanguage = this.currentLanguageCode;
        },

        applyOriginalSettings: function () {
            vueData.settingsUi = this.originalSettings;
            this.showDetailSettings = !vueData.settingsUi.togglers.find( a => { return a.id === 'autoDetail'; }).value;

            console.log('applying original settings: ' + JSON.stringify(vueData.settingsUi));
        },

        onGameControlCaptured: function (id, value) {
            this.onControlCaptured(this.settingsUi.controls.game, id, value)
        },

        onSpectateControlCaptured: function (id, value) {
            this.onControlCaptured(this.settingsUi.controls.spectate, id, value)
        },

        onControlCaptured: function (controls, id, value) {
            value = value.toLocaleUpperCase();

            controls
                .forEach( (c) => {
                    if (c.id === id) {
                        c.value = value;
                    } else {
                        if (c.value === value) {
                            c.value = null;
                        }
                    }
            });
        },

        onSettingToggled: function (id, value) {
            console.log('value: ' + value);
            var toggler = this.settingsUi.togglers.find( (t) => { return t.id === id; });
            toggler.value = value;

            if (id === 'autoDetail') {
                this.showDetailSettings = !value;
            }
        },

        onSettingAdjusted: function (id, value) {
            this.settingsUi.adjusters.find( (a) => { return a.id === id; }).value = value;

            if (id === 'volume') {
                extern.setVolume(value);
            }

            if (id === 'mouseSpeed') {
                extern.setMouseSpeed(value);
            }
        },

        onVolumeChange: function () {
            extern.setVolume(this.settingsUi.volume);
        },

        onPrivacyOptionsClicked: function () {
            this.$emit('privacy-options-opened');
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },
        
        onCancelClick: function () {
            this.applyOriginalSettings();
            this.cancelLanguageSelect();
            this.$parent.close();
        },

        onCloseClick: function () {
            this.applyOriginalSettings();
            this.cancelLanguageSelect();
            this.$parent.close();
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
        },
        
        onSaveClick: function () {
            extern.applyUiSettings(this.settingsUi, this.originalSettings);
            this.resetOriginalLanguage();
            this.$parent.toggle();
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        },

        onResetClick: function () {
            extern.resetSettings();
            vueApp.playSound('./sound/ui/ui_reset.mp3');
        },
        cancelLanguageSelect: function() {
            this.originalLanguage === vueApp.$data.currentLanguageCode ?
                vueApp.changeLanguage(vueApp.$data.currentLanguageCode) : vueApp.changeLanguage(this.originalLanguage);
            // Revert localStorage for language
            localStorage.setItem('selectedLanguage', this.originalLanguage);
            this.resetOriginalLanguage();
        },
        resetOriginalLanguage: function() {
            this.originalLanguage = '';
        },
        setSettings: function (settings) {
            var getSettingById = (list, id) => {
                    return list.filter( o => {
                            return o.id == id;
                    })[0];
            };

            getSettingById(this.settingsUi.controls.game, 'up').value = settings.controls.game.up;
            getSettingById(this.settingsUi.controls.game, 'down').value = settings.controls.game.down;
            getSettingById(this.settingsUi.controls.game, 'left').value = settings.controls.game.left;
            getSettingById(this.settingsUi.controls.game, 'right').value = settings.controls.game.right;
            getSettingById(this.settingsUi.controls.game, 'jump').value = settings.controls.game.jump;
            getSettingById(this.settingsUi.controls.game, 'fire').value = settings.controls.game.fire;
            getSettingById(this.settingsUi.controls.game, 'scope').value = settings.controls.game.scope;
            getSettingById(this.settingsUi.controls.game, 'reload').value = settings.controls.game.reload;
            getSettingById(this.settingsUi.controls.game, 'swap_weapon').value = settings.controls.game.swap_weapon;
            getSettingById(this.settingsUi.controls.game, 'grenade').value = settings.controls.game.grenade;
            getSettingById(this.settingsUi.controls.spectate, 'ascend').value = settings.controls.spectate.ascend;
            getSettingById(this.settingsUi.controls.spectate, 'descend').value = settings.controls.spectate.descend;
            
            getSettingById(this.settingsUi.adjusters, 'volume').value = settings.volume;
            getSettingById(this.settingsUi.adjusters, 'mouseSpeed').value = settings.mouseSpeed;

            getSettingById(this.settingsUi.togglers, 'mouseInvert').value = (settings.mouseInvert !== 1);
            getSettingById(this.settingsUi.togglers, 'holdToAim').value = settings.holdToAim;
            getSettingById(this.settingsUi.togglers, 'enableChat').value = settings.enableChat;
            getSettingById(this.settingsUi.togglers, 'autoDetail').value = settings.autoDetail;
            getSettingById(this.settingsUi.togglers, 'shadowsEnabled').value = settings.shadowsEnabled;
            getSettingById(this.settingsUi.togglers, 'highRes').value = settings.highRes;

            console.log('auto detail: ' + settings.autoDetail);
            this.showDetailSettings = !settings.autoDetail;
        },
    },

};
</script><script id="help-template" type="text/x-template">
    <div>
       <div id="horizontalTabs">
            <button id="faq_button" @click="toggleTabs" class="ss_bigtab bevel_blue ss_marginright" :class="(showTab1 ? 'selected' : '')">{{ loc.faq }}</button>
            <button id="fb_button" @click="toggleTabs" class="ss_bigtab bevel_blue" :class="(!showTab1 ? 'selected' : '')">{{ loc.feedback }}</button>
        </div>
        <div v-show="showTab1">
            
            <div id="feedback_panel">      

                <h1>{{ loc.faq_title }}</h1>

                <div v-for="qa in loc.faqItems">
                    <a :name="qa.anchor"></a>
                    <h3>{{ qa.q }}</h3>
                    <span v-html="qa.a"></span>
                </div>
                
                <hr>
                <div id="btn_horizontal" class="f_center">
                    <button @click="onBackClick" class="ss_button btn_md btn_red bevel_red ss_marginright">{{ loc.cancel }}</button>
                </div>
                
            </div>            
        </div>

        <div v-show="!showTab1">
            
            <div id="feedback_panel">
                <h1>{{ loc.fb_feedback_title }}</h1>
                
                <p>{{ loc.fb_feedback_intro }}</p>

                <div id="btn_horizontal" class="f_center">
                    <select v-model="selectedType" class="ss_field ss_marginright" @click="playSound('./sound/ui/ui_click.mp3')" @change="playSound('./sound/ui/ui_onchange.mp3')">
                        <option v-for="type in feedbackType" :value="type.id">{{ loc[type.locKey] }}</option>
                    </select>
                
                    <input id="feedbackEmail" v-model="email" :placeholder="loc.fb_email_ph" class="ss_field" v-on:keyup="validateEmail">
                </div>
                
                <div>
                    <textarea id="feedbackText" class="ss_field" v-model="feedback" :placeholder="loc.fb_feedback_ph" v-on:keyup="validateMessage"></textarea>
                </div>
                
                <div class="f_center f_col">
                    <span v-show="emailInvalid" class="ss_marginright error_text">{{ loc.fb_bad_email }}</span>
                    <span v-show="messageInvalid" class="ss_marginright error_text">{{ loc.fb_no_comment }}</span>
                </div>
                
                <div id="btn_horizontal" class="f_center">
                    <button @click="onBackClick" class="ss_button btn_md btn_red bevel_red ss_marginright">{{ loc.cancel }}</button>
                    <button @click="onSendClick" class="ss_button btn_md btn_green bevel_green">{{ loc.fb_send }}</button>
                </div>
            </div>

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

<script>
var comp_help = {
    template: '#help-template',
    props: ['loc'],
    data: function () {
        return {
            showTab1: true,
            feedbackType: [
                { id: 0, locKey: 'fb_type_commquest' },
                { id: 1, locKey: 'fb_type_request' },
                { id: 2, locKey: 'fb_type_bug' },
                { id: 3, locKey: 'fb_type_purchase' },
                { id: 4, locKey: 'fb_type_account' },
                { id: 5, locKey: 'fb_type_abuse' },
                { id: 6, locKey: 'fb_type_other' }
            ],
            selectedType: 0,
            email: '',
            feedback: '',
            doValidation: false,
            emailInvalid: false,
            messageInvalid: false,

        }
    },
    feedbackValidateTimeout: 0,
    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        },
        
        validateEmail: function () {
            if (!this.doValidation) {
                return;
            }
            // Insane e-mail-validating regex
            var re = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
            
            this.emailInvalid = (this.email === '' || !re.test(this.email));
            return !this.emailInvalid;
        },

        validateMessage: function () {
            if (!this.doValidation) {
                return;
            }
            this.messageInvalid = this.feedback === '';
            return !this.messageInvalid;
        },

        toggleTabs: function () {
            this.showTab1 = !this.showTab1;
            vueApp.playSound('./sound/ui/ui_toggletab.mp3');
        },
        
        onBackClick: function () {
            vueApp.$refs.helpPopup.toggle();
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
        },

        onSendClick: function () {
            this.doValidation = true;
            if (!this.validateEmail() || !this.validateMessage()) {
                return;
            }

            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');

            // Send that shit out
            extern.api_feedback(this.selectedType, this.email, this.feedback);
            this.$parent.toggle();

            this.selectedType = 0;
            this.feedback = null;
            this.email = null;
        }
    }
};
</script><script id="egg-store-template" type="text/x-template">
    <div class="fullwidth">
        
        <h1 class="roundme_sm">{{ loc.p_egg_shop_title }}</h1>

        <div class="f_row">

            <div id="popupInnards" class="box_blue4 roundme_md f_col center_cont ss_marginright_lg box_relative">
                
                <div id="eggshop_banner" class="hideme">
                    <img src="img/egg-shop-banner-left.png">
                    <div class="eggshop_banner_mid">
                        {{ loc.p_egg_shop_mostpopular }}
                    </div>
                </div>

                <p align="center" class="nospace"><img src="./img/eggshop_egg1.png" class="eggshop_image"></p>
                <h6 class="nospace shadow_bluebig4 eggshop_bigtitle">{{ loc.p_egg_shop_eggpile }}</h6>
                <span class="eggshop_subtitle text_white">{{ loc.p_egg_shop_eggpile_desc }}</span>
                <div class="eggshop_pricebox roundme_sm">$5 USD</div>
                <button class="ss_button btn_green bevel_green btn_sm center_h" @click="onItemClicked('egg_pack_small')">{{ loc.p_buy_item_confirm }}</button>
            </div>

            <div id="popupInnards" class="box_blue4 roundme_md f_col center_cont ss_marginright_lg box_relative">

                <div id="eggshop_banner">
                    <img src="img/egg-shop-banner-left.png">
                    <div class="eggshop_banner_mid">
                        {{ loc.p_egg_shop_mostpopular }}
                    </div>
                </div>

                <p align="center" class="nospace"><img src="./img/eggshop_egg2.png" class="eggshop_image"></p>
                <h6 class="nospace shadow_bluebig4 eggshop_bigtitle">{{ loc.p_egg_shop_eggbasket }}</h6>
                <span class="eggshop_subtitle text_white">{{ loc.p_egg_shop_eggbasket_desc }}</span>
                <div class="eggshop_pricebox roundme_sm">$10 USD</div>
                <button class="ss_button btn_green bevel_green btn_sm center_h" @click="onItemClicked('egg_pack_medium')">{{ loc.p_buy_item_confirm }}</button>
            </div>

            <div id="popupInnards" class="box_blue4 roundme_md f_col center_cont ss_marginright_lg box_relative">

                <div id="eggshop_banner" class="hideme">
                    <img src="img/egg-shop-banner-left.png">
                    <div class="eggshop_banner_mid">
                        {{ loc.p_egg_shop_mostpopular }}
                    </div>
                </div>

                <p align="center" class="nospace"><img src="./img/eggshop_egg3.png" class="eggshop_image"></p>
                <h6 class="nospace shadow_bluebig4 eggshop_bigtitle">{{ loc.p_egg_shop_eggbox }}</h6>
                <span class="eggshop_subtitle text_white">{{ loc.p_egg_shop_eggbox_desc }}</span>
                <div class="eggshop_pricebox roundme_sm">$20 USD</div>
                <button class="ss_button btn_green bevel_green btn_sm center_h" @click="onItemClicked('egg_pack_large')">{{ loc.p_buy_item_confirm }}</button>
            </div>

            <div id="popupInnards" class="box_blue4 roundme_md f_col center_cont box_relative">

                <div id="eggshop_banner">
                    <img src="img/egg-shop-banner-left.png">
                    <div class="eggshop_banner_mid">
                        {{ loc.p_egg_shop_bestvalue }}
                    </div>
                </div>

                <p align="center" class="nospace"><img src="./img/eggshop_egg4.png" class="eggshop_image"></p>
                <h6 class="nospace shadow_bluebig4 eggshop_bigtitle">{{ loc.p_egg_shop_eggcluckton }}</h6>
                <span class="eggshop_subtitle text_white">{{ loc.p_egg_shop_eggcluckton_desc }}</span>
                <div class="eggshop_pricebox roundme_sm">$50 USD</div>
                <button class="ss_button btn_green bevel_green btn_sm center_h" @click="onItemClicked('egg_pack_giant')">{{ loc.p_buy_item_confirm }}</button>
            </div>

        </div>

        <div id="popupInnards" class="box_blue4 roundme_md f_row center_cont ss_margintop box_relative eggshop_chicken_box" style="width: 80%; margin: 0 auto;">
            <h1 class="eggshop_megatitle shadow_bluebig4">Golden<br>Chicken!</h1>
        
            <img src="./img/ico_chicken.png" class="eggshop_chicken">

            <div class="eggshop_goldchicken_right">
                <ul>
                    <li> {{ loc.p_chicken_goldfeature1 }}</li>
                    <li> {{ loc.p_chicken_goldfeature2 }}</li>
                    <li v-html="loc.p_chicken_goldfeature3"></li>
                    <li> {{ loc.p_chicken_goldfeature4 }}</li>
                </ul>
                
                <div class="eggshop_pricebox roundme_sm">$9.99 USD</div>
                <button class="ss_button btn_green bevel_green width_md center_h" @click="onItemClicked('golden_chicken_pass')">{{ loc.p_chicken_goldbutton }}</button>
            </div>
        </div>
    </div>
</script>

<script>
var comp_egg_store = {
    template: '#egg-store-template',
    props: ['loc'],
    
    methods: {
        onItemClicked: function (sku) {
            this.$parent.hide();
            extern.buyProductForMoney(sku);
        }
    }
};
</script><script id="house-ad-big-template" type="text/x-template">
    <div v-show="(useAd !== null)">
        <button @click="onCloseClicked" class="popup_close splash_ad_close ad_close"></button>
        <img :src="adImageUrl" @click="onClicked" class="splash_ad_image centered roundme_md">
    </div>
</script>

<script>
var comp_house_ad_big = {
    template: '#house-ad-big-template',
    data: function() {
        return {
            removeOverlayClick: '',
        }
    },
    
    props: ['useAd'],

    bigAdTimeout: null,

    methods: {
        onCloseClicked: function () {
            console.log('big ad closed');
            this.close();
        },

        onClicked: function () {
            this.close();
            vueApp.playSound('./sound/ui/ui_click.mp3');
            extern.clickedHouseLink(this.useAd);
        },

        close: function () {
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
            this.$emit('big-house-ad-closed');
        },

        outsideClickClose: function() {
            const showingId = document.getElementById('house-ad-big-template', true);
            this.removeOverlayClick = this.handleOutsideClick;
            document.addEventListener('click', this.removeOverlayClick);
        },
        
        handleOutsideClick: function(e) {
            // Stop bubbling
            e.stopPropagation();
            // If the target does NOT include the class splash_ad_image use the onCloseClicked method and remove the eventListener
            if ( ! e.target.id.includes('splash_ad_image') ) {
                this.onCloseClicked();
                document.removeEventListener('click', this.removeOverlayClick);
            }
        },
    },

    computed: {
        adImageUrl: function () {
            if (!hasValue(this.useAd)) {
                return;
            }

            return 'img/promo/{0}{1}'.format(this.useAd.id, this.useAd.imageExt);
        }
    },

    watch: {
        useAd: function (bigAd) {
            if (hasValue(bigAd)) {
                this.$options.bigAdTimeout = setTimeout(function () {
                    vueApp.ui.houseAds.big = null;
                }, 15000);
                // Close with outside click
                this.outsideClickClose();
            }
        }
    }
};
</script><script id="house-ad-small-template" type="text/x-template">
    <img v-show="(useAd !== null)" :src="adImageUrl" @click="onClicked" class="news_banner roundme_md">
</script>

<script>
var comp_house_ad_small = {
    template: '#house-ad-small-template',
    
    props: ['useAd'],

    methods: {
        onClicked: function () {
            vueApp.playSound('./sound/ui/ui_click.mp3');
            extern.clickedHouseAdSmall(this.useAd);
        }
    },

    computed: {
        adImageUrl: function () {
            if (!hasValue(this.useAd)) {
                return;
            }

            return 'img/promo/{0}{1}'.format(this.useAd.id, this.useAd.imageExt);
        }
    }
};
</script><script id="item-template" type="text/x-template">
    <div class="store_item roundme_lg '.$is_hi.' '.$is_na.' clickme" ref="eggItemInvetory" :class="highlightSelected()" @click="onClick">
        <div v-if="showPrice" class="equip_smallprice">
            <svg class="equip_egg eggIcon"><use xlink:href="#icon-egg"></use></svg>
            <div class="equip_cost">{{ item.price }}</div>
        </div>
        <div v-if="showPhysicalMerch">
            <div class="equip_special">{{ loc.eq_special_merch }}</div>
        </div>
        <canvas ref="itemCanvas" class="equip_icon" width="250" height="250"></canvas>
    </div>
</script>

<script>
var comp_item = {
    template: '#item-template',
    props: ['loc', 'item', 'showItemOnly', 'isSelected'],

    data: function () {
        return {
            itemOnly: hasValue(this.showItemOnly) ? this.showItemOnly : false
        }
    },

    computed: {
        showPrice () {
            return this.isItemSellable() && this.item.price > 0;
        },

        showPhysicalMerch () {
            var physicalMerch = this.isItemSellable() && this.item.unlock === 'physical';
            return physicalMerch;
        },
    },

    mounted() {
        this.renderItem();
        this.itemHightlightedOrder();
    },
    methods: {
        isItemSellable: function () {
            return !this.itemOnly && vueData.equip.mode == vueData.equip.equipModes.shop;
        },

        renderItem: function () {
            extern.renderItemToCanvas(this.item, this.$refs.itemCanvas);
        },

        highlightSelected: function () {
            return this.isSelected ? 'highlight' : '';
        },

        onClick: function () {
            this.$emit('item-selected', this.item);
        },
        itemHightlightedOrder: function() {
            return this.$refs.eggItemInvetory.classList.contains('highlight') ? this.$refs.eggItemInvetory.style.order='-1' : null;
        },
    },

    watch: {
        item: function (val) {
            this.renderItem();
        }
    }
};
</script><script id="gold-chicken-template" type="text/x-template">
    <div>
    <div class="f_row fullwidth">

        <div id="popupInnards" class="box_blue3 roundme_sm f_col center_cont f_justify_start ss_marginright_lg">
            <h2 class="text_white shadow_blue4 nospace margintop_xl">{{ loc.p_chicken_goldchicken }}</h2>
            <p class="nospace"><strong>{{ loc.p_chicken_goldchicken_price }}</strong></p>
            <p align="center"><img src="./img/chicken_shadow.png" class="chicken_popup_image"></p>
            <div class="box_light roundme_sm fullwidth">
                <ul>
                    <li> {{ loc.p_chicken_goldfeature1 }} </li>
                    <li> {{ loc.p_chicken_goldfeature2 }} </li>
                    <li v-html="loc.p_chicken_goldfeature3"></li>
                    <li> {{ loc.p_chicken_goldfeature4 }} </li>
                </ul>
            </div>
            <button class="ss_button btn_green bevel_green btn_sm center_h" @click="onChickenClick">{{ loc.p_chicken_goldbutton }}</button>
        </div>
        
        <div id="popupInnards" class="box_blue3 roundme_sm f_col center_cont f_justify_start">
            <h2 class="text_white shadow_blue4 nospace margintop_xl">{{ loc.p_chicken_nugget }}</h2>
            <p class="nospace"><strong>{{ loc.p_chicken_nugget_price }}</strong></p>
            <p align="center"><img src="./img/nugget_shadow.png" class="chicken_popup_image"></p>
            <div class="box_light roundme_sm fullwidth">
                <ul>
                    <li>{{ loc.p_chicken_nuggetfeature1 }}</li>
                    <li> {{ loc.p_chicken_nuggetfeature2 }} </li>
                    <li v-html="loc.p_chicken_nuggetfeature3"></li>
                    <li> {{ loc.p_chicken_nuggetfeature4 }} </li>
                </ul>
            </div>
            
            <button class="ss_button btn_green bevel_green btn_sm center_h" @click="onNuggetClick">{{ loc.p_chicken_nuggetbutton }}</button>
        </div>
    </div>
    <div id="btn_horizontal" class="f_center">
        <button @click="onCloseClick()" class="ss_button btn_red bevel_red btn_sm">{{ loc.cancel }}</button>
    </div>
    </div>
</script>

<script>
var comp_gold_chicken_popup = {
    template: '#gold-chicken-template',
    props: ['loc'],
    methods: {
        onCloseClick: function () {
            this.$parent.close();
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
        },
        onChickenClick: function () {
            document.exitPointerLock();
            window.onkeydown = null;
            window.onkeyup = null;
            this.$parent.toggle();
            extern.buyGoldenChicken();
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        },

        onNuggetClick: function () {
            this.$parent.hide();
            extern.startChickenNugget();
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        }
    }
};
</script><script id="chicken-nugget-template" type="text/x-template">
    <div id="popupInnards" class="box_dark roundme_sm fullwidth f_col">
        
        <h3 class="nospace center_cont">{{ loc.p_nugget_instruction }}</h3>
        
        <iframe id="miniGameFrame" ref="miniGameFrame" src="about:blank" frameBorder="0" class="roundme_lg" ></iframe>
        
        <p align="center">
            <button id="gotNuggetOK" v-show="isMiniGameComplete" @click="onGotNugget" class="ss_button btn_shiny clickme invisible">{{ loc.p_nugget_button }}</button>
        </p>

        <div class="center_cont">
            <div id="chickenNuggetAdContainer" ref="chickenNuggetAdContainer" style="display: block; pointer-events: all;"></div>
        </div>
        
    </div>
</script>

<script>
var comp_chicken_nugget_popup = {
    template: '#chicken-nugget-template',
    props: ['loc'],

    data: function () {
        return {
            isMiniGameComplete: false
        }
    },

    methods: {
        placeBannerAdTag: function (tagEl) {
            this.$refs.chickenNuggetAdContainer.appendChild(tagEl);
        },
        
        loadMiniGame: function () {
            this.isMiniGameComplete = false;
            this.$refs.miniGameFrame.src = "app_nugget/index.html";

            // The ad tags are outside of the Vue app; manipulate the DOM directly
            this.$refs.chickenNuggetAdContainer.appendChild(vueApp.$options.multisizeAdTag);
            extern.showBannerAd(vueApp.$options.multisizeAdTag.id);
        },

        unloadMiniGame: function () {
            this.$refs.miniGameFrame.src = "about:blank";
        },

        onGotNugget: function () {
            this.$parent.hide();
            this.unloadMiniGame();
            extern.checkUpgrade();
        },

        onMiniGameCompleted: function () {
            this.isMiniGameComplete = true;
        }
    }
};
</script>
<script id="home-screen-template" type="text/x-template">
    <div>
        
        <house-ad-big id="big-house-ad" :useAd="ui.houseAds.big" @big-house-ad-closed="onBigHouseAdClosed"></house-ad-big>
        
        <div id="mainHead">
            <streamer-panel id="twitch_panel" :streams="twitchStreams" :title="loc.twitch_title" :viewers="loc.twitch_viewers" icon="ico_twitch"></streamer-panel>
            <!-- <streamer-panel id="youtube_panel" :streams="youtubeStreams" :title="loc.youtube_title" :viewers="loc.youtube_viewers" icon="ico_youtube"></streamer-panel> -->
        </div>

        <div id="mainLayout">
            <account-panel id="account_panel" ref="accountPanel" :loc="loc" :selected-language-code="currentLanguageCode" :eggs="eggs" :languages="languages" :show-corner-buttons="ui.showCornerButtons" :show-bottom="true" :photo-url="photoUrl" :is-anonymous="isAnonymous" :is-of-age="isOfAge" :show-targeted-ads="showTargetedAds" :ui="ui" @sign-in-clicked="onSignInClicked" @sign-out-clicked="onSignOutClicked"></account-panel>
            
            <div id="logo">
                <a href="https://www.shellshock.io" @click="playSound('./sound/ui/ui_click.mp3')"><img src="img/logo.png"></a>
            </div>

            <div id="panel_front_play">
                <play-panel id="play_game" ref="playPanel" :loc="loc" :player-name="playerName" :game-types="gameTypes" :current-game-type="currentGameType" :server-list="serverList" :current-server-id="currentServerId" :home="home" @playerNameChanged="onPlayerNameChanged"></play-panel>
                <stats-panel id="stats_panel" :loc="loc" :kills="kills" :deaths="deaths" :kdr="kdr" :streak="streak"></stats-panel>
            </div>
            
            <div id="panel_front_egg">
                <weapon-select-panel id="weapon_select" :current-class="classIdx"></weapon-select-panel>
                <button class="ss_button btn_md btn_yolk bevel_yolk" @click="onEquipClicked">{{ loc.eq_equipment }}</button>
            </div>

            <div id="panel_front_news">
                <div id="news_feed" class="front_panel roundme_md">
                    <div id="news_mask"></div>
                    <h3 class="nospace">{{ loc.home_latestnews }}</h3>
                    <newsfeed-panel id="news_scroll" ref="newsScroll" :current-language-code="currentLanguageCode"></newsfeed-panel>
                </div>
                <house-ad-small id="banner-ad" :useAd="ui.houseAds.small"></house-ad-small>
            </div>
        </div>

        <div id="mainFooter">
            <chicken-panel id="chicken_panel" :loc="loc" :is-upgraded="isUpgraded"></chicken-panel>
            <footer-links-panel id="footer_links_panel" :loc="loc"></footer-links-panel>
            <social-panel id="social_panel"></social-panel>
        </div>

        <!-- Popup: Firebase Sign In -->
        <large-popup id="firebaseSignInPopup" ref="firebaseSignInPopup" :overlay-close="false">
            <template slot="content">
                <h1 class="nospace">{{ loc.p_signin_head }}</h1>
                <div id="firebaseui-auth-container"></div>
                <div id="btn_horizontal" class="f_center">
                    <button @click="onSignInCancelClicked()" class="ss_button btn_red bevel_red btn_sm">{{ loc.cancel }}</button>
                </div>
            </template>
        </large-popup>

        <!-- Popup: Check Email -->
        <small-popup id="checkEmailPopup" ref="checkEmailPopup" :hide-cancel="true">
            <template slot="header">{{ loc.p_check_email_title }}</template>
            <template slot="content">
                <p>{{ loc.p_check_email_text1 }}:</p>
                <h5 class="nospace center_cont">{{ maskedEmail }}</h5>
                <p class="ss_marginbottom">{{ loc.p_check_email_text2 }}</p>
            </template>
            <template slot="confirm">{{ loc.ok }}</template>
        </small-popup>

        <!-- Popup: Resend Email -->
        <small-popup id="resendEmailPopup" ref="resendEmailPopup" @popup-confirm="onResendEmailClicked">
            <template slot="header">{{ loc.p_resend_email_title }}</template>
            <template slot="content">
                <p>{{ loc.p_resend_email_text1 }}:</p>
                <h5 class="nospace center_cont">{{ maskedEmail }}</h5>
                <p class="ss_marginbottom">{{ loc.p_resend_email_text2 }}</p>
            </template>
            <template slot="cancel">{{ loc.ok }}</template>
            <template slot="confirm">{{ loc.p_resend_email_resend }}</template>
        </small-popup>
        
    </div>
</script>

<script id="create-private-game-template" type="text/x-template">
    <div>
        <h1 class="roundme_sm">{{ loc.p_privatematch_title }}</h1>
    
        <div class="box_blue2 roundme_sm fullwidth">
            <div id="popupInnards" class="fullwidth f_row f_spaced">
                
                <div id="private_left" class="f_col f_start">
                    <h3 class="center_cont fullwidth">{{ loc.p_privatematch_gametype }}</h3>
                    <select name="gameType" v-model="pickedGameType" class="ss_select fullwidth" @click="playSound('./sound/ui/ui_click.mp3')" @change="playSound('./sound/ui/ui_onchange.mp3')">
                        <option v-for="g in gameTypes" v-bind:value="g.value">{{ loc[g.locKey] }}</option>
                    </select>
                    <button class="ss_button button_blue bevel_blue fullwidth" @click="onServerClick">{{ loc.server }}: {{ loc[serverLocKey] }}</button>
                    
                    <button name="play" @click="onPlayClick" class="ss_button btn_big fullwidth btn_green bevel_green btn_sm"><i class="fa fa-play fa-sm"></i> {{ loc.p_privatematch_create }}</button>
                    <!-- Player limit is not in place yet 
                        <h3 class="nospace">{{ loc.p_privatematch_players }}</h3>
                    
                    <div id="player_selector">
                        <img src="./img/ico_arrowLeft.png" class="numberArrow">
                        <input type="text" v-model class="ss_field fld_number">
                        <img src="./img/ico_arrowRight.png" class="numberArrow">
                    </div> -->
                </div>
                
                <div class="f_col j_start">
                    <h3 class="ss_marginleft_lg center_cont">{{ loc.p_privatematch_selectmap }}</h3>
                    
                    <div id="private_maps" class="ss_marginleft_lg roundme_md">
                        <img :src="mapImgPath" id="mapThumb" class="roundme_sm">
                        <div id="mapNav">
                            <button id="mapLeft" @click="onMapChange(-1)" class="clickme"> </button>
                            <h5 id="mapText">
                                {{ loc[mapLocKey].name }}
                                <span class="map_playercount shadow_grey roundme_sm">
                                    <img src="img/ico_eggColour_normal.png">
                                    <span class="ss_marginbottom_xs ss_marginright_xs">x</span>
                                    <span>{{loc[mapLocKey].suggested_player_limit}}</span>
                                </span>
                            </h5>
                            
                            <button id="mapRight" @click="onMapChange(1)" class="clickme"> </button>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <div id="btn_horizontal" class="f_center nospace">
                <button @click="onCloseClick()" class="ss_button btn_red bevel_red btn_sm">{{ loc.cancel }}</button>
            </div>
        </div>
    </div>
</script>

<script>
var comp_create_private_game_popup = {
    template: '#create-private-game-template',
    props: ['loc', 'serverLocKey', 'mapImgBasePath'],
    
    data: function () {
        return {
            showingServerList: false,
            pickedGameType: 0,
            gameTypes: vueData.gameTypes,
            mapIdx: 0,
            mapImgPath: this.mapImgBasePath + vueData.maps[0].img,
            mapLocKey: vueData.maps[0].locKey
        }
    },

    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        },
        
        onCloseClick: function () {
            this.$parent.close();
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
        },
        
        onServerClick: function () {
            this.showingServerList = true;
            this.$parent.toggle();
            vueApp.$refs.homeScreen.$refs.playPanel.$refs.pickServerPopup.toggle();
            vueApp.playSound('./sound/ui/ui_click.mp3');
        },

        onMapChange: function(dir) {
            this.mapIdx = ((this.mapIdx + dir) + vueData.maps.length) % vueData.maps.length;
            this.mapImgPath = this.mapImgBasePath + vueData.maps[this.mapIdx].img;
            this.mapLocKey = vueData.maps[this.mapIdx].locKey;

            console.log(this.mapIdx);

            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        },

        onPlayClick: function () {
            this.$parent.toggle();
            
            extern.play({
                playType: vueData.playTypes.createPrivate,
                gameType: this.pickedGameType,
                mapIdx: this.mapIdx,
                playerName: vueData.playerName
            });

            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        }
    }
};
</script><script id="account-panel-template" type="text/x-template">
    <div>
        <div id="account_top">
            <input v-if="isAnonymous" type="image" src="img/attention_indicator.png" v-show="showCornerButtons" @click="onAnonWarningClick" class="account_icon roundme_sm attention_btn" v-bind:title="loc['account_title_shop']">
            <div class="account_eggs roundme_sm clickme" @click="onEggStoreClick" v-bind:title="loc['account_title_eggshop']">
                <img src="img/ico_goldenEgg.png" class="egg_icon">
                <span class="egg_count shadow_blue2_micro">{{ eggs }}</span>
            </div>
            <!-- <input type="image" src="img/ico_nav_leaderboards.png" class="account_icon roundme_sm"> -->
            <input type="image" src="img/ico_nav_shop.png" v-show="showCornerButtons" @click="itemStoreClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_shop']">
            <input type="image" src="img/ico_nav_help.png" v-show="showCornerButtons" @click="onHelpClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_faq']">
            <input type="image" src="img/ico_nav_share.png" v-show="showShareLinkButton" @click="onShareLinkClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_invite']">
            <input type="image" src="img/ico_nav_settings.png" v-show="showCornerButtons" @click="onSettingsClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_settings']">
            <input type="image" src="img/ico_nav_fullscreen.png" v-show="showCornerButtons" @click="onFullscreenClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_fullscreen']">
        </div>
        
        <div id="account_bottom" v-show="showBottom">
            <language-selector :languages="languages" :loc="loc" :selectedLanguageCode="selectedLanguageCode"></language-selector>

            <button id="signInButton" v-show="(isAnonymous && showSignIn)" @click="onSignInClicked" class="ss_button btn_yolk bevel_yolk">{{ loc.sign_in }}</button>
            <button id="signOutButton" v-show="!isAnonymous" @click="onSignOutClicked" class="ss_button btn_yolk bevel_yolk">{{ loc.sign_out }}</button>
            <div id="player_photo" v-show="photoUrl !== null && photoUrl !== undefined && photoUrl !== '' && ! isAnonymous">
                <img :src="photoUrl" class="roundme_sm bevel_blue"/>
            </div>
        </div>
    </div>

</script>

<script>
var comp_account_panel = {
    template: '#account-panel-template',
    components: {
        'language-selector': comp_language_selector
    },
    props: ['loc', 'eggs', 'languages', 'selectedLanguageCode', 'showBottom', 'photoUrl', 'isAnonymous', 'isOfAge', 'showTargetedAds', 'showCornerButtons', 'ui'],
    
    data: function () {
        return {
            languageCode: this.selectedLanguageCode
        }
    },

    methods: {
        onEggStoreClick: function () {
            vueApp.showEggStorePopup();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },
        itemStoreClick: function() {
            if (extern.inGame) {
                vueApp.$refs.gameScreen.hideGameMenu();
                extern.openEquipInGame();
                vueApp.switchToEquipUi();
            }
            else { 
                vueApp.switchToEquipUi();
            }
            vueApp.$refs.equipScreen.switchToShop();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },
        onHelpClick: function () {
            vueApp.showHelpPopup();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },

        onSettingsClick: function () {
            ga('send', 'event', 'open settings');
            vueApp.showSettingsPopup();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },

        onFullscreenClick: function () {
            extern.toggleFullscreen();
            vueApp.playSound('./sound/ui/ui_click.mp3');
        },

        onSignInClicked: function () {
            vueApp.setDarkOverlay(true);
            this.$emit('sign-in-clicked');
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        },

        onSignOutClicked: function () {
            vueApp.setDarkOverlay(true);
            this.$emit('sign-out-clicked');
            vueApp.playSound('./sound/ui/ui_reset.mp3');
        },

        onShareLinkClick: function () {
            extern.inviteFriends();
        },

        onAnonWarningClick: function() {
            vueApp.showAttentionPopup();
        }
    },

    computed: {
        showSignIn: function () {
            if (!isFromEU) {
                return true;
            }

            return isFromEU && this.isOfAge && this.showTargetedAds;
        },

        showShareLinkButton: function () {
            return this.showCornerButtons && (this.ui.showScreen === this.ui.screens.game);
        }
    }
};
</script>
<script id="streamer-panel-template" type="text/x-template">
    <div class="panel_streamer noscroll">
        <div id="stream_mask"></div>
        <h1 class="stream_head roundme_sm" :class="icon">{{ title }}</h1>
        <div id="stream_scroll" class="v_scroll" v-show="show">
            <div class="stream_item roundme_sm" v-for="s in streams">
                <a :href="s.link" target="_blank" @click="playSound('./sound/ui/ui_click.mp3')">
                    <img :src="s.image" class="stream_img roundme_sm"> {{ s.name }}
                    <p class="stream_viewers">{{ s.viewers }} {{ viewers }}</p>
                </a>
            </div>
        </div>
    </div>
</script>

<script>
var comp_streamer_panel = {
    template: '#streamer-panel-template',
    props: ['streams', 'title', 'viewers', 'icon'],
    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        }
    },
    computed: {
        show: function() {
            if (!this.streams) {
                return false;
            }

            return this.streams.length > 0;
        }
    }
};
</script><template id="stats_panel_template" type="text/x-template">
    <div class="front_panel roundme_md">
        <h3 class="nospace">{{ loc.home_stats }}</h3>
        <div id="stat_item" class="roundme_sm">
            <h4>{{ loc.kills.toUpperCase() }}</h4>
            <div class="stat_stat">{{ kills }}</div>
        </div>
        
        <div id="stat_item" class="roundme_sm">
            <h4>{{ loc.deaths.toUpperCase() }}</h4>
            <div class="stat_stat">{{ deaths }}</div>
        </div>
        
        <div id="stat_item" class="roundme_sm">
            <h4>{{ loc.kdr.toUpperCase() }}</h4>
            <div class="stat_stat">{{ kdr }}</div>
        </div>
        
        <div id="stat_item" class="roundme_sm">
            <h4>{{ loc.streak.toUpperCase() }}</h4>
            <div class="stat_stat">{{ streak }}</div>
        </div>
    </div>
</template>

<script>
var comp_stats_panel = {
    template: '#stats_panel_template',
    props: ['loc', 'kills', 'deaths', 'kdr', 'streak'],
};

</script>

<script id="play-panel-template" type="text/x-template">
    <div>
        <div class="front_panel roundme_md">

            <input name="name" :value="playerName" v-bind:placeholder="loc.play_enter_name" @change="onNameChange($event)" v-on:keyup="onPlayerNameKeyUp($event)" class="ss_field fullwidth"><br>
            <select name="gameType" v-model="pickedGameType" class="ss_select fullwidth" @change="onGameTypeChange($event)">
                <option v-for="g in gameTypes" v-bind:value="g.value">{{ loc[g.locKey] }}</option>
            </select><br>
            <button name="server" @click="onPickServerButtonClick" class="ss_button btn_blue bevel_blue fullwidth">{{ loc.server }}: {{ loc[serverLocKey] }}</button><br>
            <button name="play" @click="onPlayButtonClick" class="ss_button btn_big btn_green bevel_green fullwidth nospace"><i class="fa fa-play fa-sm"></i> {{ loc.home_play }}</button>
            
            <h3>{{ loc.home_privategames }}</h3>
            
            <div id="btn_horizontal" class="nospace">
                <button name="create" @click="onCreatePrivateGameClick" class="ss_button btn_sm btn_blue bevel_blue">{{ loc.home_create }}</button>&nbsp;
                <button name="join" @click="onJoinPrivateGameClick" class="ss_button btn_sm btn_blue bevel_blue">{{ loc.home_join }}</button>
            </div>
            
        </div>

        <!-- Popup: Pick Server -->
        <large-popup id="pickServerPopup" ref="pickServerPopup" @popup-closed="onPickServerPopupClosed">
            <template slot="header">{{ loc.server }}</template>
            <template slot="content">
                <server-list-popup id="server_list_popup" ref="serverListPopup" v-if="(serverList.length > 0)" :loc="loc" :servers="serverList" :picked-server-id="currentServerId" @server-picked="onServerPicked"></server-list-popup>
            </template>
        </large-popup>

        <!-- Popup: Create Private Game -->
        <large-popup id="createPrivateGamePopup" ref="createPrivateGamePopup">
            <template slot="content">
                <create-private-game-popup id="createPrivateGame" ref="createPrivateGame" :loc="loc" :server-loc-key="serverLocKey" map-img-base-path="./img/maps/"></create-private-game-popup>
            </template>
        </large-popup>

        <!-- Popup: Join Private Game -->
        <small-popup id="joinPrivateGamePopup" ref="joinPrivateGamePopup" :popup-model="home.joinPrivateGamePopup" @popup-confirm="onJoinConfirmed">
            <template slot="header">{{ loc.p_game_code_title }}</template>
            <template slot="content">
                <div class="error_text shadow_red" v-show="home.joinPrivateGamePopup.showInvalidCodeMsg">{{ loc.p_game_code_blank }}</div>
                <p><input type="text" class="ss_field ss_margintop ss_marginbottom fullwidth center_cont" v-model="home.joinPrivateGamePopup.code" v-bind:placeholder="loc.p_game_code_enter" v-on:keyup.enter="onJoinConfirmed"></p>
            </template>
            <template slot="cancel">{{ loc.cancel }}</template>
            <template slot="confirm">{{ loc.confirm }}</template>
        </small-popup>
    </div>
</script>

<script id="server-list-template" type="text/x-template">
    <div>
        <h1 class="roundme_sm">{{ loc.p_servers_title }}</h1>
        <div v-for="s in servers" :key="s.id">
            <div id="server_list_item">
                <input type="radio" :id="('rb_' + s.id)" name="pickServer" v-bind:value="s.id" v-model="serverId" @click="playSound('./sound/ui/ui_onchange.mp3')">
                <label :for="('rb_' + s.id)" class="serverName">{{ loc[s.locKey] }} </label>
                <label :for="('rb_' + s.id)" class="serverPingWrap roundme_sm">
                    <span class="pingBar" :class="barColorClass(s)" :style="barStyle(s)"></span>
                </label>
                <label :for="('rb_' + s.id)" class="serverPingNumber ss_marginleft_lg"> {{ s.ping }}ms</label>
            </div>
        </div>
        <div id="btn_horizontal" class="f_center">
            <button @click="onCancelClick()" class="ss_button btn_red bevel_red btn_sm">{{ loc.cancel }}</button>
            <button @click="onConfirmClick()" class="ss_button btn_green bevel_green btn_sm">{{ loc.ok }}</button>
        </div>
    </div>
</script>

<script>
var comp_server_list_popup = {
    template: '#server-list-template',
    props: ['loc', 'servers', 'pickedServerId'],

    data: function () {
        return {
            colorClasses: ['greenPing', 'yellowPing','orangePing', 'redPing'],
            serverId: this.pickedServerId
        }
    },

    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        },
        
        barColorClass: function (server) {
            var colorIdx = Math.min(3, Math.floor(server.ping / 100));
            return this.colorClasses[colorIdx];
        },

        barStyle: function (server) {
            return {
                width: Math.min(10, Math.max(0, server.ping / 100)) + 0.1 + 'em'
            }
        },

        onCancelClick: function () {
            this.serverId = this.pickedServerId;
            this.$parent.close();
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
        },

        onConfirmClick: function () {
            this.$emit('server-picked', this.serverId);
            this.$parent.close();
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        }
    }
};
</script>
<script>
var comp_play_panel = {
    template: '#play-panel-template',
    components: {
        'create-private-game-popup': comp_create_private_game_popup,
        'server-list-popup': comp_server_list_popup
    },

    props: ['loc', 'playerName', 'gameTypes', 'currentGameType', 'serverList', 'currentServerId', 'home'],

    data: function() {
        return {
            pickedServerId: null,
            pickedGameType: this.currentGameType
        }
    },
            
    methods: {
        onPickServerButtonClick: function () {
            this.$refs.pickServerPopup.toggle();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },
        
        onServerPicked: function (serverId) {
            if (vueData.currentServerId === serverId) { return; }
            
            vueData.currentServerId = serverId;
            extern.selectServer(vueData.currentServerId);
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        },

        onPickServerPopupClosed: function () {
            if (this.$refs.createPrivateGame.showingServerList) {
                this.$refs.createPrivateGame.showingServerList = false;
                this.$refs.createPrivateGamePopup.toggle();
            }
        },

        onNameChange: function (event) {
            console.log('name changed to: ' + event.target.value);
            this.$emit('playerNameChanged', event.target.value);
        },

        onPlayerNameKeyUp: function (event) {
            event.target.value = extern.fixStringWidth(event.target.value);

            // Send username to server to start the game!
            if (event.code == "Enter" || event.keyCode == 13) {
                if (vueData.playerName.length > 0) {
                    extern.play({
                        playType: vueData.playTypes.joinPublic,
                        playerName: vueData.playerName
                    });
                }
            }
        },

        onGameTypeChange: function (event) {
            extern.selectGameType(event.target.value);
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        },

        onPlayButtonClick: function () {
            if (!hasValue(this.playerName)) {
                console.log('invalid player name');
                vueApp.showGenericPopup('play_pu_name_title', 'play_pu_name_content', 'ok');
                return;
            }

            vueApp.game.respawnTime = 0;

            extern.play({
                playType: vueData.playTypes.joinPublic,
                gameType: this.pickedGameType,
                playerName: this.playerName,
                mapIdx: -1
            });
            
            vueApp.playSound('./sound/ui/ui_playconfirm.mp3');
        },

        onCreatePrivateGameClick: function () {
            this.$refs.createPrivateGamePopup.toggle();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },

        onJoinPrivateGameClick: function () {
            this.showJoinPrivateGamePopup(vueData.home.joinPrivateGamePopup.code);
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },

        showJoinPrivateGamePopup: function (showCode) {
            // The popup must be active before it will update; set code after showing
            this.$refs.joinPrivateGamePopup.show();
            vueData.home.joinPrivateGamePopup.code = showCode;
        },

        onJoinConfirmed: function () {
            vueData.home.joinPrivateGamePopup.code = vueData.home.joinPrivateGamePopup.code.replace(parsedUrl.root, '');
            this.$refs.joinPrivateGamePopup.hide();

            extern.play({
                playType: vueData.playTypes.joinPrivate,
                playerName: this.playerName,
                joinCode: vueData.home.joinPrivateGamePopup.code
            });
        }
    },

    computed: {
        serverLocKey: function () {
            if (!hasValue(this.serverList) || this.serverList.length === 0) {
                return '';
            }

            var server = this.serverList.find(s => {
                return s.id == vueData.currentServerId;
            });

            return hasValue(server) ? server.locKey : '';
        }
    },

    watch: {
        currentGameType: function (val) {
            this.pickedGameType = val;
        }
    }
};
</script><template id="weaponselect_panel_template" type="text/x-template">
    <div>
        <img src="img/ico_weapon_assaultRifle.png" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Soldier)" @click="selectClass(charClass.Soldier)">
        <img src="img/ico_weapon_shotgun.png" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Scrambler)" @click="selectClass(charClass.Scrambler)">
        <img src="img/ico_weapon_sniper.png" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Ranger)" @click="selectClass(charClass.Ranger)">
        <img src="img/ico_weapon_rocketLauncher.png" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Eggsploder)" @click="selectClass(charClass.Eggsploder)">
        <img src="img/ico_weapon_SMG.png" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Whipper)" @click="selectClass(charClass.Whipper)">
        <img src="img/ico_weapon_boltAction.png" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Crackshot)" @click="selectClass(charClass.Crackshot)">
    </div>
</template>

<script>
var comp_weapon_select_panel = {
    template: '#weaponselect_panel_template',
    props: ['currentClass'],

    data: function () {
        return {
            charClass: CharClass
        }
    },

    methods: {
        selectClass: function (classIdx) {
            extern.changeClass(classIdx);
            this.$emit('changed-class', classIdx);
            vueApp.playSound('./sound/ui/ui_click.mp3');
        },

        addSelectedCssClass: function (classIdx) {
            return (this.currentClass === classIdx)
                ? 'weapon_selected'
                : '';
        }
    }
};
</script>
<script id="newsfeed-panel-template" type="text/x-template">
    <div class="v_scroll">
        <div v-for="item in localizedItems" @click="onItemClicked(item)" class="news_item roundme_md" :class="applyClickClass(item)">
            <img :src="('img/newsItems/' + item.image)" class="news_img roundme_sm">
            <p>{{ item.msg }}</p>
        </div>
    </div>
</script>

<script>
var comp_newsfeed_panel = {
    template: '#newsfeed-panel-template',
    props: ['currentLanguageCode'],

    data: function () {
        return {
            items: [],
            localizedItems: []
        }
    },

    mounted: function () {
        var outer = this;

        fetch('newsItems.json')
            .then(function(response) {
                response.json()
                    .then(function(parsedItemList) {
                        outer.items = parsedItemList;
                        outer.localizeItems();
                    });
            });
    },

    methods: {
        localizeItems: function () {
            let locItemList = [];
            const lang = 'en';
            this.items.forEach( (item) => {
                var locEntry = item.loc.find((l) => {
                    // Since we have no localization for news items only display en
                    // return l.code === this.currentLanguageCode;
                    return l.code === lang;
                });
                
                item.msg = hasValue(locEntry) ? locEntry.msg : '';

                locItemList.push(item);
            });

            this.localizedItems = locItemList;
        },

        onItemClicked: function(item) {
            extern.clickedHouseLink(item);
            vueApp.playSound('./sound/ui/ui_click.mp3');
        },

        applyClickClass: function (item) {
            return extern.hasHouseLink(item) ? 'clickme' : '';
        }
    },

    watch: {
        // Rebuild the localized item array when the current language code changes
        currentLanguageCode: function (newCode) {
            this.localizeItems();
        }
    }
};
</script><script id="chicken-panel-template" type="text/x-template">
    <div id="showBuyPassDialogButton">
        <img src="img/ico_chickenBadge.png" v-show="isUpgraded">
        <div v-show="!isUpgraded">
            <img src="img/anim_chicken.gif" @click="onChickenClick" class="clickme">
        
            <div id="buyPassChickenSpeech">
                <img src="img/speechtail.png" class="buyPassChickenSpeechTail">
                <span v-html="loc.chicken_cta"></span>
            </div>
        </div>
    </div>
</script>

<script>
var comp_chicken_panel = {
    template: '#chicken-panel-template',
    props: ['loc', 'isUpgraded'],

    methods: {
        onChickenClick: function () {
            vueApp.playSound('./sound/ui/ui_chicken.mp3');
            vueApp.showGoldChickenPopup();
        }
    }
};
</script><script id="footer-links-panel-template" type="text/x-template">
    <div class="center_h">
    <a @click="onChangelogClicked" class="clickme">{{ version }}</a> | 
    <a href="https://shell-shockers.myshopify.com/collections/all" target="_blank" @click="playSound('./sound/ui/ui_click.mp3')">{{ loc.footer_merchandise }}</a> | 
    <a href="https://www.bluewizard.com/privacypolicy" target="_blank" @click="playSound('./sound/ui/ui_click.mp3')">{{ loc.footer_privacypolicy }}</a> | 
    <a href="https://bluewizard.com/terms/" target="_blank" @click="playSound('./sound/ui/ui_click.mp3')">{{ loc.footer_termsofservice }}</a> | 
    <a href="https://www.bluewizard.com" target="_blank" @click="playSound('./sound/ui/ui_click.mp3')">&copy; 2019 {{ loc.footer_bluewizard }}</a>
    </div>
</script>

<script>
var comp_footer_links_panel = {
    template: '#footer-links-panel-template',
    props: ['loc'],

    data: function () {
        return {
            version: version
        }
    },

    methods: {
        onChangelogClicked: function () {
            vueApp.showChangelogPopup();
            vueApp.playSound('./sound/ui/ui_popupopen.mp3');
        },
        playSound (sound) {
            vueApp.playSound(sound);
        }
    }
};
</script>
<script id="social-panel-template" type="text/x-template">
    <div class="social_icons roundme_sm">
        <a href="http://eepurl.com/dFPPwb" target="_blank"><img src="img/ico_social_newsletter.png" class="social_icon" @click="playSound('./sound/ui/ui_click.mp3')"></a>
        <a href="https://discord.gg/bluewizard" target="_blank"><img src="img/ico_social_discord.png" class="social_icon" @click="playSound('./sound/ui/ui_click.mp3')"></a>
        <a href="https://www.facebook.com/ShellShockersGame" target="_blank"><img src="img/ico_social_facebook.png" class="social_icon" @click="playSound('./sound/ui/ui_click.mp3')"></a>
        <a href="https://twitter.com/eggcombat" target="_blank"><img src="img/ico_social_twitter.png" class="social_icon" @click="playSound('./sound/ui/ui_click.mp3')"></a>
    </div>
</script>

<script>
var comp_social_panel = {
    template: '#social-panel-template',
    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        }
    }
};
</script>
<script>
var comp_home_screen = {
    template: '#home-screen-template',
    components: {
        'streamer-panel': comp_streamer_panel,
        'stats-panel': comp_stats_panel,
        'play-panel': comp_play_panel,
        'weapon-select-panel': comp_weapon_select_panel,
        'newsfeed-panel': comp_newsfeed_panel,
        'house-ad-big': comp_house_ad_big,
        'house-ad-small': comp_house_ad_small,
        'account-panel': comp_account_panel,
        'chicken-panel': comp_chicken_panel,
        'footer-links-panel': comp_footer_links_panel,
        'social-panel': comp_social_panel
    },

    data: function () {
        return vueData;
    },

    methods: {
        playSound (sound) {
            vueApp.playSound(sound);
        },

        onEquipClicked: function () {
            vueApp.switchToEquipUi();
            vueApp.playSound('./sound/ui/ui_equip.mp3');
        },

        showSignIn: function () {
            this.$refs.firebaseSignInPopup.toggle();
            extern.showSignInDialog();
        },

        onSignInClicked: function () {
            this.showSignIn();
        },

        onSignInCancelClicked: function () {
            this.$refs.firebaseSignInPopup.hide();
            vueApp.playSound('./sound/ui/ui_popupclose.mp3');
        },

        onSignOutClicked: function () {
            extern.signOut();
        },

        onResendEmailClicked: function () {
            extern.sendFirebaseVerificationEmail();

            vueApp.showGenericPopup('verify_email_sent', 'verify_email_instr', 'ok');
        },

        onBigHouseAdClosed: function () {
            console.log('big house ad closed event received');
            this.ui.houseAds.big = null;
        },

        onPlayerNameChanged: function (newName) {
            console.log('play name event handler');
            vueApp.setPlayerName(newName);
            vueApp.playSound('./sound/ui/ui_onchange.mp3');
        }
    }
};
</script><script id="equip-screen-template" type="text/x-template">
    <div>
        <div id="equip_wrapper">

            <account-panel id="account_panel" ref="accountPanel" :loc="loc" :eggs="eggs" :show-corner-buttons="ui.showCornerButtons" :ui="ui" :show-bottom="false" :is-anonymous="isAnonymous"></account-panel>

            <div id="equip_box">

                <section id="equip_panel_left" class="equip_panel left_panel">
                    <div class="equip_panelhead">
                    </div>
                    <div id="equip_sidebox" class="roundme_md">
                        <equipped-slots id="equip.equipped_slots" ref="equip.equipped_slots" :loc="loc" :primary-item="equip.equippedPrimary" :secondary-item="equip.equippedSecondary" :hat-item="equip.equippedHat" :stamp-item="equip.equippedStamp" @equipped-type-selected="onEquippedTypeSelected"></equipped-slots>
                        <color-select id="equip.equipped_slots" ref="colorSelect" :loc="loc" :color-idx="equip.colorIdx" :extra-colors-locked="equip.extraColorsLocked" @color-changed="onColorChanged"></color-select>
                    </div>
                    <p align="center"><button @click="onRedeemClick" class="ss_button btn_blue1 btn_md bevel_blue">{{ loc.eq_redeem }}</button></p>
                </section>
                <!-- end.left_panel -->

                <section id="equip_panel_middle" class="equip_panel middle_panel">
                    <div class="equip_panelhead panel_tabs">
                        <button class="ss_bigtab bevel_blue ss_marginright" :class="getButtonToggleClass(equip.equipModes.inventory)" @click="switchToInventory">{{ loc.eq_inventory }}</button>
                        <button class="ss_bigtab bevel_blue" :class="getButtonToggleClass(equip.equipModes.shop)" @click="switchToShop">{{ loc.eq_shop }}</i></button>
                    </div>

                    <div id="equip_purchase_top" class="equip_purchase_top">
                        <!-- <div></div> -->
                        <price-tag id="price_tag" class="ss_marginright" v-if="equip.buyingItem" ref="price_tag" :loc="loc" :item="equip.buyingItem" @buy-item-clicked="onBuyItemClicked"></price-tag>
                        <physical-tag id="physical-tag" class="ss_marginright" v-if="equip.physicalUnlockPopup.item" ref="physical-tag" :loc="loc" :item="equip.physicalUnlockPopup.item" @buy-item-clicked="onBuyItemClicked"></physical-tag>
                        <!-- <p v-if="equip.buyingItem">{{ equip.buyingItem }}</p>
                        <p v-if="equip.physicalUnlockPopup">{{ equip.physicalUnlockPopup.item }}</p> -->
                        
                        <!--<item-timer id="item_timer" ref="item_timer" :loc="loc"></item-timer>-->
                    </div>

                    <div id="equip_weapon_panel">
                        <weapon-select-panel id="weapon_select" :current-class="classIdx" @changed-class="onChangedClass"></weapon-select-panel>
                        <button class="ss_button btn_md btn_red bevel_red" @click="onBackClick"><i class="fas fa-backward"></i> {{ loc.back }}</button>
                    </div>
                </section>
                <!-- end .middle_panel -->

                <section id="equip_panel_right" class="equip_panel right_panel">
                    <item-type-selector id="item_type_selector" ref="item_type_selector" :selected-item-type="equip.selectedItemType" :show-special-items="equip.showSpecialItems" :in-shop="isInShop" @item-type-changed="onItemTypeChanged" @tagged-items-clicked="onTaggedItemsClicked"></item-type-selector>

                    <div id="equip_sidebox" class="roundme_md">
                        <item-grid id="item_grid" ref="item_grid" :loc="loc" :grid-class="getGridClass" :items="equip.showingItems" :selectedItem="equip.selectedItem" :category-loc-key="equip.categoryLocKey" :in-shop="isInShop" @item-selected="onItemSelected" @switch-to-shop="onSwitchToShopClicked"></item-grid>
                        <!--<house-ad-small id="banner-ad" v-show="!isInShop"></house-ad-small>-->
                    </div>
                </section>
                <!-- .right_panel-->

            </div>
        </div>

        <!-- Popup: Buy Item -->
        <small-popup id="buyItemPopup" ref="buyItemPopup" @popup-confirm="onBuyItemConfirm">
            <template slot="header"