- Scan-ID:
- 19824cdf-6995-452e-8d86-b83c634921dbBeendet
- Eingereichte URL:
- https://shellshockers.silkandpepper.com/
- Bericht beendet:
Links · 2 gefunden
Die von der Seite ausgehenden identifizierten Links
| Link | Text |
|---|---|
| https://adinplay.com/privacy-and-cookies-policy/ | Privacy notice |
| https://adinplay.com/?utm_source=publishers&utm_medium=cmp |
JavaScript-Variablen · 323 gefunden
Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind
| Name | Typ |
|---|---|
| 0 | object |
| 1 | object |
| 2 | object |
| 3 | object |
| 4 | object |
| 5 | object |
| 6 | object |
| 7 | object |
| 8 | object |
| onbeforetoggle | object |
Konsolenprotokoll-Meldungen · 8 gefunden
In der Web-Konsole protokollierte Meldungen
| Typ | Kategorie | Protokoll |
|---|---|---|
| error | security |
|
| error | security |
|
| error | security |
|
| error | security |
|
| log | other |
|
| log | other |
|
| warning | other |
|
| log | other |
|
HTML
Der HTML-Rohtext der Seite
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" class="mdl-js"><head>
<script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/destination?id=AW-662950613&l=dataLayer&cx=c"></script><script type="text/javascript" async="" src="https://static.hotjar.com/c/hotjar-1519513.js?sv=7"></script><script async="" type="text/javascript" src="https://api.adinplay.com/libs/aiptag/assets/adsbygoogle.js"></script><script async="" type="text/javascript" src="https://btloader.com/tag?o=5130683165442048&upapi=true"></script><script async="" type="text/javascript" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js?network-code=421469808"></script><script async="" src="https://c.amazon-adsystem.com/aax2/apstag.js"></script><script src="https://connect.facebook.net/signals/config/446896919250308?v=2.9.174&r=stable&domain=shellshockers.silkandpepper.com&hme=ead923021ccd3483ef3b9b04703d0a78b943fbdc01e8d7cec21c5059f1f4a5e9&ex_m=70%2C121%2C107%2C111%2C61%2C4%2C100%2C69%2C16%2C97%2C89%2C51%2C54%2C172%2C175%2C187%2C183%2C184%2C186%2C29%2C101%2C53%2C77%2C185%2C167%2C170%2C180%2C181%2C188%2C131%2C41%2C189%2C190%2C34%2C143%2C15%2C50%2C194%2C193%2C133%2C18%2C40%2C1%2C43%2C65%2C66%2C67%2C71%2C93%2C17%2C14%2C96%2C92%2C91%2C108%2C52%2C110%2C39%2C109%2C30%2C94%2C26%2C168%2C171%2C140%2C86%2C56%2C84%2C33%2C73%2C0%2C95%2C32%2C28%2C82%2C83%2C88%2C47%2C46%2C87%2C37%2C11%2C12%2C13%2C6%2C7%2C25%2C22%2C23%2C57%2C62%2C64%2C75%2C102%2C27%2C76%2C9%2C8%2C80%2C48%2C21%2C104%2C103%2C105%2C98%2C10%2C20%2C3%2C38%2C74%2C19%2C5%2C90%2C81%2C44%2C35%2C85%2C2%2C36%2C63%2C42%2C106%2C45%2C79%2C68%2C112%2C60%2C59%2C31%2C99%2C58%2C55%2C49%2C78%2C72%2C24%2C113%2C200%2C199%2C201%2C206%2C207%2C208%2C204%2C196%2C132%2C134%2C163%2C195%2C197%2C122%2C157%2C145%2C151%2C129%2C232%2C116%2C126%2C127%2C233%2C165%2C119%2C235%2C166%2C136%2C123%2C154%2C148%2C114%2C128" async=""></script><script src="https://connect.facebook.net/signals/config/771186996377132?v=2.9.174&r=stable&domain=shellshockers.silkandpepper.com&hme=ead923021ccd3483ef3b9b04703d0a78b943fbdc01e8d7cec21c5059f1f4a5e9&ex_m=70%2C121%2C107%2C111%2C61%2C4%2C100%2C69%2C16%2C97%2C89%2C51%2C54%2C172%2C175%2C187%2C183%2C184%2C186%2C29%2C101%2C53%2C77%2C185%2C167%2C170%2C180%2C181%2C188%2C131%2C41%2C189%2C190%2C34%2C143%2C15%2C50%2C194%2C193%2C133%2C18%2C40%2C1%2C43%2C65%2C66%2C67%2C71%2C93%2C17%2C14%2C96%2C92%2C91%2C108%2C52%2C110%2C39%2C109%2C30%2C94%2C26%2C168%2C171%2C140%2C86%2C56%2C84%2C33%2C73%2C0%2C95%2C32%2C28%2C82%2C83%2C88%2C47%2C46%2C87%2C37%2C11%2C12%2C13%2C6%2C7%2C25%2C22%2C23%2C57%2C62%2C64%2C75%2C102%2C27%2C76%2C9%2C8%2C80%2C48%2C21%2C104%2C103%2C105%2C98%2C10%2C20%2C3%2C38%2C74%2C19%2C5%2C90%2C81%2C44%2C35%2C85%2C2%2C36%2C63%2C42%2C106%2C45%2C79%2C68%2C112%2C60%2C59%2C31%2C99%2C58%2C55%2C49%2C78%2C72%2C24%2C113" async=""></script><script async="" src="https://connect.facebook.net/en_US/fbevents.js"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-K5MSJHJ"></script><script>
var gameServerRoot = null;
var dynamicContentRoot = null;
var dynamicContentPrefix = '';
</script>
<script>
class Loader {
static show () {
let container = document.createElement('div');
container.id = 'progress-container';
container.style = `
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2000;
background-image: var(--ss-lightoverlay);
`;
const progressWrapper = document.createElement('div');
progressWrapper.id = 'progress-wrapper';
progressWrapper.className = 'load_screen';
progressWrapper.style = `
position: absolute;
left: 50%;
top: -6em;
transform: translateX(-50%);
background-image: none;
`;
const blueWizLogo = document.createElement('img');
blueWizLogo.src = 'img/BlueWizard-Logo-min.png';
blueWizLogo.style=`
width: 16em;
display: block;
margin: 5em auto 0;
z-index: 2000;
position: absolute;
left: 50%;
bottom: 8em;
transform: translateX(-50%);
`;
let logo = document.createElement('img');
logo.src = 'img/logo.svg';
logo.style = 'height: 16em';
logo.id = 'logo-svg';
// container.appendChild(logo);
const progressOuter = document.createElement('div');
progressOuter.id = 'progress-outer';
progressOuter.style = `
position: relative;
background: #643219;
border-radius: 2em;
height: 3.3em;
width: 24em;
margin-top: 2em;
`;
let progress = document.createElement('div');
progress.style = `
margin-top: 1em;
width: 23em;
height: 2.2em;
background: white;
padding: 0.5em;
border-radius: 2em;
margin: .3em .5em 0;
`;
container.appendChild(progress);
let progressBar = document.createElement('span');
progressBar.id = 'progressBar';
progressBar.style = `
display: block;
width: 20%;
height: 100%;
background: orange;
border-radius: 2em;
margin-left: 80%;
margin: 0 .3em .5em 0;
opacity: 0;
transition: margin-left linear 500ms;
transition-timing-function: ease-in-out;
`;
const progressBarOutside = document.createElement('div');
progress.appendChild(progressBar);
progressWrapper.appendChild(logo);
progressOuter.appendChild(progress);
progressWrapper.appendChild(progressOuter);
container.appendChild(progressWrapper);
container.appendChild(blueWizLogo);
// Minor for the progress bar intial load
setTimeout(() => progressBar.style.opacity = 1, 600);
Loader.barInterval = setInterval(() => {
if (Loader.progressBar.style.marginLeft == '0%') {
Loader.progressBar.style.marginLeft = '80%';
}
else {
Loader.progressBar.style.marginLeft = '0%';
}
}, 500);
Loader.progressBar = progressBar;
Loader.container = container;
let app = document.body;
app.appendChild(container);
}
static hide () {
Loader.container.style = "opacity : 0; transition: opacity 1s;";
setTimeout(() => { Loader.container.remove(); }, 1000);
}
static addTask () {
let id = Loader.loaded.length;
//console.log('Loading tasks: ', ++Loader.actualTasks);
Loader.loaded.push(0);
return id;
}
static finish (id) {
clearInterval(Loader.barInterval);
if (Loader.progressBar) {
Loader.progressBar.style.marginLeft = '0%';
Loader.progressBar.style.transition = '';
Loader.loaded[id] = 1;
Loader.updateBar();
}
}
static progress (id, value, total) {
clearInterval(Loader.barInterval);
if (Loader.progressBar) {
Loader.progressBar.style.marginLeft = '0%';
Loader.progressBar.style.transition = '';
Loader.loaded[id] = value / total;
Loader.updateBar();
}
return id;
}
static updateBar () {
let loadedTotal = 0;
for (let l of Loader.loaded) {
loadedTotal += l;
}
Loader.progressBar.style.width = loadedTotal / Loader.tasks * 95 + 5 + '%';
}
static loadJS (path, callback) {
let p = path;
(function (p, cb) {
let xhr = new XMLHttpRequest();
xhr.open('GET', p, true);
let id = Loader.addTask();
xhr.onprogress = event => {
if (Loader.progressBar) {
id = Loader.progress(id, event.loaded, event.total);
}
};
xhr.onload = () => {
if (xhr.status != 200) {
console.log(`Error ${xhr.status}: ${xhr.statusText}`);
}
else {
Loader.finish(id);
let script = document.createElement('script');
script.innerHTML = xhr.response;
document.body.appendChild(script);
if (cb) cb();
}
};
xhr.send();
})(path, callback);
}
}
Loader.actualTasks = 0;
Loader.tasks = 16;
Loader.loaded = [];
window.Loader = Loader;
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
function openFirebaseDb () {
return new Promise((resolve, reject) => {
let req = window.indexedDB.open('firebaseLocalStorageDb');
req.onsuccess = () => {
let db = req.result;
let transaction = db.transaction(['firebaseLocalStorage'], 'readwrite');
let store = transaction.objectStore('firebaseLocalStorage');
resolve({ db, store });
}
req.onerror = err => reject(err);
req.onupgradeneeded = () => {
let db = req.result;
let store = db.createObjectStore('firebaseLocalStorage', { keyPath: 'fbase_key' });
resolve({ db, store });
}
});
}
var redirectIframe
function postStorageAndRedirect (iframe, storage, firebaseDb) {
iframe.contentWindow.postMessage({ storage, firebaseDb }, '*');
window.location = 'https://shellshock.io' + window.location.search + window.location.hash;
}
window.addEventListener('DOMContentLoaded', () => {
Loader.show();
});
</script><!-- title, seo meta and favicons -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="facebook-domain-verification" content="6lfua33vx0abiv1asnt9p13aac29xy">
<!-- <link rel="manifest" href="manifest.json"> -->
<title>Shell Shockers | Alt URL: geometry.best.</title>
<meta name="Description" content="Alt URL: geometry.best. 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">
<meta name="theme-color" content="#0B93BD">
<meta name="background-color" content="#0B93BD">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="favicon192.png" sizes="192x192">
<link rel="icon" href="https://shellshock.io/favicon256.png" sizes="512x512">
<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="Alt URL: geometry.best. 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="Alt URL: geometry.best. 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">
<!-- 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="styles/transitions.css%3F1651709060.css">
<link rel="stylesheet" href="styles/forms.css%3F1651709060.css">
<link rel="stylesheet" href="styles/style.css%3F1654110505.css">
<link rel="stylesheet" href="styles/game.css%3F1653069567.css"><script>
function storageFactory(getStorage) {
const inMemoryStorage = {};
function isSupported() {
try {
var testKey = "__some_random_key_you_are_not_going_to_use__";
getStorage().setItem(testKey, testKey);
getStorage().removeItem(testKey);
return true;
} catch (e) {
return false;
}
}
function clear() {
if (isSupported()) {
getStorage().clear();
} else {
inMemoryStorage = {};
}
}
function getItem(name) {
if (isSupported()) {
return getStorage().getItem(name);
}
if (inMemoryStorage.hasOwnProperty(name)) {
return inMemoryStorage[name];
}
return null;
}
function key(index) {
if (isSupported()) {
return getStorage().key(index);
} else {
return Object.keys(inMemoryStorage)[index] || null;
}
}
function removeItem(name) {
if (isSupported()) {
getStorage().removeItem(name);
} else {
delete inMemoryStorage[name];
}
}
function setItem(name, value) {
if (isSupported()) {
getStorage().setItem(name, value);
} else {
inMemoryStorage[name] = String(value);
}
}
function length() {
if (isSupported()) {
return getStorage().length;
} else {
return Object.keys(inMemoryStorage).length;
}
}
return {
getItem: getItem,
setItem: setItem,
removeItem: removeItem,
clear: clear,
key: key,
get length() {
return length();
}
};
}
const localStore = storageFactory(() => localStorage);
const sessionStore = storageFactory(() => sessionStorage);
</script><style>
.eggIcon {
display: inline-block;
color: #444444;
width: 1em;
height: 1em;
fill: currentColor;
}
</style>
<style>
.crazy-banner-container {
display: flex;
align-items: center;
justify-content: center;
}
</style><script src="https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151606" async=""></script><script async="" type="text/javascript" charset="UTF-8" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script><meta http-equiv="origin-trial" content="AlK2UR5SkAlj8jjdEc9p3F3xuFYlF6LYjAML3EOqw1g26eCwWPjdmecULvBH5MVPoqKYrOfPhYVL71xAXI1IBQoAAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3NTgwNjcxOTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="Amm8/NmvvQfhwCib6I7ZsmUxiSCfOxWxHayJwyU1r3gRIItzr7bNQid6O8ZYaE1GSQTa69WwhPC9flq/oYkRBwsAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3NTgwNjcxOTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="A9wSqI5i0iwGdf6L1CERNdmsTPgVu44ewj8QxTBYgsv1LCPUVF7YmWOvTappqB1139jAymxUW/RO8zmMqo4zlAAAAACNeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiRmxlZGdlQmlkZGluZ0FuZEF1Y3Rpb25TZXJ2ZXIiLCJleHBpcnkiOjE3MzY4MTI4MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial" content="A+d7vJfYtay4OUbdtRPZA3y7bKQLsxaMEPmxgfhBGqKXNrdkCQeJlUwqa6EBbSfjwFtJWTrWIioXeMW+y8bWAgQAAACTeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiRmxlZGdlQmlkZGluZ0FuZEF1Y3Rpb25TZXJ2ZXIiLCJleHBpcnkiOjE3MzY4MTI4MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><script src="https://securepubads.g.doubleclick.net/pagead/managed/js/gpt/m202410240101/pubads_impl.js?cb=31088436" async=""></script><script src="https://config.aps.amazon-adsystem.com/configs/53b902f9-cf9c-4605-aec3-2c8ce65042b8" type="text/javascript" async="async"></script><script async="" src="https://script.hotjar.com/modules.67d7d905831ab88336d0.js" charset="utf-8"></script><script attributionsrc="" type="text/javascript" async="" src="https://www.googleadservices.com/pagead/conversion/662950613/?random=1730107356692&cv=11&fst=1730107356692&bg=ffffff&guid=ON&async=1&gtm=45be4ao0v894691764z8812812352za201zb812812352&gcd=13l3lPl2l1l1&dma_cps=syphamo&dma=1&tcfd=10001&tag_exp=101533421~101823848&u_w=1&u_h=1&url=https%3A%2F%2Fshellshockers.silkandpepper.com%2F&label=u82gCJTLqdcBENWlj7wC&hn=www.googleadservices.com&frm=0&tiba=Shell%20Shockers%20%7C%20Alt%20URL%3A%20geometry.best.&value=0&bttype=purchase&npa=1&us_privacy=error&pscdl=noapi&auid=1224583539.1730107357&uaa=&uab=&uafvl=&uamb=0&uam=&uap=&uapv=&uaw=0&fdr=SA&rfmt=3&fmt=4"></script><script async="" src="https://fundingchoicesmessages.google.com/i/421469808?ers=3"></script></head><body><div id="cmpbox" class="cmpbox cmpstyleroot cmpbox3 cmpboxWelcomeGDPR cmpBoxWelcomeOI" aria-modal="true" role="dialog" lang="EN" aria-labelledby="cmpboxheadline1" data-nosnippet="" dir="ltr" style="display: block;"><div class="cmpboxinner" role="document"><div id="cmpboxcontent" class="cmpboxcontent"><div class="cmpboxtxtdiv "><div class="cmpboxhl cmptxt_hl" role="heading" aria-level="1" id="cmpboxheadline1">Consent to Cookies & Data processing</div><div class="cmpboxtxt cmptxt_txt">On this website we use cookies and similar functions to process end device information and personal data (e.g. such as IP-addresses or browser information). The processing is used for purposes such as to integrate content, external services and elements from third parties, statistical analysis/measurement, personalized advertising and the integration of social media. Depending on the function, data is passed on to up to <a class="cmplink cmplinkvendors" href="#" draggable="false" data-cmp-vendor="">545 third parties</a> and processed by them. This consent is voluntary, not required for the use of our website and can be revoked at any time using the icon on the bottom left.</div></div><div class="cmpboxwelcomeprps" role="form" title="Purpose"><div class="cmpwelcomeprps"><div class="cmpwelcomeprpsbtn"><a href="#" data-cmp-purpose="1" role="checkbox" aria-checked="false" aria-label="Purpose: Store and/or access information on a device" aria-labelledby="cmppurposelabelp1" draggable="false"><span class="cmptogglespan cmpvnspan-1x1" id="cmpvnspan-1x1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 512 256" class="cmpimgyesno cmptoggle0" aria-label="Store and/or access information on a device" aria-labelledby="cmppurposelabelp1"><g><ellipse ry="111.500004" rx="113" cy="120.89999" cx="386" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#e5e5e5" class="cmpsvgsilverfill"></ellipse><rect height="222" width="256.999992" y="9.899994" x="140.000002" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#e5e5e5" class="cmpsvgsilverfill"></rect><ellipse ry="111.500004" rx="113" cy="118.399998" cx="125" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#e5e5e5" class="cmpsvgsilverfill"></ellipse><g><path d="m477.867004,119.466583c0,-47.053009 -38.281006,-85.333008 -85.333008,-85.333008c-44.168976,0 -80.596985,33.740997 -84.89801,76.800018l-188.168983,0c-4.719002,0 -8.533005,3.822998 -8.533005,8.53299c0,4.709991 3.814003,8.53299 8.533005,8.53299l188.169014,0c4.300995,43.059021 40.72998,76.800018 84.89798,76.800018c47.052002,0.001007 85.333008,-38.279999 85.333008,-85.333008zm-153.600006,0c0,-37.640991 30.626007,-68.266998 68.266998,-68.266998c37.640991,0 68.266998,30.626007 68.266998,68.266998c0,37.640991 -30.626007,68.266998 -68.266998,68.266998c-37.640991,0 -68.266998,-30.625977 -68.266998,-68.266998z" fill="#F64C4E" class="cmpsvgredfill"></path><path d="m412.100006,151.099579c1.664001,1.664001 3.848999,2.5 6.03299,2.5c2.185028,0 4.369019,-0.835999 6.03302,-2.5c3.335999,-3.337006 3.335999,-8.72998 0,-12.06601l-19.567017,-19.566986l19.567017,-19.566986c3.335999,-3.337006 3.335999,-8.730011 0,-12.06601c-3.337006,-3.335999 -8.730011,-3.335999 -12.06601,0l-19.566986,19.566986l-19.567017,-19.566986c-3.337006,-3.335999 -8.730011,-3.335999 -12.06601,0c-3.335999,3.337006 -3.335999,8.730011 0,12.06601l19.567017,19.566986l-19.567017,19.567017c-3.335999,3.337006 -3.335999,8.730011 0,12.06601c1.664001,1.664001 3.848999,2.5 6.03299,2.5c2.184998,0 4.369019,-0.835999 6.03302,-2.5l19.566986,-19.567017l19.567017,19.566986z" fill="#F64C4E" class="cmpsvgredfill"></path><path d="m392.53299,0.00058l-281.600006,0c-0.905006,0 -1.783005,0.162018 -2.611,0.444c-27.196007,0.485992 -52.855003,11.408997 -72.508003,30.916016c-22.76698,22.596008 -35.81398,54.707001 -35.81398,88.105988c0,65.878021 49.765999,119.46701 110.932999,119.46701l247.466995,0c4.718994,0 8.53299,-3.822998 8.53299,-8.53299s-3.813995,-8.53302 -8.53299,-8.53302l-247.466995,0c-51.754997,0 -93.866999,-45.934998 -93.866999,-102.399994c0,-28.88501 11.212999,-56.584991 30.771002,-75.997986c17.125996,-16.998016 38.673,-25.976013 62.353001,-25.976013c0.222,0 0.451996,0.009003 0.682999,0.009003c0.673996,0.026001 1.707001,-0.153992 2.526001,-0.434998l279.134018,0c56.464996,0 102.399994,45.934998 102.399994,102.399994c0,56.464996 -45.934998,102.399994 -102.399994,102.399994c-4.719025,0 -8.53302,3.822998 -8.53302,8.53302s3.813995,8.53299 8.53302,8.53299c65.877991,0 119.46698,-53.588989 119.46698,-119.46701s-53.588989,-119.466003 -119.46701,-119.466003z" fill="#ddd" class="cmpsvgsilver2fill"></path></g></g></svg></span></a></div><div data-cmp-purpose="1" id="cmppurposelabelp1" class="cmpwelcomeprpstxt " draggable="false">Store and/or access information on a device</div></div><div class="cmpwelcomeprps"><div class="cmpwelcomeprpsbtn"><a href="#" draggable="false" aria-label="Purpose: Personalised advertising and content, advertising and content measurement, audience research and services development
" aria-labelledby="cmppurposelabelst42" role="checkbox" aria-checked="false" data-cmp-stack="42"><span class="cmptogglespan cmpvnspan-1xst42" id="cmpvnspan-1xst42"><svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 512 256" class="cmpimgyesno cmptoggle0" aria-label="Personalised advertising and content, advertising and content measurement, audience research and services development
" aria-labelledby="cmppurposelabelst42"><g><ellipse ry="111.500004" rx="113" cy="120.89999" cx="386" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#e5e5e5" class="cmpsvgsilverfill"></ellipse><rect height="222" width="256.999992" y="9.899994" x="140.000002" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#e5e5e5" class="cmpsvgsilverfill"></rect><ellipse ry="111.500004" rx="113" cy="118.399998" cx="125" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#e5e5e5" class="cmpsvgsilverfill"></ellipse><g><path d="m477.867004,119.466583c0,-47.053009 -38.281006,-85.333008 -85.333008,-85.333008c-44.168976,0 -80.596985,33.740997 -84.89801,76.800018l-188.168983,0c-4.719002,0 -8.533005,3.822998 -8.533005,8.53299c0,4.709991 3.814003,8.53299 8.533005,8.53299l188.169014,0c4.300995,43.059021 40.72998,76.800018 84.89798,76.800018c47.052002,0.001007 85.333008,-38.279999 85.333008,-85.333008zm-153.600006,0c0,-37.640991 30.626007,-68.266998 68.266998,-68.266998c37.640991,0 68.266998,30.626007 68.266998,68.266998c0,37.640991 -30.626007,68.266998 -68.266998,68.266998c-37.640991,0 -68.266998,-30.625977 -68.266998,-68.266998z" fill="#F64C4E" class="cmpsvgredfill"></path><path d="m412.100006,151.099579c1.664001,1.664001 3.848999,2.5 6.03299,2.5c2.185028,0 4.369019,-0.835999 6.03302,-2.5c3.335999,-3.337006 3.335999,-8.72998 0,-12.06601l-19.567017,-19.566986l19.567017,-19.566986c3.335999,-3.337006 3.335999,-8.730011 0,-12.06601c-3.337006,-3.335999 -8.730011,-3.335999 -12.06601,0l-19.566986,19.566986l-19.567017,-19.566986c-3.337006,-3.335999 -8.730011,-3.335999 -12.06601,0c-3.335999,3.337006 -3.335999,8.730011 0,12.06601l19.567017,19.566986l-19.567017,19.567017c-3.335999,3.337006 -3.335999,8.730011 0,12.06601c1.664001,1.664001 3.848999,2.5 6.03299,2.5c2.184998,0 4.369019,-0.835999 6.03302,-2.5l19.566986,-19.567017l19.567017,19.566986z" fill="#F64C4E" class="cmpsvgredfill"></path><path d="m392.53299,0.00058l-281.600006,0c-0.905006,0 -1.783005,0.162018 -2.611,0.444c-27.196007,0.485992 -52.855003,11.408997 -72.508003,30.916016c-22.76698,22.596008 -35.81398,54.707001 -35.81398,88.105988c0,65.878021 49.765999,119.46701 110.932999,119.46701l247.466995,0c4.718994,0 8.53299,-3.822998 8.53299,-8.53299s-3.813995,-8.53302 -8.53299,-8.53302l-247.466995,0c-51.754997,0 -93.866999,-45.934998 -93.866999,-102.399994c0,-28.88501 11.212999,-56.584991 30.771002,-75.997986c17.125996,-16.998016 38.673,-25.976013 62.353001,-25.976013c0.222,0 0.451996,0.009003 0.682999,0.009003c0.673996,0.026001 1.707001,-0.153992 2.526001,-0.434998l279.134018,0c56.464996,0 102.399994,45.934998 102.399994,102.399994c0,56.464996 -45.934998,102.399994 -102.399994,102.399994c-4.719025,0 -8.53302,3.822998 -8.53302,8.53302s3.813995,8.53299 8.53302,8.53299c65.877991,0 119.46698,-53.588989 119.46698,-119.46701s-53.588989,-119.466003 -119.46701,-119.466003z" fill="#ddd" class="cmpsvgsilver2fill"></path></g></g></svg></span></a></div><div data-cmp-stack="42" id="cmppurposelabelst42" class="cmpwelcomeprpstxt " draggable="false">Personalised advertising and content, advertising and content measurement, audience research and services development
</div></div></div></div><div class="cmpboxbtns" role="form"><span id="cmpwelcomebtnyes" class="cmpboxbtnspan"><a class="cmpboxbtn cmpboxbtnyes cmptxt_btn_yes" role="button" href="#" draggable="false"><svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 32 32" width="32px" class="cmpicosvgfill"><path id="cmpsvgacceptbtn" role="presentation" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path></svg> <span id="cmpbntyestxt">Accept all</span></a></span><span id="cmpwelcomebtncustom" class="cmpboxbtnspan"><a class="cmpboxbtn cmpboxbtncustom cmptxt_btn_settings" role="button" href="#" draggable="false"><span id="cmpbntcustomtxt">Settings</span></a></span><span style="display:none;" id="cmpwelcomebtnsave" class="cmpboxbtnspan"><a class="cmpboxbtn cmpboxbtnsave cmptxt_btn_save" role="button" href="#" draggable="false"><span id="cmpbntsavetxt">Save + Exit</span></a></span><div class="cmpmore"><span id="cmpcustomchoiceslink" style="display:none;"><a class="cmpmorelink cmptxt_btn_custom" href="#" draggable="false">Customize your choice</a><span class="cmpmoredivider"> | </span></span><a class="cmpmorelink cmptxt_cookies" href="#" draggable="false">Cookies</a><span class="cmpmoredivider"> | </span><a class="cmpmorelink cmptxt_btn_more" href="https://adinplay.com/privacy-and-cookies-policy/" target="_blank">Privacy notice</a></div></div></div><div class="cmplogo"><a href="https://adinplay.com/?utm_source=publishers&utm_medium=cmp" target="blank"><img class="cmpdl" alt="Logo" data-cmp-ab="1" src="https://cdn.consentmanager.net/delivery/img/logo1592405744x390.gif" loading="lazy"></a></div><div class="cmplanguage" id="cmplanguage" title="Language: en" role="button" draggable="false" tabindex="0"><img class="cmplangicon" src="https://cdn.consentmanager.net/delivery/flags/en.gif" width="16" height="11" aria-hidden="true" alt="Language: en" title="Language: en" data-cmp-ab="1" loading="lazy"></div></div><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>
<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"></path>
</g>
</symbol>
</defs>
</svg><!-- 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 (let i = 0; i < query.length; i++) {
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);
var host = loc.host.split('.');
url.dom = host[0];
url.top = host[1];
if (url.hash.length == 0) url.hash = undefined;
return url;
})();
</script>
<!-- third party globals -->
<script>
// Third party globals
var crazysdk = {inviteLink: function () {}},
pokiActive = false,
crazyGamesActive = false,
thirdPartyAdblocker = false,
testCrazy = false;
</script><!-- Crazy Games -->
<script src="https://sdk.crazygames.com/crazygames-sdk-v1.js"></script>
<script type="text/javascript">
const crazyAdDetect = (e) => {
if (e.hasAdblock) {
thirdPartyAdblocker = true;
}
};
// const crazyInitialized = (e) => {
// console.log('INITIALIZED: ', e);
// };
if (window.CrazyGames && CrazyGames.CrazySDK) {
const { CrazySDK } = window.CrazyGames;
crazysdk = CrazySDK.getInstance(); //Getting the SDK
crazysdk.addEventListener('bannerRendered', (e) => {
console.log(`Banner for container ${e.containerId} has been rendered!`);
});
crazysdk.addEventListener('bannerError', (e) => {
console.log(`Banner render error: ${e.error}`);
if (e.containerId === 'shellshockers_respawn_banner_2_ad' || e.containerId === 'shellshockers_respawn_banner-new_ad') {
// We only reset the timeout if both banners fail during the same request
if (++vueData.cGrespawnBannerErrors >= 2) {
vueData.cGrespawnBannerErrors = 0;
if (vueData.cGrespawnBannerTimeout) {
clearTimeout(vueData.cGrespawnBannerTimeout);
vueData.cGrespawnBannerTimeout = null;
}
}
}
});
// crazysdk.addEventListener('initialized', crazyInitialized);
crazysdk.addEventListener('adblockDetectionExecuted', crazyAdDetect);
crazysdk.init(); //Initializing the SDK, call as early as possible
}
if (parsedUrl.query.testCrazy) {
testCrazy = true;
}
</script><div style="position: fixed; display: none; width: 100%; height: 100%; inset: 0px; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index: 10000;"></div><!-- 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>
var aiptag = aiptag || {};
aiptag.cmd = aiptag.cmd || [];
aiptag.cmd.display = aiptag.cmd.display || [];
aiptag.cmd.player = aiptag.cmd.player || [];
</script>
<script async="" src="https://api.adinplay.com/libs/aiptag/pub/SSK/shellshock.io/tag.min.js"></script>
<!-- GTM -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K5MSJHJ');</script>
<!-- End Google Tag Manager --><!-- In house ads -->
<script>
window.googletag = window.googletag || {cmd: []};
let inHouseSlot;
const slots = [];
const dpfNetwork = /21743024831/,
inHouseAdSlot = 'ShellShockers_LoadingScreen_HouseAds'
inHouseAdSize = [[468, 60], [970, 90], [970, 250], [728, 90]],
inHouseAdDiv = 'ShellShockers_LoadingScreen_HouseAds',
adSlots = [];
// Helper to setup slots and add to slot array
const adDefineSlot = (slot, sizes, id) => {
return adSlots.push([{slot, sizes, id}]);
};
// Defining the slots for the the array
const loadingScreeningAd = adDefineSlot(inHouseAdSlot, inHouseAdSize, inHouseAdDiv);
// Helper to add slots to google service
function addServiceToSlot() {
slots.forEach(slot => {
slot.addService(googletag.pubads());
});
}
// Get all the slots, add to google ad defineSlot method
function getAllDefinedSlots(allSlots) {
let definedSlots = [];
allSlots.forEach(adSlot => {
for (var i = 0, len = adSlot.length; i < len; i++) {
slots.push(googletag.defineSlot(dpfNetwork + adSlot[i].slot, adSlot[i].sizes, adSlot[i].id));
}
})
return addServiceToSlot(slots);
}
const gtagInHouseLoadingBannerIntialLoad = () => {
if (typeof hasPoki !== 'undefined') {
console.log('haspoki', typeof(hasPoki));
return;
}
googletag.cmd.push(function() {
getAllDefinedSlots(adSlots);
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
};
gtagInHouseLoadingBannerIntialLoad();
const adRenderedEvent = () => {
return googletag.pubads().addEventListener('slotRenderEnded', (event) => {
vueApp.disaplyAdEventObject(event);
});
};
const gtagInHouseLoadingBanner = () => {
googletag.cmd.push(function() {
googletag.pubads().refresh([slots[0]]);
adRenderedEvent();
});
};
const destroyInhouseAdForPaid = () => {
googletag.destroySlots([slots[0]]);
};
</script><!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.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 -->
<!-- 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 if (location.hostname.startsWith('localhost')) {
osAppId = '884bfbf7-5bcb-4170-9bf4-bba6b6e0046e';// localhost testing
} else {
osAppId = '166e17cb-5c02-4c7d-8bff-8ec69729f725'; // internal testing
}
}
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: osAppId,
// autoResubscribe:true,
// allowLocalhostAsSecureOrigin: true
});
});
</script><!-- progressive web app -->
<!-- <button id="addToHomescreen" style="z-index:333;display: none; position:absolute; top:0px; right: 75%; cursor:pointer;" class="ss_button btn_yolk bevel_yolk">Add to your desktop!</button> -->
<script>
let pwaBlockAds = false;
// if ('serviceWorker' in navigator) {
// console.log("Will the service worker register?");
// navigator.serviceWorker.register('service-worker.js')
// .then(function(reg){
// console.log("Yes, it did.");
// }).catch(function(err) {
// console.log("No it didn't. This happened:", err)
// });
// }
if (window.matchMedia('(display-mode: standalone)').matches) {
pwaBlockAds = 'utm_source' in parsedUrl.query && parsedUrl.query.utm_source === 'homescreen';
ga('send', 'event', 'pwa', 'desktop opened');
}
</script>
<!-- Music audio tag -->
<audio id="theAudio" preload="metadata"></audio><!-- VueJS -->
<script src="js/vue/vue.min.2.6.10.js"></script><!-- tools and varibles -->
<script>
let changeLogData;
var version;
fetch('./changelog/changelog.json?1653515333', {cache: "no-cache"})
.then(response => response.json())
.then(data => {
changeLogData = data;
version = changeLogData[0].version;
});
localStore.removeItem('brbTime');
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) {
if (url.startsWith('./')) url = url.slice(2);
url = dynamicContentPrefix + url;
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;
}
const theTimeTracker = (startTime, gaVar, gaLabel) => {
const endTime = new Date();
const timerResult = endTime - startTime;
if (!Number.isInteger(timerResult) && !timerResult ) {
return;
}
return ga('send', 'timing', vueData.googleAnalytics.cat.playerStats, gaVar, timerResult, gaLabel);
};
const isShellIframe = () => window.self === window.top;
const iframeParent = () => {
const parent = (window.location != window.parent.location)
? document.referrer
: document.location.href,
domain = new URL(parent).hostname.replace(/(www.)/, '').split('.');
if (!Array.isArray(domain) && !domain.length) {
return false;
}
const index = domain.length - 2;
return {
domain: domain,
index: index,
};
};
const iframeWhitelist = (domains) => {
if (isShellIframe()) {
return;
}
const parent = iframeParent(),
domain = parent.domain,
index = parent.index;
// if in iframe and url hostname is in approved whitelist return true or false if not in list
return domains.includes(domain[index]) || domains.includes(domain[index - 1]);
};
const playShellshockers = () => {
//if not in a iframe return true
if (isShellIframe()) {
console.log('Not playing in iframe');
return true;
}
console.log('Playing in iframe');
const gamePortals = [
'poki',
'poki-gdn',
'poki.compoki',
'games.poki',
'crazygames',
'1001juegos',
'ioground',
'gogy',
'playgamesio',
'iogames',
'iogames',
'wingsiofree',
'vseigru',
'miniclip',
'red-ball4',
'speelspelletjes',
'onlinegame',
'addictinggames'
];
const parent = iframeParent(),
domain = parent.domain,
index = parent.index;
// if in iframe and url hostname is in approved whitelist return true or false if not in list
//return gamePortals.includes(domain[index]) || gamePortals.includes(domain[index - 1]);
return true; // Disabling this for now because server outages caused everyone to be blacklisted for some insane, currently unknown reason.
};
const capitalize = (s) => {
if (typeof s !== 'string') return ''
return s.charAt(0).toUpperCase() + s.slice(1)
};
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: 'frankfurt.', 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/';
const isLocalShellDev = location.hostname.startsWith('localshelldev'),
isLocalHost = location.hostname.startsWith('localhost');
if (dynamicContentRoot) {
servicesServer = 'wss://' + dynamicContentRoot + '/services/';
}
else if (isLocalHost || isLocalShellDev) {
servicesServer = isLocalHost ? 'ws://localhost:4242' : 'ws://localshelldev.bluewizard.com:4242/';
debug = true;
if (isLocalShellDev)
servers.push({ name: 'Local VM', subdom: 'localshelldev.', root: 'bluewizard.com', locKey: 'server_localshelldev', id: 'lucyskydiamonds' });
servers.push({ name: 'local', subdom: '', locKey: '_server_local', id: 'local' });
servers.push({ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_gamedev', id: 'gamedev' });
}
else if (location.hostname.startsWith('staging.shellshock.io')) {
debug = true;
servers = [{ name: 'Staging', subdom: 'staging.', locKey: 'server_staging', id: 'staging' }];
var servicesServer = 'wss://staging.shellshock.io:8443/services/';
}
if (location.search.includes('portalTest')) {
gameServerRoot = 'shellshock.io';
dynamicContentRoot = 'dev.shellshock.io';
dynamicContentPrefix = 'https://dev.shellshock.io/';
servers = [{ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_dev', id: 'dev' }];
}
if (!dynamicContentRoot && location.hostname.startsWith('dev.shellshock.io') || dynamicContentRoot == 'dev.shellshock.io') {
servers = [{ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_dev', id: 'dev' }];
servicesServer = 'wss://dev.shellshock.io/services/';
}
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 || '';
if (gameServerRoot) rootName = gameServerRoot;
if (server.subdom == '' && rootName === 'localhost' || rootName === 'bluewizard.com') {
return 'ws://' + subdom + rootName + ':4430';
} else {
return 'wss://' + subdom + rootName;
}
}
function getServerIndex (server) {
return servers.map(s => s.id).indexOf(server.id);
}
function getStoredNumber (name, def) {
var num = localStore.getItem(name);
if (!num) {
return def;
}
return Number(num);
}
function getStoredBool (name, def) {
var str = localStore.getItem(name);
if (!str) {
return def;
}
return str == 'true' ? true : false;
}
function getStoredString (name, def) {
var str = localStore.getItem(name);
if (!str) {
return def;
}
return str;
}
function getStoredObject (name, def) {
var str = localStore.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
};
var EGGCOLOR = {
white: 0,
skyblue: 1,
beige: 2,
tan: 3,
brown: 4,
caramel: 5,
chocolate: 6,
red: 7,
purple: 8,
violet: 9,
yellow: 10,
babyblue: 11,
darkgreen: 12,
green: 13
}
// 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,
Grenade: 6
}
var CharClass = {
Soldier: 0,
Scrambler: 1,
Ranger: 2,
Eggsploder: 3,
Whipper: 4,
Crackshot: 5,
TriHard: 6
};
const SOCIALMEDIA = [
'fa-facebook-square',
'fa-instagram-square',
'fa-tiktok',
'fa-discord',
'fa-youtube',
'fa-twitter-square',
'fa-twitch'
];
</script><!-- shellshockers js -->
<script>
function ssJSComplete () {
window.onloadingcomplete();
}
Loader.loadJS('src/shellshock.js?1654121223', ssJSComplete);
</script>
<!-- google tag manager noscript -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K5MSJHJ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --> <!-- Ads -->
<div id="gameAdContainer" class="hideme">
<!-- <div id="multisizeBannerAdPlaceholder"></div>
<div id="shellshock-io_multisize"></div> -->
<!-- AdInPlay tag ID -->
<!-- ShellShock_Respawn_Banner -->
<!-- <div id='div-gpt-ad-ShellShock_Respawn_Banner'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-ShellShock_Respawn_Banner'); });
</script>
</div> -->
</div>
<div id="shellshockers_titlescreen">
</div>
<div id="shellshockers_chicken_nugget_banner">
</div>
<div id="shellshockers_respawn_banner_2">
</div>
<!-- <div id="shellshockers_respawn_banner">
</div> -->
<div id="shellshockers_respawn_banner-new">
</div>
<div id="ShellShockers_LoadingScreen_HouseAds">
</div>
<div id="videoAdContainer">
<div id="preroll"></div>
</div>
<!-- <div class="video_ad_wrapper">
<video id="asc_video_ad" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" muted="true" style="display: none;">
<source src="video/tiny.mp4" type="video/mp4" />
</video>
</div> -->
<div id="ss_background"></div>
<!-- Instantiate the Vue instance -->
<div id="app" :class="[currentLanguageCode, portalClass]"> <!-- vue instance div: all vue-controlled elements MUST be inside this tag -->
<!-- <asc-video-player id="mainVideoPlayer" ref="mainVideoPlayer" adTagUrl="adTagUrl"></asc-video-player> -->
<div class="firebaseID">firebase ID: {{ firebaseId }}, maskedEmail: {{ maskedEmail }} isAnonymous: {{ isAnonymous }}, isEmailVerified: {{ isEmailVerified }}</div>
<!-- Canvas -->
<canvas id="canvas" ref="canvas" class="gameCanvas"></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" :hide-ads="hideAds"></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)" :kname="killName" :kdname="killedName"></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" :is-from-eu="showPrivacyOptions" :controller-id="controllerId" :controller-type="controllerType" :lang-option="locLanguage" :is-vip="(hideAds || contentCreator)"></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)"> {{ loc.p_settings_of_age }}<br>
<input id="targetedAdsCheck" type="checkbox" v-model="showTargetedAds" @change="targetedAdsChanged($event)"> <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: VIP Help & Feedback -->
<large-popup id="vipPopup" ref="vipPopup" stop-key-capture="true" @popup-closed="onVipHelpClosed">
<template slot="content">
<vip-help id="vip-help" ref="help" :loc="loc" :is-vip="isSubscriber">
</vip-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" :products="eggStoreItems" :sale-event="isSale"></egg-store>
</template>
</large-popup>
<img v-show="blackFridayBanner" class="black-friday-banner" style="display: none" src="img/black-friday-banner.jpg" alt="Black Friday Sale">
<!-- Popup: VIP store -->
<large-popup id="subStorePopup" ref="subStorePopup" stop-key-capture="true" @popup-closed="onSharedPopupClosed" :overlay-close="true">
<template slot="content">
<subscription-store id="shell-subscriptions" ref="shell-subscriptions" :loc="loc" :subs="subStoreItems">
</subscription-store></template>
</large-popup>
<!-- Popup: VIP ended -->
<small-popup id="vipEnded" ref="vipEnded" stop-key-capture="true" @popup-confirm="showSubStorePopup" @popup-closed="onSharedPopupClosed" :overlay-close="true" class="vip">
<template slot="content">
<figure>
<img src="img/vip-club/vip-club-popup-emblem.png" alt="Shell Shockers VIP">
</figure>
<div class="vip-ended-popup">
Yo! Your VIP subscription has expired! If you'd like to keep your awesome benefits (and your Golden Wings!) then click below to join again!
</div>
</template>
<template slot="confirm">Join again!</template>
<template slot="cancel">No, i don't like stuff</template>
</small-popup>
<!-- Popup: Egg Store single -->
<large-popup id="popupEggStoreSingle" ref="popupEggStoreSingle" stop-key-capture="true" @popup-closed="onSharedPopupClosed" :overlay-close="false" class="popup-store-single">
<template slot="content">
<egg-store-item v-for="item in premiumShopItems" :key="item.sku" :item="item" :loc="loc" :account-set="accountSettled" v-if="eggStorePopupSku && item.sku === eggStorePopupSku"></egg-store-item>
</template>
</large-popup>
<!-- Popup: Unsupported Platform -->
<large-popup id="unsupportedPlatformPopup" ref="unsupportedPlatformPopup" hide-close="true">
<template slot="content">
<h2>{{ loc['unsupported_platform'] }}</h2>
<div>{{ loc[unsupportedPlatformPopup.contentLocKey] }}</div>
</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 -->
<give-stuff-popup ref="giveStuffPopup" id="giveStuffPopup" :loc="loc" :give-stuff-popup="giveStuffPopup"></give-stuff-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">
<section v-for="(log, idx) in changelog.current">
<h3>{{ log.version }} - <i><time>{{ log.date }}</time></i></h3>
<ul>
<li v-for="data in log.content" v-html="data"></li>
</ul>
<hr class="blue">
</section>
</div>
<div id="btn_horizontal">
<button v-if="changelog.showHistoryBtn" @click="showHistoryChangelogPopup" class="ss_button btn_green bevel_green">More</button>
<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="chicknWinner" ref="chicknWinner" :hide-close="true" :overlay-close="false">
<template slot="content">
<chicken-nugget-popup id="chickenNugget" ref="chickenNugget" :loc="loc" :amount-given="miniEggGameAmount" :ad-units="adUnits"></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-close="true" :overlay-close="false" @popup-cancel="anonWarningPopupCancel" @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="cancel">{{ loc.account_anon_warn_confirm }}</template>
<template slot="confirm">{{ loc.sign_in }}</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>
<!-- 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>
<small-popup ref="adBlockerPopup" id="adBlockerPopup" :overlay-close="false" hide-confirm="true" hide-cancel="true" hide-close="true">
<template slot="header">
We've detected ad blocker!
</template>
<template slot="content">
<p>To <i>avoid</i> this message please turn <i>off</i> ad blocker.</p>
<h4>Please wait</h4>
<h3>{{adBlockerCountDown}}</h3>
</template>
</small-popup>
<!-- Popup: PWA -->
<small-popup id="pwaPopup" class="pwa-popup" ref="pwaPopup" hide-confirm="true" @popup-closed="onSharedPopupClosed">
<!-- <template slot="header">{{ loc.p_settings_privacy }}</template> -->
<template slot="content">
<p>{{loc.pwa_desc_one}}</p>
<p>{{loc.pwa_desc_two}}</p>
<button @click="pwaBtnClick" class="ss_button btn_big btn_green bevel_green btn_height_auto btn-pwa-download">
<div class="pwa-btn-img-box roundme_lg bg-darkgreen">
<img src="favicon192.png" alt="Egg yolk">
<i class="fas fa-share" aria-hidden="true"></i>
</div>
{{loc.pwa_btn_line_one}}<br>{{loc.pwa_btn_line_two}}
</button>
</template>
<template slot="cancel">{{loc.pwa_no_thanks}}</template>
</small-popup>
<large-popup id="adBlockerVideo" ref="adBlockerVideo" @popup-closed="onSharedPopupClosed" :overlay-close="false" hide-confirm="true" hide-cancel="true" hide-close="true">
<template slot="content">
<p class="text-center">{{ loc.ad_blocker_big_popup_title }}<br> <span v-html="loc.ad_blocker_big_popup_desc"></span></p>
<img src="img/shellshockers-unite-lg.png" alt="">
<!-- <house-ad id="house-ad-video-replacement" ref="house-ad-video-replacement" :data="bannerHouseAd" :isshowing="showAdBlockerVideoAd"></house-ad> -->
</template>
</large-popup>
<large-popup ref="mobileAdPopup" id="mobileAdPopup" :overlay-close="true" hide-confirm="true" hide-cancel="true">
<template slot="content">
<img src="img/mobile/shell-mobile-popup-bg-qr.png" alt="Get Shell Shockers Mobile app!">
</template>
</large-popup>
<large-popup ref="kotcInstrucPopup" id="kotcInstrucPopup" :overlay-close="true" hide-confirm="true" hide-cancel="true">
<template slot="content">
<img class="kotc-wordmark" src="img/kotc/kotc-wordmark.svg" alt="">
<div class="kotc-how-to-play-wrapper box_aboslute">
<h2 class="kotc-how-to-play-title text-center"><span class="roundme_md">{{ loc.home_kotc_popup_how_to }}</span><br>{{ loc.home_play }}!</h2>
<img src="img/kotc/kotc-arrow.svg" aria-hidden="true">
</div>
<div class="display-grid grid-column-2-eq grid-gap-space-lg fullwidth ss_margintop_xxxxl">
<div class="img-container roundme_lg fullwidth step-one">
<div class="fullwidth">
<p class="text-center"><span class="sr-only">Step </span>1</p>
<h6 class="text-center">{{loc.home_kotc_popup_step_one}}</h6>
</div>
</div>
<div class="img-container roundme_md fullwidth step-two">
<div class="fullwidth">
<p class="text-center"><span class="sr-only">Step </span>2</p>
<h6 class="text-center">{{loc.home_kotc_popup_step_two}}</h6>
</div>
</div>
</div>
<div class="display-grid grid-column-2-eq grid-gap-space-lg roundme_md fullwidth ss_margintop_lg kotc-play-now step-three-wrapper">
<div class="fullwidth box_relative step-three">
<img class="kotc-logo box_aboslute" src="img/kotc/kotc-rooster.svg" alt="The King of the Coop Rooster">
<div>
<p class="text-center"><span class="sr-only">Step </span>3</p>
<h6 class="text-center" v-html="loc.home_kotc_popup_step_three"></h6>
</div>
</div>
<div class="fullwidth f_col f_space_between">
<div class="display-grid grid-column-5-eq kotc-crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
</div>
<button class="ss_button btn_big btn_green bevel_green fullwidth" @click="onClickPlayKotcNow"><i class="fa fa-play fa-sm"></i> {{ loc.home_play }}</button>
</div>
</div>
</template>
</large-popup>
<!-- <div id="kotc-play-kotc" class="kotc-play-kotc display-grid">
<img class="kotc-play-kotc-watermark" src="img/kotc/kotc-crown-indicator.svg" alt="">
<img class="kotc-play-kotc-arrow" src="img/kotc/kotc-arrow.svg" aria-hidden="true">
</div> -->
<!-- #kotc-play-kotc -->
</div> <!-- End of vue instance div -->
<script>
var vueApp;
var vueData = {
ready: false,
accountSettled: false,
missingFeatures: [],
changelogVersion: version,
changeLogData: [],
showChangelogHistoryBtn: true,
changelog: {
current: [],
history: [],
showHistoryBtn: true
},
firebaseId: null,
photoUrl: null,
maskedEmail: null,
isEmailVerified: false,
isAnonymous: true,
showPrivacyOptions: isFromEU,
isOfAge: false,
showTargetedAds: false,
delayTheCracking: false,
displayAdFunction: Function,
titleScreenDisplayAd: Function,
displayAdObject: false,
hideAds: false,
isPoki: false,
isPokiGameLoad: false,
pokiRewardReady: false,
isPokiNewRewardTimer: false,
videoRewardTimers: {
initial: 300000,
primary: 420000
},
pokiRewNum: 1,
adUnits: {
display: {
respawn: 'shellshockers_respawn_banner',
respawnTwo: 'shellshockers_respawn_banner_2',
respawnThree: "shellshockers_respawn_banner-new",
home: 'shellshockers_titlescreen',
nugget: 'shellshockers_chicken_nugget_banner',
house: 'ShellShockers_LoadingScreen_HouseAds'
}
},
cGrespawnBannerTimeout: null,
cGrespawnBannerErrors: 0,
classIdx: 0,
playerName: '',
eggs: 0,
kills: 0,
deaths: 0,
kdr: 0,
streak: 0,
isUpgraded: false,
upgradeName: '',
isSubscriber: false,
serverList: [], // Populated by pingServers()
currentServerId: null,
currentServerLocKey: null,
currentGameType: 0,
volume: 0,
getMusicVolume: 0.5,
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,
},
isTwitchEvent: false,
twitchLinked: 0,
twitchName: '',
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' }
],
locLanguage: {},
playTypes: {
joinPublic: 0,
createPrivate: 1,
joinPrivate: 2
},
gameTypes: [
{ locKey: 'gametype_ffa', value: 0 },
{ locKey: 'gametype_teams', value: 1 },
{ locKey: 'gametype_ctf', value: 2 },
{ locKey: 'gametype_king', value: 3 }
],
// This makes me mad, but until Vue is put in the clojure with GameType,
// where it should have been to begin with, HERE IT IS >:(
gameTypeKeys: [
'FFA',
'Teams',
'Spatula',
'King'
],
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: [],
settingsUi: {
adjusters: {
misc: [
{ id: 'volume', locKey: 'p_settings_mastervol', min: 0, max: 1, step: 0.01, value: 1, multiplier: 100 }
],
mouse: [
{ id: 'mouseSpeed', locKey: 'p_settings_mousespeed', min: 1, max: 100, step: 1, value: 30 }
],
gamepad: [
{ id: 'sensitivity', locKey: 'p_settings_sensitivity', min: 1, max: 100, step: 1, value: 30 },
{ id: 'deadzone', locKey: 'p_settings_deadzone', min: 0, max: 1, step: 0.01, value: 0.3, precision: 2 }
],
// music: [
// { id: 'musicVolume', locKey: 'p_settings_music_volume', min: 0, max: 1, step: 0.01, value: 0.5, multiplier: 100 }
// ],
},
togglers: {
misc: [
{ id: 'holdToAim', locKey: 'p_settings_holdtoaim', value: true },
{ id: 'enableChat', locKey: 'p_settings_enablechat', value: true },
{ id: 'safeNames', locKey: 'p_settings_safenames', 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 },
{ id: 'hideBadge', locKey: 'p_settings_badge_hide', value: false },
// { id: 'musicStatus', locKey: 'p_settings_music', value: true }
],
mouse: [
{ id: 'mouseInvert', locKey: 'p_settings_invertmouse', value: false },
{ id: 'fastPollMouse', locKey: 'p_settings_fastpollmouse', value: false },
],
gamepad: [
{ id: 'controllerInvert', locKey: 'p_settings_invertcontroller', value: false },
]
},
controls: {
keyboard: {
// The ids map to the field names in settings.controls[category]
game: [
{ id: 'up', side: 'left', locKey: 'keybindings_forward', value: 'W' },
{ id: 'down', side: 'left', locKey: 'keybindings_backward', value: 'S' },
{ id: 'left', side: 'left', locKey: 'keybindings_left', value: 'A' },
{ id: 'right', side: 'left', locKey: 'keybindings_right', value: 'D' },
{ id: 'jump', side: 'left', locKey: 'keybindings_jump', value: 'SPACE' },
{ id: 'fire', side: 'right', locKey: 'keybindings_fire', value: 'MOUSE 0' },
{ id: 'scope', side: 'right', locKey: 'keybindings_aim', value: 'SHIFT' },
{ id: 'reload', side: 'right', locKey: 'keybindings_reload', value: 'R' },
{ id: 'swap_weapon', side: 'right', locKey: 'keybindings_swapweapon', value: 'E' },
{ id: 'grenade', side: 'right', locKey: 'keybindings_grenade', value: 'Q' }
],
spectate: [
{ id: 'ascend', locKey: 'keybindings_spectate_ascend', value: 'SPACE' },
{ id: 'descend', locKey: 'keybindings_spectate_descend', value: 'SHIFT' }
]
},
gamepad: {
// The ids map to the field names in settings.gamepad[category]
game: [
{ id: 'jump', locKey: 'keybindings_jump', value: '0' },
{ id: 'fire', locKey: 'keybindings_fire', value: '1' },
{ id: 'scope', locKey: 'keybindings_aim', value: '2' },
{ id: 'reload', locKey: 'keybindings_reload', value: '3' },
{ id: 'swap_weapon', locKey: 'keybindings_swapweapon', value: '4' },
{ id: 'grenade', locKey: 'keybindings_grenade', value: '5' }
],
spectate: [
{ id: 'ascend', locKey: 'keybindings_spectate_ascend', value: '1' },
{ id: 'descend', locKey: 'keybindings_spectate_descend', value: '2' }
]
}
}
},
songChanged: false,
music: {
isMusic: false,
musicJson: 'data/sponsors.json',
musicSrc: '',
theAudio: '',
playing: false,
sponsors: {},
sponsor: '',
currIndex: 0,
currentTime: 0,
duration: 0,
timer: null,
progress: 0,
volume: 10,
hideClass: 'music-widget--fade-out',
serverTracks: {
id: '',
title: '',
artist: '',
album: '',
albumArt: '',
url: '',
trackUrltest: 'https://shellshock.io',
sponsor: '',
sponsorUrl: '',
}
},
home: {
joinPrivateGamePopup: {
code: '',
showInvalidCodeMsg: false,
validate: function () {
if (this.code.length == 0) {
console.log('failed validation');
this.showInvalidCodeMsg = true;
BAWK.play('ui_reset');
return false;
}
console.log('passed validation');
return true;
},
reset: function () {
this.code = '';
this.showInvalidCodeMsg = false;
}
},
},
equip: {
get showingItems () {
return this._showingItems;
},
set showingItems (items) {
this._showingItems = items;
for (let t of this.lazyRenderTimeouts) {
clearTimeout(t);
}
},
lazyRenderTimeouts: [],
mode: 0,
equipModes: {
inventory: 0,
shop: 1
},
equippedPrimary: null,
equippedSecondary: null,
equippedHat: null,
equippedStamp: null,
equippedGrenade: null,
posingHat: null,
posingStamp: null,
posingWeapon: null,
posingGrenade: 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;
BAWK.play('ui_reset');
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',
classChanged: false,
wasGameInventoryOpen: false,
}
},
isPaused: true,
isEvent: false,
doubleEggWeekendSoon: false,
doubleEggWeekend: false,
announcementMessage: null,
playerActionsPopup: {
playerId: 0,
uniqueId: 0,
isGameOwner: false,
playerName: '',
muted: false,
muteFunc: null,
bootFunc: null,
social: false,
vipMember: false
},
giveStuffPopup: {
titleLoc: '',
eggs: 0,
items: [],
type: ''
},
openUrlPopup: {
url: '',
titleLocKey: '',
contentLocKey: '',
confirmLocKey: 'ok',
cancelLocKey: 'no_thanks'
},
genericMessagePopup: {
titleLocKey: 'keybindings_right',
contentLocKey: 'p_popup_chicken_nuggetbutton',
confirmLocKey: 'ok'
},
unsupportedPlatformPopup: {
titleLocKey: 'unsupported_platform',
contentLocKey: ''
},
windowDimensions: {
width: 0,
height: 0,
},
bannerAds: {
bannerElId: '',
},
googleAnalytics: {
isUser: null,
cat: {
purchases: 'Purchases',
purchaseComplete: 'Purchase Complete',
itemShop: 'Item Shop',
inventory: 'Inventory',
playerStats: 'player stats',
play: 'play game',
redeem: 'Redeem'
},
action : {
eggShackClick: 'Egg Shack Click',
eggShackProductClick: 'Egg Shack Product Click',
purchaseComplete: 'Purchase Complete',
goldenChickenProductClick: 'Golden Chicken Product Click',
goldenChickenNuggetClick: 'Golden Chicken Nugget Click',
shopClick: 'Shop Opened ',
shopItemClick: 'Shop Item Selected',
shopItemPopupClick: 'Shop Item Popup Click',
shopItemPopupBuy: 'Item purchased',
shopItemNeedMoreEggsPopup: 'Need More Eggs Popup',
inventorySelected: 'Inventory Item ',
eggCount: 'Egg Count',
inventoryTabClick: 'Inventory Opened',
playGameClick: 'Play Game Click',
redeemed: 'Redeemed',
redeemClick: 'Redeem open',
languageSwitch: 'Language setting change',
langBeforeUpdate: 'Language before auto detect',
privateGame: 'Private Game',
shareGamePopup: 'Share game Popup',
shareGameCopy: 'Shared game code',
createGame: 'Created game',
joinGame: 'Joined game',
playerLimit: 'Player limit',
timesPlayed: 'Times played',
anonymousPopupOpenAuto: 'Anon warning auto opened',
anonymousPopupOpen: 'Anon warning opened',
anonymousPopupSignupClick: 'Anon warning Sign in clicked',
anonymousPopupAgreeClick: 'Anon warning Understood clicked',
denyAnonUserPopup: 'Deny anon user popup',
denyAnonUserPopupSignin: 'sign in click',
faqPopupClick: 'FAQ popup open',
switchTeams: 'Switched Teams',
error: 'error',
signIn: 'Sign in'
},
label : {
signInClick: 'sign in click',
understood: 'Understood click',
getMoreEggs: 'Get More Eggs Click',
waitForGameReadyTimeout: 'waitForGameReady timeout',
signInAuthFailed: 'authorization failed',
signInTiming: 'Sign in delay',
signInCompleted: 'Completed',
signInOut: 'Signed out',
signInFailed: '',
homeToGameLoading: 'Home to game loading',
loading: 'Loading'
}
},
urlParams: null,
urlParamSet: null,
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21743024831/ShellShock_Video&description_url=__page-url__&env=vp&impl=s&correlator=&tfcd=0&npa=0&gdfp_req=1&output=vast&sz=640x480&unviewed_position_start=1',
eggStoreItems: [],
subStoreItems: [],
premiumShopItems: [],
eggStoreReferral: '',
eggStoreHasSale: false,
eggStorePopupSku: 'egg_pack_small',
showNugget: true,
// isMiniGameComplete: false,
miniEggGameAmount: 0,
showGoldenChicken: false,
nugStart: null,
nugCounter: null,
isBuyNugget: false,
adBlockerCountDown: 10,
controllerType: 'generic',
controllerId: '',
controllerButtonIcons: {
xbox: [
'A',
'B',
'X',
'Y',
'LB',
'RB',
'LT',
'RT',
'Select',
'Start',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickright.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadup.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpaddown.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadright.svg">'
],
ps: [
'<img class="ss_buttonbind_icon" src="img/controller/button_cross.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_circle.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_square.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_triangle.svg">',
'LB',
'RB',
'LT',
'RT',
'Select',
'Start',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickright.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadup.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpaddown.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadright.svg">'
],
switchpro: [
'B',
'A',
'Y',
'X',
'LB',
'RB',
'LT',
'RT',
'-',
'+',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickright.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadup.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpaddown.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadright.svg">'
],
generic: [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15'
]
},
pwaDeferEvent: '',
blackFridayBanner: false,
isSale: false,
smallHouseAd: {},
bannerHouseAd: false,
showAdBlockerVideoAd: false,
hasMobileReward: false,
killName: null,
killedName: null,
killedByMessage: null,
killedMessage: null,
chicknWinnerWatched: null,
chicknWinnerCounter: 0,
chicknWinnerReady: false,
chicknWinnerDailyLimitReached: false,
isChicknWinnerError: false,
hasChwPlayClicked: false,
chwActiveTimer: 6000,
chwHomeTimer: null,
chwHomeEl: null,
contentCreator: false,
eggOrg: false
}</script>
<!-- Shared tags must come before the screen tags -->
<script id="events-template" type="text/x-template">
<div v-if="(doubleEggWeekendSoon || doubleEggWeekend) && showUi" id="event-notifications">
<div class="double-eggs">
<img v-if="doubleEggWeekendSoon && !doubleEggWeekend" src="img/events/shellshockers_doubleEgg01.png" alt="Double Egg weekend coming soon">
<img v-if="doubleEggWeekend" src="img/events/shellshockers_doubleEgg02.png" alt="Double Egg weekend now happening">
</div>
</div>
</script>
<script>
const comp_events = {
template: '#events-template',
props: ['show', 'owOn', 'showSoon', 'showUi'],
created() {
this.checkForEvents();
},
data: function () {
return vueData;
},
methods: {
isEventDate(days) {
const day = new Date().getUTCDay();
return days.includes(day);
},
doubbleEggSoon() {
return this.doubleEggWeekendSoon = this.isEventDate([4,5]);
},
doubleEggOn() {
const ISEVENT = this.isEventDate([5,6,0]);
if (!ISEVENT) {
return;
}
const DATE = new Date();
let day = DATE.getUTCDay();
if (day === 5) {
let time = DATE.getUTCHours();
if (time >= 20) {
return (
this.doubleEggWeekend = ISEVENT,
this.isEvent = ISEVENT
)
} else {
return (
this.doubleEggWeekend = false,
this.isEvent = false
)
}
} else {
return (
this.doubleEggWeekend = ISEVENT,
this.isEvent = ISEVENT
)
}
},
checkEvents() {
return (
this.doubbleEggSoon(),
this.doubleEggOn()
)
},
checkForEvents() {
this.checkEvents();
if (!this.doubleEggWeekend && this.isEventDate([4,5,6,0])) {
setTimeout(() => {
return this.checkForEvents();
}, 60000);
}
return;
},
},
};
</script><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>
<wobbly-egg></wobbly-egg>
<p class="load_message">{{ footer }}</p>
<display-ad :hidden="hideAds" id="div-gpt-ad-shellshockers-loading-houseads-wrap" ref="loadingScreenDisplayAd" :ignoreSize="true" :houseAd="true" adUnit="ShellShockers_LoadingScreen_HouseAds" adSize="728x90" :override="true" :adBlockerData="adblockerbanner"></display-ad>
</div>
</transition>
</script>
<script id="wobble-egg-template" type="text/x-template">
<div id="wobbly-egg">
<svg viewBox="0 0 240 240" :class="[loadEggcontainer, {noanimate: noAnimate}]" 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" :class="{noanimate: noAnimate}" 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="[loadEggwhite, {noanimate: noAnimate}]" 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="[loadEggyolk, {noanimate: noAnimate}]" ry="38" rx="38" id="svg_eggyolk" cy="120" cx="120" stroke-width="0" fill="url(#load_yolkgradient)"/>
</g>
</svg>
</div>
</script>
<script>
var comp_wobbly_egg = {
template: '#wobble-egg-template',
props: ['noAnimate'],
data: function () {
return {
loadEggyolk: 'load_eggyolk',
loadEggwhite: 'load_eggwhite',
loadEggcontainer: 'load_eggcontainer'
}
}
};
</script>
<script>
var comp_spinner_overlay = {
template: '#spinner-overlay-template',
components: {
'wobbly-egg': comp_wobbly_egg
},
props: ['loc', 'adblockerbanner', 'hideAds'],
data: function () {
return {
isShowing: false,
header: '',
footer: '',
adIsShowing: false,
}
},
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['ui_game_loading'];
this.header = this.loc['building_map'];
this.footer = '{0}... {1}%'.format(msg, percent);
this.isShowing = true;
},
hide: function () {
this.isShowing = false;
this.$emit('close-display-ad');
},
hideDisplayAd() {
this.adIsShowing = false;
console.log('do it');
},
showDisplayAd() {
this.adIsShowing = true;
},
toggleDisplayAd() {
return this.adIsShowing = this.adIsShowing ? false : true;
}
},
};
</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><iframe marginwidth="0" marginheight="0" scrolling="no" frameborder="0" id="1021bcc777d444" width="0" height="0" src="about:blank" name="__pb_locator__" style="display: none; height: 0px; width: 0px; border: 0px;"></iframe>
<script type="text/javascript" id="" charset="">!function(b,e,f,g,a,c,d){b.fbq||(a=b.fbq=function(){a.callMethod?a.callMethod.apply(a,arguments):a.queue.push(arguments)},b._fbq||(b._fbq=a),a.push=a,a.loaded=!0,a.version="2.0",a.queue=[],c=e.createElement(f),c.async=!0,c.src=g,d=e.getElementsByTagName(f)[0],d.parentNode.insertBefore(c,d))}(window,document,"script","https://connect.facebook.net/en_US/fbevents.js");fbq("init","446896919250308");fbq("track","PageView");</script>
<noscript>
<img height="1" width="1" src="https://www.facebook.com/tr?id=446896919250308&ev=PageView
&noscript=1">
</noscript>
<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);
}
if (!this.isShowing) {
console.log('Closed: ' + this.popupId);
this.$emit('popup-closed');
vueApp.gameUiRemoveClassForNoScroll();
this.cancelEventOverLayClickEscapeClose();
} else {
console.log('Opened: ' + this.popupId);
this.$emit('popup-opened');
vueApp.scrollToTop();
vueApp.gameUiAddClassForNoScroll();
this.outsideClickClose();
}
if (!extern.inGame) {
vueApp.toggleTitleScreenAd();
}
},
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();
BAWK.play('ui_popupclose');
},
onXClick: function () {
this.$emit('popup-x');
this.close();
BAWK.play('ui_popupclose');
},
cancelClick: function () {
this.close();
this.$emit('popup-cancel');
BAWK.play('ui_popupclose');
},
confirmClick: function () {
if (this.popupModel && this.popupModel.validate && !this.popupModel.validate()) {
return;
}
this.close();
this.$emit('popup-confirm');
BAWK.play('ui_playconfirm');
},
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>
<template id="house-display-ad">
<transition name="fade">
<figure v-if="isshowing && data" class="house-wrap">
<img :src="src" :alt="title" @click="adClicked">
</figure>
</transition>
</template>
<script>
function createHouseAd() {
return {
template: '#house-display-ad',
props: ['isshowing', 'data'],
data() {
return {
count: 0
}
},
methods: {
adClicked() {
if ('link' in this.data) {
this.data.link = this.data.link + '/?utm_source=shell_shockers&utm_medium=referral&utm_campaign=house-ads';
}
extern.clickedHouseLink(this.data);
}
},
computed: {
src() {
return dynamicContentPrefix + `data/img/art/${this.data.id}${this.data.imageExt}`;
},
alt() {
return `${this.data.label} banner image!`;
},
link() {
return `${this.data.link}/?utm_source=shell_shockers&utm_medium=referral&utm_campaign=house-ads`;
},
title() {
return `Play ${this.data.label} now!`;
}
}
}
}
Vue.component('house-ad', createHouseAd());
</script><script id="display-ad-template" type="text/x-template">
<div>
<div v-if="!hidden" v-show="isAdShowing" :id="id" class="display-ad-container" :class="theClass"></div>
<house-ad :data="houseAdData" :isshowing="isAdShowing && houseAdData && adBlocker"></house-ad>
</div>
</script>
<script>
// Register popup components globally
Vue.component('display-ad', createDisplayAdComponent('#display-ad-template'));
function createDisplayAdComponent(templateId) {
return {
template: templateId,
props: {
id: String,
hidden: Boolean,
adUnit: String,
isHidden: Boolean,
poki: Boolean,
adSize: String,
override: Boolean,
houseAd: Boolean,
ignoreSize: Boolean,
},
data: function () {
return {
isAdShowing: false,
hideAds: false,
theAd: '',
adRefreshCheck: false,
houseAdData: '',
adBlocker: false,
}
},
mounted() {
this.$nextTick(() => {
this.getTheAd();
});
this.override = this.override || false;
},
methods: {
getTheAd() {
this.theAd = document.getElementById(this.adUnit);
if (pokiActive || extern.productBlockAds) {
return;
}
const wrap = document.getElementById(this.id);
wrap.appendChild(this.theAd);
if (this.houseAd && !crazyGamesActive && !pokiActive) {
googletag.cmd.push(function() { googletag.display('ShellShockers_LoadingScreen_HouseAds') });
}
},
setVisible(visible) {
if (vueData.isUpgraded) {
console.log('Upgrade hides ads');
this.isAdShowing = false;
return;
}
if (extern.productBlockAds) {
console.log('Closure hides ads');
this.isAdShowing = false;
return;
};
this.isAdShowing = visible;
if (!this.isAdShowing) {
window.removeEventListener('resize', this.hideAdBasedOnscreenSize);
// this.adVisibility();
if (pokiActive && this.adSize) PokiSDK.destroyAd(this.$el);
return;
} else {
this.triggerAd();
setTimeout(() => this.hideAdBasedOnscreenSize(), 500);
// this.adVisibility();
window.addEventListener('resize', this.hideAdBasedOnscreenSize);
return;
}
},
show() {
if (extern.productBlockAds) return;
console.log(`display ad ${this.id} showing`);
this.setVisible(true);
},
hide() {
this.setVisible(false);
console.log(`display ad ${this.id} hiding`);
},
crazyGamesAd(id, size) {
// Removing delay per CG's request. Refresh rate is restricted server-side
/*if (this.adRefreshCheck) return;
this.adRefreshCheck = true;
setTimeout(() => this.adRefreshCheck = false, 20000);*/
crazysdk.requestBanner([{
containerId: id,
size: size
}]);
},
triggerAd() {
this.adBlocker = extern.adBlocker;
if (this.adBlocker) {
this.adblockerSetup();
return;
}
if (!pokiActive && !crazyGamesActive && !testCrazy) {
if (this.houseAd) {
gtagInHouseLoadingBanner();
return;
}
aiptag.cmd.display.push(() => aipDisplayTag.display(this.adUnit));
return;
} else if (crazyGamesActive || testCrazy) {
// since crazy games requires an array for multiple ads on screen will cancel the respawn
// ad calls and call them elsewhere
if (this.id === 'shellshockers_respawn_banner_ad' ||
this.id === 'shellshockers_respawn_banner_2_ad' ||
this.id === 'shellshockers_respawn_banner-new_ad') return;
this.crazyGamesAd(this.id, this.adSize);
return;
} else if (pokiActive && this.adSize) {
PokiSDK.displayAd(this.$el, this.adSize);
return;
}
},
toggleAd() {
if (extern.productBlockAds) {
this.isAdShowing = false;
return;
};
this.$nextTick(() => {
if (this.isAdShowing) {
return this.isAdShowing = false;
}
return this.isAdShowing = true;
});
},
adblockerSetup() {
switch(this.id) {
case 'div-gpt-ad-shellshockers-loading-houseads-wrap':
case 'shellshockers_respawn_banner_ad':
case 'shellshockers_respawn_banner-new_ad':
this.houseAdData = extern.getHouseAd('bigBanner');
break;
case 'shellshockers_respawn_banner_2_ad':
case 'shellshockers_titlescreen_wrap':
this.houseAdData = extern.getHouseAd('small');
break;
default:
console.log('House ads say, huh?');
}
},
hideAdBasedOnscreenSize() {
let adWidth = this.$el.offsetWidth;
let intViewportWidth = window.innerWidth;
if (vueApp.displayAdObject && vueApp.displayAdObject > 1 ) {
if (vueApp.displayAdObject < 970) {
return;
}
if (vueApp.displayAdObject > intViewportWidth ) {
this.hide();
}
} else {
if (adWidth < 970) {
return;
}
if (adWidth > intViewportWidth ) {
this.hide();
}
}
},
adVisibility() {
if (this.ignoreSize) return;
googletag.pubads().addEventListener('slotVisibilityChanged', event => {
if (event.inViewPercentage < 51) {
this.hide();
} else {
this.show();
}
}
);
}
},
computed: {
theClass() {
return this.adUnit.toLowerCase().replace(/_/g, "-");
}
},
watch: {
isHidden(value) {
if (!value) {
this.hide();
}
},
}
}
}
</script>
<script><!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var gameServerRoot = null;
var dynamicContentRoot = null;
var dynamicContentPrefix = '';
</script>
<script>
class Loader {
static show () {
let container = document.createElement('div');
container.id = 'progress-container';
container.style = `
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2000;
background-image: var(--ss-lightoverlay);
`;
const progressWrapper = document.createElement('div');
progressWrapper.id = 'progress-wrapper';
progressWrapper.className = 'load_screen';
progressWrapper.style = `
position: absolute;
left: 50%;
top: -6em;
transform: translateX(-50%);
background-image: none;
`;
const blueWizLogo = document.createElement('img');
blueWizLogo.src = 'img/BlueWizard-Logo-min.png';
blueWizLogo.style=`
width: 16em;
display: block;
margin: 5em auto 0;
z-index: 2000;
position: absolute;
left: 50%;
bottom: 8em;
transform: translateX(-50%);
`;
let logo = document.createElement('img');
logo.src = 'img/logo.svg';
logo.style = 'height: 16em';
logo.id = 'logo-svg';
// container.appendChild(logo);
const progressOuter = document.createElement('div');
progressOuter.id = 'progress-outer';
progressOuter.style = `
position: relative;
background: #643219;
border-radius: 2em;
height: 3.3em;
width: 24em;
margin-top: 2em;
`;
let progress = document.createElement('div');
progress.style = `
margin-top: 1em;
width: 23em;
height: 2.2em;
background: white;
padding: 0.5em;
border-radius: 2em;
margin: .3em .5em 0;
`;
container.appendChild(progress);
let progressBar = document.createElement('span');
progressBar.id = 'progressBar';
progressBar.style = `
display: block;
width: 20%;
height: 100%;
background: orange;
border-radius: 2em;
margin-left: 80%;
margin: 0 .3em .5em 0;
opacity: 0;
transition: margin-left linear 500ms;
transition-timing-function: ease-in-out;
`;
const progressBarOutside = document.createElement('div');
progress.appendChild(progressBar);
progressWrapper.appendChild(logo);
progressOuter.appendChild(progress);
progressWrapper.appendChild(progressOuter);
container.appendChild(progressWrapper);
container.appendChild(blueWizLogo);
// Minor for the progress bar intial load
setTimeout(() => progressBar.style.opacity = 1, 600);
Loader.barInterval = setInterval(() => {
if (Loader.progressBar.style.marginLeft == '0%') {
Loader.progressBar.style.marginLeft = '80%';
}
else {
Loader.progressBar.style.marginLeft = '0%';
}
}, 500);
Loader.progressBar = progressBar;
Loader.container = container;
let app = document.body;
app.appendChild(container);
}
static hide () {
Loader.container.style = "opacity : 0; transition: opacity 1s;";
setTimeout(() => { Loader.container.remove(); }, 1000);
}
static addTask () {
let id = Loader.loaded.length;
//console.log('Loading tasks: ', ++Loader.actualTasks);
Loader.loaded.push(0);
return id;
}
static finish (id) {
clearInterval(Loader.barInterval);
if (Loader.progressBar) {
Loader.progressBar.style.marginLeft = '0%';
Loader.progressBar.style.transition = '';
Loader.loaded[id] = 1;
Loader.updateBar();
}
}
static progress (id, value, total) {
clearInterval(Loader.barInterval);
if (Loader.progressBar) {
Loader.progressBar.style.marginLeft = '0%';
Loader.progressBar.style.transition = '';
Loader.loaded[id] = value / total;
Loader.updateBar();
}
return id;
}
static updateBar () {
let loadedTotal = 0;
for (let l of Loader.loaded) {
loadedTotal += l;
}
Loader.progressBar.style.width = loadedTotal / Loader.tasks * 95 + 5 + '%';
}
static loadJS (path, callback) {
let p = path;
(function (p, cb) {
let xhr = new XMLHttpRequest();
xhr.open('GET', p, true);
let id = Loader.addTask();
xhr.onprogress = event => {
if (Loader.progressBar) {
id = Loader.progress(id, event.loaded, event.total);
}
};
xhr.onload = () => {
if (xhr.status != 200) {
console.log(`Error ${xhr.status}: ${xhr.statusText}`);
}
else {
Loader.finish(id);
let script = document.createElement('script');
script.innerHTML = xhr.response;
document.body.appendChild(script);
if (cb) cb();
}
};
xhr.send();
})(path, callback);
}
}
Loader.actualTasks = 0;
Loader.tasks = 16;
Loader.loaded = [];
window.Loader = Loader;
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
function openFirebaseDb () {
return new Promise((resolve, reject) => {
let req = window.indexedDB.open('firebaseLocalStorageDb');
req.onsuccess = () => {
let db = req.result;
let transaction = db.transaction(['firebaseLocalStorage'], 'readwrite');
let store = transaction.objectStore('firebaseLocalStorage');
resolve({ db, store });
}
req.onerror = err => reject(err);
req.onupgradeneeded = () => {
let db = req.result;
let store = db.createObjectStore('firebaseLocalStorage', { keyPath: 'fbase_key' });
resolve({ db, store });
}
});
}
var redirectIframe
function postStorageAndRedirect (iframe, storage, firebaseDb) {
iframe.contentWindow.postMessage({ storage, firebaseDb }, '*');
window.location = 'https://shellshock.io' + window.location.search + window.location.hash;
}
window.addEventListener('DOMContentLoaded', () => {
Loader.show();
});
</script><!-- title, seo meta and favicons -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="facebook-domain-verification" content="6lfua33vx0abiv1asnt9p13aac29xy" />
<!-- <link rel="manifest" href="manifest.json"> -->
<title>Shell Shockers | Alt URL: geometry.best.</title>
<meta name="Description" content="Alt URL: geometry.best. 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">
<meta name="theme-color" content="#0B93BD" />
<meta name="background-color" content="#0B93BD" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="favicon192.png" sizes="192x192" />
<link rel="icon" href="https://shellshock.io/favicon256.png" sizes="512x512" />
<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="Alt URL: geometry.best. 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="Alt URL: geometry.best. 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">
<!-- 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="styles/transitions.css%3F1651709060.css">
<link rel="stylesheet" href="styles/forms.css%3F1651709060.css">
<link rel="stylesheet" href="styles/style.css%3F1654110505.css">
<link rel="stylesheet" href="styles/game.css%3F1653069567.css"><script>
function storageFactory(getStorage) {
const inMemoryStorage = {};
function isSupported() {
try {
var testKey = "__some_random_key_you_are_not_going_to_use__";
getStorage().setItem(testKey, testKey);
getStorage().removeItem(testKey);
return true;
} catch (e) {
return false;
}
}
function clear() {
if (isSupported()) {
getStorage().clear();
} else {
inMemoryStorage = {};
}
}
function getItem(name) {
if (isSupported()) {
return getStorage().getItem(name);
}
if (inMemoryStorage.hasOwnProperty(name)) {
return inMemoryStorage[name];
}
return null;
}
function key(index) {
if (isSupported()) {
return getStorage().key(index);
} else {
return Object.keys(inMemoryStorage)[index] || null;
}
}
function removeItem(name) {
if (isSupported()) {
getStorage().removeItem(name);
} else {
delete inMemoryStorage[name];
}
}
function setItem(name, value) {
if (isSupported()) {
getStorage().setItem(name, value);
} else {
inMemoryStorage[name] = String(value);
}
}
function length() {
if (isSupported()) {
return getStorage().length;
} else {
return Object.keys(inMemoryStorage).length;
}
}
return {
getItem: getItem,
setItem: setItem,
removeItem: removeItem,
clear: clear,
key: key,
get length() {
return length();
}
};
}
const localStore = storageFactory(() => localStorage);
const sessionStore = storageFactory(() => sessionStorage);
</script><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><!-- 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 (let i = 0; i < query.length; i++) {
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);
var host = loc.host.split('.');
url.dom = host[0];
url.top = host[1];
if (url.hash.length == 0) url.hash = undefined;
return url;
})();
</script>
<!-- third party globals -->
<script>
// Third party globals
var crazysdk = {inviteLink: function () {}},
pokiActive = false,
crazyGamesActive = false,
thirdPartyAdblocker = false,
testCrazy = false;
</script><!-- Crazy Games -->
<script src="https://sdk.crazygames.com/crazygames-sdk-v1.js"></script>
<script type="text/javascript">
const crazyAdDetect = (e) => {
if (e.hasAdblock) {
thirdPartyAdblocker = true;
}
};
// const crazyInitialized = (e) => {
// console.log('INITIALIZED: ', e);
// };
if (window.CrazyGames && CrazyGames.CrazySDK) {
const { CrazySDK } = window.CrazyGames;
crazysdk = CrazySDK.getInstance(); //Getting the SDK
crazysdk.addEventListener('bannerRendered', (e) => {
console.log(`Banner for container ${e.containerId} has been rendered!`);
});
crazysdk.addEventListener('bannerError', (e) => {
console.log(`Banner render error: ${e.error}`);
if (e.containerId === 'shellshockers_respawn_banner_2_ad' || e.containerId === 'shellshockers_respawn_banner-new_ad') {
// We only reset the timeout if both banners fail during the same request
if (++vueData.cGrespawnBannerErrors >= 2) {
vueData.cGrespawnBannerErrors = 0;
if (vueData.cGrespawnBannerTimeout) {
clearTimeout(vueData.cGrespawnBannerTimeout);
vueData.cGrespawnBannerTimeout = null;
}
}
}
});
// crazysdk.addEventListener('initialized', crazyInitialized);
crazysdk.addEventListener('adblockDetectionExecuted', crazyAdDetect);
crazysdk.init(); //Initializing the SDK, call as early as possible
}
if (parsedUrl.query.testCrazy) {
testCrazy = true;
}
</script><!-- 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>
var aiptag = aiptag || {};
aiptag.cmd = aiptag.cmd || [];
aiptag.cmd.display = aiptag.cmd.display || [];
aiptag.cmd.player = aiptag.cmd.player || [];
</script>
<script async src="https://api.adinplay.com/libs/aiptag/pub/SSK/shellshock.io/tag.min.js"></script>
<!-- GTM -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K5MSJHJ');</script>
<!-- End Google Tag Manager --><!-- In house ads -->
<script>
window.googletag = window.googletag || {cmd: []};
let inHouseSlot;
const slots = [];
const dpfNetwork = /21743024831/,
inHouseAdSlot = 'ShellShockers_LoadingScreen_HouseAds'
inHouseAdSize = [[468, 60], [970, 90], [970, 250], [728, 90]],
inHouseAdDiv = 'ShellShockers_LoadingScreen_HouseAds',
adSlots = [];
// Helper to setup slots and add to slot array
const adDefineSlot = (slot, sizes, id) => {
return adSlots.push([{slot, sizes, id}]);
};
// Defining the slots for the the array
const loadingScreeningAd = adDefineSlot(inHouseAdSlot, inHouseAdSize, inHouseAdDiv);
// Helper to add slots to google service
function addServiceToSlot() {
slots.forEach(slot => {
slot.addService(googletag.pubads());
});
}
// Get all the slots, add to google ad defineSlot method
function getAllDefinedSlots(allSlots) {
let definedSlots = [];
allSlots.forEach(adSlot => {
for (var i = 0, len = adSlot.length; i < len; i++) {
slots.push(googletag.defineSlot(dpfNetwork + adSlot[i].slot, adSlot[i].sizes, adSlot[i].id));
}
})
return addServiceToSlot(slots);
}
const gtagInHouseLoadingBannerIntialLoad = () => {
if (typeof hasPoki !== 'undefined') {
console.log('haspoki', typeof(hasPoki));
return;
}
googletag.cmd.push(function() {
getAllDefinedSlots(adSlots);
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
};
gtagInHouseLoadingBannerIntialLoad();
const adRenderedEvent = () => {
return googletag.pubads().addEventListener('slotRenderEnded', (event) => {
vueApp.disaplyAdEventObject(event);
});
};
const gtagInHouseLoadingBanner = () => {
googletag.cmd.push(function() {
googletag.pubads().refresh([slots[0]]);
adRenderedEvent();
});
};
const destroyInhouseAdForPaid = () => {
googletag.destroySlots([slots[0]]);
};
</script><!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.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 -->
<!-- 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 if (location.hostname.startsWith('localhost')) {
osAppId = '884bfbf7-5bcb-4170-9bf4-bba6b6e0046e';// localhost testing
} else {
osAppId = '166e17cb-5c02-4c7d-8bff-8ec69729f725'; // internal testing
}
}
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: osAppId,
// autoResubscribe:true,
// allowLocalhostAsSecureOrigin: true
});
});
</script><!-- progressive web app -->
<!-- <button id="addToHomescreen" style="z-index:333;display: none; position:absolute; top:0px; right: 75%; cursor:pointer;" class="ss_button btn_yolk bevel_yolk">Add to your desktop!</button> -->
<script>
let pwaBlockAds = false;
// if ('serviceWorker' in navigator) {
// console.log("Will the service worker register?");
// navigator.serviceWorker.register('service-worker.js')
// .then(function(reg){
// console.log("Yes, it did.");
// }).catch(function(err) {
// console.log("No it didn't. This happened:", err)
// });
// }
if (window.matchMedia('(display-mode: standalone)').matches) {
pwaBlockAds = 'utm_source' in parsedUrl.query && parsedUrl.query.utm_source === 'homescreen';
ga('send', 'event', 'pwa', 'desktop opened');
}
</script>
<!-- Music audio tag -->
<audio id="theAudio" preload="metadata"></audio><!-- VueJS -->
<script src="js/vue/vue.min.2.6.10.js"></script><!-- tools and varibles -->
<script>
let changeLogData;
var version;
fetch('./changelog/changelog.json?1653515333', {cache: "no-cache"})
.then(response => response.json())
.then(data => {
changeLogData = data;
version = changeLogData[0].version;
});
localStore.removeItem('brbTime');
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) {
if (url.startsWith('./')) url = url.slice(2);
url = dynamicContentPrefix + url;
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;
}
const theTimeTracker = (startTime, gaVar, gaLabel) => {
const endTime = new Date();
const timerResult = endTime - startTime;
if (!Number.isInteger(timerResult) && !timerResult ) {
return;
}
return ga('send', 'timing', vueData.googleAnalytics.cat.playerStats, gaVar, timerResult, gaLabel);
};
const isShellIframe = () => window.self === window.top;
const iframeParent = () => {
const parent = (window.location != window.parent.location)
? document.referrer
: document.location.href,
domain = new URL(parent).hostname.replace(/(www.)/, '').split('.');
if (!Array.isArray(domain) && !domain.length) {
return false;
}
const index = domain.length - 2;
return {
domain: domain,
index: index,
};
};
const iframeWhitelist = (domains) => {
if (isShellIframe()) {
return;
}
const parent = iframeParent(),
domain = parent.domain,
index = parent.index;
// if in iframe and url hostname is in approved whitelist return true or false if not in list
return domains.includes(domain[index]) || domains.includes(domain[index - 1]);
};
const playShellshockers = () => {
//if not in a iframe return true
if (isShellIframe()) {
console.log('Not playing in iframe');
return true;
}
console.log('Playing in iframe');
const gamePortals = [
'poki',
'poki-gdn',
'poki.compoki',
'games.poki',
'crazygames',
'1001juegos',
'ioground',
'gogy',
'playgamesio',
'iogames',
'iogames',
'wingsiofree',
'vseigru',
'miniclip',
'red-ball4',
'speelspelletjes',
'onlinegame',
'addictinggames'
];
const parent = iframeParent(),
domain = parent.domain,
index = parent.index;
// if in iframe and url hostname is in approved whitelist return true or false if not in list
//return gamePortals.includes(domain[index]) || gamePortals.includes(domain[index - 1]);
return true; // Disabling this for now because server outages caused everyone to be blacklisted for some insane, currently unknown reason.
};
const capitalize = (s) => {
if (typeof s !== 'string') return ''
return s.charAt(0).toUpperCase() + s.slice(1)
};
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: 'frankfurt.', 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/';
const isLocalShellDev = location.hostname.startsWith('localshelldev'),
isLocalHost = location.hostname.startsWith('localhost');
if (dynamicContentRoot) {
servicesServer = 'wss://' + dynamicContentRoot + '/services/';
}
else if (isLocalHost || isLocalShellDev) {
servicesServer = isLocalHost ? 'ws://localhost:4242' : 'ws://localshelldev.bluewizard.com:4242/';
debug = true;
if (isLocalShellDev)
servers.push({ name: 'Local VM', subdom: 'localshelldev.', root: 'bluewizard.com', locKey: 'server_localshelldev', id: 'lucyskydiamonds' });
servers.push({ name: 'local', subdom: '', locKey: '_server_local', id: 'local' });
servers.push({ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_gamedev', id: 'gamedev' });
}
else if (location.hostname.startsWith('staging.shellshock.io')) {
debug = true;
servers = [{ name: 'Staging', subdom: 'staging.', locKey: 'server_staging', id: 'staging' }];
var servicesServer = 'wss://staging.shellshock.io:8443/services/';
}
if (location.search.includes('portalTest')) {
gameServerRoot = 'shellshock.io';
dynamicContentRoot = 'dev.shellshock.io';
dynamicContentPrefix = 'https://dev.shellshock.io/';
servers = [{ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_dev', id: 'dev' }];
}
if (!dynamicContentRoot && location.hostname.startsWith('dev.shellshock.io') || dynamicContentRoot == 'dev.shellshock.io') {
servers = [{ name: 'Dev (US West)', subdom: 'gamedev.', locKey: 'server_dev', id: 'dev' }];
servicesServer = 'wss://dev.shellshock.io/services/';
}
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 || '';
if (gameServerRoot) rootName = gameServerRoot;
if (server.subdom == '' && rootName === 'localhost' || rootName === 'bluewizard.com') {
return 'ws://' + subdom + rootName + ':4430';
} else {
return 'wss://' + subdom + rootName;
}
}
function getServerIndex (server) {
return servers.map(s => s.id).indexOf(server.id);
}
function getStoredNumber (name, def) {
var num = localStore.getItem(name);
if (!num) {
return def;
}
return Number(num);
}
function getStoredBool (name, def) {
var str = localStore.getItem(name);
if (!str) {
return def;
}
return str == 'true' ? true : false;
}
function getStoredString (name, def) {
var str = localStore.getItem(name);
if (!str) {
return def;
}
return str;
}
function getStoredObject (name, def) {
var str = localStore.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
};
var EGGCOLOR = {
white: 0,
skyblue: 1,
beige: 2,
tan: 3,
brown: 4,
caramel: 5,
chocolate: 6,
red: 7,
purple: 8,
violet: 9,
yellow: 10,
babyblue: 11,
darkgreen: 12,
green: 13
}
// 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,
Grenade: 6
}
var CharClass = {
Soldier: 0,
Scrambler: 1,
Ranger: 2,
Eggsploder: 3,
Whipper: 4,
Crackshot: 5,
TriHard: 6
};
const SOCIALMEDIA = [
'fa-facebook-square',
'fa-instagram-square',
'fa-tiktok',
'fa-discord',
'fa-youtube',
'fa-twitter-square',
'fa-twitch'
];
</script><!-- shellshockers js -->
<script>
function ssJSComplete () {
window.onloadingcomplete();
}
Loader.loadJS('src/shellshock.js?1654121223', ssJSComplete);
</script>
</head>
<body>
<!-- google tag manager noscript -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K5MSJHJ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --> <!-- Ads -->
<div id="gameAdContainer" class="hideme">
<!-- <div id="multisizeBannerAdPlaceholder"></div>
<div id="shellshock-io_multisize"></div> -->
<!-- AdInPlay tag ID -->
<!-- ShellShock_Respawn_Banner -->
<!-- <div id='div-gpt-ad-ShellShock_Respawn_Banner'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-ShellShock_Respawn_Banner'); });
</script>
</div> -->
</div>
<div id="shellshockers_titlescreen">
</div>
<div id="shellshockers_chicken_nugget_banner">
</div>
<div id="shellshockers_respawn_banner_2">
</div>
<!-- <div id="shellshockers_respawn_banner">
</div> -->
<div id="shellshockers_respawn_banner-new">
</div>
<div id="ShellShockers_LoadingScreen_HouseAds">
</div>
<div id="videoAdContainer">
<div id="preroll"></div>
</div>
<!-- <div class="video_ad_wrapper">
<video id="asc_video_ad" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" muted="true" style="display: none;">
<source src="video/tiny.mp4" type="video/mp4" />
</video>
</div> -->
<div id="ss_background"></div>
<!-- Instantiate the Vue instance -->
<div id="app" :class="[currentLanguageCode, portalClass]"> <!-- vue instance div: all vue-controlled elements MUST be inside this tag -->
<!-- <asc-video-player id="mainVideoPlayer" ref="mainVideoPlayer" adTagUrl="adTagUrl"></asc-video-player> -->
<div class="firebaseID">firebase ID: {{ firebaseId }}, maskedEmail: {{ maskedEmail }} isAnonymous: {{ isAnonymous }}, isEmailVerified: {{ isEmailVerified }}</div>
<!-- Canvas -->
<canvas id="canvas" ref="canvas" class="gameCanvas"></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" :hide-ads="hideAds"></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)" :kname="killName" :kdname="killedName"></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" :is-from-eu="showPrivacyOptions" :controller-id="controllerId" :controller-type="controllerType" :lang-option="locLanguage" :is-vip="(hideAds || contentCreator)"></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)"> {{ loc.p_settings_of_age }}<br>
<input id="targetedAdsCheck" type="checkbox" v-model="showTargetedAds" @change="targetedAdsChanged($event)"> <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: VIP Help & Feedback -->
<large-popup id="vipPopup" ref="vipPopup" stop-key-capture="true" @popup-closed="onVipHelpClosed">
<template slot="content">
<vip-help id="vip-help" ref="help" :loc="loc" :is-vip="isSubscriber"></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" :products="eggStoreItems" :sale-event="isSale"></egg-store>
</template>
</large-popup>
<img v-show="blackFridayBanner" class="black-friday-banner" style="display: none" src="img/black-friday-banner.jpg" alt="Black Friday Sale"/>
<!-- Popup: VIP store -->
<large-popup id="subStorePopup" ref="subStorePopup" stop-key-capture="true" @popup-closed="onSharedPopupClosed" :overlay-close="true">
<template slot="content">
<subscription-store id="shell-subscriptions" ref="shell-subscriptions" :loc="loc" :subs="subStoreItems"></egg-store>
</template>
</large-popup>
<!-- Popup: VIP ended -->
<small-popup id="vipEnded" ref="vipEnded" stop-key-capture="true" @popup-confirm="showSubStorePopup" @popup-closed="onSharedPopupClosed" :overlay-close="true" class="vip">
<template slot="content">
<figure>
<img src="img/vip-club/vip-club-popup-emblem.png" alt="Shell Shockers VIP">
</figure>
<div class="vip-ended-popup">
Yo! Your VIP subscription has expired! If you'd like to keep your awesome benefits (and your Golden Wings!) then click below to join again!
</div>
</template>
<template slot="confirm">Join again!</template>
<template slot="cancel">No, i don't like stuff</template>
</small-popup>
<!-- Popup: Egg Store single -->
<large-popup id="popupEggStoreSingle" ref="popupEggStoreSingle" stop-key-capture="true" @popup-closed="onSharedPopupClosed" :overlay-close="false" class="popup-store-single">
<template slot="content">
<egg-store-item v-for="item in premiumShopItems" :key="item.sku" :item="item" :loc="loc" :account-set="accountSettled" v-if="eggStorePopupSku && item.sku === eggStorePopupSku"></egg-store-item>
</template>
</large-popup>
<!-- Popup: Unsupported Platform -->
<large-popup id="unsupportedPlatformPopup" ref="unsupportedPlatformPopup" hide-close="true">
<template slot="content">
<h2>{{ loc['unsupported_platform'] }}</h2>
<div>{{ loc[unsupportedPlatformPopup.contentLocKey] }}</div>
</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 -->
<give-stuff-popup ref="giveStuffPopup" id="giveStuffPopup" :loc="loc" :give-stuff-popup="giveStuffPopup"></give-stuff-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">
<section v-for="(log, idx) in changelog.current">
<h3>{{ log.version }} - <i><time>{{ log.date }}</time></i></h3>
<ul>
<li v-for="data in log.content" v-html="data"></li>
</ul>
<hr class="blue">
</section>
</div>
<div id="btn_horizontal">
<button v-if="changelog.showHistoryBtn" @click="showHistoryChangelogPopup" class="ss_button btn_green bevel_green">More</button>
<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="chicknWinner" ref="chicknWinner" :hide-close="true" :overlay-close="false">
<template slot="content">
<chicken-nugget-popup id="chickenNugget" ref="chickenNugget" :loc="loc" :amount-given="miniEggGameAmount" :ad-units="adUnits"></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-close="true" :overlay-close="false" @popup-cancel="anonWarningPopupCancel" @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="cancel">{{ loc.account_anon_warn_confirm }}</template>
<template slot="confirm">{{ loc.sign_in }}</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>
<!-- 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>
<small-popup ref="adBlockerPopup" id="adBlockerPopup" :overlay-close="false" hide-confirm="true" hide-cancel="true" hide-close="true">
<template slot="header">
We've detected ad blocker!
</template>
<template slot="content">
<p>To <i>avoid</i> this message please turn <i>off</i> ad blocker.</p>
<h4>Please wait</h4>
<h3>{{adBlockerCountDown}}</h3>
</template>
</small-popup>
<!-- Popup: PWA -->
<small-popup id="pwaPopup" class="pwa-popup" ref="pwaPopup" hide-confirm="true" @popup-closed="onSharedPopupClosed">
<!-- <template slot="header">{{ loc.p_settings_privacy }}</template> -->
<template slot="content">
<p>{{loc.pwa_desc_one}}</p>
<p>{{loc.pwa_desc_two}}</p>
<button @click="pwaBtnClick" class="ss_button btn_big btn_green bevel_green btn_height_auto btn-pwa-download">
<div class="pwa-btn-img-box roundme_lg bg-darkgreen">
<img src="favicon192.png" alt="Egg yolk">
<i class="fas fa-share" aria-hidden="true"></i>
</div>
{{loc.pwa_btn_line_one}}<br/>{{loc.pwa_btn_line_two}}
</button>
</template>
<template slot="cancel">{{loc.pwa_no_thanks}}</template>
</small-popup>
<large-popup id="adBlockerVideo" ref="adBlockerVideo" @popup-closed="onSharedPopupClosed" :overlay-close="false" hide-confirm="true" hide-cancel="true" hide-close="true">
<template slot="content">
<p class="text-center">{{ loc.ad_blocker_big_popup_title }}<br /> <span v-html="loc.ad_blocker_big_popup_desc"></span></p>
<img src="img/shellshockers-unite-lg.png" alt="">
<!-- <house-ad id="house-ad-video-replacement" ref="house-ad-video-replacement" :data="bannerHouseAd" :isshowing="showAdBlockerVideoAd"></house-ad> -->
</template>
</large-popup>
<large-popup ref="mobileAdPopup" id="mobileAdPopup" :overlay-close="true" hide-confirm="true" hide-cancel="true">
<template slot="content">
<img src="img/mobile/shell-mobile-popup-bg-qr.png" alt="Get Shell Shockers Mobile app!">
</template>
</large-popup>
<large-popup ref="kotcInstrucPopup" id="kotcInstrucPopup" :overlay-close="true" hide-confirm="true" hide-cancel="true">
<template slot="content">
<img class="kotc-wordmark" src="img/kotc/kotc-wordmark.svg" alt="">
<div class="kotc-how-to-play-wrapper box_aboslute">
<h2 class="kotc-how-to-play-title text-center"><span class="roundme_md">{{ loc.home_kotc_popup_how_to }}</span><br />{{ loc.home_play }}!</h2>
<img src="img/kotc/kotc-arrow.svg" aria-hidden="true">
</div>
<div class="display-grid grid-column-2-eq grid-gap-space-lg fullwidth ss_margintop_xxxxl">
<div class="img-container roundme_lg fullwidth step-one">
<div class="fullwidth">
<p class="text-center"><span class="sr-only">Step </span>1</p>
<h6 class="text-center">{{loc.home_kotc_popup_step_one}}</h6>
</div>
</div>
<div class="img-container roundme_md fullwidth step-two">
<div class="fullwidth">
<p class="text-center"><span class="sr-only">Step </span>2</p>
<h6 class="text-center">{{loc.home_kotc_popup_step_two}}</h6>
</div>
</div>
</div>
<div class="display-grid grid-column-2-eq grid-gap-space-lg roundme_md fullwidth ss_margintop_lg kotc-play-now step-three-wrapper">
<div class="fullwidth box_relative step-three">
<img class="kotc-logo box_aboslute" src="img/kotc/kotc-rooster.svg" alt="The King of the Coop Rooster">
<div>
<p class="text-center"><span class="sr-only">Step </span>3</p>
<h6 class="text-center" v-html="loc.home_kotc_popup_step_three"></h6>
</div>
</div>
<div class="fullwidth f_col f_space_between">
<div class="display-grid grid-column-5-eq kotc-crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
<img aria-hidden="true" src="img/kotc/kotc-crown.svg" alt="Crowns">
</div>
<button class="ss_button btn_big btn_green bevel_green fullwidth" @click="onClickPlayKotcNow"><i class="fa fa-play fa-sm"></i> {{ loc.home_play }}</button>
</div>
</div>
</template>
</large-popup>
<!-- <div id="kotc-play-kotc" class="kotc-play-kotc display-grid">
<img class="kotc-play-kotc-watermark" src="img/kotc/kotc-crown-indicator.svg" alt="">
<img class="kotc-play-kotc-arrow" src="img/kotc/kotc-arrow.svg" aria-hidden="true">
</div> -->
<!-- #kotc-play-kotc -->
</div> <!-- End of vue instance div -->
<script>
var vueApp;
var vueData = {
ready: false,
accountSettled: false,
missingFeatures: [],
changelogVersion: version,
changeLogData: [],
showChangelogHistoryBtn: true,
changelog: {
current: [],
history: [],
showHistoryBtn: true
},
firebaseId: null,
photoUrl: null,
maskedEmail: null,
isEmailVerified: false,
isAnonymous: true,
showPrivacyOptions: isFromEU,
isOfAge: false,
showTargetedAds: false,
delayTheCracking: false,
displayAdFunction: Function,
titleScreenDisplayAd: Function,
displayAdObject: false,
hideAds: false,
isPoki: false,
isPokiGameLoad: false,
pokiRewardReady: false,
isPokiNewRewardTimer: false,
videoRewardTimers: {
initial: 300000,
primary: 420000
},
pokiRewNum: 1,
adUnits: {
display: {
respawn: 'shellshockers_respawn_banner',
respawnTwo: 'shellshockers_respawn_banner_2',
respawnThree: "shellshockers_respawn_banner-new",
home: 'shellshockers_titlescreen',
nugget: 'shellshockers_chicken_nugget_banner',
house: 'ShellShockers_LoadingScreen_HouseAds'
}
},
cGrespawnBannerTimeout: null,
cGrespawnBannerErrors: 0,
classIdx: 0,
playerName: '',
eggs: 0,
kills: 0,
deaths: 0,
kdr: 0,
streak: 0,
isUpgraded: false,
upgradeName: '',
isSubscriber: false,
serverList: [], // Populated by pingServers()
currentServerId: null,
currentServerLocKey: null,
currentGameType: 0,
volume: 0,
getMusicVolume: 0.5,
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,
},
isTwitchEvent: false,
twitchLinked: 0,
twitchName: '',
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' }
],
locLanguage: {},
playTypes: {
joinPublic: 0,
createPrivate: 1,
joinPrivate: 2
},
gameTypes: [
{ locKey: 'gametype_ffa', value: 0 },
{ locKey: 'gametype_teams', value: 1 },
{ locKey: 'gametype_ctf', value: 2 },
{ locKey: 'gametype_king', value: 3 }
],
// This makes me mad, but until Vue is put in the clojure with GameType,
// where it should have been to begin with, HERE IT IS >:(
gameTypeKeys: [
'FFA',
'Teams',
'Spatula',
'King'
],
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: [],
settingsUi: {
adjusters: {
misc: [
{ id: 'volume', locKey: 'p_settings_mastervol', min: 0, max: 1, step: 0.01, value: 1, multiplier: 100 }
],
mouse: [
{ id: 'mouseSpeed', locKey: 'p_settings_mousespeed', min: 1, max: 100, step: 1, value: 30 }
],
gamepad: [
{ id: 'sensitivity', locKey: 'p_settings_sensitivity', min: 1, max: 100, step: 1, value: 30 },
{ id: 'deadzone', locKey: 'p_settings_deadzone', min: 0, max: 1, step: 0.01, value: 0.3, precision: 2 }
],
// music: [
// { id: 'musicVolume', locKey: 'p_settings_music_volume', min: 0, max: 1, step: 0.01, value: 0.5, multiplier: 100 }
// ],
},
togglers: {
misc: [
{ id: 'holdToAim', locKey: 'p_settings_holdtoaim', value: true },
{ id: 'enableChat', locKey: 'p_settings_enablechat', value: true },
{ id: 'safeNames', locKey: 'p_settings_safenames', 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 },
{ id: 'hideBadge', locKey: 'p_settings_badge_hide', value: false },
// { id: 'musicStatus', locKey: 'p_settings_music', value: true }
],
mouse: [
{ id: 'mouseInvert', locKey: 'p_settings_invertmouse', value: false },
{ id: 'fastPollMouse', locKey: 'p_settings_fastpollmouse', value: false },
],
gamepad: [
{ id: 'controllerInvert', locKey: 'p_settings_invertcontroller', value: false },
]
},
controls: {
keyboard: {
// The ids map to the field names in settings.controls[category]
game: [
{ id: 'up', side: 'left', locKey: 'keybindings_forward', value: 'W' },
{ id: 'down', side: 'left', locKey: 'keybindings_backward', value: 'S' },
{ id: 'left', side: 'left', locKey: 'keybindings_left', value: 'A' },
{ id: 'right', side: 'left', locKey: 'keybindings_right', value: 'D' },
{ id: 'jump', side: 'left', locKey: 'keybindings_jump', value: 'SPACE' },
{ id: 'fire', side: 'right', locKey: 'keybindings_fire', value: 'MOUSE 0' },
{ id: 'scope', side: 'right', locKey: 'keybindings_aim', value: 'SHIFT' },
{ id: 'reload', side: 'right', locKey: 'keybindings_reload', value: 'R' },
{ id: 'swap_weapon', side: 'right', locKey: 'keybindings_swapweapon', value: 'E' },
{ id: 'grenade', side: 'right', locKey: 'keybindings_grenade', value: 'Q' }
],
spectate: [
{ id: 'ascend', locKey: 'keybindings_spectate_ascend', value: 'SPACE' },
{ id: 'descend', locKey: 'keybindings_spectate_descend', value: 'SHIFT' }
]
},
gamepad: {
// The ids map to the field names in settings.gamepad[category]
game: [
{ id: 'jump', locKey: 'keybindings_jump', value: '0' },
{ id: 'fire', locKey: 'keybindings_fire', value: '1' },
{ id: 'scope', locKey: 'keybindings_aim', value: '2' },
{ id: 'reload', locKey: 'keybindings_reload', value: '3' },
{ id: 'swap_weapon', locKey: 'keybindings_swapweapon', value: '4' },
{ id: 'grenade', locKey: 'keybindings_grenade', value: '5' }
],
spectate: [
{ id: 'ascend', locKey: 'keybindings_spectate_ascend', value: '1' },
{ id: 'descend', locKey: 'keybindings_spectate_descend', value: '2' }
]
}
}
},
songChanged: false,
music: {
isMusic: false,
musicJson: 'data/sponsors.json',
musicSrc: '',
theAudio: '',
playing: false,
sponsors: {},
sponsor: '',
currIndex: 0,
currentTime: 0,
duration: 0,
timer: null,
progress: 0,
volume: 10,
hideClass: 'music-widget--fade-out',
serverTracks: {
id: '',
title: '',
artist: '',
album: '',
albumArt: '',
url: '',
trackUrltest: 'https://shellshock.io',
sponsor: '',
sponsorUrl: '',
}
},
home: {
joinPrivateGamePopup: {
code: '',
showInvalidCodeMsg: false,
validate: function () {
if (this.code.length == 0) {
console.log('failed validation');
this.showInvalidCodeMsg = true;
BAWK.play('ui_reset');
return false;
}
console.log('passed validation');
return true;
},
reset: function () {
this.code = '';
this.showInvalidCodeMsg = false;
}
},
},
equip: {
get showingItems () {
return this._showingItems;
},
set showingItems (items) {
this._showingItems = items;
for (let t of this.lazyRenderTimeouts) {
clearTimeout(t);
}
},
lazyRenderTimeouts: [],
mode: 0,
equipModes: {
inventory: 0,
shop: 1
},
equippedPrimary: null,
equippedSecondary: null,
equippedHat: null,
equippedStamp: null,
equippedGrenade: null,
posingHat: null,
posingStamp: null,
posingWeapon: null,
posingGrenade: 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;
BAWK.play('ui_reset');
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',
classChanged: false,
wasGameInventoryOpen: false,
}
},
isPaused: true,
isEvent: false,
doubleEggWeekendSoon: false,
doubleEggWeekend: false,
announcementMessage: null,
playerActionsPopup: {
playerId: 0,
uniqueId: 0,
isGameOwner: false,
playerName: '',
muted: false,
muteFunc: null,
bootFunc: null,
social: false,
vipMember: false
},
giveStuffPopup: {
titleLoc: '',
eggs: 0,
items: [],
type: ''
},
openUrlPopup: {
url: '',
titleLocKey: '',
contentLocKey: '',
confirmLocKey: 'ok',
cancelLocKey: 'no_thanks'
},
genericMessagePopup: {
titleLocKey: 'keybindings_right',
contentLocKey: 'p_popup_chicken_nuggetbutton',
confirmLocKey: 'ok'
},
unsupportedPlatformPopup: {
titleLocKey: 'unsupported_platform',
contentLocKey: ''
},
windowDimensions: {
width: 0,
height: 0,
},
bannerAds: {
bannerElId: '',
},
googleAnalytics: {
isUser: null,
cat: {
purchases: 'Purchases',
purchaseComplete: 'Purchase Complete',
itemShop: 'Item Shop',
inventory: 'Inventory',
playerStats: 'player stats',
play: 'play game',
redeem: 'Redeem'
},
action : {
eggShackClick: 'Egg Shack Click',
eggShackProductClick: 'Egg Shack Product Click',
purchaseComplete: 'Purchase Complete',
goldenChickenProductClick: 'Golden Chicken Product Click',
goldenChickenNuggetClick: 'Golden Chicken Nugget Click',
shopClick: 'Shop Opened ',
shopItemClick: 'Shop Item Selected',
shopItemPopupClick: 'Shop Item Popup Click',
shopItemPopupBuy: 'Item purchased',
shopItemNeedMoreEggsPopup: 'Need More Eggs Popup',
inventorySelected: 'Inventory Item ',
eggCount: 'Egg Count',
inventoryTabClick: 'Inventory Opened',
playGameClick: 'Play Game Click',
redeemed: 'Redeemed',
redeemClick: 'Redeem open',
languageSwitch: 'Language setting change',
langBeforeUpdate: 'Language before auto detect',
privateGame: 'Private Game',
shareGamePopup: 'Share game Popup',
shareGameCopy: 'Shared game code',
createGame: 'Created game',
joinGame: 'Joined game',
playerLimit: 'Player limit',
timesPlayed: 'Times played',
anonymousPopupOpenAuto: 'Anon warning auto opened',
anonymousPopupOpen: 'Anon warning opened',
anonymousPopupSignupClick: 'Anon warning Sign in clicked',
anonymousPopupAgreeClick: 'Anon warning Understood clicked',
denyAnonUserPopup: 'Deny anon user popup',
denyAnonUserPopupSignin: 'sign in click',
faqPopupClick: 'FAQ popup open',
switchTeams: 'Switched Teams',
error: 'error',
signIn: 'Sign in'
},
label : {
signInClick: 'sign in click',
understood: 'Understood click',
getMoreEggs: 'Get More Eggs Click',
waitForGameReadyTimeout: 'waitForGameReady timeout',
signInAuthFailed: 'authorization failed',
signInTiming: 'Sign in delay',
signInCompleted: 'Completed',
signInOut: 'Signed out',
signInFailed: '',
homeToGameLoading: 'Home to game loading',
loading: 'Loading'
}
},
urlParams: null,
urlParamSet: null,
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21743024831/ShellShock_Video&description_url=__page-url__&env=vp&impl=s&correlator=&tfcd=0&npa=0&gdfp_req=1&output=vast&sz=640x480&unviewed_position_start=1',
eggStoreItems: [],
subStoreItems: [],
premiumShopItems: [],
eggStoreReferral: '',
eggStoreHasSale: false,
eggStorePopupSku: 'egg_pack_small',
showNugget: true,
// isMiniGameComplete: false,
miniEggGameAmount: 0,
showGoldenChicken: false,
nugStart: null,
nugCounter: null,
isBuyNugget: false,
adBlockerCountDown: 10,
controllerType: 'generic',
controllerId: '',
controllerButtonIcons: {
xbox: [
'A',
'B',
'X',
'Y',
'LB',
'RB',
'LT',
'RT',
'Select',
'Start',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickright.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadup.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpaddown.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadright.svg">'
],
ps: [
'<img class="ss_buttonbind_icon" src="img/controller/button_cross.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_circle.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_square.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_triangle.svg">',
'LB',
'RB',
'LT',
'RT',
'Select',
'Start',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickright.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadup.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpaddown.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadright.svg">'
],
switchpro: [
'B',
'A',
'Y',
'X',
'LB',
'RB',
'LT',
'RT',
'-',
'+',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_stickright.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadup.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpaddown.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadleft.svg">',
'<img class="ss_buttonbind_icon" src="img/controller/button_dpadright.svg">'
],
generic: [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15'
]
},
pwaDeferEvent: '',
blackFridayBanner: false,
isSale: false,
smallHouseAd: {},
bannerHouseAd: false,
showAdBlockerVideoAd: false,
hasMobileReward: false,
killName: null,
killedName: null,
killedByMessage: null,
killedMessage: null,
chicknWinnerWatched: null,
chicknWinnerCounter: 0,
chicknWinnerReady: false,
chicknWinnerDailyLimitReached: false,
isChicknWinnerError: false,
hasChwPlayClicked: false,
chwActiveTimer: 6000,
chwHomeTimer: null,
chwHomeEl: null,
contentCreator: false,
eggOrg: false
}</script>
<!-- Shared tags must come before the screen tags -->
<script id="events-template" type="text/x-template">
<div v-if="(doubleEggWeekendSoon || doubleEggWeekend) && showUi" id="event-notifications">
<div class="double-eggs">
<img v-if="doubleEggWeekendSoon && !doubleEggWeekend" src="img/events/shellshockers_doubleEgg01.png" alt="Double Egg weekend coming soon">
<img v-if="doubleEggWeekend" src="img/events/shellshockers_doubleEgg02.png" alt="Double Egg weekend now happening">
</div>
</div>
</script>
<script>
const comp_events = {
template: '#events-template',
props: ['show', 'owOn', 'showSoon', 'showUi'],
created() {
this.checkForEvents();
},
data: function () {
return vueData;
},
methods: {
isEventDate(days) {
const day = new Date().getUTCDay();
return days.includes(day);
},
doubbleEggSoon() {
return this.doubleEggWeekendSoon = this.isEventDate([4,5]);
},
doubleEggOn() {
const ISEVENT = this.isEventDate([5,6,0]);
if (!ISEVENT) {
return;
}
const DATE = new Date();
let day = DATE.getUTCDay();
if (day === 5) {
let time = DATE.getUTCHours();
if (time >= 20) {
return (
this.doubleEggWeekend = ISEVENT,
this.isEvent = ISEVENT
)
} else {
return (
this.doubleEggWeekend = false,
this.isEvent = false
)
}
} else {
return (
this.doubleEggWeekend = ISEVENT,
this.isEvent = ISEVENT
)
}
},
checkEvents() {
return (
this.doubbleEggSoon(),
this.doubleEggOn()
)
},
checkForEvents() {
this.checkEvents();
if (!this.doubleEggWeekend && this.isEventDate([4,5,6,0])) {
setTimeout(() => {
return this.checkForEvents();
}, 60000);
}
return;
},
},
};
</script><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>
<wobbly-egg></wobbly-egg>
<p class="load_message">{{ footer }}</p>
<display-ad :hidden="hideAds" id="div-gpt-ad-shellshockers-loading-houseads-wrap" ref="loadingScreenDisplayAd" :ignoreSize="true" :houseAd="true" adUnit="ShellShockers_LoadingScreen_HouseAds" adSize="728x90" :override="true" :adBlockerData="adblockerbanner"></display-ad>
</div>
</transition>
</script>
<script id="wobble-egg-template" type="text/x-template">
<div id="wobbly-egg">
<svg viewBox="0 0 240 240" :class="[loadEggcontainer, {noanimate: noAnimate}]" 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" :class="{noanimate: noAnimate}" 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="[loadEggwhite, {noanimate: noAnimate}]" 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="[loadEggyolk, {noanimate: noAnimate}]" ry="38" rx="38" id="svg_eggyolk" cy="120" cx="120" stroke-width="0" fill="url(#load_yolkgradient)"/>
</g>
</svg>
</div>
</script>
<script>
var comp_wobbly_egg = {
template: '#wobble-egg-template',
props: ['noAnimate'],
data: function () {
return {
loadEggyolk: 'load_eggyolk',
loadEggwhite: 'load_eggwhite',
loadEggcontainer: 'load_eggcontainer'
}
}
};
</script>
<script>
var comp_spinner_overlay = {
template: '#spinner-overlay-template',
components: {
'wobbly-egg': comp_wobbly_egg
},
props: ['loc', 'adblockerbanner', 'hideAds'],
data: function () {
return {
isShowing: false,
header: '',
footer: '',
adIsShowing: false,
}
},
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['ui_game_loading'];
this.header = this.loc['building_map'];
this.footer = '{0}... {1}%'.format(msg, percent);
this.isShowing = true;
},
hide: function () {
this.isShowing = false;
this.$emit('close-display-ad');
},
hideDisplayAd() {
this.adIsShowing = false;
console.log('do it');
},
showDisplayAd() {
this.adIsShowing = true;
},
toggleDisplayAd() {
return this.adIsShowing = this.adIsShowing ? false : true;
}
},
};
</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);
}
if (!this.isShowing) {
console.log('Closed: ' + this.popupId);
this.$emit('popup-closed');
vueApp.gameUiRemoveClassForNoScroll();
this.cancelEventOverLayClickEscapeClose();
} else {
console.log('Opened: ' + this.popupId);
this.$emit('popup-opened');
vueApp.scrollToTop();
vueApp.gameUiAddClassForNoScroll();
this.outsideClickClose();
}
if (!extern.inGame) {
vueApp.toggleTitleScreenAd();
}
},
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();
BAWK.play('ui_popupclose');
},
onXClick: function () {
this.$emit('popup-x');
this.close();
BAWK.play('ui_popupclose');
},
cancelClick: function () {
this.close();
this.$emit('popup-cancel');
BAWK.play('ui_popupclose');
},
confirmClick: function () {
if (this.popupModel && this.popupModel.validate && !this.popupModel.validate()) {
return;
}
this.close();
this.$emit('popup-confirm');
BAWK.play('ui_playconfirm');
},
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>
<template id="house-display-ad">
<transition name="fade">
<figure v-if="isshowing && data" class="house-wrap">
<img :src="src" :alt="title" @click="adClicked" />
</figure>
</transition>
</template>
<script>
function createHouseAd() {
return {
template: '#house-display-ad',
props: ['isshowing', 'data'],
data() {
return {
count: 0
}
},
methods: {
adClicked() {
if ('link' in this.data) {
this.data.link = this.data.link + '/?utm_source=shell_shockers&utm_medium=referral&utm_campaign=house-ads';
}
extern.clickedHouseLink(this.data);
}
},
computed: {
src() {
return dynamicContentPrefix + `data/img/art/${this.data.id}${this.data.imageExt}`;
},
alt() {
return `${this.data.label} banner image!`;
},
link() {
return `${this.data.link}/?utm_source=shell_shockers&utm_medium=referral&utm_campaign=house-ads`;
},
title() {
return `Play ${this.data.label} now!`;
}
}
}
}
Vue.component('house-ad', createHouseAd());
</script><script id="display-ad-template" type="text/x-template">
<div>
<div v-if="!hidden" v-show="isAdShowing" :id="id" class="display-ad-container" :class="theClass"></div>
<house-ad :data="houseAdData" :isshowing="isAdShowing && houseAdData && adBlocker"></house-ad>
</div>
</script>
<script>
// Register popup components globally
Vue.component('display-ad', createDisplayAdComponent('#display-ad-template'));
function createDisplayAdComponent(templateId) {
return {
template: templateId,
props: {
id: String,
hidden: Boolean,
adUnit: String,
isHidden: Boolean,
poki: Boolean,
adSize: String,
override: Boolean,
houseAd: Boolean,
ignoreSize: Boolean,
},
data: function () {
return {
isAdShowing: false,
hideAds: false,
theAd: '',
adRefreshCheck: false,
houseAdData: '',
adBlocker: false,
}
},
mounted() {
this.$nextTick(() => {
this.getTheAd();
});
this.override = this.override || false;
},
methods: {
getTheAd() {
this.theAd = document.getElementById(this.adUnit);
if (pokiActive || extern.productBlockAds) {
return;
}
const wrap = document.getElementById(this.id);
wrap.appendChild(this.theAd);
if (this.houseAd && !crazyGamesActive && !pokiActive) {
googletag.cmd.push(function() { googletag.display('ShellShockers_LoadingScreen_HouseAds') });
}
},
setVisible(visible) {
if (vueData.isUpgraded) {
console.log('Upgrade hides ads');
this.isAdShowing = false;
return;
}
if (extern.productBlockAds) {
console.log('Closure hides ads');
this.isAdShowing = false;
return;
};
this.isAdShowing = visible;
if (!this.isAdShowing) {
window.removeEventListener('resize', this.hideAdBasedOnscreenSize);
// this.adVisibility();
if (pokiActive && this.adSize) PokiSDK.destroyAd(this.$el);
return;
} else {
this.triggerAd();
setTimeout(() => this.hideAdBasedOnscreenSize(), 500);
// this.adVisibility();
window.addEventListener('resize', this.hideAdBasedOnscreenSize);
return;
}
},
show() {
if (extern.productBlockAds) return;
console.log(`display ad ${this.id} showing`);
this.setVisible(true);
},
hide() {
this.setVisible(false);
console.log(`display ad ${this.id} hiding`);
},
crazyGamesAd(id, size) {
// Removing delay per CG's request. Refresh rate is restricted server-side
/*if (this.adRefreshCheck) return;
this.adRefreshCheck = true;
setTimeout(() => this.adRefreshCheck = false, 20000);*/
crazysdk.requestBanner([{
containerId: id,
size: size
}]);
},
triggerAd() {
this.adBlocker = extern.adBlocker;
if (this.adBlocker) {
this.adblockerSetup();
return;
}
if (!pokiActive && !crazyGamesActive && !testCrazy) {
if (this.houseAd) {
gtagInHouseLoadingBanner();
return;
}
aiptag.cmd.display.push(() => aipDisplayTag.display(this.adUnit));
return;
} else if (crazyGamesActive || testCrazy) {
// since crazy games requires an array for multiple ads on screen will cancel the respawn
// ad calls and call them elsewhere
if (this.id === 'shellshockers_respawn_banner_ad' ||
this.id === 'shellshockers_respawn_banner_2_ad' ||
this.id === 'shellshockers_respawn_banner-new_ad') return;
this.crazyGamesAd(this.id, this.adSize);
return;
} else if (pokiActive && this.adSize) {
PokiSDK.displayAd(this.$el, this.adSize);
return;
}
},
toggleAd() {
if (extern.productBlockAds) {
this.isAdShowing = false;
return;
};
this.$nextTick(() => {
if (this.isAdShowing) {
return this.isAdShowing = false;
}
return this.isAdShowing = true;
});
},
adblockerSetup() {
switch(this.id) {
case 'div-gpt-ad-shellshockers-loading-houseads-wrap':
case 'shellshockers_respawn_banner_ad':
case 'shellshockers_respawn_banner-new_ad':
this.houseAdData = extern.getHouseAd('bigBanner');
break;
case 'shellshockers_respawn_banner_2_ad':
case 'shellshockers_titlescreen_wrap':
this.houseAdData = extern.getHouseAd('small');
break;
default:
console.log('House ads say, huh?');
}
},
hideAdBasedOnscreenSize() {
let adWidth = this.$el.offsetWidth;
let intViewportWidth = window.innerWidth;
if (vueApp.displayAdObject && vueApp.displayAdObject > 1 ) {
if (vueApp.displayAdObject < 970) {
return;
}
if (vueApp.displayAdObject > intViewportWidth ) {
this.hide();
}
} else {
if (adWidth < 970) {
return;
}
if (adWidth > intViewportWidth ) {
this.hide();
}
}
},
adVisibility() {
if (this.ignoreSize) return;
googletag.pubads().addEventListener('slotVisibilityChanged', event => {
if (event.inViewPercentage < 51) {
this.hide();
} else {
this.show();
}
}
);
}
},
computed: {
theClass() {
return this.adUnit.toLowerCase().replace(/_/g, "-");
}
},
watch: {
isHidden(value) {
if (!value) {
this.hide();
}
},
}
}
}
</script>
<!-- include_once('./includes/shared_tags/inc_tag_asc_video_player.php'); -->
<script id="language-selector-template" type="text/x-template">
<select id="pickLanguage" v-model="languageCode" @change="onChangeLanguage" class="ss_select ss_marginright_sm">
<option v-for="(language, code) in langOptions" v-bind:value="code">
{{ language }}
</option>
</select>
</script>
<script>
var comp_language_selector = {
template: '#language-selector-template',
props: ['languages', 'selectedLanguageCode', 'loc', 'langOptions'],
data: function () {
return {
languageCode: this.selectedLanguageCode,
}
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
onChangeLanguage: function () {
vueApp.changeLanguage(this.languageCode);
// Update localStore for selected language.
localStore.setItem('languageSelected', this.languageCode);
BAWK.play('ui_onchange');
ga('send', 'event', {
eventCategory: vueData.googleAnalytics.cat.playerStats,
eventAction: vueApp.googleAnalytics.action.languageSwitch,
eventLabel: this.languageCode,
});
}
},
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;
BAWK.play('ui_playconfirm');
},
onAgreeClicked: function () {
this.showingConsent = true;
this.showingNotification = false;
extern.doConsent();
BAWK.play('ui_onchange');
},
onDisagreeClicked: function () {
this.showingNoConsent = true;
this.showingNotification = false;
extern.doNotConsent();
BAWK.play('ui_onchange');
}
}
};
</script>
<script id="settings-template" type="text/x-template">
<div>
<h1 class="roundme_sm">{{ loc.p_settings_title }}</h1>
<div id="horizontalTabs">
<button id="keyboard_button" @click="selectTab" class="ss_bigtab bevel_blue ss_marginright" :class="(showKeyboardTab ? 'selected' : '')"><img src="img/ico_keyboard.svg" class="ss_bigtab_icon"> <img src="img/ico_mouse.svg" class="ss_bigtab_icon"></button>
<button id="controller_button" @click="selectTab" class="ss_bigtab bevel_blue ss_marginright" :class="(showControllerTab ? 'selected' : '')"><img src="img/ico_gamepad.svg" class="ss_bigtab_icon"></button>
<button id="misc_button" @click="selectTab" class="ss_bigtab bevel_blue" :class="(showMiscTab ? 'selected' : '')"><img src="img/ico_monitor.svg" class="ss_bigtab_icon"> <img src="img/ico_speaker.svg" class="ss_bigtab_icon"> <img src="img/ico_privacy.svg" class="ss_bigtab_icon"></button>
</div>
<div id="popupInnards" class="roundme_sm fullwidth f_col ss_margintop_sm ss_marginbottom_xl">
<div id="settings_keyboard" v-show="showKeyboardTab">
<h3 class="nospace">{{ loc.p_settings_keybindings }}</h3>
<div class="f_row ss_margintop">
<div class="f_col">
<div v-for="c in settingsUi.controls.keyboard.game" v-if="c.side == 'left'" 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 class="ss_margintop_xl">
<div v-for="c in settingsUi.controls.keyboard.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>
</div>
</div>
<div class="f_col ss_marginleft_xl">
<div v-for="c in settingsUi.controls.keyboard.game" v-if="c.side == 'right'" 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 class="ss_margintop">
<div v-for="t in settingsUi.adjusters.mouse" 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.mouse" 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>
</div>
</div>
</div>
</div>
<div id="settings_controller" v-show="showControllerTab">
<h3 class="nospace">{{ loc.p_settings_gamepadbindings }}</h3>
<div class="f_row ss_margintop">
<div class="f_col">
<div v-for="c in settingsUi.controls.gamepad.game" class="nowrap">
<settings-gamepad-binder :loc="loc" :control-id="c.id" :control-value="c.value" @control-captured="onGamepadGameControlCaptured" :controller-type="controllerType"></settings-gamepad-binder>
<div class="label">{{ loc[c.locKey] }}</div>
</div>
</div>
<div class="f_col ss_marginleft_xl">
<div class="ss_marginbottom_xl">
<div v-for="c in settingsUi.controls.gamepad.spectate" class="nowrap">
<settings-gamepad-binder :loc="loc" :control-id="c.id" :control-value="c.value" @control-captured="onGamepadSpectateControlCaptured" :controller-type="controllerType"></settings-gamepad-binder>
<div class="label">{{ loc[c.locKey] }}</div>
</div>
</div>
<div v-for="t in settingsUi.adjusters.gamepad" 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" :precision="t.precision" @setting-adjusted="onSettingAdjusted"></settings-adjuster>
</div>
<div v-for="t in settingsUi.togglers.gamepad" 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>
</div>
</div>
<p>{{ controllerId }}</p>
<p>{{ loc.p_settings_controllerhelp }} <a target="_blank" href="https://html5gamepad.com">html5gamepad.com</a></p>
</div>
<div id="settings_misc" v-show="showMiscTab">
<div class="f_row">
<div class="f_col">
<header>
<h2>{{loc.p_settings_volume_controls}}</h2>
</header>
<div v-for="t in settingsUi.adjusters.misc" 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.adjusters.music" 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>
<h3 class="nospace ss_margintop">{{ loc.p_settings_language }}</h3>
<language-selector :languages="languages" :loc="loc" :selectedLanguageCode="currentLanguageCode" class="ss_select" :langOptions="langOption"></language-selector>
<button v-if="showPrivacyOptions" @click="onPrivacyOptionsClicked" class="ss_button btn_blue bevel_blue btn_md ss_margintop_xl">{{ loc.p_settings_privacy }}</button>
</div>
<div class="f_col ss_marginleft_xl">
<div v-for="t in settingsUi.togglers.misc" 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" :hide="hideSetting(t.id)" @setting-toggled="onSettingToggled"></settings-toggler>
</div>
</div>
</div>
</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="BAWK.play('ui_onchange')" 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) {
BAWK.play(sound);
},
reset: function () {
this.currentValue = (this.controlValue === null) ? 'undefined' : 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 {
BAWK.play('ui_onchange')
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) {
BAWK.play('ui_onchange')
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-gamepad-binder-template" type="text/x-template">
<button ref="gamepadInput" 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:focusout="onFocusOut($event)"
:key="controllerType">
<span v-html="currentValue"></span></button>
</script>
<script>
var comp_settings_gamepad_binder = {
template: '#settings-gamepad-binder-template',
props: ['loc', 'controlId', 'controlValue', 'controllerType'],
data: function () {
return {
currentValue: (this.controlValue === null) ? 'undefined' : vueData.controllerButtonIcons[this.controllerType][this.controlValue],
isCapturing: false
}
},
beforeUpdate: function () {
if (!this.isCapturing) {
this.setIcon(this.controlValue);
}
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
reset: function () {
this.setIcon(this.controlValue);
this.isCapturing = false;
removeEventListener('gamepadbuttondown', this.onButtonDown);
removeEventListener('gamepadbuttonup', this.onButtonUp);
},
capture: function (value) {
this.isCapturing = false;
this.$refs.gamepadInput.blur();
this.$emit('control-captured', this.controlId, value);
this.reset();
},
onMouseDown: function (event) {
if (!this.isCapturing) {
this.currentValue = this.loc.press_button;
this.isCapturing = true;
addEventListener('gamepadbuttondown', this.onButtonDown);
addEventListener('gamepadbuttonup', this.onButtonUp);
}
},
onKeyDown: function (event) {
event.stopPropagation();
},
onKeyUp: function (event) {
event.stopPropagation();
},
onButtonDown: function (event) {
if (event.detail == 8 || event.detail == 9) return;
BAWK.play('ui_onchange')
this.capture(event.detail);
},
onFocusOut: function (event) {
this.reset();
},
setIcon: function (value) {
this.currentValue = (value === null) ? 'undefined' : vueData.controllerButtonIcons[this.controllerType][value];
}
},
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.setIcon(newValue);
}
}
};
</script><script id="settings-adjuster-template" type="text/x-template">
<div>
<h3 class="nospace">{{ loc[locKey] }}</h3>
<div class="f_row">
<input class="ss_slider" type="range" :min="min" :max="max" :step="step" v-model="currentValue" @change="onChange">
<label class="ss_slider label">{{ getCurrentValue() }}</label>
</div>
</div>
</script>
<script>
var comp_settings_adjuster = {
template: '#settings-adjuster-template',
props: ['loc', 'locKey', 'controlId', 'controlValue', 'min', 'max', 'step', 'multiplier', 'precision'],
data: function () {
return {
currentValue: this.controlValue
}
},
methods: {
onChange: function (event) {
this.$emit('setting-adjusted', this.controlId, this.currentValue);
BAWK.play('ui_onchange');
},
getCurrentValue: function () {
if (this.precision) {
return Number.parseFloat(this.currentValue).toFixed(this.precision);
}
else {
return Math.floor(this.currentValue * (this.multiplier || 1));
}
}
},
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 v-if="!hide" 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', 'hide'],
data: function () {
return {
currentValue: this.controlValue
}
},
methods: {
onChange: function (event) {
this.$emit('setting-toggled', this.controlId, this.currentValue);
BAWK.play('ui_onchange');
}
},
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,
'settings-gamepad-binder': comp_settings_gamepad_binder,
'language-selector': comp_language_selector,
'settings-adjuster': comp_settings_adjuster,
'settings-toggler': comp_settings_toggler
},
props: ['loc', 'settingsUi', 'languages', 'currentLanguageCode', 'showPrivacyOptions', 'controllerId', 'isFromEU', 'controllerType', 'langOption', 'isVip'],
data: function () {
return {
showKeyboardTab: true,
showControllerTab: false,
showMiscTab: false,
originalSettings: {},
showDetailSettings: false,
originalLanguage: '',
originalMusicVolume: '',
musicStatChg: ''
}
},
methods: {
selectTab: function (e) {
return this.switchTab(e.target.id)
},
switchTab(tab) {
this.showKeyboardTab = false;
this.showControllerTab = false;
this.showMiscTab = false;
switch (tab) {
case 'keyboard_button':
this.showKeyboardTab = true;
break;
case 'controller_button':
this.showControllerTab = true;
break;
case 'misc_button':
this.showMiscTab = true;
break;
}
BAWK.play('ui_toggletab');
},
captureOriginalSettings: function () {
this.originalSettings = deepClone(vueData.settingsUi);
this.originalLanguage = this.currentLanguageCode;
// this.originalMusicVolume = this.originalSettings.adjusters.music[0].value;
},
applyOriginalSettings: function () {
vueData.settingsUi = this.originalSettings;
this.showDetailSettings = !vueData.settingsUi.togglers.misc.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.keyboard.game, id, value)
},
onSpectateControlCaptured: function (id, value) {
this.onControlCaptured(this.settingsUi.controls.keyboard.spectate, id, value)
},
onGamepadGameControlCaptured: function (id, value) {
this.onControlCaptured(this.settingsUi.controls.gamepad.game, id, value)
},
onGamepadSpectateControlCaptured: function (id, value) {
this.onControlCaptured(this.settingsUi.controls.gamepad.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);
Object.values(this.settingsUi.togglers).forEach(v => {
var toggler = v.find(t => { return t.id === id; });
if (toggler) toggler.value = value;
})
if (id === 'autoDetail') {
this.showDetailSettings = !value;
}
if (id === 'safeNames') {
extern.setSafeNames(value);
}
// if (id === 'musicStatus') {
// extern.setMusicStatus(value);
// this.musicStatChg = true;
// if (extern.inGame) {
// vueApp.toggleMusic();
// }
// }
},
onSettingAdjusted: function (id, value) {
Object.values(this.settingsUi.adjusters).forEach(v => {
var adjuster = v.find( (a) => { return a.id === id; });
if (adjuster) adjuster.value = value;
})
if (id === 'volume') {
extern.setVolume(value);
}
if (id === 'mouseSpeed') {
extern.setMouseSpeed(value);
}
if (id === 'sensitivity') {
extern.setControllerSpeed(value);
}
if (id === 'deadzone') {
extern.setDeadzone(value);
}
if (id === 'musicVolume') {
extern.setMusicVolume(value);
}
},
onVolumeChange: function () {
extern.setVolume(this.settingsUi.volume);
},
onPrivacyOptionsClicked: function () {
this.$emit('privacy-options-opened');
BAWK.play('ui_popupopen');
},
onCancelClick: function () {
this.applyOriginalSettings();
//extern.setMusicVolume(this.originalMusicVolume);
this.cancelLanguageSelect();
if (this.musicStatChg) {
if (extern.inGame) {
vueApp.toggleMusic();
}
};
this.$parent.close();
},
onCloseClick: function () {
this.applyOriginalSettings();
//extern.setMusicVolume(this.originalMusicVolume);
this.cancelLanguageSelect();
if (this.musicStatChg) {
if (extern.inGame) {
vueApp.toggleMusic();
}
};
this.$parent.close();
BAWK.play('ui_popupclose');
},
quickSave() {
extern.applyUiSettings(this.settingsUi, this.originalSettings);
this.resetOriginalLanguage();
},
onSaveClick: function () {
// if (vueApp.music.serverTracks.title) {
// this.gaMusicVol();
// }
// this.gaMusicVol();
extern.applyUiSettings(this.settingsUi, this.originalSettings);
this.resetOriginalLanguage();
this.$parent.toggle();
BAWK.play('ui_playconfirm');
},
gaMusicVol() {
let newVol = Number(this.settingsUi.adjusters.music[0].value);
if (newVol === Number(this.originalMusicVolume)) return;
if ((Math.round(newVol*100)) <= 1) {
ga('send', 'event', 'music', 'mute', vueApp.music.serverTracks.title);
}
},
onResetClick: function () {
extern.resetSettings();
BAWK.play('ui_reset');
},
cancelLanguageSelect: function() {
this.originalLanguage === vueApp.$data.currentLanguageCode ?
vueApp.changeLanguage(vueApp.$data.currentLanguageCode) : vueApp.changeLanguage(this.originalLanguage);
// Revert localStore for language
localStore.setItem('languageSelected', this.originalLanguage);
this.resetOriginalLanguage();
},
resetOriginalLanguage: function() {
this.originalLanguage = '';
},
setSettings: function (settings) {
var getSettingById = (list, id) => {
return list.filter( o => {
return o.id == id;
})[0];
};
// Keyboard
getSettingById(this.settingsUi.controls.keyboard.game, 'up').value = settings.controls.keyboard.game.up;
getSettingById(this.settingsUi.controls.keyboard.game, 'down').value = settings.controls.keyboard.game.down;
getSettingById(this.settingsUi.controls.keyboard.game, 'left').value = settings.controls.keyboard.game.left;
getSettingById(this.settingsUi.controls.keyboard.game, 'right').value = settings.controls.keyboard.game.right;
getSettingById(this.settingsUi.controls.keyboard.game, 'jump').value = settings.controls.keyboard.game.jump;
getSettingById(this.settingsUi.controls.keyboard.game, 'fire').value = settings.controls.keyboard.game.fire;
getSettingById(this.settingsUi.controls.keyboard.game, 'scope').value = settings.controls.keyboard.game.scope;
getSettingById(this.settingsUi.controls.keyboard.game, 'reload').value = settings.controls.keyboard.game.reload;
getSettingById(this.settingsUi.controls.keyboard.game, 'swap_weapon').value = settings.controls.keyboard.game.swap_weapon;
getSettingById(this.settingsUi.controls.keyboard.game, 'grenade').value = settings.controls.keyboard.game.grenade;
getSettingById(this.settingsUi.controls.keyboard.spectate, 'ascend').value = settings.controls.keyboard.spectate.ascend;
getSettingById(this.settingsUi.controls.keyboard.spectate, 'descend').value = settings.controls.keyboard.spectate.descend;
// Gamepad
getSettingById(this.settingsUi.controls.gamepad.game, 'jump').value = settings.controls.gamepad.game.jump;
getSettingById(this.settingsUi.controls.gamepad.game, 'fire').value = settings.controls.gamepad.game.fire;
getSettingById(this.settingsUi.controls.gamepad.game, 'scope').value = settings.controls.gamepad.game.scope;
getSettingById(this.settingsUi.controls.gamepad.game, 'reload').value = settings.controls.gamepad.game.reload;
getSettingById(this.settingsUi.controls.gamepad.game, 'swap_weapon').value = settings.controls.gamepad.game.swap_weapon;
getSettingById(this.settingsUi.controls.gamepad.game, 'grenade').value = settings.controls.gamepad.game.grenade;
getSettingById(this.settingsUi.controls.gamepad.spectate, 'ascend').value = settings.controls.gamepad.spectate.ascend;
getSettingById(this.settingsUi.controls.gamepad.spectate, 'descend').value = settings.controls.gamepad.spectate.descend;
// Misc
getSettingById(this.settingsUi.adjusters.misc, 'volume').value = settings.volume;
// getSettingById(this.settingsUi.adjusters.music, 'musicVolume').value = settings.musicVolume;
getSettingById(this.settingsUi.adjusters.mouse, 'mouseSpeed').value = settings.mouseSpeed;
getSettingById(this.settingsUi.adjusters.gamepad, 'sensitivity').value = settings.controllerSpeed;
getSettingById(this.settingsUi.adjusters.gamepad, 'deadzone').value = settings.deadzone;
getSettingById(this.settingsUi.togglers.mouse, 'mouseInvert').value = (settings.mouseInvert !== 1);
getSettingById(this.settingsUi.togglers.mouse, 'fastPollMouse').value = settings.fastPollMouse;
getSettingById(this.settingsUi.togglers.gamepad, 'controllerInvert').value = (settings.controllerInvert !== 1);
getSettingById(this.settingsUi.togglers.misc, 'holdToAim').value = settings.holdToAim;
getSettingById(this.settingsUi.togglers.misc, 'enableChat').value = settings.enableChat;
getSettingById(this.settingsUi.togglers.misc, 'safeNames').value = settings.safeNames;
getSettingById(this.settingsUi.togglers.misc, 'autoDetail').value = settings.autoDetail;
getSettingById(this.settingsUi.togglers.misc, 'shadowsEnabled').value = settings.shadowsEnabled;
getSettingById(this.settingsUi.togglers.misc, 'highRes').value = settings.highRes;
getSettingById(this.settingsUi.togglers.misc, 'hideBadge').value = settings.hideBadge;
// getSettingById(this.settingsUi.togglers.misc, 'musicStatus').value = settings.musicStatus;
console.log('auto detail: ' + settings.autoDetail);
this.showDetailSettings = !settings.autoDetail;
},
hideSetting(id) {
if (id === 'hideBadge' && !this.isVip) {
return true;
}
return false;
}
}
};
</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>
<help-questions :content="localizeThis"></help-questions>
<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="BAWK.play('ui_click')" @change="BAWK.play('ui_onchange')">
<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 id="help-question-template" type="text/x-template">
<div>
<div v-for="qa in content">
<a :name="qa[0]"></a>
<h3>{{ qa[1] }}</h3>
<span v-html="qa[2]"></span>
</div>
</div>
</script>
<script>
var comp_help_question = {
template: '#help-question-template',
props: ['content'],
};
</script>
<script>
var comp_help = {
template: '#help-template',
components: {
'help-questions': comp_help_question,
},
props: ['loc'],
mounted() {
this.helpLocSetup();
},
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,
qaNum: [1,2,3,4,5,6,7,8,9,10,11],
newLoc: [],
localizeThis: [],
}
},
feedbackValidateTimeout: 0,
methods: {
playSound (sound) {
BAWK.play(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;
BAWK.play('ui_toggletab');
! this.showTab1 && ga('send', 'event', 'feedback opened');
},
onBackClick: function () {
vueApp.$refs.helpPopup.toggle();
BAWK.play('ui_popupclose');
},
onSendClick: function () {
this.doValidation = true;
if (!this.validateEmail() || !this.validateMessage()) {
return;
}
BAWK.play('ui_playconfirm');
// Send that shit out
extern.api_feedback(this.selectedType, this.email, this.feedback);
setTimeout(() => {
this.$parent.toggle();
this.selectedType = 0;
this.feedback = null;
this.email = null;
}, 900);
},
helpLocSetup(locContent) {
let content = this.loc;
// if (locContent) {
// content = locContent
// }
const locArray = Object.entries(content);
this.newLoc = locArray.filter( (item, i) => {
if (item[0].includes('faqItems_q')) {
return item;
}
});
const tranlateThat = [];
for (let n = 0; n < this.qaNum.length; n++) {
tranlateThat.push([]);
for (let i = 0; i < this.newLoc.length; i++) {
if (this.newLoc[i][0].includes('faqItems_q' + this.qaNum[n] + '_')) {
tranlateThat[n].push(this.newLoc[i][1]);
}
}
}
// Cause once again... vue
setTimeout(() => {this.localizeThis = tranlateThat}, 500);
}
},
watch: {
loc(val) {
this.helpLocSetup(val);
}
}
};
</script><script id="vip-help-template" type="text/x-template">
<div>
<div id="feedback_panel">
<h1>{{ loc.vipHelptitle }}</h1>
<small class="text_red"><i class="fas fa-exclamation-triangle"></i> {{loc.vipHelpDesc2}}</small>
<p>{{loc.vipHelpDesc}}</p>
<div>
<a :name="loc.vipFaqItems_q1_anchor"></a>
<h3>{{ loc.vipFaqItems_q1_q }}</h3>
<p>{{ loc.vipFaqItems_q1_a_1 }}</p>
<ul>
<li>{{ loc.vipFaqItems_q1_li_1 }}</li>
<li>{{ loc.vipFaqItems_q1_li_2 }}</li>
<li>{{ loc.vipFaqItems_q1_li_3 }}</li>
<li>{{ loc.vipFaqItems_q1_li_4 }}</li>
<li>{{ loc.vipFaqItems_q1_li_5 }}</li>
<li>{{ loc.vipFaqItems_q1_li_6 }}</li>
</ul>
</div>
<div>
<a :name="loc.vipFaqItems_q2_anchor"></a>
<h3>{{ loc.vipFaqItems_q2_q }}</h3>
<p>{{ loc.vipFaqItems_q2_a_1 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q3_anchor"></a>
<h3>{{ loc.vipFaqItems_q3_q }}</h3>
<p>{{ loc.vipFaqItems_q3_a_1 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q4_anchor"></a>
<h3>{{ loc.vipFaqItems_q4_q }}</h3>
<p>{{ loc.vipFaqItems_q4_a_mobile_3 }}</p>
<p>{{ loc.vipFaqItems_q4_a_1 }}</p>
<p>{{ loc.vipFaqItems_q4_a_2 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q5_anchor"></a>
<h3>{{ loc.vipFaqItems_q5_q }}</h3>
<p>{{ loc.vipFaqItems_q5_a_1 }}</p>
<p>{{ loc.vipFaqItems_q5_a_2 }}</p>
<p>{{ loc.vipFaqItems_q5_a_3 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q6_anchor"></a>
<h3>{{ loc.vipFaqItems_q6_q }}</h3>
<p>{{ loc.vipFaqItems_q6_a_1 }}</p>
<p>{{ loc.vipFaqItems_q6_a_2 }}</p>
<p>{{ loc.vipFaqItems_q6_a_3 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q7_anchor"></a>
<h3>{{ loc.vipFaqItems_q7_q }}</h3>
<p>{{ loc.vipFaqItems_q7_a_1 }}</p>
</div>
<!--
<div v-for="qa in loc.vipFaqItems">
<a :name="qa.anchor"></a>
<h3>{{ qa.q }}</h3>
<p v-for="p in qa.a">
{{p}}
</p>
<ul v-if="qa.li">
<li v-for="li in qa.li">{{li}}</li>
</ul>
</div> -->
<hr>
<div id="btn_horizontal" class="f_center">
<button @click="openVipStore" class="ss_button btn_md btn_green bevel_green ss_marginright">{{ subButtonTxt }}</button>
<button @click="onBackClick" class="ss_button btn_md btn_red bevel_red ss_marginright">{{ loc.cancel }}</button>
</div>
</div>
</div>
</script>
<script>
var vip_help = {
template: '#vip-help-template',
props: ['loc', 'isVip'],
data: function () {
return {
}
},
methods: {
onBackClick() {
BAWK.play('ui_popupclose');
this.$parent.hide();
},
openVipStore() {
this.$parent.hide();
vueApp.showSubStorePopup();
}
},
computed: {
subButtonTxt() {
return this.isVip ? this.loc.sManageBtn : this.loc.account_vip;
}
}
};
</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="display-grid grid-column-4-eq grid-gap-space-lg">
<egg-store-item v-for="item in products" :key="item.sku" :item="item" :loc="loc" inStore="true" :account-set="accountSettled" :isUpgraded="isUpgraded" :isSaleEvent="saleEvent"></egg-store-item>
</div>
</div>
</script>
<template id="comp-store-item">
<figure id="popupInnards" v-if="showItem" class="single-egg-store-item box_blue4 roundme_md f_col text-center box_relative" :class="[itemType, {purchased: purchased}]">
<div v-if="purchased" class="single-egg-store-item-purchased">{{loc.p_egg_shop_purchased}}</div>
<div v-if="item.flagText" id="eggshop_banner" :class="{sale: item.salePrice}">
<img v-if="!item.salePrice && !item.itemId" src="img/egg-shop-banner-left.png">
<div class="eggshop_banner_mid">
<i v-if="item.salePrice || item.itemId" class="fas" :class="flagTxt"></i>
{{ item.discount }} {{ loc[item.flagText] }}
</div>
</div>
<figcaption>
<p align="center" class="nospace roundme_md"><img :src="img" class="eggshop_image roundme_md"></p>
<h6 class="nospace shadow_bluebig4 eggshop_bigtitle">{{ loc[title] }}</h6>
<span v-if="showSubtitle" class="eggshop_subtitle text_white">{{ loc[description] }}</span>
<div class="f_row">
<div class="eggshop_pricebox roundme_sm" :class="{ slashed: item.salePrice }">${{ item.price }} USD</div>
<div v-if="item.salePrice" class="eggshop_pricebox roundme_sm sale-price">${{ item.salePrice }} USD</div>
</div>
<button class="store_btn ss_button btn_green bevel_green btn_sm center_h" @click="onItemClicked(item.sku)">{{ buyBtnText }}</button>
<div v-if="item.type === 'item' && !hasPurchased && inStore">
<button class="ss_button btn_yolk bevel_yolk btn_sm center_h vip-get-btn box_absolute" @click="onVipClick"><span>{{ loc.p_egg_shop_free_with_vip }}</span> <img src="img/vip-club/vip-club-emblem-sm.png" alt=""></button>
</div>
</figcaption>
</figure>
</template>
<script>
const comp_store_item = {
template: '#comp-store-item',
props: ['loc', 'item', 'inStore', 'accountSet', 'isUpgraded', 'isSaleEvent'],
data() {
return {
purchased: false,
attempt: 0,
};
},
methods: {
onItemClicked() {
if (!this.accountSet || !vueApp.accountSettled) {
vueApp.hideEggStorePopup();
setTimeout(() => {
if (this.attempt < 5) {
this.onItemClicked(this.item.sku);
this.attempt++;
} else {
vueApp.showGenericPopup('uh_oh', 'error', 'ok');
}
}, 300);
vueApp.pleaseWaitPopup();
return;
}
if (this.$parent.$el.id === 'help') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
if (this.item.type === 'item' && !hasValue(this.item.itemId.id) && !Number.isInteger(this.item.itemId)) {
vueApp.showGenericPopup('uh_oh', 'p_egg_shop_no_item_id', 'ok');
return;
}
if (this.purchased) {
console.log('Item is owned so lets go see it.');
vueApp.showItemOnEquipScreen(extern.catalog.findItemById(this.item.itemId.id));
return;
}
extern.buyProductForMoney(this.item.sku);
ga('send', 'event', vueApp.googleAnalytics.cat.purchases, vueApp.googleAnalytics.action.eggShackProductClick, this.item.sku);
},
isPurchased() {
if (this.item.itemId) {
return this.purchased = extern.isItemOwned(this.item.itemId);
}
},
onVipClick() {
this.$parent.$parent.hide();
vueApp.showSubStorePopup();
}
},
computed: {
title() {
return `${this.item.sku}_title`;
},
description() {
return `${this.item.sku}_desc`;
},
img() {
if (this.item.type === 'item') {
return `img/store/items/${this.item.sku}.gif`;
}
const path = !this.isSaleEvent ? '' : 'store-black-friday/';
return `img/${path}${this.item.sku}.png`;
},
itemType() {
return 'single-egg-store-item-is-' + this.item.type;
},
buyBtnText() {
if (this.purchased) {
return this.loc.p_egg_shop_see_item;
}
return this.loc.p_buy_item_confirm;
},
showItem() {
if (this.inStore) return this.item.inStore;
this.isPurchased();
return true;
},
flagTxt() {
if (this.item.salePrice) {
return 'fa-tag';
}
return 'fa-gem'
},
showSubtitle() {
if (this.item.type === 'item') return true;
if (this.isSaleEvent) {
return false;
}
return true;
},
hasPurchased() {
return this.isPurchased();
}
},
watch: {
accountSet(val) {
if (val) {
this.isPurchased();
}
},
isUpgraded(val) {
if (val) {
this.isPurchased();
}
}
}
};
</script>
<script>
var comp_egg_store = {
template: '#egg-store-template',
components: {
'egg-store-item': comp_store_item,
},
data() {
return vueData;
},
props: ['loc', 'products', 'saleEvent'],
methods: {
onItemClicked: function (sku) {
if (!this.accountSettled) {
console.log(this.$parent.hide());
setTimeout(() => {
this.onItemClicked(sku)
}, 300);
vueApp.pleaseWaitPopup();
return;
}
if (vueApp.$refs.genericPopup.isShowing === true) vueApp.$refs.genericPopup.close();
this.$parent.hide();
extern.buyProductForMoney(sku);
ga('send', 'event', this.googleAnalytics.cat.purchases, this.googleAnalytics.action.eggShackProductClick, 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();
BAWK.play('ui_click');
extern.clickedHouseAdBig(this.useAd);
},
close: function () {
if (this.useAd === null) {
return;
}
BAWK.play('ui_popupclose');
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 dynamicContentPrefix + 'data/img/art/{0}{1}'.format(this.useAd.id, this.useAd.imageExt);
}
},
watch: {
useAd: function (bigAd) {
if (hasValue(bigAd)) {
setTimeout(() => {
vueApp.hideTitleScreenAd();
}, 100);
this.$options.bigAdTimeout = setTimeout(function () {
vueApp.ui.houseAds.big = null;
}, 15000);
// Close with outside click
this.outsideClickClose();
} else {
vueApp.showTitleScreenAd();
}
}
}
};
</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 () {
BAWK.play('ui_click');
extern.clickedHouseAdSmall(this.useAd);
}
},
computed: {
adImageUrl: function () {
if (!hasValue(this.useAd)) {
return;
}
ga('send', 'event', {
eventCategory: 'House banner ad',
eventAction: 'show',
eventLabel: this.useAd.label
});
return dynamicContentPrefix + 'data/img/art/{0}{1}'.format(this.useAd.id, this.useAd.imageExt);
}
}
};
</script>
<script id="item-template" type="text/x-template">
<div v-if="active" class="store_item roundme_lg clickme" ref="eggItemInvetory" :class="highlightSelected()" @click="onClick">
<div v-if="isPremium" class="store_item-premium" :class="{'is-vip-item': isVipItem}">
{{itemBannerText}}
</div>
<div v-if="showPrice" class="equip_smallprice">
<svg v-if="!isPremium" class="equip_egg eggIcon"><use xlink:href="#icon-egg"></use></svg>
<i v-if="isPremium" class="fas fa-dollar-sign equip_egg eggIcon"></i>
<div class="equip_cost"> {{ item.price }}</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', 'equippedSlot'],
data: function () {
return {
itemOnly: hasValue(this.showItemOnly) ? this.showItemOnly : false,
active: true,
}
},
mounted() {
this.prepareItem();
this.itemHightlightedOrder();
},
methods: {
isItemSellable: function () {
return !this.itemOnly && vueData.equip.mode == vueData.equip.equipModes.shop;
},
isPremItem() {
if (this.isPremium && this.isItemSellable()) {
const ITEM = vueData.premiumShopItems.find(i => {
return i.itemId.id && i.itemId.id === this.item.id && i.type === 'item';
});
if (ITEM !== undefined && ITEM.isActive) {
this.item.sku = ITEM.sku;
this.item.price = ITEM.salePrice ? ITEM.salePrice : ITEM.price;
} else {
this.active = false;
}
}
this.isMerch();
},
isMerch() {
if (this.showPhysicalMerch && vueData.equip.mode === vueData.equip.equipModes.shop) {
this.item.active = false;
}
this.isEquippedSlot();
},
isEquippedSlot() {
if (this.equippedSlot) {
this.active = true;
}
vueApp.equip.lazyRenderTimeouts.push(setTimeout(() => this.renderItem(), 0));
},
prepareItem: function () {
this.isPremItem();
},
renderItem() {
extern.renderItemToCanvas(this.item, this.$refs.itemCanvas);
},
highlightSelected: function () {
return this.isSelected ? 'highlight' : '';
},
onClick: function () {
this.$emit('item-selected', this.item);
},
itemHightlightedOrder: function() {
if (this.showPhysicalMerch && vueData.equip.mode == vueData.equip.equipModes.shop) return;
return this.$refs.eggItemInvetory.classList.contains('highlight') ? this.$refs.eggItemInvetory.style.order='-1' : null;
},
},
computed: {
showPrice () {
return this.isItemSellable() && this.item.price > 0;
},
showPhysicalMerch () {
return this.isItemSellable() && this.item.unlock === 'physical';
},
isPremium() {
return this.item.unlock === 'premium';
},
isVipItem() {
if ('tags' in this.item.item_data ) {
if (this.item.item_data.tags.includes('vipItem')) {
return true;
}
}
},
itemBannerText() {
return this.isVipItem ? 'VIP' : 'Premium';
}
},
watch: {
item: function (val) {
this.prepareItem();
}
}
};
</script><script id="chickn-winner-template" type="text/x-template">
<div id="popupInnards" class="box_dark roundme_sm fullwidth f_col">
<header class="display-grid grid-column-1-eq grid-align-items-center roundme_lg">
<h1 class="chickn-winner-title nospace text-center">{{ loc.chw_ready_msg }}</h1>
</header>
<section id="chickn-winner-wrapper" class="egg-chick-wrapper f_row roundme_lg">
<div class="egg-chick-box box_relative" v-for="egg in eggs" :key="egg.id">
<div v-if="showAmountRewarded && busted && egg.value > 5" class="text-center chw-reward-amount box_absolute">
<h2 class="box_relative shadow_grey">{{ showAmountRewarded }} <img class="chw-winner-egg" src="img/ico_goldenEgg.svg" /></h2>
</div>
<img class="incentivized-egg-chick box_relative" :class="eggClass(egg.value)" @click="eggClickCounter" :src="eggSrc(egg.value)" :id="egg.id">
</div>
</section>
<!-- #chickn-winner-wrapper -->
<footer class="text-center">
<h2 v-if="!busted">{{ loc.p_nugget_instruction }}</h2>
<button v-if="busted" id="gotWinnerOk" v-show="isMiniGameComplete" @click="onGotWinner" class="ss_button btn_medium btn_yolk bevel_yolk btn_shiny">{{ loc.p_nugget_button }}</button>
<display-ad id="shellshockers_chicken_nugget_banner_ad" ref="nuggetDisplayAd" class="pauseFiller center_h" :ignoreSize="true" :adUnit="adUnits.display.nugget" adSize="728x90"></display-ad>
</footer>
</div>
<!-- #popupInnards -->
</script>
<script>
var comp_chickn_winner_popup = {
template: '#chickn-winner-template',
props: ['loc', 'amountGiven', 'adUnits'],
data: function () {
return {
clickedIdx: 0,
eggs: [{id:'eggOne', value: 0, active: true}, {id:'eggTwo', value: 0, active: true}, {id:'eggThree', value: 0, active: true}],
isMiniGameComplete: false,
bustedSrc: `img/incentivized-mini-game/svg/Egg07.svg`,
busted: false,
bustedTimer: 1414
}
},
methods: {
placeBannerAdTag: function (tagEl) {
this.$refs.chickenNuggetAdContainer.appendChild(tagEl);
},
showAd() {
return this.$refs.nuggetDisplayAd.show();
},
hideAd() {
return this.$refs.nuggetDisplayAd.hide();
},
eggSrc(count) {
if (count > 6) {
return `img/incentivized-mini-game/svg/Egg06.svg`;
}
return `img/incentivized-mini-game/svg/Egg0${count}.svg`;
},
eggSrcBusted() {
setTimeout(() => {
return `img/incentivized-mini-game/svg/Egg07.svg`;
}, 2424);
},
eggBg(count) {
if (count > 5) {
return 'incentivized-show'
}
},
eggClass(count) {
if (count > 5) {
return 'chick-alive';
}
},
eggClickCounter(e) {
if (!this.busted) {
BAWK.play('mini-egg-game_shellhit');
} else {
BAWK.play('mini-egg-game_chick');
}
this.clickedIdx = this.eggs.findIndex(i => i.id === e.target.id);
let elem = document.getElementById(this.eggs[this.clickedIdx].id);
if (this.eggs[this.clickedIdx].value < 6) {
elem.classList.add('chickn-winner-clicked');
setTimeout(() => elem.classList.remove('chickn-winner-clicked'), 650);
}
if (this.eggs[this.clickedIdx].value === 5) {
this.isMiniGameComplete = true;
ga('send', 'event', 'Chickn Winner', 'Egg Game', `egg-cracked-${this.eggs[this.clickedIdx].id}`);
setTimeout(() => {
this.eggs[this.clickedIdx].active = false;
elem.src = this.bustedSrc;
}, this.bustedTimer);
this.busted = true;
extern.api_checkBalance();
this.eggs.forEach(i => {
if (i.id === e.target.id) {
return;
}
let btn = document.getElementById(i.id).style.pointerEvents = 'none';
btn.disabled = true;
});
}
if (this.eggs[this.clickedIdx].value === 100) {
BAWK.play('mini-egg-game_shial');
}
this.eggs[this.clickedIdx].value++;
},
resetGame() {
setTimeout(() => {
this.isMiniGameComplete = false;
this.busted = false;
this.eggs.forEach(i => {
let btn = document.getElementById(i.id).style.pointerEvents = 'all';
btn.disabled = false;
});
this.eggs = [{id:'eggOne', value: 0, active: true}, {id:'eggTwo', value: 0, active: true}, {id:'eggThree', value: 0, active: true}];
}, 1000);
},
onGotWinner: function () {
this.$parent.hide();
this.hideAd();
this.resetGame();
extern.checkStartChicknWinner(false, true);
if (extern.inGame) {
vueApp.showGameMenu();
}
},
// loadMiniGame: function () {
// this.isMiniGameComplete = false;
// this.$refs.miniGameFrame.src = "app_nugget/index.html";
// this.$refs.nuggetDisplayAd.show();
// },
// unloadMiniGame: function () {
// this.$refs.miniGameFrame.src = "about:blank";
// },
// onMiniGameCompleted: function () {
// this.isMiniGameComplete = true;
// }
},
computed: {
showAmountRewarded() {
if (this.amountGiven === 0) {
return;
}
return `+${this.amountGiven}`;
},
},
watch: {
busted(val) {
if (val) {
BAWK.play('mini-egg-game_shellburst');
setTimeout(() => {
BAWK.play('mini-egg-game_victory');
}, 500);
}
}
}
};
</script>
<script id="home-screen-template" type="text/x-template">
<div>
<house-ad-big id="big-house-ad" ref="bigHouseAd" :useAd="ui.houseAds.big" @big-house-ad-closed="onBigHouseAdClosed"></house-ad-big>
<div ref="chw-home-timer" v-show="!isPoki && firebaseId" class="chw-home-timer display-grid grid-column-1-2 grid-align-items-center box_absolute grid-gap-1" :class="chwHomeTimerCls">
<div>
<img class="chw-home-timer-chick" :src="chwChickSrc">
</div>
<div class="display-grid grid-align-items-center bg_white chw-circular-timer-container box_relative" :class="chwClass">
<div v-show="chwShowTimer" class="chw-home-screen-timer"></div>
<!-- #chw-circular-timer-outer -->
<div>
<p class="chw-circular-timer-countdown nospace">
<span class="chw-pie-remaining text_center chw-msg chw-r-msg">{{ remainingMsg }}</span>
<span v-show="chwShowTimer" class="chw-pie-num chw-pie-mins"></span><span v-show="chwShowTimer" class="chw-pie-num chw-pie-secs"></span>
</p>
<button v-if="chicknWinnerReady && !hasChwPlayClicked && !isChicknWinnerError" class="ss_button btn_sm btn_yolk bevel_yolk" @click="playIncentivizedAd">{{ playAdText }}</button>
</div>
</div>
<!-- <img src="img/chicken-nugget/speechBubble_static2_tail1.svg" class="chw-bubble-tail box_absolute" alt=""> -->
</div>
<div id="mainHead">
<account-panel id="account_panel" ref="accountPanelHome" :loc="loc" :selected-language-code="currentLanguageCode" :eggs="eggs" :languages="languages" :currentLangOptions="locLanguage" :show-corner-buttons="ui.showCornerButtons" :show-bottom="true" :photo-url="photoUrl" :is-anonymous="isAnonymous" :is-of-age="isOfAge" :show-targeted-ads="showTargetedAds" :ui="ui" :isEggStoreSale="isEggStoreSaleItem" :is-subscriber="isSubscriber" @sign-in-clicked="onSignInClicked" @sign-out-clicked="onSignOutClicked" :is-twitch="twitchLinked"></account-panel>
<!-- <pwa-button :show="ui.showCornerButtons"></pwa-button> -->
<!-- <streamer-panel id="youtube_panel" :streams="youtubeStreams" :title="loc.youtube_title" :viewers="loc.youtube_viewers" icon="ico_youtube"></streamer-panel> -->
</div>
<div id="mainLayout">
<div id="logo">
<a href="https://www.shellshock.io" @click="BAWK.play('ui_click')"><img class="home-screen-logo" src="img/logo.svg"></a>
<img v-if="eggOrg" class="egg-org-logo" src="img/egg-org/logo_EggOrg.svg">
</div>
<div class="main-content">
<div id="panel_front_play">
<div class="front_panel-events center_h">
<!-- <event-panel :show-soon="true" :show-ui="true"></event-panel> -->
<!-- <img @click="onTwitchDropsClick" title="Click here to manage your Twitch account on Shell Shockers" :src="twitchDropsBtnImgSrs" alt="Twitch drops parachute" class="events-twitch-drop"> -->
<button v-if="isTwitchEvent" class="ss_button twitch-btn btn_sm box_relative" @click="onTwitchDropsClick">Twitch Drops! <span v-html="isTwitchLinked"></span> <img class="box_absolute" src="img/twitch-drops/twitch-drops-parachute.svg" alt=""></button>
</div>
<play-panel id="play_game" ref="playPanel" :loc="loc" :player-name="playerName" :game-types="gameTypes" :current-game-type="currentGameType" :is-game-ready='accountSettled' :server-list="serverList" :current-server-id="currentServerId" :home="home" @playerNameChanged="onPlayerNameChanged"></play-panel>
<vip-club-cta :loc="loc" :upgrade-name="upgradeName" :is-upgraded="isUpgraded" :is-subscriber="isSubscriber" :has-mobile-reward="hasMobileReward" :is-black-fryday="isSale" :is-egg-org="eggOrg" :is-twitch-event="isTwitchEvent"></vip-club-cta>
</div>
<div id="panel_front_egg">
<div id="paper_doll_container"
class="paper-doll--click-container" @click="onEggPlayClick"></div>
<stats-panel id="stats_panel" :loc="loc" :kills="kills" :deaths="deaths" :kdr="kdr" :streak="streak"></stats-panel>
<weapon-select-panel id="weapon_select" :loc="loc" :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">
<media-tabs ref="mediaTabs" :loc="loc" :newsfeedItems="newsfeedItems" :twitchStreams="twitchStreams" :youtubeStreams="youtubeStreams"></media-tabs>
<!-- <house-ad-small id="banner-ad" :useAd="ui.houseAds.small"></house-ad-small> -->
<display-ad id="shellshockers_titlescreen_wrap" :hidden="hideAds" ref="titleScreenDisplayAd" class="house-small" :ignoreSize="true" :adUnit="adUnits.display.home" adSize="300x250"></display-ad>
</div>
<!-- <house-ad-small id="banner-ad" :useAd="ui.houseAds.small"></house-ad-small> -->
</div>
<!-- .main-content -->
</div>
<div id="mainFooter">
<!-- <chicken-panel ref="chickenPanel" id="chicken_panel" :local="loc" :do-upgraded="isUpgraded"></chicken-panel> -->
<footer-links-panel id="footer_links_panel" :loc="loc"></footer-links-panel>
</div>
<div id="gameDescription">
<h1 class="text-center">{{ loc.home_desc_about }}</h1>
<p class="text-center">{{ loc.home_desc_pick }}
<svg class="eggIcon"><use xlink:href="#icon-egg"></use></svg>
{{ loc.home_desc_loadout }}
<svg class="eggIcon"><use xlink:href="#icon-egg"></use></svg>
{{ loc.home_desc_madeof }}</p>
<section class="text-center">
<p>{{ loc.home_blocked_start }} Alt URL: geometry.best. {{ loc.home_blocked_end }}</p>
</section>
<div class="display-grid grid-column-2-eq grid-gap-1">
<section>
<p>{{ loc.home_desc_p1 }}</p>
<p>
<img src="img/eggPose05.png" style="width: 350px; float: left; margin-right: 1em; shape-outside: polygon(0% 0%, 100% 0%, 100% 41%, 84% 48%, 80% 63%, 59% 74%, 46% 100%, 0% 99%);">{{ loc.home_desc_p2 }}
</p>
</section>
<section>
<p>
<img src="img/eggPose01.png" style="float: right; margin-left: 1em; margin-top: 1em; shape-outside: polygon(1% 0%, 100% 1%, 100% 99%, 50% 100%, 28% 86%, 16% 68%, 14% 51%, 0 35%);">
{{ loc.home_desc_p3 }} <br /><br />
{{ loc.home_desc_p4 }}
</p>
</section>
</div>
<section>
<header>
<h2 class="text-center">{{ loc.home_game_mode_title }}</h2>
</header>
<ul class="display-grid grid-column-2-eq grid-gap-1">
<li v-html="loc.home_game_mode_content_li_1"></li>
<li v-html="loc.home_game_mode_content_li_2"></li>
<li v-html="loc.home_game_mode_content_li_3"></li>
<li v-html="loc.home_game_mode_content_li_4"></li>
</ul>
</section>
<h2 class="text-center">{{ loc.home_desc_controls }}</h2>
<p class="text-center">{{ loc.home_desc_standard }}</p>
<ul class="display-grid grid-column-2-eq" style="min-width: 25em;max-width: 35em;margin:0 auto">
<li> {{ loc.home_desc_control1 }}</li>
<li> {{ loc.home_desc_control2 }}</li>
<li> {{ loc.home_desc_control3 }}</li>
<li> {{ loc.home_desc_control4 }}</li>
<li> {{ loc.home_desc_control5 }}</li>
<li> {{ loc.home_desc_control6 }}</li>
<li> {{ loc.home_desc_control7 }}</li>
</ul>
<p class="text-center">
<button class="ss_button btn_lg btn_blue bevel_blue" @click="openUnblocked">{{ loc.home_unblocked_text }}</button>
</p>
<p>
{{ loc.home_desc_p7 }}
</p>
<p align="center"><button class="ss_button btn_yolk bevel_yolk" @click="vueApp.scrollToTop()">{{ loc.home_backtotop }}</button></p>
</div>
<!-- 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 text-center">{{ 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 text-center">{{ 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="text-center fullwidth">{{ loc.p_privatematch_gametype }}</h3>
<select name="gameType" v-model="pickedGameType" class="ss_select fullwidth" @click="BAWK.play('ui_click')" @change="onGameTypeChanged">
<option v-for="g in gameTypes" v-bind:value="g.value" :class="'create-game-' + g.locKey" v-html="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 text-center">{{ 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" class="shadow_grey">
{{ vueData.maps[mapIdx].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>{{vueData.maps[mapIdx].numPlayers}}</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', 'isGameReady'],
data: function () {
let mapIdx = Math.randomInt(0, vueData.maps.length);
let map = vueData.maps[mapIdx];
return {
showingServerList: false,
pickedGameType: 0,
gameTypes: vueData.gameTypes,
mapIdx: mapIdx,
mapImgPath: this.mapImgBasePath + map.filename + '.png?' + map.hash,
mapLocKey: map.locKey,
playClickedBeforeReady: false,
vueData,
}
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
onCloseClick: function () {
this.$parent.close();
BAWK.play('ui_popupclose');
},
onServerClick: function () {
this.showingServerList = true;
this.$parent.toggle();
vueApp.$refs.homeScreen.$refs.playPanel.$refs.pickServerPopup.toggle();
BAWK.play('ui_click');
},
onMapChange: function (dir) {
this.selectMapForPickedGameType(dir);
BAWK.play('ui_onchange');
},
selectMapForPickedGameType (dir) {
let idx = this.mapIdx;
for (var i = 0; i < vueData.maps.length; i++) { // Prevent race condition
if (dir) idx = (idx + dir + vueData.maps.length) % vueData.maps.length;
let map = vueData.maps[idx];
let gameTypeShortName = vueData.gameTypeKeys[this.pickedGameType];
if (map.modes[gameTypeShortName]) {
break;
}
if (dir == 0) dir = 1
//idx = (idx + dir + vueData.maps.length) % vueData.maps.length;
}
this.mapImgPath = this.mapImgBasePath + vueData.maps[idx].filename + '.png?' + vueData.maps[idx].hash;
this.mapLocKey = vueData.maps[idx].locKey;
this.mapIdx = idx;
},
onGameTypeChanged () {
BAWK.play('ui_onchange');
this.selectMapForPickedGameType(0);
},
onPlayTypeWhenSignInComplete() {
return this.playClickFunction();
},
onPlaySentBeforeSignIn() {
this.gameClickedBeforeReady = true;
vueApp.showSpinner('signin_auth_title', 'signin_auth_msg');
},
onPlayClick: function () {
this.$parent.close();
if (!this.isGameReady) {
this.onPlaySentBeforeSignIn();
return;
}
vueApp.externPlayObject(vueData.playTypes.createPrivate, this.pickedGameType, this.vueData.playerName, this.mapIdx, '');
BAWK.play('ui_playconfirm');
}
},
watch: {
isGameReady(val) {
if (this.gameClickedBeforeReady && val) {
setTimeout(() => this.onPlayClick(), 700);
}
}
}
};
</script><script id="account-panel-template" type="text/x-template">
<div>
<div id="account_top">
<!-- <eggstore-notify ref="shirtStore" :show="showCornerButtons" :loc="loc" :sku="sku" icon="fa-tshirt" :text-hide="true" text="p_egg_shop_sale_notify" title="account_threadless" color="blue" url="https://bluewizard.threadless.com/" analytics="threadless"></eggstore-notify> -->
<eggstore-notify ref="eggStoreSaleNotify" :text-hide="!hideNewItemNotify" :show="showCornerButtons" :loc="loc" :sku="sku" title="account_premium_item" icon="fa-gem" text="p_egg_shop_sale_notify" analytics="diamond"></eggstore-notify>
<button v-if="showVipButton" @click="onVipClick" class="ss_button btn_yolk bevel_yolk btn_vip" :title="loc['account_vip']" :class="{'has-sub' : isVipLive}"><img src="img/vip-club/vip-club-emblem-sm.png" alt="VIP Emblem"> {{vipButtonText}}</button>
<div class="account_eggs roundme_sm clickme" @click="onEggStoreClick" v-bind:title="loc['account_title_eggshop']">
<button v-if="isAnonymous" type="image" src="img/attention_indicator.png" v-show="showCornerButtons" @click="onAnonWarningClick" class="ss_button btn_yolk bevel_yolk attention_btn" v-bind:title="loc['account_title_shop']"><i class="fas fa-exclamation"></i></button>
<img src="img/ico_goldenEgg.png" class="egg_icon">
<span class="egg_count shadow_blue2_micro">{{ eggBalance }}</span>
</div>
<!-- <input type="image" src="img/ico_nav_leaderboards.png" class="account_icon roundme_sm"> -->
<div id="corner-buttons" v-show="showCornerButtons">
<input type="image" src="img/ico_nav_shop.png" @click="itemStoreClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_shop']">
<!-- <input type="image" src="img/ico_nav_help.png" @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" @click="onSettingsClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_settings']">
<input type="image" src="img/ico_nav_fullscreen.png" v-if="!vueData.isPoki && !crazyGamesActive" @click="onFullscreenClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_fullscreen']">
</div>
</div>
<div id="account_bottom" v-show="showBottom">
<language-selector :languages="languages" :loc="loc" :selectedLanguageCode="selectedLanguageCode" :langOptions="currentLangOptions"></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" class="box_relative" v-show="photoUrl !== null && photoUrl !== undefined && photoUrl !== '' && ! isAnonymous">
<img :src="photoUrl" class="roundme_sm bevel_blue"/>
<div v-if="isTwitch" class="box_aboslute account-panel-twitch roundme_sm" @click="onTwitchIconClick"><i class="fab fa-twitch"></i></div>
</div>
</div>
</div>
</script>
<template id="egg-store-notify">
<div v-if="show" class="egg-store-sale-notify" :class="{'white-blue' : color}" @click="notifyClick">
<button class="account_icon roundme_sm account_icon-item" :title="getTitle"><i aria-hidden="true" class="fas" :class="icon"><span class="hideme">Egg</span></i>
<span class="text" :class="{hideme : textHide}"> {{loc[text]}}</span>
</button>
</div>
</template>
<script>
const compEggStoreSaleNotify = {
template: '#egg-store-notify',
props: ['loc', 'show', 'sku', 'textHide', 'text', 'icon', 'color', 'url', 'title', 'analytics'],
methods: {
notifyClick() {
if (this.analytics) ga('send', 'event', 'header-buttons', 'click', this.analytics);
if (this.url) {
window.open(this.url, '_window');
return;
}
// if (!vueData.firebaseId) {
// vueApp.showGenericPopup('p_redeem_error_no_player_title', 'p_redeem_error_no_player_content', 'ok');
// return;
// }
vueApp.eggStoreReferral = 'Sale notify ref';
if (this.sku) {
return vueApp.showPopupEggStoreSingle(this.sku)
}
return vueApp.onPremiumItemsClicked();
}
},
computed: {
getTitle() {
if (!this.title) return null;
return this.loc[this.title];
}
}
};
</script><script>
var comp_account_panel = {
template: '#account-panel-template',
components: {
'language-selector': comp_language_selector,
'eggstore-notify': compEggStoreSaleNotify,
},
props: ['loc', 'eggs', 'languages', 'selectedLanguageCode', 'showBottom', 'photoUrl', 'isAnonymous', 'isOfAge', 'showTargetedAds', 'showCornerButtons', 'ui', 'isEggStoreSale', 'sku', 'isSubscriber', 'isTwitch', 'currentLangOptions'],
data: function () {
return {
languageCode: this.selectedLanguageCode,
eggBalance: 0,
vueData,
}
},
created() {
this.getEggsLocalStorage();
},
methods: {
getEggsLocalStorage() {
const raw = localStore.getItem('localLoadOut');
if (!raw) {
return;
}
const storage = JSON.parse(raw);
if (!'balance' in storage) {
return;
}
return this.eggBalance = storage.balance;
},
onEggStoreClick: function () {
if (!vueData.firebaseId) {
vueApp.showGenericPopup('p_redeem_error_no_player_title', 'p_redeem_error_no_player_content', 'ok');
return;
}
vueApp.showEggStorePopup();
BAWK.play('ui_popupopen');
this.gaSend('shoppingCart');
},
itemStoreClick: function() {
this.gaSend('openItemShop');
vueApp.switchToEquipUi();
vueApp.$refs.equipScreen.switchToShop();
BAWK.play('ui_popupopen');
},
onHelpClick: function () {
vueApp.showHelpPopup();
this.gaSend('openHelp');
BAWK.play('ui_popupopen');
},
onSettingsClick: function () {
this.gaSend('openSettings');
vueApp.showSettingsPopup();
BAWK.play('ui_popupopen');
},
onFullscreenClick: function () {
extern.toggleFullscreen();
BAWK.play('ui_click');
},
onSignInClicked: function () {
vueApp.setDarkOverlay(true);
this.$emit('sign-in-clicked');
BAWK.play('ui_playconfirm');
},
onSignOutClicked: function () {
vueApp.setDarkOverlay(true);
this.$emit('sign-out-clicked');
BAWK.play('ui_reset');
},
onShareLinkClick: function () {
this.gaSend('openShareLink');
extern.inviteFriends();
},
onAnonWarningClick: function() {
ga('send', 'event', vueApp.googleAnalytics.cat.playerStats, vueApp.googleAnalytics.action.anonymousPopupOpen);
vueApp.showAttentionPopup();
},
onVipClick() {
this.gaSend('openVipPopup');
vueApp.showSubStorePopup();
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'header-buttons', 'click', label);
},
onTwitchIconClick() {
window.open(dynamicContentPrefix + 'twitch');
}
},
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);
},
hideNewItemNotify() {
// if (!ssChangelogDate) return false;
// if (!this.showCornerButtons) return false;
// const lapsed = Date.now() - ssChangelogDate.valueOf(),
// days = Math.floor((lapsed / (60*60*24*1000)));
// if (days <= 5 ) return true;
// return false;
return;
},
vipButtonText() {
return this.isSubscriber && !extern.account.upgradeIsExpired ? '' : this.loc['s-btn-txt-subscribe'];
},
showVipButton() {
return this.ui.showScreen === this.ui.screens.home || this.ui.showScreen === this.ui.screens.equip;
},
isVipLive() {
return this.isSubscriber && !extern.account.upgradeIsExpired;
}
},
watch: {
eggs() {
this.eggBalance = this.eggs;
}
}
};
</script>
<template id="stats_panel_template" type="text/x-template">
<div>
<!-- <h3 class="nospace">{{ loc.home_stats }}</h3> -->
<div class="stats-wrapper">
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.kills.toUpperCase() }}</h4>
<div class="stat_stat">{{ lKills }}</div>
</div>
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.deaths.toUpperCase() }}</h4>
<div class="stat_stat">{{ lDeaths }}</div>
</div>
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.kdr.toUpperCase() }}</h4>
<div class="stat_stat">{{ lKdr }}</div>
</div>
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.streak.toUpperCase() }}</h4>
<div class="stat_stat">{{ lStreak }}</div>
</div>
</div>
</div>
</template>
<script>
var comp_stats_panel = {
template: '#stats_panel_template',
props: ['loc', 'kills', 'deaths', 'kdr', 'streak'],
data: () => {
return {
localLoadOut : Object,
lKills: 0,
lDeaths: 0,
lKdr: 0,
lStreak: 0,
}
},
created() {
this.getStatsLocalStorage();
},
methods: {
getStatsLocalStorage() {
const raw = localStore.getItem('localLoadOut');
if (!raw) {
return;
}
const storage = JSON.parse(raw);
const {kills, deaths, kdr, streak} = storage;
this.lKills = kills;
this.lDeaths = deaths;
this.lKdr = kdr;
this.lStreak = streak;
},
},
watch: {
kills() {
this.lKills = this.kills;
this.lDeaths = this.deaths;
this.lKdr = this.kdr;
this.lStreak = this.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>
<div class="select-box-wrap">
<label for="create-select-type" class="ss_button btn_yolk bevel_yolk"><i class="fas fa-chevron-down"></i></label>
<select id="create-select-type" name="gameType" v-model="pickedGameType" class="ss_select select" @change="onGameTypeChange($event)">
<option v-for="g in gameTypes" v-bind:value="g.value" :class="'game-select-' + g.locKey" v-html="loc[g.locKey]"></option>
</select>
</div>
<br>
<button name="server" @click="onPickServerButtonClick" :disabled="isButtonDisabled" 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_yolk bevel_yolk fullwidth nospace play-button"><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>
<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" :is-game-ready="isGameReady" map-img-base-path="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 text-center" 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="BAWK.play('ui_onchange')">
<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) {
BAWK.play(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();
BAWK.play('ui_popupclose');
},
onConfirmClick: function () {
this.$emit('server-picked', this.serverId);
this.$parent.close();
BAWK.play('ui_playconfirm');
}
}
};
</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', 'isGameReady'],
// mounted() {
// this.kotcPrompt = document.getElementById('kotc-play-kotc');
// this.typeSelect = document.getElementById('create-select-type');
// this.anchorKotcPrompt();
// window.addEventListener('resize', this.anchorKotcPrompt);
// },
data: function() {
return {
pickedServerId: null,
pickedGameType: this.currentGameType,
isButtonDisabled: true,
playClickedBeforeReady: false,
playClickFunction: Function,
kotcPrompt: '',
typeSelect: ''
}
},
methods: {
onPickServerButtonClick: function () {
this.$refs.pickServerPopup.toggle();
BAWK.play('ui_popupopen');
},
onServerPicked: function (serverId) {
if (vueData.currentServerId === serverId) { return; }
vueData.currentServerId = serverId;
extern.selectServer(vueData.currentServerId);
BAWK.play('ui_onchange');
},
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.filterUnicode(event.target.value);
event.target.value = extern.fixStringWidth(event.target.value);
event.target.value = event.target.value.substring(0, 128);
// 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);
BAWK.play('ui_onchange');
},
onPlayTypeWhenSignInComplete() {
return this.playClickFunction();
},
onPlaySentBeforeSignIn(callback) {
this.gameClickedBeforeReady = true;
vueApp.showSpinner('signin_auth_title', 'signin_auth_msg');
this.playClickFunction = callback;
},
hasValidPlayerNameCheck() {
console.log('invalid player name');
vueApp.showGenericPopup('play_pu_name_title', 'play_pu_name_content', 'ok');
vueApp.hideSpinner();
return;
},
onPlayButtonClick: function () {
if (!hasValue(this.playerName)) {
this.hasValidPlayerNameCheck();
return;
}
if (!this.isGameReady) {
this.onPlaySentBeforeSignIn(this.onPlayButtonClick);
return;
}
vueApp.disablePlayButton(true);
vueApp.game.respawnTime = 0;
vueApp.externPlayObject(vueData.playTypes.joinPublic, this.pickedGameType, this.playerName, -1, '');
BAWK.play('ui_playconfirm');
},
onCreatePrivateGameClick: function () {
this.$refs.createPrivateGamePopup.toggle();
BAWK.play('ui_popupopen');
},
onJoinPrivateGameClick: function () {
this.showJoinPrivateGamePopup(vueData.home.joinPrivateGamePopup.code);
BAWK.play('ui_popupopen');
},
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 () {
if (!hasValue(this.playerName)) {
this.hasValidPlayerNameCheck();
return;
}
if (!this.isGameReady) {
this.onPlaySentBeforeSignIn(this.onJoinConfirmed)
return;
}
let match = null;
if (vueData.home.joinPrivateGamePopup.code.match(/\#\w+/)) {
match = vueData.home.joinPrivateGamePopup.code.match(/\#\w+/)[0];
} else if (vueData.home.joinPrivateGamePopup.code.includes('crazyShare')) {
match = vueData.home.joinPrivateGamePopup.code.match(/=\w*$/)[0].substring(1);
}
else { // In case someone copy/pastes the thing without including the #
match = vueData.home.joinPrivateGamePopup.code;
}
if (!match) {
return;
}
vueData.home.joinPrivateGamePopup.code = match;
this.$refs.joinPrivateGamePopup.hide();
vueApp.externPlayObject(vueData.playTypes.joinPrivate, '', this.playerName, '', vueData.home.joinPrivateGamePopup.code);
},
kotcAttachSetup() {
const typePostion = this.typeSelect.getBoundingClientRect();
const kotcPrompt = this.kotcPrompt.getBoundingClientRect();
this.kotcPrompt.style.top = typePostion.top + 'px';
this.kotcPrompt.style.left = typePostion.right + 16 + 'px';
},
anchorKotcPrompt() {
this.$nextTick(() => this.kotcAttachSetup());
}
},
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;
},
isGameReady(val) {
this.isButtonDisabled = val ? false : true;
if (this.gameClickedBeforeReady && val) {
this.onPlayTypeWhenSignInComplete()
}
}
}
};
</script><template id="weaponselect_panel_template" type="text/x-template">
<div :class="{disabled: !vueData.accountSettled}">
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_EggK47.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Soldier)" @click="selectClass(charClass.Soldier)"><span><strong>{{loc.weapon_soldier_title}}:</strong> {{loc.weapon_soldier_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_Scrambler.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Scrambler)" @click="selectClass(charClass.Scrambler)"><span><strong>{{loc.weapon_scrambler_title}}: </strong> {{loc.weapon_scrambler_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_FreeRanger.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Ranger)" @click="selectClass(charClass.Ranger)"><span><strong>{{loc.weapon_ranger_title}}: </strong>{{loc.weapon_ranger_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_RPEGG.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Eggsploder)" @click="selectClass(charClass.Eggsploder)"><span><strong>{{loc.weapon_eggsploder_title}}: </strong> {{loc.weapon_eggsploder_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_Whipper.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Whipper)" @click="selectClass(charClass.Whipper)"><span><strong>{{loc.weapon_whipper_title}}: </strong>{{loc.weapon_whipper_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_Crackshot.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Crackshot)" @click="selectClass(charClass.Crackshot)"><span><strong>{{loc.weapon_crackshot_title}}: </strong>{{loc.weapon_crackshot_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_TriHard.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.TriHard)" @click="selectClass(charClass.TriHard)"><span><strong>{{loc.weapon_trihard_title}}: </strong>{{loc.weapon_trihard_content}}</span>
</div>
</div>
</template>
<script>
var comp_weapon_select_panel = {
template: '#weaponselect_panel_template',
props: ['currentClass', 'loc'],
data: function () {
return {
charClass: CharClass,
vueData,
}
},
methods: {
selectClass: function (classIdx) {
if (!vueData.accountSettled){
return;
}
extern.changeClass(classIdx);
this.$emit('changed-class', classIdx);
BAWK.play('ui_click');
},
addSelectedCssClass: function (classIdx) {
return (this.currentClass === classIdx)
? 'weapon_selected'
: '';
},
}
// watch: {
// accountSettled(val) {
// }
// }
};
</script>
<script id="newsfeed-panel-template" type="text/x-template">
<section class="v_scroll">
<article v-if="items" v-for="item in activeItems" :key="item.id" @click="onItemThatIsClicked(item)" class="news_item roundme_md clickme">
<img :src="imageSrc(item)" class="news_img roundme_sm">
<p>{{ item.content }}</p>
</article>
</section>
</script>
<script>
var comp_newsfeed_panel = {
template: '#newsfeed-panel-template',
props: ['items'],
data: function () {
return vueData;
},
// mounted: function () {
// // this.fetchWebData();
// this.checklocalForNewsData();
// },
methods: {
imageSrc(item) {
return dynamicContentPrefix + 'data/img/newsItems/' + item.id + item.imageExt;
},
onItemThatIsClicked(item) {
console.log(item);
extern.clickedWebFeedItem(item);
BAWK.play('ui_click');
},
},
computed: {
activeItems() {
return this.items.filter(item => item.active);
}
}
};
</script><script id="chicken-panel-template" type="text/x-template">
<div id="showBuyPassDialogButton" class="new">
<div class="chicken-panel--upgraded" v-show="doUpgraded && !isSubscriber">
<div class="tool-tip tool-tip--right">
<span v-if="nugCounter" id="nugget-countdown">{{nugCounter}} Minutes remaining.</span>
<img class="upgraded-nugget" src="img/chicken-nugget/goldenNugget_static.png">
<!-- <div id="nugget-timer" class="nugget-timer--wrapper">
<div class="timer-background"></div>
<div class="timer spinner"></div>
<div class="timer filler"></div>
<div class="mask"></div>
</div> -->
</div>
</div>
<div class="chicken-panel--no-upgraded" v-show="!doUpgraded">
<img src="img/chicken-nugget/starburst.png" @click="onChickenClick" class="clickme starburst">
<img src="img/chicken-nugget/goldenNuggetGIFWIP.gif" @click="onChickenClick" class="clickme nugget-chick">
<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: ['local', 'doUpgraded'],
data: function () {
return vueData;
},
methods: {
onChickenClick: function () {
BAWK.play('ui_chicken');
vueApp.showGoldChickenPopup();
ga('send', 'event', this.googleAnalytics.cat.purchases, 'Golden Chicken Click');
},
},
};
</script><script id="footer-links-panel-template" type="text/x-template">
<footer class="main-footer display-grid grid-column-1-2">
<div class="social-icons">
<social-panel id="social_panel"></social-panel>
</div>
<nav class="footer-nav text-left">
<a @click="onChangelogClicked" class="clickme">{{ version }}</a> |
<!-- <a href="https://shell-shockers.myshopify.com/collections/all" target="_blank" @click="BAWK.play('ui_click')">{{ loc.footer_merchandise }}</a> | -->
<a href="https://www.bluewizard.com/privacypolicy" target="_blank" @click="playSound">{{ loc.footer_privacypolicy }}</a> |
<a href="https://bluewizard.com/terms/" target="_blank" @click="playSound">{{ loc.footer_termsofservice }}</a> |
<button class="ss_button_as_text" @click="onHelpClick">{{ loc['account_title_faq'] }}</button> |
<a href="https://www.bluewizard.com" target="_blank" @click="playSound">© 2022 <img class="main-footer--logo-blue-wiz-mini" src="img/blue-wizard-logo-tiny-min.png" :alt="loc.footer_bluewizard + ' logo'"><span class="hideme">{{ loc.footer_bluewizard }}</span></a>
</nav>
</footer>
</script>
<script id="social-panel-template" type="text/x-template">
<div class="social_icons roundme_sm">
<a href="http://eepurl.com/dFPPwb" target="_blank" class="f_col f_center ss_marginright bg_blue4" @click="playSound('newYolker')">
<div class="icon-wrap bg_blue3 roundme_sm">
<span class="sr-only">Get the Shell Shocker's Newsletter: The New Yolker</span>
<i aria-hidden="true" class="text_blue1 fas fa-envelope-open-text"></i>
</div>
</a>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Facebook" reward="Facebook" url="https://www.facebook.com/bluewizarddigital" img="footer-social-media-bubble-facebook.png" icon="fa-facebook" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Twitter" reward="Twitter" url="https://twitter.com/bluewizardgames" img="footer-social-media-bubble-twitter.png" icon="fa-twitter" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Instagram" reward="Instagram" url="https://www.instagram.com/bluewizardgames/" img="footer-social-media-bubble-instagram.png" icon="fa-instagram" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="TikTok" reward="tiktok" url="https://www.tiktok.com/@bluewizarddigital" img="footer-social-media-bubble-tiktok.png" icon="fa-tiktok" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Discord" reward="discord" url="https://discord.gg/bluewizard" img="footer-social-media-bubble-discord.png" icon="fa-discord" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Steam" reward="Steam" url="https://store.steampowered.com/publisher/bluewizard" img="footer-social-media-bubble-steam.png" icon="fa-steam-symbol" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Twitch" reward="Twitch" url="https://www.twitch.tv/bluewizarddigital" img="footer-social-media-bubble-twitch.png" icon="fa-twitch" :isActive="true"></social-promo>
</div>
</script>
<script id="social-promo-template" type="text/x-template">
<div>
<div v-if="isActive" class="tool-tip" :class="{'active' : isBubbleActive}">
<a :href="url" target="_blank" :title="urlTitle" class="f_col f_center ss_marginright bg_blue4" @click="onClickReward()">
<div class="icon-wrap bg_blue3 roundme_sm">
<span class="sr-only">Vist Shell Shocker's {{ name }} page</span>
<i aria-hidden="true" class="text_blue1 fab" :class="icon"></i>
</div>
</a>
<div class="tool-tip--bubble" v-if="!itemRedeemed && bubbleHover">
<div class="tool-tip--group display-grid grid-column-1-2">
<div class="tool-tip--image box_relative">
<img class="discord-bubble-img box_absolute" :src="imgSrc" :alt="imgAlt">
</div>
<div class="tool-tip--text text-left">
<strong><i>Follow us<br /> on {{name}}</i></strong> <br /> for a free Hat!
</div>
</div>
<!-- .tool-tip--group -->
</div>
<!-- .tool-tip--bubble -->
</div>
<!-- .tool-tip -->
<a v-if="!isActive" :href="url" target="_blank" class="f_col f_center ss_marginright bg_blue4" @click="onClickReward()">
<div class="icon-wrap bg_blue3 roundme_sm">
<span class="sr-only">Vist Shell Shocker's {{ name }} page</span>
<i aria-hidden="true" class="text_blue1 fab" :class="icon"></i>
</div>
</a>
</div>
</script>
<script>
var COMPSOCIALPROMO = {
template: '#social-promo-template',
props: ['name', 'reward', 'url', 'img', 'icon', 'isActive'],
data: function () {
return {
isBubbleActive: true,
bubbleRepeat : '',
bubbleHover: true,
}
},
created() {
this.discordBubbleTimer();
},
methods: {
playSound (label) {
BAWK.play('ui_click');
this.gaSend(label);
},
discordBubbleTimer() {
if (this.itemRedeemed) {
this.isBubbleActive = false;
this.bubbleHover = false;
return;
}
this.bubbleRepeat = setInterval(() => {
this.isBubbleActive = this.isBubbleActive ? false : true;
}, 3000);
},
onClickReward() {
this.gaSend(this.reward);
console.log('onClickReward', this.reward);
const rewardGiven = localStore.getItem(`${this.reward}Rewarded`);
if (!hasValue(rewardGiven)) {
extern.socialReward(this.reward);
}
this.playSound();
this.isBubbleActive = false;
this.bubbleHover = false;
if (this.bubbleRepeat) {
clearInterval(this.bubbleRepeat);
}
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'social-buttons', 'click', label);
}
},
computed: {
itemRedeemed() {
return localStore.getItem(this.reward + 'Rewarded');
},
urlTitle() {
return `Blue Wizard ${this.name} page`;
},
imgAlt() {
return `Join Blue Wizard's ${this.name} page`;
},
imgSrc() {
return `img/social-media/${this.img}`;
}
}
};
</script><script>
var comp_social_panel = {
template: '#social-panel-template',
components: {
'social-promo': COMPSOCIALPROMO
},
data: function () {
return {
isBubbleActive: true,
bubbleRepeat : '',
bubbleHover: true,
rewardName: 'Twitch'
}
},
created() {
this.discordBubbleTimer();
},
methods: {
playSound (label) {
BAWK.play('ui_click');
this.gaSend(label);
},
discordBubbleTimer() {
if (this.itemRedeemed) {
this.isBubbleActive = false;
this.bubbleHover = false;
return;
}
this.bubbleRepeat = setInterval(() => {
this.isBubbleActive = this.isBubbleActive ? false : true;
}, 3000);
},
onClickReward(type) {
this.gaSend(type);
console.log('onClickReward', type);
const rewardGiven = localStore.getItem(`${type}Rewarded`);
if (!hasValue(rewardGiven)) {
extern.socialReward(type);
}
this.playSound();
this.isBubbleActive = false;
this.bubbleHover = false;
if (this.bubbleRepeat) {
clearInterval(this.bubbleRepeat);
}
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'social-buttons', 'click', label);
}
},
computed: {
itemRedeemed() {
return localStore.getItem(this.rewardName + 'Rewarded');
},
}
};
</script>
<script>
var comp_footer_links_panel = {
template: '#footer-links-panel-template',
components: {
'social-panel': comp_social_panel,
},
props: ['loc'],
data: function () {
return {
version: version
}
},
methods: {
onChangelogClicked: function () {
vueApp.showChangelogPopup();
BAWK.play('ui_popupopen');
},
playSound() {
BAWK.play('ui_click');
},
onHelpClick() {
vueApp.showHelpPopup();
this.gaSend('openHelp');
BAWK.play('ui_popupopen');
}
}
};
</script>
<template id="comp-vip-cta">
<div class="vip-club-cta" v-on:click="onClicked">
<button v-if="!isSubscriber && !isUpgraded && showVip" class="vip-club-cta-pos ss_button btn_sm btn_pink bevel_pink">
{{ loc.ui_game_playeractions_join_vip }}
</button>
<h4 v-if="isUpgraded && isSubscriber && showVip" class="sub-name">
{{loc[subName]}}
</h4>
<img class="roundme_md" :class="{ 'egg-org-img' : isEggOrg }" :src="getImgSrc" :alt="getImgSrcAlt">
</div>
</template>
<script>
const compVipCta = {
template: '#comp-vip-cta',
props: ['loc', 'upgradeName', 'isUpgraded', 'isSubscriber', 'hasMobileReward', 'isBlackFryday', 'isEggOrg', 'isTwitchEvent'],
data() {
return {
subName: '',
hasPlayedKotc: null,
kotcImgSrc: 'img/kotc/new-game-mode-king-of-coop.png',
vipImgSrc: 'img/vip-club/vip-club-call-to-action.png',
mobileImgSrc: 'img/mobile/shell-mobile-cta-min.png',
blackFrydayImgSrc: 'img/store-black-friday/black-fryday-home-screen-ad.png',
helpUkraine: 'img/stand-with-ukraine-min.png',
eggOrg: 'img/egg-org/eggOrg_timeTravel_houseAd2-min.jpg',
twitchSrc: 'img/twitch-drops/TwitchDrops2022-HouseAd_536x307-min.jpg'
};
},
mounted() {
this.hasPlayedKotc = localStore.getItem('hasPlayedKotc');
},
methods: {
onClicked() {
if (this.isEggOrg) {
vueApp.showSelectedTaggedItemsOnEquipScreen('EGGORG');
ga('send', 'event', 'home-display-ad', 'click', 'egg-org');
return;
}
// above all else show sale
if (this.isBlackFryday) {
vueApp.showEggStorePopup();
ga('send', 'event', 'home-display-ad', 'click', 'black-fryday');
return;
}
// promote KOTC
if (this.hasPlayedKotc) {
ga('send', 'event', 'home-display-ad', 'click', 'item_hat_ukraine');
// ga('send', 'event', 'home-display-ad', 'click', 'kotc-popup');
// vueApp.showKotcInstrucPopup();
vueApp.showPopupEggStoreSingle('item_hat_ukraine');
// localStore.setItem('hasPlayedKotc', true);
return;
}
if (this.isTwitchEvent) {
ga('send', 'event', 'home-display-ad', 'click', 'twitch-drops');
open('https://shellshock.io/twitch/?utm_medium=referral&utm_campaign=featureslot', '_blank');
}
// if has mobile item
if (this.hasMobileReward) {
let vipType = 'vip-ad';
if (this.isUpgraded && this.sSubscriber) {
let vipType = 'vip-manage';
}
ga('send', 'event', 'home-display-ad', 'click', vipType);
vueApp.showSubStorePopup();
return;
} else {
ga('send', 'event', 'home-display-ad', 'click', 'mobile-ad');
vueApp.showGetMobilePopup();
}
},
test() {
this.isBlackFryday = false;
this.hasPlayedKotc = true;
this.hasMobileReward = true;
}
},
computed: {
getImgSrc() {
if (this.isEggOrg) {
return this.eggOrg;
}
if (this.isBlackFryday) {
return this.blackFrydayImgSrc;
}
if (this.hasPlayedKotc) {
return this.kotcImgSrc;
}
if (this.hasMobileReward) {
return this.vipImgSrc;
} else {
return this.mobileImgSrc;
}
if (this.isTwitchEvent) {
return twitchSrc;
}
},
getImgSrcAlt() {
if (this.isEggOrg) {
return 'EggOrg is back!';
}
if (this.isBlackFryday) {
return 'BLACK FRYDAY SALE!';
}
if (this.hasPlayedKotc) {
return 'Click to learn how to play King of the Coop!;';
}
if (this.hasMobileReward) {
return 'Manage VIP';
} else {
return 'Download mobile today!';
}
if (this.isTwitchEvent) {
return 'Get your drops today!';
}
},
showVip() {
return false;
if (!this.hasPlayedKotc || !this.hasMobileReward || this.isBlackFryday) {
return false;
} else {
return true;
}
},
},
watch: {
upgradeName(val) {
if (!hasValue(val)) {
return;
}
this.subName = `s-${val.replace(' ', '-').toLowerCase().replace(' ', '-')}-title`;
}
}
};
</script><script id="media-tabs-template" type="text/x-template">
<div class="media-tabs-container">
<div id="horizontalTabs" class="media-tab-container">
<button id="news-tab" @click="selectTab" class="media-tab ss_smtab ss_marginright" :class="(showNewsTab ? 'selected' : '')"><i class="fas fa-bullhorn"></i></button>
<button id="twitch-tab" @click="selectTab" class="media-tab ss_smtab ss_marginright" :class="(showTwitchTab ? 'selected' : '')"><i class="fab fa-twitch"></i></button>
<button id="video-tab" v-if="youtubeStreams.length > 0" @click="selectTab" class="media-tab ss_smtab" :class="(showVideoTab ? 'selected' : '')"><i class="fab fa-youtube"></i></button>
</div>
<div class="front_panel media-tabs-content roundme_sm f_col" :class="{'tab-news-active' : showNewsTab}">
<div id="news-tab" v-show="showNewsTab">
<h3 class="nospace shadow_blue4 text_white">{{ loc.home_latestnews }}</h3>
<div class="news-container f_row ss_margintop">
<div class="news_mask"></div>
<newsfeed-panel id="news_scroll" class="home-tab-scroll" ref="newsScroll" :items="newsfeedItems"></newsfeed-panel>
</div>
</div>
<!-- #news-tab -->
<div id="twitch-tab" v-show="showTwitchTab">
<h3 class="nospace shadow_blue4 text_white">
Twitch <button id="tab-twitch-btn" @click="onApplyNowClick" class="ss_button btn_md btn_yolk btn-media bevel_yolk">{{loc.home_media_apply_now}}</button>
</h3>
<div class="f_row ss_margintop">
<streamer-panel id="twitch_panel" :loc="loc" :streams="twitchStreams" :title="loc.twitch_title" :viewers="loc.twitch_viewers" icon="ico_twitch"></streamer-panel>
</div>
</div>
<!-- #twitch-tab -->
<div id="video-tab" v-show="showVideoTab">
<h3 class="nospace shadow_blue4 text_white">
YouTube <button id="tab-youtube-btn" @click="onApplyNowClick" class="ss_button btn_md btn_yolk btn-media bevel_yolk">{{loc.home_media_apply_now}}</button>
</h3>
<div class="news-container f_row ss_margintop">
<div class="news_mask"></div>
<div id="yTube-scroll" class="home-tab-scroll v_scroll">
<div v-for="item in youtubeStreams" :key="item.id" v-if="item.active" @click="onVideoClick(item)" class="news_item ytube-item roundme_md clickme">
<div class="image-wrap news_img roundme_sm">
<img :src="item.externalImg" alt="" class="news_img roundme_sm" />
</div>
<div class="content-wrap f_col f_space_between">
<p><strong>{{ item.title }}</strong></p>
<p v-if="item.desc">{{ item.desc }}</p>
<p class="text-right">{{ item.author }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .media-tabs-content -->
</div>
<!-- .media-tabs-container -->
</script>
<script id="streamer-panel-template" type="text/x-template">
<div class="panel_streamer noscroll">
<div v-if="show" id="stream_mask"></div>
<div id="stream_scroll" class="home-tab-scroll v_scroll" v-show="show">
<div class="stream_item roundme_sm clickme" v-for="s in streams">
<a :href="s.link" target="_blank" @click="BAWK.play('ui_click')" class="display-grid grid-column-1-2">
<img :src="s.image" class="stream_img roundme_sm">
<span>
<p class="stream_name">{{ s.name }}</p>
<p class="stream_viewers">{{ s.viewers }} {{ viewers }}</p>
</span>
</a>
</div>
</div>
<div class="no-stream roundme_sm" v-if="!show">
<p v-html="loc.twitch_no_steam"></p>
</div>
</div>
</script>
<script>
var comp_streamer_panel = {
template: '#streamer-panel-template',
props: ['streams', 'title', 'viewers', 'icon', 'loc'],
methods: {
playSound (sound) {
BAWK.play(sound);
}
},
computed: {
show: function() {
if (!this.streams) {
return false;
}
return this.streams.length > 0;
}
}
};
</script>
<script>
const MEDIATABS = {
template: '#media-tabs-template',
components: {
'newsfeed-panel': comp_newsfeed_panel,
'streamer-panel': comp_streamer_panel,
},
props: ['loc', 'newsfeedItems', 'twitchStreams', 'youtubeStreams'],
created() {
this.$nextTick(() => {
this.randomTabSelect();
});
},
mounted() {
// VUE!!!!!!!!!!!
setTimeout(() => this.getAllTabs(), 500);
},
data: function () {
return {
mediaTabs: [],
mediaTabsCount: 0,
rotateTimeout: '',
showNewsTab: false,
showTwitchTab: false,
showVideoTab: false,
currentTab: ''
}
},
methods: {
getAllTabs() {
this.$nextTick(() => {
let ids = [],
tabs = Array.from(document.querySelectorAll('.media-tab')).forEach(tab => ids.push(tab.id));
this.mediaTabs = ids;
this.mediaTabsCount = this.mediaTabs.length - 1;
this.autoRotateTabs();
});
},
selectTab: function (e) {
ga('send', 'event', 'media-tabs', 'click', e.currentTarget.id);
return this.switchTab(e.currentTarget.id, true, true)
},
autoRotateTabs() {
let nextIdx = this.mediaTabs.indexOf(this.currentTab) + 1;
if (nextIdx > this.mediaTabsCount) nextIdx = 0;
this.rotateTimeout = setTimeout(() => {
this.switchTab(this.mediaTabs[nextIdx], false, false);
this.autoRotateTabs();
}, 10000);
},
randomTabSelect() {
let n = Math.floor(Math.random() * 9);
if (n >= 0 && n <= 2) {
this.showNewsTab = true;
this.currentTab = 'news-tab';
} else if (n >= 3 && n <= 5) {
this.showTwitchTab = true;
this.currentTab = 'twitch-tab';
} else {
this.showVideoTab = true;
this.currentTab = 'video-tab';
}
},
onVideoClick(item) {
ga('send', 'creator', 'videoClick', item.title);
window.open(item.link, '_window');
},
onApplyNowClick(e) {
ga('send', 'creator', 'applyNow', e.target.id);
window.open('https://shellcreators.bluewizard.com', '_window');
},
switchTab(tab, sound, click) {
this.showNewsTab = false;
this.showTwitchTab = false;
this.showVideoTab = false;
switch (tab) {
case 'news-tab':
this.currentTab = 'news-tab';
this.showNewsTab = true;
break;
case 'twitch-tab':
this.currentTab = 'twitch-tab';
this.showTwitchTab = true;
break;
case 'video-tab':
this.currentTab = 'video-tab';
this.showVideoTab = true;
break;
}
if (sound) {
BAWK.play('ui_toggletab');
}
if (click) {
ga('send', 'creator', 'tabClick', this.currentTab);
this.cancelRotate(false);
}
},
cancelRotate(stop) {
clearTimeout(this.rotateTimeout);
this.rotateTimeout = '';
if (!stop) {
this.autoRotateTabs();
}
}
}
};
</script><template id="music-widget">
<div v-if="isMusic" class="music-widget roundme_md" :class="[!show ? hideClass : '']">
<div v-if="theAudio" class="music-widget--wrapper flex flex-nowrap">
<figure class="music-widget--content">
<header class=" roundme_md">
<h3 class="music-widget--now-playing">{{ loc.musicwidget_now_playing }}</h3>
</header>
<figcaption class="music-widget--content-wrapper">
<h4 class="music-widget--album-title">{{ serverTracks.artist }}</h4>
</figcaption>
<figcaption class="music-widget--content-wrapper">
<p v-if="serverTracks.url" class="music-widget--song-title"><a @click="gaSendEvent('click-track', getTitleAlbum)" :href="serverTracks.url" :title="theTitleAttr" target="_blank">{{ getTitleAlbum }}</a></p>
<p v-else class="music-widget--song-title">{{ getTitleAlbum }}</p>
</figcaption>
<div v-if="volumeSlider" v-for="t in settingsUi.adjusters.music" class="music-widget--volume-control nowrap">
<slider-component :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="volumeControl"></slider-component>
</div>
</figure>
<div class="music-widget--cover-image music-widget--cover-controls roundme_md">
<template v-if="serverTracks.url">
<a v-if="serverTracks.albumArt" @click="gaSendEvent('click-albumArt', getTitleAlbum)" :href="serverTracks.url" :title="theTitleAttr" class="ss-absolute" target="_blank"><img :src="serverTracks.albumArt" class="roundme_md ss-absolute" :alt="serverTracks.album" /></a>
</template>
<template v-else>
<img v-if="serverTracks.albumArt" :src="serverTracks.albumArt" class="ss-absolute roundme_md" alt="Album cover art for" :alt="serverTracks.album" />
</template>
<button v-if="playBtn" @click="playAudio">
<i v-if="playing" class="music-widget--cover-control-icon music-widget--cover-control-pause far fa-pause-circle fa-2x"></i>
<i v-if="!playing" class="music-widget--cover-control-icon music-widget--cover-control-pause far fa-play-circle fa-2x"></i>
</button>
</div>
<div class="music-widget--sponsor">
<a @click="gaSendEvent('click-sponsor', sponsor.name)" v-if="sponsor" :href="sponsor.link" :title="getSponsorTitleAttr" target="_blank"><img :src="getSponsorImg" class="music-widget--sponsor-icon" :alt="sponsor.name" /><span class="hideme">{{sponsor.name}}</span></a>
<button v-if="settings" @click="openSettings" class="music-widget--sponsor--settings-btn"><i class="fas fa-cog"></i><span class="hideme">Music Settings</span></button>
<button class="music-widget--sponsor--settings-btn" @click="toggleMusic"><i class="fas" aria-hidden="true" :class="togglePlayStopIcon"></i><span class="hideme">Music</span></button>
</div>
</div>
</div>
</template>
<script>
const createMusicWidget = templateId => {
return {
template: '#music-widget',
props: ['loc','volumeSlider', 'playBtn', 'settings', 'settingsUi', 'show'],
components: {
'slider-component': comp_settings_adjuster
},
data () {
return vueData.music;
},
mounted () {
this.theAudio = document.getElementById('theAudio');
},
methods: {
loadVolume() {
this.$nextTick(() => {
this.theAudio.volume = Number(this.settingsUi.adjusters.music[0].value);
});
},
getAudioServer() {
if (parsedUrl.dom == 'localhost' || parsedUrl.dom == 'dev' || parsedUrl.dom == 'localshelldev') {
var url = 'uswest2-music.shellshock.io';
}
else {
var server = vueApp.serverList.filter(server => server.locKey === vueApp.currentServerLocKey)[0];
var url = server.subdom.slice(0, -1) + '-music.' + parsedUrl.dom + '.' + parsedUrl.top;
}
this.musicSrc = 'https://' + url + '/shellshock.ogg';
},
setIndex(k) {
this.$nextTick(() => {
this.play();
})
this.currIndex = k;
},
play() {
if (!this.isMusic) return;
this.getAudioServer();
},
playMusic() {
// var audio = this.theAudio;
this.theAudio.src = this.musicSrc;
console.log('Play Music');
clearInterval(this.timer);
this.theAudio.play()
.then( // Returns a Promise
() => { // Success
this.playing = true;
this.loadVolume();
this.duration = this.theAudio.duration;
this.theAudio.addEventListener('stalled', () => this.isMusic = false);
},
() => { // Fail
// What to do... just try again after a few seconds, I guess?
setTimeout(() => this.play(), 2000);
}
);
},
pause() {
this.playing = false;
this.theAudio.pause();
clearInterval(this.timer);
},
/*
next() {
if (this.currIndex < this.tracks.length - 1) {
this.currIndex++;
} else {
this.currIndex = 0;
}
},
prev() {
if (this.currIndex > 0) {
this.currIndex--;
} else {
this.currIndex = this.tracks.length - 1;
}
},
*/
playOnce() {
if (this.playing) return;
return this.play();
},
playAudio() {
if (this.theAudio.paused) {
this.play();
} else {
this.pause();
}
},
openSettings() {
vueApp.showSettingsPopup();
vueApp.onSettingsPopupSwitchTabMisc();
this.gaSendEvent('click', 'widgetOpenSettings');
},
volumeControl(id, value) {
extern.setMusicVolume(value);
vueApp.onSettingsQuickSave();
},
hideMe() {
return this.$refs.id.classList.addClass('fade-out-3');
},
showMe() {
this.show = true;
setTimeout(() => this.show = false, 2000);
},
gaSendEvent(action, label) {
action = action || '';
label = label || '';
return ga('send', 'event', 'music', action, label);
},
toggleMusic() {
if (this.playing) {
this.theAudio.removeEventListener('stalled', () => this.isMusic = false);
this.playing = false;
this.pause();
this.musicSrc = '';
this.theAudio.removeAttribute('src');
extern.setMusicStatus(false);
this.gaSendEvent('toggleMusic', 'off');
return;
}
this.theAudio.src = '';
this.play();
extern.setMusicStatus(true);
this.gaSendEvent('toggleMusic', 'on');
},
changeVolume(val) {
this.theAudio.volume = val;
}
},
watch: {
'currIndex': {
handler() {
this.$nextTick(() => {
this.play();
})
}
},
serverTracks(val) {
let sponsor = this.sponsors.filter(sponsor => sponsor.id === val.sponsor);
this.sponsor = sponsor.length || sponsor.length > 0 ? sponsor[0] : '';
},
musicSrc(val) {
if (val) {
this.playMusic();
}
},
},
computed: {
theTitleAttr() {
return 'Read more about ' + this.serverTracks.title;
},
getTitleAlbum() {
return this.serverTracks.title + ' - ' + this.serverTracks.album;
},
getSponsorImg() {
if (!this.sponsor) {
return;
}
return 'data/img/sponsor/' + this.sponsor.id + this.sponsor.imageExt;
},
getSponsorTitleAttr() {
return 'See more about our sponsor ' + this.sponsor.name;
},
togglePlayStopIcon() {
return this.playing ? 'fa-stop-circle' : 'fa-play-circle';
},
},
};
};
// Register component globally
Vue.component('music-widget', createMusicWidget('#music-widget'));
</script>
<script>
var comp_home_screen = {
template: '#home-screen-template',
components: {
'stats-panel': comp_stats_panel,
'play-panel': comp_play_panel,
'weapon-select-panel': comp_weapon_select_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,
'event-panel': comp_events,
'vip-club-cta': compVipCta,
'media-tabs': MEDIATABS
// 'pwa-button': comp_pwa_btn,
},
data: function () {
return vueData;
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
onEquipClicked: function () {
vueApp.switchToEquipUi();
BAWK.play('ui_equip');
},
showSignIn: function () {
extern.showSignInDialog();
vueApp.$refs.firebaseSignInPopup.show();
},
onSignInClicked: function () {
this.showSignIn();
},
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;
this.urlParamSet = this.urlParams ? true : null;
// vueApp.showTitleScreenAd();
vueApp.shellShockUrlParamaterEvents();
},
onPlayerNameChanged: function (newName) {
console.log('play name event handler');
vueApp.setPlayerName(newName);
BAWK.play('ui_onchange');
},
onEggPlayClick() {
play: 'play game',
ga('send', 'event', vueData.googleAnalytics.cat.play, vueData.googleAnalytics.action.eggDollClick);
vueApp.$refs.homeScreen.$refs.playPanel.onPlayButtonClick();
},
api_incentivizedVideoRewardRequest() {
extern.api_incentivizedVideoRewardRequested();
},
onTwitchDropsClick() {
window.open(dynamicContentPrefix + 'twitch');
},
showNuggyPopup() {
vueApp.showChicknWinnerPopup();
},
playIncentivizedAd(e) {
if (!this.chicknWinnerReady || this.hasChwPlayClicked) {
e.preventDefault();
return;
}
ga('send', 'event', 'Chickn Winner', 'Free eggs btn', 'click-home');
this.hasChwPlayClicked = true;
vueApp.loadNuggetVideo();
vueApp.chicknWinnerNotReady();
},
chwStopCycle() {
if (this.chwHomeTimer) {
clearInterval(this.chwHomeTimer);
this.chwHomeTimer = '';
this.chwHomeEl.classList.remove('.active');
}
},
chwShowCycle() {
this.chwHomeEl = document.querySelector('.chw-home-timer');
if (this.chwHomeEl) {
this.chwHomeTimer = setInterval(() => {
this.chwHomeEl.classList.toggle('active');
}, this.chwActiveTimer);
}
},
openUnblocked() {
if (crazyGamesActive) {
window.open('https://scrambled.world/unblocked');
}
else {
window.open("unblocked");
}
}
},
computed: {
isEggStoreSaleItem() {
return this.eggStoreItems.some( item => item['salePrice'] !== '');
},
twitchDropsBtnImgSrs() {
if (this.twitchLinked) {
return '../img/events/twitch-drops-btn-linked.png';
}
return '../img/events/twitch-drops-btn-link-now.png';
},
remainingMsg() {
if (this.isChicknWinnerError) {
return this.loc.chw_error_text;
}
if (this.chicknWinnerDailyLimitReached && this.chicknWinnerCounter > 0) {
return this.loc.chw_daily_limit_msg;
}
if (this.chicknWinnerReady) {
if (this.chicknWinnerCounter === 0) {
return this.loc.chw_ready_msg;
} else {
return this.loc.chw_cooldown_msg;
}
} else {
return this.loc.chw_time_until;
}
},
progressBarWrapClass() {
if (this.chicknWinnerReady) {
return 'chw-progress-bar-wrap-complete';
}
},
playAdText() {
if (this.chicknWinnerReady && this.chicknWinnerCounter === 0) {
return this.loc.chw_btn_free_reward;
} else {
return this.loc.chw_btn_free_reward;
}
},
chwClass() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'grid-column-1-eq';
} else {
if (this.chicknWinnerReady) {
return 'grid-column-1-eq';
} else {
return 'grid-column-1-2';
}
}
},
chwHomeTimerCls() {
//{'chw-home-screen-max-watched': chicknWinnerDailyLimitReached}
if (this.chicknWinnerDailyLimitReached) {
return 'chw-home-screen-max-watched';
} else {
if (this.chicknWinnerReady) {
return 'is-ready active';
} else {
return 'not-ready';
}
}
},
chwChickSrc() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'img/chicken-nugget/chickLoop_daily_limit.svg';
} else {
if (!this.chicknWinnerReady) {
return 'img/chicken-nugget/chickLoop_sleep.svg';
} else {
return 'img/chicken-nugget/chickLoop_speak.svg';
}
}
},
chwShowTimer() {
if (this.chicknWinnerDailyLimitReached) {
// this.chwStopCycle();
return false;
} else {
if (this.chicknWinnerReady) {
this.chwShowCycle();
return false;
} else {
// this.chwStopCycle();
return true;
}
}
},
isTwitchLinked() {
if (this.twitchLinked) return '<i class="fas fa-check-circle text_twitch_yellow"></i>';
return '<i class="fas fa-times-circle text_grey"></i>';
}
}
};
</script><script id="equip-screen-template" type="text/x-template">
<div id="#equip_wrapper">
<div id="mainHead">
<account-panel id="account_panel" ref="accountPanelEquip" :loc="loc" :eggs="eggs" :show-corner-buttons="ui.showCornerButtons" :ui="ui" :show-bottom="false" :is-anonymous="isAnonymous" :isEggStoreSale="isEggStoreSaleItem" :is-subscriber="isSubscriber" :currentLangOptions="locLanguage" :is-twitch="twitchLinked"></account-panel>
</div>
<div id="equip_box" class="main-content">
<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" :grenade-item="equip.equippedGrenade" @equipped-type-selected="onEquippedTypeSelected"></equipped-slots>
<color-select id="equip.equipped_slots" ref="colorSelect" :loc="loc" :is-upgrade="isUpgraded" :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" :disabled="!accountSettled" :class="getButtonToggleClass(equip.equipModes.shop)" @click="switchToShop">{{ loc.eq_shop }}</i></button>
</div>
<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" @premium-items-clicked="onPremiumItemsClicked"></item-type-selector>
<div id="equip_purchase_top" class="equip_purchase_top">
<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>
</div>
<div id="equip_weapon_panel">
<weapon-select-panel id="weapon_select" ref="weapon_select":current-class="classIdx" :loc="loc" @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">
<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>
<!-- Popup: Buy Item -->
<small-popup id="buyItemPopup" ref="buyItemPopup" @popup-confirm="onBuyItemConfirm">
<template slot="header">{{ loc.p_buy_item_title }}</template>
<template slot="content">
<div>
<canvas id="buyItemCanvas" ref="buyItemCanvas" width="250" height="250"></canvas>
</div>
<div class="f_row f_center">
<img v-if="!isBuyingItemPrem" src="img/ico_goldenEgg.png" class="egg_icon"/>
<i v-else class="fas fa-dollar-sign"></i>
<h1>{{ (equip.buyingItem) ? equip.buyingItem.price : '' }}</h1>
</div>
</template>
<template slot="cancel">{{ loc.p_buy_item_cancel }}</template>
<template slot="confirm">{{ loc.p_buy_item_confirm }}</template>
</small-popup>
<!-- Popup: Redeem Code -->
<small-popup id="redeemCodePopup" ref="redeemCodePopup" :popup-model="equip.redeemCodePopup" @popup-confirm="onRedeemCodeConfirm">
<template slot="header">{{ loc.p_redeem_code_title }}</template>
<template slot="content">
<div class="error_text shadow_red" v-show="equip.redeemCodePopup.showInvalidCodeMsg">{{ loc.p_redeem_code_no_code }}</div>
<p><input type="text" class="ss_field ss_margintop ss_marginbottom text-center width_lg" v-model="equip.redeemCodePopup.code" v-bind:placeholder="loc.p_redeem_code_enter"></p>
</template>
<template slot="cancel">{{ loc.cancel }}</template>
<template slot="confirm">{{ loc.confirm }}</template>
</small-popup>
<!-- Popup: Physical Unlock -->
<small-popup id="physicalUnlockPopup" ref="physicalUnlockPopup" :popup-model="equip.physicalUnlockPopup" @popup-confirm="onPhysicalUnlockConfirm">
<template slot="header">{{ loc.p_physical_unlock_title }}</template>
<template slot="content">
<div v-if="(equip.physicalUnlockPopup.item !== null)">
<div>
<item :item="equip.physicalUnlockPopup.item" :isSelected="false" :show-item-only="true"></item>
<div class="f_row f_center">
<img src="img/ico_goldenEgg.png" class="egg_icon"/>
<h1>{{ loc.p_buy_special_price }}</h1>
</div>
</div>
<div class="popup_sm__item_desc">
{{ loc[equip.physicalUnlockPopup.item.item_data.physicalUnlockLocKey] }}
</div>
</div>
</template>
<template slot="cancel">{{ loc.cancel }}</template>
<template slot="confirm">{{ loc.confirm }}</template>
</small-popup>
</div>
</script>
<script id="equipped-slots-template" type="text/x-template">
<div>
<h3 class="margins_sm">{{ loc.eq_equipped }}</h3>
<div id="equip_equippedslots">
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Primary)">
<item id="primary_item" ref="primary_item" v-if="primaryItem" :item="primaryItem" class="equip_icon" :equippedSlot="true"></item>
<div v-if="!primaryItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_weaponPrimary.svg" alt="Primary equip slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Secondary)">
<item id="secondary_item" ref="secondary_item" v-if="secondaryItem" :item="secondaryItem" class="equip_icon" :equippedSlot="true"></item>
<div v-if="!secondaryItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_weaponSecondary.svg" alt="Secondary equip slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Grenade)">
<item id="grenade_item" ref="grenade_item" v-if="grenadeItem" :item="grenadeItem" class="equip_icon" :equippedSlot="true"></item>
<div v-if="!grenadeItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_grenade.svg" alt="Grenade equip slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Hat)">
<item id="hat_item" ref="hat_item" v-if="hatItem" :item="hatItem" :equippedSlot="true"></item>
<div v-if="!hatItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_hat.svg" alt="Hat item slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Stamp)">
<item id="stamp_item" ref="stamp_item" v-if="stampItem" :item="stampItem" :equippedSlot="true"></item>
<div v-if="!stampItem" class="equip_icon equip_icon_stamp equip_icon_no_item"><img src="img/inventory-icons/ico_stamp.svg" alt="Stamp item slot"></div>
</div>
</div>
</div>
</script>
<script>
var comp_equipped_slots = {
template: '#equipped-slots-template',
components: { 'item': comp_item },
props: ['loc', 'primaryItem', 'secondaryItem', 'hatItem', 'stampItem', 'grenadeItem'],
data: function () {
return {
itemType: ItemType
}
},
methods: {
onClick: function (itemType) {
this.$emit('equipped-type-selected', itemType);
}
},
computed: {
emptyHatClass: function () {
return (this.hatItem === null) ? 'equip_icon_hat' : '';
},
emptyStampClass: function () {
return (this.stampItem === null) ? 'equip_icon_stamp' : '';
}
}
};
</script><script id="color-select-template" type="text/x-template">
<div>
<h3 class="margins_sm">{{ loc.eq_color }}</h3>
<div id="equip_free_colors" class="text-center">
<svg v-for="(c, index) in freeColors" class="eggIcon equip_color" :style="{ color: c }" :class="isSelectedClass(index)" @click="onClick(index)"><use xlink:href="#icon-egg"></use></svg>
</div>
<div id="equip_paid_colors" class="text-center ss_marginbottom_lg">
<svg v-for="(c, index) in paidColors" class="eggIcon equip_color" :style="{ color: c }" :class="isSelectedClass(index + freeColors.length)" @click="onClick(index + freeColors.length)"><use :xlink:href="getExtraColorEggIcon"></use></svg>
</div>
</div>
</script>
<script>
var comp_color_select = {
template: '#color-select-template',
props: ['loc', 'colorIdx', 'extraColorsLocked', 'isUpgrade'],
data: function () {
return {
freeColors: freeColors,
paidColors: paidColors
}
},
methods: {
isSelectedClass: function (idx) {
return (idx === this.colorIdx) ? 'selected' : ''
},
onClick: function (idx) {
if (idx >= freeColors.length && this.extraColorsLocked === true) {
vueApp.showSubStorePopup();
// BAWK.play('ui_chicken');
return;
}
this.$emit('color-changed', idx);
},
},
computed: {
getExtraColorEggIcon() {
return (this.extraColorsLocked === true && !this.isUpgrade) ? '#icon-egg-locked' : '#icon-egg';
},
}
};
</script><script id="item-timer-template" type="text/x-template">
<div>
<div id="equip_timerem" class="box_blue3 roundme_sm shadow_blue4">
<i class="fas fa-hourglass-start"></i> 9{{ loc.eq_day }}<span class="blink">:</span>12{{ loc.eq_hour }}
<br>{{ loc.eq_remaining }}
</div>
</div>
</script>
<script>
var comp_item_timer = {
template: '#item-timer-template',
props: ['loc']
};
</script><script id="price-tag-template" type="text/x-template">
<div id="equip_purchase_items" v-if="isNoPrice" class="equip_purchase_items">
<div id="equip_pricetag" class="equip_pricetag shadow_blue2">
<img src="img/pricetag_left.png" class="equip_pricetag__endpiece">
<div class="equip_pricetag__tag equip_pricetag__is_buy_tag">
<img v-if="!isPremium" src="img/ico_goldenEgg.png">
<i v-else class="fas fa-dollar-sign"></i>
{{ item.price }}
</div>
<img src="img/pricetag_right.png" class="equip_pricetag__endpiece">
</div>
<button style="pointer-events: all" class="ss_button btn_yolk bevel_yolk is_purchase_btn" @click="onBuyClick">{{ loc.eq_buy }}</button>
</div>
</script>
<script>
var comp_price_tag = {
template: '#price-tag-template',
props: ['loc', 'item'],
methods: {
onBuyClick: function () {
if (this.isPremium) {
return vueApp.showPopupEggStoreSingle(this.item.sku);
}
this.$emit('buy-item-clicked', this.item);
}
},
computed: {
isPremium() {
return this.item.unlock === 'premium';
},
isNoPrice() {
return this.item.price < 1000000000;
}
}
};
</script><script id="physical-tag-template" type="text/x-template">
<div id="equip_get_physical_item" class="equip_purchase_items">
<div id="equip_pricetag" class="equip_pricetag shadow_blue2">
<img src="img/pricetag_left.png">
<div class="equip_pricetag__tag equip_pricetag__is_special_tag">
<img src="img/ico_goldenEgg.png" class="ss_marginright">{{ loc.p_buy_special_price }}
</div>
<img src="img/pricetag_right.png">
</div>
<button class="ss_button btn_yolk bevel_yolk is_special_get_btn" @click="onBuyClick">{{ loc.p_chicken_goldbutton }}</button>
</div>
</script>
<script>
var comp_physical_tag = {
template: '#physical-tag-template',
props: ['loc', 'item'],
methods: {
onBuyClick: function () {
this.$emit('buy-item-clicked', this.item);
}
}
};
</script><script id="item-type-selector-template" type="text/x-template">
<div>
<div id="equip_itemtype" class="equip_panelhead">
<img src="img/inventory-icons/ico_weaponPrimary.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Primary)" @click="onItemTypeClick(itemType.Primary)">
<img src="img/inventory-icons/ico_weaponSecondary.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Secondary)" @click="onItemTypeClick(itemType.Secondary)">
<img src="img/inventory-icons/ico_grenade.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Grenade)" @click="onItemTypeClick(itemType.Grenade)">
<img src="img/inventory-icons/ico_hat.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Hat)" @click="onItemTypeClick(itemType.Hat)">
<img src="img/inventory-icons/ico_stamp.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Stamp)" @click="onItemTypeClick(itemType.Stamp)">
<i class="ico_itemtype premium-item-type clickme roundme_lg fas fa-gem" :class="getSelectedClass('premium')" @click="onPremiumTypeClick"></i>
<img src="img/inventory-icons/ico_specialItem.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass('tagged')" @click="onTaggedTypeClick">
</div>
</div>
</script>
<script>
var comp_item_type_selector = {
template: '#item-type-selector-template',
props: ['showSpecialItems', 'selectedItemType', 'inShop'],
data: function () {
return {
itemType: ItemType,
showingTagged: false
}
},
methods: {
onItemTypeClick: function (itemType) {
this.$emit('item-type-changed', itemType);
},
onTaggedTypeClick: function (e) {
if (!this.showSpecialItems) {
return;
}
this.$emit('tagged-items-clicked');
},
onPremiumTypeClick() {
this.$emit('premium-items-clicked');
},
getSelectedClass: function (itemType) {
let noTags = itemType === 'tagged' && !this.showSpecialItems ? 'no-tags' : '';
return (itemType === this.selectedItemType) ? 'selected ' + noTags : '' + noTags;
}
}
};
</script><script id="item-grid-template" type="text/x-template">
<div>
<div id="item_mask"></div>
<h3 v-if="accountSettled" class="margins_sm">{{ loc[categoryLocKey] }}</h3>
<div v-if="accountSettled" id="equip_grid" :class="gridClass">
<item v-for="i in items" :loc="loc" :item="i" :key="i.id" :isSelected="isSelected(i)" @item-selected="onItemSelected"></item>
<div v-show="!inShop" class="store_item roundme_lg '.$is_hi.' '.$is_na.' clickme morestuff bevel_green" @click="onSwitchToShopClick"></div>
<div v-show="inShop && !hiddenPremItemCheck" class="store_item roundme_lg '.$is_hi.' '.$is_na.' soldout">
<div class="soldout_head shadow_bluebig5" v-html="loc.eq_sold_out_head"></div>
<div class="soldout_text" v-html="loc.eq_sold_out_text"></div>
</div>
</div>
<div id="items-account-not-loaded" v-show="!accountSettled" class="text-center">
<h3>{{loc.signin_auth_title}}</h3>
<p>{{loc.signin_auth_msg}}</p>
</div>
</div>
</script>
<script>
var comp_item_grid = {
template: '#item-grid-template',
components: { 'item': comp_item },
props: ['items', 'selectedItem', 'gridClass', 'categoryLocKey', 'inShop'],
data() {
return vueData;
},
methods: {
onItemSelected: function (selectedItem) {
this.$emit('item-selected', selectedItem);
},
isSelected: function (item) {
if (!hasValue(this.selectedItem)) {
return false;
}
return (this.selectedItem.id === item.id);
},
onSwitchToShopClick: function () {
this.$emit('switch-to-shop');
BAWK.play('ui_playconfirm');
},
isPremItemInStore() {
let hasItem = false;
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
const isItem = vueApp.premiumShopItems.find(i => i.isActive && i.itemId.id === item.id);
if (hasValue(isItem)) {
hasItem = true;
break;
}
}
return hasItem;
}
},
computed: {
categoryName: function () {
if (!hasValue(this.selectedItem)) {
return null;
}
return this.loc['item_type_' + this.selectedItem.item_type_id];
},
hiddenPremItemCheck() {
if (this.items.some(i => i.unlock === 'purchase') || this.items.length !== 0) return true;
if (this.items.some(i => i.unlock === 'premium')) return this.isPremItemInStore();
return false;
}
}
};
</script>
<script>
var comp_equip_screen = {
template: '#equip-screen-template',
components: {
'account-panel': comp_account_panel,
'equipped-slots': comp_equipped_slots,
'color-select': comp_color_select,
'item-timer': comp_item_timer,
'price-tag': comp_price_tag,
'physical-tag': comp_physical_tag,
'item-type-selector': comp_item_type_selector,
'item-grid': comp_item_grid,
'house-ad-small': comp_house_ad_small,
'weapon-select-panel': comp_weapon_select_panel,
'item': comp_item,
// 'account-panel': comp_account_panel,
'house-ad-small': comp_house_ad_small
},
data: function () {
return vueData;
},
equippedItems: {},
methods: {
setup: function (itemType) {
if (!itemType) { itemType = ItemType.Primary; }
this.updateEquippedItems();
this.poseEquippedItems();
if (itemType === 'tagged') {
this.populateItemGridWithTagged(this.equip.specialItemsTag);
} else {
this.populateItemGridWithType(itemType);
}
this.selectEquippedItemForType();
},
updateEquippedItems: function () {
this.$options.equippedItems = extern.getEquippedItems();
this.equip.equippedHat = this.$options.equippedItems[ItemType.Hat];
this.equip.equippedStamp = this.$options.equippedItems[ItemType.Stamp];
this.equip.equippedGrenade = this.$options.equippedItems[ItemType.Grenade];
this.equip.equippedPrimary = this.$options.equippedItems[ItemType.Primary];
this.equip.equippedSecondary = this.$options.equippedItems[ItemType.Secondary];
},
poseEquippedItems: function () {
this.posingHat = this.equip.equippedHat;
this.posingStamp = this.equip.equippedStamp;
switch (this.equip.showingWeaponType) {
case ItemType.Primary:
this.posingWeapon = this.equip.equippedPrimary;
this.posingGrenade = null;
break;
case ItemType.Secondary:
this.posingWeapon = this.equip.equippedSecondary;
this.posingGrenade = null;
break;
case ItemType.Grenade:
this.posingGrenade = this.equip.equippedGrenade;
break;
}
this.workItBaby();
},
selectEquippedItemForType: function () {
switch (this.equip.selectedItemType) {
case ItemType.Hat: this.equip.selectedItem = this.equip.equippedHat; break;
case ItemType.Stamp: this.equip.selectedItem = this.equip.equippedStamp; break;
case ItemType.Primary: this.equip.selectedItem = this.equip.equippedPrimary; break;
case ItemType.Secondary: this.equip.selectedItem = this.equip.equippedSecondary; break;
case ItemType.Grenade: this.equip.selectedItem = this.equip.equippedGrenade; break;
}
},
populateItemGridWithType: function (itemType) {
this.equip.selectedItemType = itemType;
var items = extern.getItemsOfType(itemType);
this.populateItemGrid(items);
this.equip.categoryLocKey = 'item_type_{0}{1}'.format(itemType, ((itemType === ItemType.Primary) ? '_' + this.classIdx : ''));
},
populateItemGridWithTagged: function (tag) {
var items = extern.getTaggedItems(tag);
this.populateItemGrid(items);
this.equip.categoryLocKey = 'item_type_5';
},
populateItemGrid: function (items) {
if (this.equip.mode === vueData.equip.equipModes.inventory) {
items = items.filter(i => {
return extern.isItemOwned(i) || (i.is_available && i.unlock === "default");
});
}
else {
items = items.filter(i => {
// return (i.is_available || extern.account.isSubscriber) && !extern.isItemOwned(i) && i.unlock !== "default" && i.unlock !== 'manual';
return i.is_available && !extern.isItemOwned(i) && i.unlock !== "default";
})
}
this.equip.showingItems = items;
},
workItBaby: function () {
extern.poseWithItem(ItemType.Hat, this.posingHat);
extern.poseWithItem(ItemType.Stamp, this.posingStamp);
extern.poseWithItem(this.posingWeapon.item_type_id, this.posingWeapon);
if (this.posingGrenade) extern.poseWithItem(this.posingGrenade.item_type_id, this.posingGrenade);
},
onBackClick: function () {
extern.saveEquipment();
this.equip.showingWeaponType = ItemType.Primary;
this.poseEquippedItems();
if (!extern.inGame) {
vueApp.showTitleScreenAd();
vueApp.switchToHomeUi();
} else {
extern.closeEquipInGame();
vueApp.switchToGameUi();
vueApp.showGameMenu();
vueApp.showRespawnDisplayAd();
}
BAWK.play('ui_popupclose');
},
onItemTypeChanged: function (itemType) {
this.switchItemType(itemType);
},
switchItemType: function (itemType) {
if (itemType !== this.equip.selectedItemType) {
if (itemType === ItemType.Primary || itemType === ItemType.Secondary || itemType == ItemType.Grenade) {
this.equip.showingWeaponType = itemType;
}
this.poseEquippedItems();
this.populateItemGridWithType(itemType);
if (this.equip.mode === this.equip.equipModes.inventory) {
this.selectEquippedItemForType();
} else {
this.selectFirstItemInShop();
}
}
if (!this.isInShop) {
this.hideItemForSale();
this.hideItemForSpecial();
}
BAWK.play('ui_click');
},
onTaggedItemsClicked: function () {
BAWK.play('ui_click');
if (this.equip.selectedItemType === 'tagged') {
return;
}
this.showTaggedItems(this.equip.specialItemsTag);
this.selectFirstItemInShop();
},
onPremiumItemsClicked() {
BAWK.play('ui_click');
if (this.equip.selectedItemType === 'premium') {
return;
}
this.showPremiumItems();
this.selectFirstItemInShop();
},
showPremiumItems() {
this.equip.selectedItemType = 'premium';
var items = extern.getPremiumItems();
this.populateItemGrid(items);
this.equip.categoryLocKey = 'item_type_7';
},
showTaggedItems: function (tag) {
this.equip.selectedItemType = 'tagged';
if (this.equip.mode === this.equip.equipModes.inventory && !this.ownsTaggedItems(this.equip.specialItemsTag)) {
this.equip.mode = this.equip.equipModes.shop;
vueApp.conditionalAnonWarningCall();
}
this.populateItemGridWithTagged(tag);
},
showSelectedTagItems(tag) {
this.equip.selectedItemType = 'tagged';
// if (this.equip.mode === this.equip.equipModes.inventory) {
// this.equip.mode = this.equip.equipModes.shop;
// }
this.populateItemGridWithTagged(tag);
},
switchToInventory: function () {
if (this.equip.selectedItemType === 'tagged' && this.equip.mode === this.equip.equipModes.shop) {
if (!this.ownsTaggedItems(this.equip.specialItemsTag)) {
this.switchItemType(ItemType.Primary);
}
}
this.equip.mode = this.equip.equipModes.inventory;
this.hideItemForSale();
this.hideItemForSpecial();
this.poseEquippedItems();
this.showItemsAfterEquipModeSwitch();
this.selectEquippedItemForType();
BAWK.play('ui_toggletab');
// vueApp.histPushState({game: this.ui.screens.equip}, 'Shellshockers equipment inventory', '?equip=inventory');
},
ownsTaggedItems: function (tag) {
return extern.getTaggedItems(tag).filter(i => {
return extern.isItemOwned(i);
}).length > 0;
},
selectFirstItemInShop: function () {
if (this.isInShop && this.equip.showingItems.length > 0) {
this.selectItem(this.equip.showingItems[0]);
}
},
switchToShop: function () {
if (!this.accountSettled) {
return;
}
this.equip.mode = this.equip.equipModes.shop;
this.showItemsAfterEquipModeSwitch();
this.selectFirstItemInShop();
vueApp.conditionalAnonWarningCall();
BAWK.play('ui_toggletab');
// vueApp.histPushState({game: this.ui.screens.equip}, 'Shellshockers equipment shop', '?equip=shop');
},
showItemsAfterEquipModeSwitch: function () {
if (this.equip.selectedItemType === 'tagged') {
this.showTaggedItems(this.equip.specialItemsTag)
} else if (this.equip.selectedItemType === 'premium') {
this.showPremiumItems();
} else {
this.populateItemGridWithType(this.equip.selectedItemType);
}
},
onEquippedTypeSelected: function (itemType) {
this.equip.selectedItemType = itemType;
if (
this.equip.selectedItemType === ItemType.Primary ||
this.equip.selectedItemType === ItemType.Secondary ||
this.equip.selectedItemType === ItemType.Grenade
) {
this.equip.showingWeaponType = itemType;
}
this.switchToInventory();
},
onChangedClass: function () {
this.hideItemForSale();
this.hideItemForSpecial();
if (this.posingGrenade) {
this.posingGrenade = null;
this.onEquippedTypeSelected(ItemType.Primary);
}
if (this.equip.selectedItemType !== ItemType.Primary) {
this.onEquippedTypeSelected(ItemType.Primary);
}
this.updateEquippedItems();
this.poseEquippedItems();
this.populateItemGridWithType(this.equip.selectedItemType);
if (extern.inGame && this.ui.showScreen !== this.ui.screens.equip) {
this.equip.showingWeaponType = ItemType.Primary;
this.poseEquippedItems();
extern.closeEquipInGame();
}
},
autoSelectItem: function (item) {
if (extern.isItemOwned(item)) {
this.switchToInventory();
} else {
this.switchToShop();
}
this.switchItemType(item.item_type_id);
this.selectItem(item);
},
onItemSelected: function (item) {
this.selectItem(item);
},
isPremItemInStore(item) {
let hasItem = false;
const isItem = this.premiumShopItems.find(i => i.isActive && i.itemId.id === item.id);
if (hasValue(isItem)) {
hasItem = true;
}
return hasItem;
},
selectItem: function (item) {
var selectingSame = hasValue(this.equip.selectedItem) && this.equip.selectedItem.id === item.id;
var selectedId = selectingSame ? this.equip.selectedItem.id : null;
var isWeapon = (item.item_type_id === ItemType.Primary || item.item_type_id === ItemType.Secondary);
BAWK.play('ui_click');
if (selectingSame) {
if (this.isInShop) {
// Revert to equipped weapon
item = this.$options[this.equip.selectedItem.item_type_id];
} else {
// Take off hat or stamp
if (!isWeapon) {
item = null;
extern.removeItemType(this.equip.selectedItem.item_type_id);
}
}
}
if (this.isInShop) {
if ( item && item.hasOwnProperty('unlock') && item.unlock === 'premium' && !this.isPremItemInStore(item)) {
// Revert to equipped weapon
item = this.$options[this.equip.selectedItem.item_type_id];
}
}
// Take off any items being tried on
this.poseEquippedItems();
this.equip.selectedItem = item;
extern.tryEquipItem(item);
this.updateEquippedItems();
if (hasValue(item)) {
this.poseWithItem(item);
if (this.isInShop) {
switch (item.unlock) {
case "physical":
console.log('purchasing physical item');
if ( !selectingSame ) {
this.offerItemForSpecial(item)
this.hideItemForSale();
} else {
this.hideItemForSpecial();
}
// this.$refs.physicalUnlockPopup.toggle();
break;
case "purchase":
case "premium":
if (!selectingSame) {
this.offerItemForSale(item);
this.hideItemForSpecial();
} else {
this.hideItemForSale();
}
break;
}
}
} else {
this.poseEquippedItems();
this.hideItemForSale();
this.hideItemForSpecial();
}
},
poseWithItem: function (item) {
switch (item.item_type_id) {
case ItemType.Hat: this.posingHat = item; break;
case ItemType.Stamp: this.posingStamp = item; break;
case ItemType.Grenade: this.posingGrenade = item; break;
case ItemType.Primary:
case ItemType.Secondary: this.posingWeapon = item; break;
}
this.workItBaby();
},
getButtonToggleClass: function (equipMode) {
return (equipMode === this.equip.mode) ? 'btn_toggleon' : 'btn_toggleoff';
},
offerItemForSpecial: function(item) {
return this.equip.physicalUnlockPopup.item = item;
},
hideItemForSpecial: function() {
this.equip.physicalUnlockPopup.item = null;
},
offerItemForSale: function (item) {
this.equip.buyingItem = item;
},
hideItemForSale: function () {
this.equip.buyingItem = null;
// this.equip.physicalUnlockPopup.item = null
},
onBuyItemClicked: function () {
// If item is buying item show buyItemPopup or show physicalUnlockPopup
this.equip.buyingItem ? this.$refs.buyItemPopup.toggle() : this.$refs.physicalUnlockPopup.toggle();
this.equip.buyingItem ? extern.renderItemToCanvas(this.equip.buyingItem, this.$refs.buyItemCanvas) : null;
BAWK.play('ui_popupopen');
},
onBuyItemConfirm: function () {
if (this.equip.buyingItem.unlock === 'premium') {
extern.buyProductForMoney(this.equip.buyingItem.sku);
return;
} else {
extern.api_buy(this.equip.buyingItem, this.boughtItemSuccess, this.boughtItemFailed);
}
BAWK.play('ui_playconfirm');
},
boughtItemSuccess: function () {
this.equip.selectedItem = this.equip.buyingItem;
ga('send', 'event', {
eventCategory: this.googleAnalytics.cat.itemShop,
eventAction: this.googleAnalytics.action.shopItemPopupBuy,
eventLabel: this.equip.buyingItem.name,
eventValue: this.equip.selectedItem.price
});
var itemType = this.equip.selectedItem.item_type_id;
if (itemType === ItemType.Primary || itemType === ItemType.Secondary || itemType == ItemType.Grenade) {
this.equip.showingWeaponType = itemType;
}
this.hideItemForSale();
this.setup(this.equip.selectedItemType);
this.updateEquippedItems();
this.poseEquippedItems();
this.selectEquippedItemForType();
},
boughtItemFailed: function () {
vueApp.showGenericPopup('p_buy_error_title', 'p_buy_error_content', 'ok');
BAWK.play('ui_reset');
},
onRedeemClick: function () {
this.$refs.redeemCodePopup.code = '';
this.$refs.redeemCodePopup.toggle();
BAWK.play('ui_popupopen');
},
onRedeemCodeConfirm: function () {
if (this.equip.redeemCodePopup.code.toUpperCase() === 'D3LL0RKC1R') {
this.giveStuffPopup.eggOrg = false;
this.giveStuffPopup.rickroll = true;
vueApp.showGiveStuffPopup('p_give_stuff_title');
} else {
this.giveStuffPopup.rickroll = false;
this.giveStuffPopup.eggOrg = false;
extern.api_redeem(this.equip.redeemCodePopup.code, this.redeemCodeSuccess, this.redeemCodeFailed);
}
BAWK.play('ui_playconfirm');
},
redeemCodeSuccess: function (eggs, items) {
this.populateItemGridWithType(this.equip.selectedItemType);
this.giveStuffPopup.eggs = eggs;
this.giveStuffPopup.items = items;
vueApp.showGiveStuffPopup('p_give_stuff_title', eggs, items);
let itemString = '';
this.giveStuffPopup.items.forEach(item => itemString += item.name);
ga('send', 'event', {
eventCategory: this.googleAnalytics.cat.redeem,
eventAction: this.googleAnalytics.action.redeemed,
eventLabel: `${itemString ? itemString : ''} ${this.giveStuffPopup.eggs ? this.giveStuffPopup.eggs + 'eggs' : ''}`
});
},
redeemCodeFailed: function () {
vueApp.showGenericPopup('p_redeem_error_title', 'p_redeem_error_content', 'ok');
BAWK.play('ui_reset');
},
onPhysicalUnlockConfirm: function () {
window.open(this.equip.physicalUnlockPopup.item.item_data.physicalItemStoreURL, '_blank');
},
onColorChanged: function (colorIdx) {
this.equip.colorIdx = colorIdx;
extern.setShellColor(this.equip.colorIdx);
BAWK.play('ui_onchange');
},
onSwitchToShopClicked: function () {
this.switchToShop();
}
},
computed: {
isInShop: function () {
return (this.equip.mode === this.equip.equipModes.shop);
},
getGridClass: function () {
return this.isInShop ? '' : 'equip_grid_short';
},
isEggStoreSaleItem() {
return this.eggStoreItems.some( item => item['salePrice'] !== '');
},
isBuyingItemPrem() {
if (!this.equip.buyingItem) {
return;
}
return this.equip.buyingItem.unlock === 'premium';
}
}
};
</script><script id="game-screen-template" type="text/x-template">
<div>
<event-panel :show-soon="false" :show-ui="ui.showCornerButtons"></event-panel>
<account-panel id="game_account_panel" ref="accountPanelGame" :loc="loc" :eggs="eggs" :show-bottom="false" :show-corner-buttons="ui.showCornerButtons" :ui="ui" :isEggStoreSale="isEggStoreSaleItem" :is-subscriber="isSubscriber" :currentLangOptions="locLanguage" :is-twitch="twitchLinked"></account-panel>
<div id="chickenBadge" ref="chickenBadge" style="display: none;"><img :src="upgradeBadgeUrl"></div>
<!-- Scope -->
<div id="scopeBorder">
<div id="maskleft"></div>
<div id="maskmiddle"></div>
<div id="maskright"></div>
</div>
<!-- Best Streak -->
<div id="best_streak_container">
<h1 v-show="(((doubleEggWeekend || doubleEggWeekendSoon) && !ui.showCornerButtons) || (!doubleEggWeekend && !doubleEggWeekendSoon))" id="bestStreak">x0</h1>
</div>
<div v-show="announcementMessage" id="announcement_message">{{ announcementMessage }}</div>
<div id="shellStreakContainer">
<h1 id="shellStreakCaption"></h1>
<h1 id="shellStreakMessage" class="disappear"></h1>
</div>
<!-- Team Scores -->
<div id="teamScores">
<div id="teamScore2" class="teamScore red inactive">
<div id="teamScoreNum2" class="number">0</div>
<div class="teamLetter red" style="color: #f00;">R</div>
</div>
<div id="teamScore1" class="teamScore blue inactive">
<div id="teamScoreNum1" class="number">0</div>
<div class="teamLetter blue" style="color: #0af;">B</div>
</div>
<!--<div>
<img src="img/spatulaIcon.png" style="width: 3em; transform: rotate(60deg)">
</div>-->
</div>
<!-- Capture Icon -->
<div id="captureIconContainer">
<div id="captureInsideContainer">
<div id="captureIconCaption">20M</div>
<div id="captureRingBackground"></div>
<div id="captureRingContainer">
<div id="captureRing"></div>
</div>
<svg id="captureIcon" viewBox="0 0 53.6 36">
<use href="img/kotc/crown.svg#crown" />
</svg>
</div>
</div>
<!-- Reticle -->
<div id="reticleContainer">
<div id="dotReticle"></div>
<div id="crosshairContainer">
<div id="crosshair0" class="crosshair normal"></div>
<div id="crosshair1" class="crosshair normal"></div>
<div id="crosshair2" class="crosshair normal"></div>
<div id="crosshair3" class="crosshair normal"></div>
</div>
<div id="shotReticleContainer">
<div id="shotBracket0" class="shotReticle border normal"></div>
<div id="shotBracket1" class="shotReticle border normal"></div>
<div id="shotBracket2" class="shotReticle fill normal"></div>
<div id="shotBracket3" class="shotReticle fill normal"></div>
</div>
<div id="readyBrackets">
<div class="readyBracket"></div>
<div class="readyBracket"></div>
<div class="readyBracket"></div>
<div class="readyBracket"></div>
</div>
</div>
<!-- Capture Zone progress -->
<div id="captureContainer">
<div class="captureScoreContainer">
<svg class="captureCrown" viewBox="0 0 53.6 36">
<use href="img/kotc/crown.svg#crown" fill="var(--ss-team-red-light)" />
</svg>
<div id="captureScoreRed" class="captureScore">0/5</div>
</div>
<div id="captureCenter">
<div id="captureBarContainer">
<div id="captureBar"></div>
</div>
<div id="captureBarText"></div>
</div>
<div class="captureScoreContainer">
<svg class="captureCrown" viewBox="0 0 53.6 36">
<use href="img/kotc/crown.svg#crown" fill="var(--ss-team-blue-light)" />
</svg>
<div id="captureScoreBlue" class="captureScore">0/5</div>
</div>
</div>
<!-- Big Message Bar -->
<div id="bigMessageContainer" style="display: none">
<div id="bigMessageBar">
<div id="bigMessage"></div>
<div id="bigMessageCaption"></div>
</div>
</div>
<!-- Weapon -->
<div id="weaponBox">
<div id="grenades">
<img id="grenade3" class="grenade" src="img/ico_grenadeEmpty.png%3Fv=1"/>
<img id="grenade2" class="grenade" src="img/ico_grenadeEmpty.png%3Fv=1"/>
<img id="grenade1" class="grenade" src="img/ico_grenadeEmpty.png%3Fv=1"/>
</div>
<h2 id="weaponName"></h2>
<h2 id="ammo" class="shadow_grey"></h2>
</div>
<!-- Health -->
<div id="healthContainer">
<svg class="healthSvg">
<circle id="healthBar" class="healthBar" cx="50%" cy="50%" r="2.15em" />
<circle class="healthYolk" cx="50%" cy="50%" r="1.35em" />
</svg>
<div id="healthHp">100</div>
</div>
<!-- Hard Boiled -->
<div id="hardBoiledContainer">
<div id="hardBoiledShieldContainer">
<img class="hardBoiledShield" src="img/hardBoiledEmpty.png">
<img class="hardBoiledShield" id="hardBoiledShieldFill" src="img/hardBoiledFilled.png">
</div>
<div id="hardBoiledValue">100</div>
</div>
<!-- EggBreaker Shellstreak -->
<div id="eggBreakerContainer" class="off">
<img id="eggBreakerIcon" src="img/ico_eggBreaker.png" />
<div id="eggBreakerTimer">15</div>
</div>
<!-- Spatula -->
<img id="spatulaPlayer" src="img/spatulaIcon.png" />
<!-- Grenade throw power -->
<div id="grenadeThrowContainer">
<div id="grenadeThrow"></div>
</div>
<!-- Kill -->
<div id="killBox" class="shadow_grey">
<!-- <h3>{{ loc.ui_game_youkilled }}</h3> -->
<div v-html="killedMessage"></div>
<!-- <h2 id="KILLED_NAME"></h2> -->
<h3 id="KILL_STREAK"></h3>
</div>
<!-- Death -->
<div id="deathBox">
<div v-html="killedByMessage"></div>
</div>
<!-- Game messages -->
<div id="gameMessage"></div>
<!-- Chat -->
<div id="chatOut" class="chat roundme_sm"></div>
<input id="chatIn" class="chat roundme_sm" maxlength=64 tabindex=-1 v-bind:placeholder="loc.ingame_press_tab_to_exit" onkeydown="extern.onChatKeyDown(event)"></input>
<!-- Kill ticker -->
<div id="killTicker" class="chat"></div>
<!-- Spectator controls -->
<div id="spectate">
{{ loc.ui_game_spectating }}
</div>
<div id="serverAndMapInfo" class="shadow_grey"></div>
<!-- Ingame UI Stuff -->
<div id="inGameUI">
<div id="readouts" class="shadow_grey">
{{ loc.ui_game_fps }}: <div id="FPS"></div><br>
{{ loc.ui_game_ping }}: <div id="ping"></div>
</div>
<!-- Corner icon buttons -->
<!--
<div id="corner" style="float: right; margin-top: 0.5em;">
<div id="currentBalanceContainer" style="display: none; position: relative; left: -1em; top: 0.15em;">
<span id="currentBalance" style="display: inline-block; font-size: 1.7em; position: relative; top: -0.25em; left: -0.1em; color: white;"></span>
boopdiddyboop<img src="img/egg_icon.png" style="width: 1.6em; height: 2em;" />
</div>
<div id="cornerButtons" style="display: none; margin-bottom: 0.5em; text-align: right; float: right;">
<-<img id="homeButton" style="display: none; margin-right: 0.5em;" title="Home" class="icon" src="img/home.png?v=1" onclick="extern.showMainMenuConfirm()" />
<img id="friendsButton" style="display: none; margin-right: 0.5em;" title="Invite friends" class="icon" src="img/friends.png?v=1" onclick="extern.inviteFriends()" />
<img style="margin-right: 0.5em;" title="Feedback" class="icon" src="img/feedback.png?v=1" onclick="extern.showFeedbackForm()" />
<img style="margin-right: 0.5em;" title="Settings" class="icon" src="img/settings.png?v=1" onclick="extern.openSettingsMenu()" />
<img class="icon" title="Toggle fullscreen" src="img/fullScreen.png?v=1" onclick="extern.toggleFullscreen()" /> ->
</div>
</div>
-->
</div>
<!-- Popup: Mute/Boot Player -->
<small-popup id="playerActionsPopup" ref="playerActionsPopup" @popup-cancel="onPlayerActionsCancel" @popup-closed="onPlayerActionsCancel" :hide-confirm="true">
<template slot="header">{{ playerActionsPopup.playerName }}</template>
<template slot="content">
<div v-if="playerActionsPopup.vipMember" class="vip-member-wraper display-grid grid-align-items-center grid-column-1-2 ss_marginbottom_xl">
<figure class="player-action-vip-img center_h">
<img src="img/vip-club/vip-club-popup-emblem.png" alt="Vip member icon" class="center_h">
</figure>
<div>
<h6 class="roundme_sm shadow_blue4 ss_margintop ss_marginbottom">{{loc.ui_game_playeractions_vip_member}}</h6>
<button v-if="!isSubscriber" class="ss_button btn_pink bevel_pink fullwidth" @click="openVipPopup">{{loc.ui_game_playeractions_join_vip}}</button>
</div>
</div>
<!-- .vip-member-wraper -->
<p>{{ loc.ui_game_playeractions_header }}</p>
<button v-if="playerActionsPopup.social" class="ss_button btn_medium btn_yolk bevel_yolk fullwidth" @click="onClickCreator(playerActionsPopup.social.url)"><i class="fab" :class="playerSocial"></i> {{loc.ui_game_playeractions_creator}}</button>
<h4 class="ss_button btn_medium btn_blue bevel_blue" v-on:click="onMuteClicked">{{ muteButtonLabel }}</h4>
<h4 class="ss_button btn_medium btn_yolk bevel_yolk" v-if="playerActionsPopup.isGameOwner" v-on:click="onBootClicked">{{ loc.ui_game_playeractions_boot }}</h4>
</template>
<template slot="cancel">{{ loc.cancel }}</template>
</small-popup>
<!-- Popup: Switch Team -->
<small-popup id="switchTeamPopup" ref="switchTeamPopup" @popup-cancel="onSwitchTeamCancel" :overlay-close="false" @popup-closed="onSwitchTeamCancel" @popup-confirm="onSwitchTeamConfirm">
<template slot="header">{{ loc.p_switch_team_title }}</template>
<template slot="content">
<h4 class="roundme_sm" :class="newTeamColorCss">{{ newTeamName }} <i class="fa fa-flag"></i></h4>
<p>{{ loc.p_switch_team_text }}</p>
</template>
<template slot="cancel">{{ loc.no }}</template>
<template slot="confirm">{{ loc.yes }}</template>
</small-popup>
<!-- Popup: Share Link -->
<small-popup id="shareLinkPopup" ref="shareLinkPopup" :popup-model="game.shareLinkPopup" @popup-confirm="onShareLinkConfirm" @popup-closed="onShareLinkClosed">
<template slot="header">{{ loc.p_sharelink_title }}</template>
<template slot="content">
<p>{{ loc.p_sharelink_text }}</p>
<p><input ref="shareLinkUrl" type="text" class="ss_field ss_margintop ss_marginbottom fullwidth" v-model="game.shareLinkPopup.url" @focus="$event.target.select()"></p>
</template>
<template slot="cancel">{{ loc.close }}</template>
<template slot="confirm">{{ loc.p_sharelink_copylink }}</template>
</small-popup>
<!-- Popup: Leave Game Confirm -->
<small-popup id="leaveGameConfirmPopup" ref="leaveGameConfirmPopup" :overlay-close="false" :hide-close="true" @popup-confirm="onLeaveGameConfirm" @popup-cancel="onLeaveGameCancel">
<template slot="header">{{ loc.leave_game_title }}</template>
<template slot="content">
<p>{{ loc.leave_game_text }}</p>
</template>
<template slot="cancel">{{ loc.no }}</template>
<template slot="confirm">{{ loc.yes }}</template>
</small-popup>
<div class="player__container">
<!-- Player List -->
<div id="playerSlot" class="playerSlot" style="display: none">
<div>
<span></span> <!-- Name -->
<span></span> <!-- Score -->
</div>
<div style="display: block;"></div> <!-- Icons -->
</div>
<div id="playerList"></div>
</div>
<!-- end .player__container -->
<div id="inGameScaler">
<div class="pause-popup--container">
<!-- Popup: Pause -->
<large-popup id="pausePopup" ref="pausePopup" hide-close="true" :overlay-close="false" :overlay-class="ui.overlayClass.inGame">
<template slot="content">
<div class="box_blue2 roundme_sm">
<div id="pausePopupInnards" class="roundme_sm f_row">
<div id="pauseButtons" class="f_col pause-btn-group">
<button @click="onHomeClicked" class="ss_button btn_blue bevel_blue"><i class="fa fa-home"></i> {{ loc.p_pause_home }}</button>
<button @click="onEquipClicked()" class="ss_button btn_blue bevel_blue"><i class="fas fa-star"></i> {{ loc.p_pause_equipment }}</button>
<button v-if="!delayTheCracking && !isRespawning" class="ss_button btn_red bevel_red btn_sm" disabled="disabled"><i class="fas fa-eye"></i> {{ loc.ui_game_get_ready }}</button>
<button v-if="delayTheCracking" v-show="!isRespawning" @click="onSpectateClicked()" class="ss_button btn_blue bevel_blue btn_sm" :disabled="isRespawning"><i class="fas fa-eye"></i> {{ loc.p_pause_spectate }}</button>
<music-widget ref="gameScreenMusic" :loc="loc" :settings-ui="settingsUi" :settings="true" :volumeSlider="false" :show="isPaused && showMusicWidget"></music-widget>
</div>
<!-- #pauseButtons -->
<div id="popupTipDay" class="roundme_sm flex-auto">
<div v-if="isPoki && pokiRewardReady" class="poki-reward-container">
<button class="ss_button btn_blue bevel_blue btn_reward pure-wiggle" @click="earnInGameReward"><img src="img/ico_goldenEgg.png" class="egg_icon">Watch Video for 100 Golden Eggs!</button>
</div>
<div v-show="!isPoki && firebaseId" id="chw-progress-wrapper" class="chw-progress-wrapper box_relative">
<!-- incentivized-mini-game -->
<img class="box_aboslute chw-progress-img chw-chick" :src="chwChickSrc">
<div class="chw-progress-bar-wrap roundme_sm box_relative btn_blue bevel_blue" :class="progressBarWrapClass" @click="playIncentivizedAd">
<p class="chw-progress-bar-msg box_aboslute centered nospace text-center fullwidth chw-msg chw-p-msg">
{{ progressMsg }}
<!-- <span class="chw-countdown-wrap" :class="chwShowCountdown">
<span class="chw-minutes"></span><span class="chw-seconds"></span>
</span> -->
</p>
<div class="chw-progress-bar-inner" @click="playIncentivizedAd">
</div>
</div>
<img class="box_aboslute chw-eggs chw-progress-img" src="img/egg_pack_small.png" alt="">
</div>
<!-- #chw-progress-wrapper end -->
<!-- .poki-reward-container -->
<div id="btn_horizontal" class="pause-popup--btn-group">
<header class="weapon-select weapon-select--title pause-bg roundme_sm">
<h1>{{loc.p_weapon_title}}</h1>
</header>
<div class="pause-bg roundme_sm">
<weapon-select-panel ref="weaponSelect" id="weapon_select" :loc="loc" :current-class="classIdx" @changed-class="pauseWeaponSelect"></weapon-select-panel>
</div>
<!-- .pause-bg -->
</div>
<!-- .pause-popup--btn-group -->
<div id="game-play-switch" class="paused-game-cotrols roundme_sm f_row">
<div v-if="delayTheCracking" class="switch-teams-btn">
<button v-show="isTeamGame" @click="onSwitchTeamClicked" class="ss_button btn__team_switch" :class="teamColorCss"><i class="fa fa-flag"></i> {{ teamName }}</button>
</div>
<!-- .switch-teams-btn -->
<div class="pause-popup--btn-group f-grow-full">
<button v-if="!delayTheCracking && !isRespawning" class="btn_big btn_wfull ss_button btn_red bevel_red" disabled="disabled">{{ loc.ui_game_get_ready }}</button>
<button v-if="delayTheCracking" class="btn_big btn_wfull ss_button btn_red bevel_red" v-show="isRespawning" :disabled="isRespawning">{{ game.respawnTime }}</button>
<button v-if="delayTheCracking" v-show="!isRespawning" @click="onPlayClicked()" class="btn-respawn btn_big btn_wfull ss_button btn_yolk bevel_yolk" :disabled="isRespawning"><i class="fa fa-play"></i> {{ loc.p_pause_play }}</span></button>
<!-- .pause-popup--btn-group -->
</div>
<!-- .w-shrinkauto -->
</div>
<!-- #game-play-switch -->
</div>
<!-- #popupTipDay -->
</div>
<!-- #pausePopupInnards -->
</div>
</template>
</large-popup>
<div class="respawn-container respawn-two" v-show="isPaused">
<display-ad :hidden="hideAds" id="shellshockers_respawn_banner_2_ad" ref="respawnTwoDisplayAd" class="pauseFiller" :ignoreSize="false" :adUnit="adUnits.display.respawnTwo" adSize="300x250"></display-ad>
</div>
<div class="respawn-container respawn-one" v-show="isPaused">
<!-- <display-ad :hidden="hideAds" id="shellshockers_respawn_banner_ad" ref="respawnDisplayAd" class="pauseFiller" :ignoreSize="false" :adUnit="adUnits.display.respawn" adSize="728x90"></display-ad> -->
<display-ad :hidden="hideAds" id="shellshockers_respawn_banner-new_ad" ref="respawnDisplayAd" class="pauseFiller" :ignoreSize="false" :adUnit="adUnits.display.respawnThree" adSize="728x90"></display-ad>
</div>
</div>
<!-- .pause-popup--container -->
</div>
<!-- end #inGameScaler -->
<div class="in-game-widgets">
<music-widget ref="musicWidgetinGame" :loc="loc" :settings-ui="settingsUi" :show="showIngameWidget"></music-widget>
</div>
{{showIngameWidget}}
</div>
</script>
<script>
var comp_game_screen = {
template: '#game-screen-template',
components: {
'account-panel': comp_account_panel,
// 'event-panel': comp_events,
'weapon-select-panel': comp_weapon_select_panel,
// 'music-widget': comp_music_widget,
'event-panel': comp_events,
'weapon-select-panel': comp_weapon_select_panel,
},
props: ['kname', 'kdname'],
data: function () {
return vueData;
},
created: function () {
this.isPoki = pokiActive;
},
methods: {
placeBannerAdTagForGame: function (tagEl) {
this.$refs.pauseAdPlacement.appendChild(tagEl);
},
showGameMenu: function () {
// this.game.tipIdx = this.loc.tip_ofthe_day
// ? Math.randomInt(0, this.loc.tip_ofthe_day.length)
// : 0;
this.game.gameType = extern.gameType;
vueApp.showRespawnDisplayAd();
this.$refs.pausePopup.show();
this.isPaused = true;
vueApp.isPaused = true;
setTimeout(() => vueApp.disableRespawnButton(false), 500);
vueData.ui.showCornerButtons = true;
vueApp.gameUiAddClassForNoScroll();
addEventListener('gamepadbuttondown', this.onControllerButton);
this.crazyAdsRespawn();
extern.chicknWinnerOnPause();
vueApp.hideShareLinkPopup();
},
delayGameMenuPlayButtons() {
setTimeout(() => {
this.delayTheCracking = true;
}, 3000);
},
hideGameMenu: function () {
if (!extern.inGame) {
return;
}
this.$refs.pausePopup.hide();
// this.$refs.respawnDisplayAd.hide();
// this.$refs.respawnTwoDisplayAd.hide();
if (crazyGamesActive) crazysdk.clearAllBanners(); // Per CG's request
this.isPaused = false;
vueApp.isPaused = false;
vueApp.gameUiAddClassForNoScroll();
removeEventListener('gamepadbuttondown', this.onControllerButton);
},
onHomeClicked: function () {
this.gaSend('home');
this.hideGameMenu();
this.$refs.leaveGameConfirmPopup.show();
BAWK.play('ui_click');
},
onLeaveGameConfirm: function () {
this.leaveGame();
this.delayTheCracking = false;
},
onLeaveGameCancel: function () {
this.showGameMenu();
},
leaveGame: function () {
// clientGame.js manipulates chickenBadge element directly to hide/show it
vueApp.disablePlayButton(false);
this.$refs.chickenBadge.style.display = 'none';
vueApp.showSpinner();
document.body.style.overflow = 'visible';
window.scrollY = 0;
this.hidePopupsIfGameCloses();
extern.leaveGame(this.afterLeftGame);
vueData.ui.showCornerButtons = true;
// OneSignal elements are not part of the Vue app
var oneSignalBell = document.getElementById('onesignal-bell-container');
if (oneSignalBell) {
oneSignalBell.style.display = 'inline-block';
}
},
hidePopupsIfGameCloses: function() {
const gamePopups = vueApp.$refs.gameScreen.$children;
if (Array.isArray(gamePopups)) {
gamePopups.forEach( gamePopup => {;
if ( gamePopup.isShowing === true && gamePopup.$el.id !== 'pausePopup' ) {
gamePopup.close();
console.log(`Closing ${gamePopup.$el.id}`);
}
});
}
},
afterLeftGame: function () {
vueApp.hideSpinner();
vueApp.showTitleScreenAd();
vueApp.switchToHomeUi();
},
onHelpClicked: function () {
this.hideGameMenu();
vueApp.showHelpPopup();
BAWK.play('ui_popupopen');
},
onShareLinkClicked: function () {
extern.inviteFriends();
BAWK.play('ui_popupopen');
},
onSettingsClicked: function () {
this.hideGameMenu();
vueApp.showSettingsPopup();
BAWK.play('ui_popupopen');
},
onShareLinkConfirm: function () {
extern.copyFriendCode(this.$refs.shareLinkUrl);
},
onShareLinkClosed: function () {
this.showGameMenu();
},
onEquipClicked: function () {
this.game.pauseScreen.wasGameInventoryOpen = true;
this.game.pauseScreen.classChanged = false;
this.gaSend('inventory');
vueApp.switchToEquipUi();
BAWK.play('ui_equip');
},
onSwitchTeamClicked: function () {
this.hideGameMenu();
BAWK.play('ui_popupopen');
this.$refs.switchTeamPopup.show();
},
onSwitchTeamCancel: function () {
this.showGameMenu();
},
onSwitchTeamConfirm: function () {
extern.switchTeam();
},
onControllerButton: function (e) {
switch (e.detail) {
case '9':
if (document.hasFocus() && !this.isRespawning && this.delayTheCracking) {
this.onPlayClicked();
}
break;
case '4':
case '6':
case '14':
vueData.classIdx = Math.max(0, vueData.classIdx - 1);
this.$refs.weaponSelect.selectClass(vueData.classIdx);
break;
case '5':
case '7':
case '15':
vueData.classIdx = Math.min(6, vueData.classIdx + 1);
this.$refs.weaponSelect.selectClass(vueData.classIdx);
break;
}
},
gaSendOnClassChange() {
if (!this.game.pauseScreen.wasGameInventoryOpen && this.game.pauseScreen.classChanged) {
ga('send', 'event', 'respawn-popup', 'classClick', Object.keys(CharClass).find(key => CharClass[key] === vueApp.classIdx));
}
// reset for good measure
this.game.pauseScreen.wasGameInventoryOpen = false;
this.game.pauseScreen.classChanged = false;
},
onPlayClicked: function () {
vueApp.disableRespawnButton(true);
vueData.ui.showCornerButtons = false;
extern.respawn();
this.isPaused = false;
BAWK.play('ui_playconfirm');
this.gaSendOnClassChange();
},
onSpectateClicked: function () {
this.gaSend('spectate');
this.hideGameMenu();
vueData.ui.showCornerButtons = false;
extern.enterSpectatorMode();
BAWK.play('ui_playconfirm');
},
showPlayerActionsPopup: function () {
this.hideGameMenu();
this.$refs.playerActionsPopup.show();
},
onPlayerActionsCancel: function () {
this.showGameMenu();
},
onMuteClicked: function () {
this.$refs.playerActionsPopup.hide();
this.playerActionsPopup.muteFunc();
},
onBootClicked: function () {
this.$refs.playerActionsPopup.hide();
this.playerActionsPopup.bootFunc();
},
resizeBannerAdTagForGame: function() {
const pauseAdPlacement = document.getElementById('pauseAdPlacement');
const rect = document.getElementById('pausePopup').getBoundingClientRect();
pauseAdPlacement.style.top = (rect.height).toString() + 'px';
},
earnInGameReward() {
this.hideGameMenu();
vueApp.setDarkOverlay(true);
this.pokiRewardReady = false;
this.isPokiNewRewardTimer = false;
extern.api_inGameReward(this.inGameRewardSuccessCallback, this.inGameRewardFailedCallback, this.rewardReachedDailyLimits);
extern.setVolume(0);
},
inGameRewardSuccessCallback() {
extern.pokiRewardedBreak(this.inGameRewardIsGranted, this.inGameRewardFailedCallback);
},
inGameRewardIsGranted(rewardValue) {
console.log('inGameRewardSuccessCallback');
this.isPokiNewRewardTimer = true;
vueApp.showGiveStuffPopup('reward_title', rewardValue, '');
ga('send', 'event', 'Poki', 'Rewarded Video', 'Reward Success', this.pokiRewNum);
this.pokiRewNum ++;
},
inGameRewardFailedCallback() {
vueApp.showGenericPopup('p_redeem_error_title', 'in_game_reward_try_again', 'ok');
this.isPokiNewRewardTimer = false;
ga('send', 'event', 'Poki', 'Rewarded Video', 'Failed');
},
rewardReachedDailyLimits() {
vueApp.showGenericPopup('in_game_reward_title', 'in_game_reward_try_again', 'ok');
this.isPokiNewRewardTimer = false;
localStore.setItem('inGameRewardLimitDate', Date.now());
extern.setVolume();
ga('send', 'event', 'Poki', 'Rewarded Video', 'Reached Daily Limit');
},
pokiTimers(value, milliseconds) {
let pokiSetTimer;
if (value === false) {
clearTimeout(pokiSetTimer);
console.log('cancelTimer');
return;
}
pokiSetTimer = setTimeout(() => this.pokiRewardReady = true, milliseconds);
},
pauseWeaponSelect() {
this.game.pauseScreen.wasGameInventoryOpen = false;
this.game.pauseScreen.classChanged = true;
vueApp.$refs.equipScreen.onChangedClass();
},
songHasChanged() {
setTimeout(() => this.songChanged = false , 2000);
},
// So crazy games requires an array for multiple display ad calls on the same screen
crazyAdsRespawn() {
if (!crazyGamesActive && !testCrazy) return;
// Removing delay per CG's request. Refresh rate is restricted server-side
/*if (this.cGrespawnBannerTimeout) return;
this.cGrespawnBannerTimeout = setTimeout(() => {
clearTimeout(this.cGrespawnBannerTimeout);
this.cGrespawnBannerTimeout = null;
}, 20000);*/
this.cGrespawnBannerErrors = 0;
crazysdk.requestBanner([{
containerId: 'shellshockers_respawn_banner-new_ad',
size: '728x90',
},{
containerId: 'shellshockers_respawn_banner_2_ad',
size: '300x250',
}]);
},
onClickCreator(url) {
window.open(url, )
},
openVipPopup() {
this.$refs.playerActionsPopup.hide();
vueApp.showSubStorePopup();
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'respawn-popup', 'click', label);
},
playIncentivizedAd(e) {
if (!this.chicknWinnerReady || this.hasChwPlayClicked || this.isChicknWinnerError) {
e.preventDefault();
return;
}
vueApp.disableRespawnButton(true);
this.hasChwPlayClicked = true;
vueApp.loadNuggetVideo();
vueApp.chicknWinnerNotReady();
ga('send', 'event', 'Chickn Winner', 'Free eggs btn', 'click-in-game');
}
},
computed: {
isRespawning: function () {
return this.game.respawnTime > 0;
},
isTeamGame: function () {
// Would be better to use the same enum as the client game code
return this.game.gameType !== 0;
},
teamColorCss: function () {
return this.game.team === this.ui.team.blue ? 'blueTeam btn_red bevel_red' : 'redTeam btn_blue bevel_blue';
},
teamName: function () {
return this.game.team === this.ui.team.blue ? this.loc.p_pause_joinred : this.loc.p_pause_joinblue;
},
newTeamColorCss: function () {
return this.game.team === this.ui.team.blue ? 'redTeam btn_red' : 'blueTeam btn_blue';
},
newTeamName: function () {
return this.game.team === this.ui.team.blue ? this.loc.team_red : this.loc.team_blue;
},
muteButtonLabel: function () {
return this.playerActionsPopup.muted ? this.loc.ui_game_playeractions_unmute : this.loc.ui_game_playeractions_mute;
},
showIngameWidget() {
if (!this.isPaused && this.songChanged) {
this.songHasChanged();
return true;
}
return false;
},
showMusicWidget() {
return this.ui.showScreen === 2;
},
isEggStoreSaleItem() {
return this.eggStoreItems.some( item => item['salePrice'] !== '' && this.ui.showCornerButtons);
},
upgradeBadgeUrl() {
return this.isSubscriber ? 'img/vip-club/vip-club-popup-emblem.png' : 'img/ico_chickenBadge.png';
},
playerSocial() {
return SOCIALMEDIA[this.playerActionsPopup.social.id];
},
progressMsg() {
if (this.isChicknWinnerError) {
return this.loc.chw_error_text;
}
if (this.chicknWinnerDailyLimitReached && this.chicknWinnerCounter > 0) {
return this.loc.chw_daily_limit_msg;
}
if (this.chicknWinnerReady) {
if (this.chicknWinnerCounter === 0) {
return this.loc.chw_ready_msg;
} else {
return this.loc.chw_cooldown_msg;
}
} else {
return this.loc.chw_free_eggs_coming;
}
},
progressBarWrapClass() {
if (this.isChicknWinnerError) {
return 'chw-progress-bar-wrap-error';
}
if (this.chicknWinnerReady) {
return 'chw-progress-bar-wrap-complete';
}
},
playAdText() {
if (this.chicknWinnerReady && this.chicknWinnerCounter === 0) {
return this.loc.chw_btn_free_reward;
} else {
return this.loc.chw_btn_watch_ad;
}
},
chwShowCountdown() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'hideme';
} else {
if (this.chicknWinnerReady) {
return 'hideme';
} else {
return 'display-inline';
}
}
},
chwChickSrc() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'img/chicken-nugget/chickLoop_daily_limit.svg';
} else {
if (!this.chicknWinnerReady) {
return 'img/chicken-nugget/chickLoop_sleep.svg';
} else {
return 'img/chicken-nugget/chickLoop_speak.svg';
}
}
},
},
watch: {
isPokiGameLoad(value) {
this.pokiTimers(value, this.videoRewardTimers.initial);
// this.pokiTimers(value, 300);
},
isPokiNewRewardTimer(value) {
this.pokiTimers(value, this.videoRewardTimers.primary);
// this.pokiTimers(value, 300);
},
kname(val) {
this.killedByMessage = this.loc['ui_game_killedby'].format(val);
},
kdname(val) {
this.killedMessage = this.loc['ui_game_youkilled'].format(val);
},
}
};
</script>
<script id="vip-club-template" type="text/x-template">
<div class="vip-club fullwidth">
<div class="vip-club-log-content--outer roundme_sm display-grid grid-align-items-center grid-column-1-2 grid-gap-space-lg">
<header class="grid-span-2-start-1">
<!-- <h2><span class="text-orange">V</span>ery <span class="text-orange">I</span>mportant <span class="text-orange">P</span>oultry</h2> -->
<span class="sr-only">Very Important Poultry</span>
<img class="vip-club-water-mark display-block center_h" src="img/vip-club/very-important-poultry.png" alt="Very Important Poultry text image">
</header>
<div class="vip-club--logo">
<img src="img/vip-club/vip-club-popup-emblem.png">
</div>
<div class="vip-club--content">
<div class="subs-info">
<ul>
<li>{{loc.p_chicken_goldfeature1}}</li>
<li v-html="loc.p_chicken_goldfeature3"></li>
<li>{{loc.p_chicken_goldfeature2}}</li>
<li>{{loc.s_popup_feature_premium_items}}</li>
</ul>
<!-- <p class="more">{{loc.home_media_apply_now}}</p> -->
<button v-on:click="openVipPopup" class="margins_lg ss_button btn_sm btn_vip-button bevel_blue">{{loc.faq}}</button>
</div>
</div>
</div>
<div class="subscription-plans" :class="[hasPlan ? 'display-grid grid-column-1-2 grid-gap-space-lg' : '']">
<div class="vip-club-items--outer display-grid" :class="[hasPlan ? 'grid-column-1-eq grid-just-item-center' : 'grid-column-3-eq']">
<sub-item v-for="sub in subs" :key="sub.sku" :item="sub" :loc="loc" :upgrade-name="upgradeName" :is-subscriber="isSubscriber" :is-upgraded="isUpgraded" :account-set="accountSettled"></sub-item>
</div>
<div v-if="hasPlan" class="manage-subscription-wrapper">
<div v-if="hasPlan" class="plan-details text-center vip-club-log-content--outer roundme_sm">
<h5>{{loc.sRenewalDate}}:</h5>
<p v-if="expireDate" class="plan-expiry">{{ expireDate }}</p>
<p class="manage-details" v-html="manageInfo"></p>
<button class="ss_button btn_manage_sub btn_sm btn_yolk bevel_yolk btn_vip-button bevel_blue"" v-on:click="onManageClick">{{loc.sManageBtn}}</button>
</div>
</div>
</div>
</div>
</script>
<template id="comp-sub-item">
<div v-if="isActive" class="vip-item" :class="nameLowerCaseHyphens">
<div class="vip-item--inner centered">
<div class="subscription-details">
<header>
<h3>{{loc[name]}}</h3>
</header>
<p class="price-tag roundme_sm" v-html="priceTag"></p>
<button v-if="!hasSub" class="ss_button btn_sm btn_vip-button bevel_blue" v-on:click="subClick">
{{loc[buyBtnText]}}
</button>
</div>
</div>
<div v-if="flagText" class="vip-banner" :class="flagText">
<span>{{loc[flagText]}}</span>
</div>
<img aria-hidden="true" :src="img" />
</div>
</template>
<script>
const comp_sub_item = {
template: '#comp-sub-item',
props: ['loc', 'item', 'upgradeName', 'isUpgraded', 'isSubscriber'],
data() {
return {
isCurrentSub: false,
hasSub: false,
hasUpgrade: false,
locName: '',
};
},
methods: {
subClick() {
if (this.$parent.$el.id === 'shell-subscriptions') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
BAWK.play('ui_click');
if (this.hasSub) {
extern.buyProductForMoney();
} else {
extern.buyProductForMoney(this.item.sku, true);
ga('send', 'event', 'subscriptions', 'click', this.locName);
}
}
},
computed: {
nameLowerCaseHyphens() {
this.locName = this.item.name.replace(' ', '-').toLowerCase().replace(' ', '-');
return this.locName;
},
name() {
return `s-${this.locName}-title`;
},
img() {
return `img/vip-club/vip-club-popup-item-${this.locName}-bg.png`;
},
priceTag() {
let price = this.item.salePrice ? this.item.salePrice : this.item.price,
priceWcents = `${(price / 100).toFixed(2)}`,
thePrice = priceWcents.split('.');
return `$${thePrice[0]}<span class="price-tag--cents">.${thePrice[1]}</span>`;
},
buyBtnText() {
if (this.isCurrentSub && this.hasUpgrade) {
return 's-btn-txt-change';
}
return 's-btn-txt-subscribe';
},
isActive() {
if (this.isCurrentSub && this.hasUpgrade) {
return true
} else if (this.hasSub && this.hasUpgrade) {
return false
} else {
return true
};
},
flagText() {
if (this.isCurrentSub && this.hasUpgrade) return 'p_egg_shop_purchased';
return this.item.flagText;
}
},
watch: {
upgradeName(val) {
},
isUpgraded(val) {
this.hasUpgrade = val;
this.hasSub = this.isSubscriber && this.hasUpgrade;
this.isCurrentSub = this.upgradeName === this.item.name && this.hasUpgrade;
}
}
};
</script>
<script>
var compVipClubTemplate = {
template: '#vip-club-template',
components: {
'sub-item': comp_sub_item,
},
data() {
return vueData;
},
props: ['loc', 'subs'],
methods: {
onManageClick() {
if (this.$parent.$el.id === 'shell-subscriptions') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
extern.buyProductForMoney();
},
openVipPopup() {
if (this.$parent.$el.id === 'shell-subscriptions') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
BAWK.play('ui_click');
vueApp.showVipPopup();
}
},
computed: {
hasPlan() {
return this.isSubscriber && this.isUpgraded;
},
expireDate() {
if (this.hasPlan) {
return new Date(extern.account.upgradeExpiryDate).toUTCString();
}
return;
},
planName() {
if (this.hasPlan) {
return 's-' + this.upgradeName.replace(' ', '-').toLowerCase().replace(' ', '-') + '-title';
}
return;
},
manageInfo() {
return this.loc.sManageInfo;
}
}
};
</script><script id="give-stuff-popup" type="text/x-template">
<!-- Popup: Give Stuff -->
<!-- <large-popup id="giveStuffPopup" ref="giveStuffPopup" :popup-model="giveStuffPopup" @popup-closed="onSharedPopupClosed" :class="giveStuffPopup.type"> -->
<large-popup id="giveStuffPopup" ref="giveStuffPopup" :popup-model="giveStuffPopup" :class="giveStuffPopup.type">
<template slot="content">
<div id="giveStuffPopup-content" class="giveStuffPopup-content" :class="{'fullwidth' : giveStuffPopup.type === 'twitchDrops'}">
<div v-if="giveStuffPopup.type === 'vip'" id="give-stuff-icon" class="give-stuff-icon">
<img src="img/vip-club/vip-club-popup-emblem.png" alt="Shell Shockers VIP">
</div>
<h3 v-if="giveStuffPopup.type !== 'twitchDrops'" :class="{'popup-title-vip' : giveStuffPopup.type === 'vip'}" id="popup_title" class="roundme_sm text-center">
{{ loc[giveStuffPopup.titleLoc] }}
</h3>
<h2 v-if="giveStuffPopup.type === 'twitchDrops'" id="popup_title" class="roundme_sm text-center title-shadow text-twitch-yellow">
{{ loc[giveStuffPopup.titleLoc] }}
</h2>
<p v-if="giveStuffPopup.type === 'twitchDrops'" class="text-center">{{ loc.give_stuff_twitch_sub_desc }}</p>
<div v-show="(giveStuffPopup.eggs)" class="f_row">
<div class="egg-give-stuff">
<img src="img/ico_goldenEgg.png" />
<h2>{{giveStuffPopup.eggs}}</h2>
</div>
</div>
<div v-show="giveStuffPopup.rickroll" class="f_row">
<img src="img/rickroll.gif" style="margin-bottom: 1em; height: 25em;" />
</div>
<div v-show="giveStuffPopup.eggOrg" class="f_row">
<img src="img/egg-org/eggOrg_timeTravel_splash800x600-min.png" style="margin-bottom: 1em;">
</div>
<div v-show="(giveStuffPopup.items && giveStuffPopup.items.length > 0)" class="items-container f_row grid-gap-1" :class="{'popup-items-vip' : giveStuffPopup.type === 'vip'}">
<item v-for="i in giveStuffPopup.items" :item="i" :key="i.id" :isSelected="false" :show-item-only="true"></item>
</div>
<p v-if="giveStuffPopup.type === 'twitchDrops'"></p>
</div>
<footer :class="{'text-center' : giveStuffPopup.type === 'twitchDrops'}">
<!-- <p v-if="giveStuffPopup.type === 'twitchDrops'" class="text-center">{{ loc.give_stuff_twitch_footer_desc }}</p> -->
<button class="ss_button width_xs text-center" :class="giveStuffPopup.type === 'twitchDrops' ? 'twitch-btn twitch-btn-purple' : 'btn_green bevel_green'" @click="onGiveStuffComplete">{{ loc.ok }}</button>
<button v-if="giveStuffPopup.type === 'twitchDrops'"class="ss_button twitch-btn twitch-btn-pink width_xs text-center" @click="onClickTwitchDropsMore">Get More!</button>
</footer>
</template>
<template slot="confirm">{{ loc.confirm }}</template>
</large-popup>
</script>
<script>
const GIVESTUFFPOPUP = {
template: '#give-stuff-popup',
components: {
'item': comp_item,
},
props: ['loc', 'giveStuffPopup'],
data: function () {
return {
languageCode: this.selectedLanguageCode,
eggBalance: 0,
vueData,
}
},
methods: {
onGiveStuffComplete: function () {
this.giveStuffPopup.eggOrg = false;
this.giveStuffPopup.rickroll = false;
this.$refs.giveStuffPopup.toggle();
},
onClickTwitchDropsMore() {
window.open(dynamicContentPrefix + 'twitch');
this.onGiveStuffComplete();
}
},
};
</script>
<script>
function startVue(languageCode, locData) {
vueData.extern = extern;
vueData.loc = locData;
vueApp = new Vue({
el: '#app',
components: {
'dark-overlay': comp_dark_overlay,
'light-overlay': comp_light_overlay,
'spinner-overlay': comp_spinner_overlay,
'gdpr': comp_gdpr,
'settings': comp_settings,
'help': comp_help,
'vip-help': vip_help,
'egg-store': comp_egg_store,
'subscription-store': compVipClubTemplate,
// 'subscription-store': comp_egg_store,
'item': comp_item,
'home-screen': comp_home_screen,
'equip-screen': comp_equip_screen,
'game-screen': comp_game_screen,
// 'gold-chicken-popup': comp_gold_chicken_popup,
'chicken-nugget-popup': comp_chickn_winner_popup,
'egg-store-item': comp_store_item,
'give-stuff-popup': GIVESTUFFPOPUP,
},
data: vueData,
createdTime: null,
mountedTime: null,
fullyRenderedTime: null,
multisizeAdTag: null,
created () {
console.log('Vue instance created');
createdTime = performance.now();
this.currentLanguageCode = languageCode;
this.urlParams = parsedUrl.query.open ? parsedUrl.query.open : null;
},
mounted () {
console.log('Vue instance mounted');
mountedTime = performance.now();
console.log('create -> mount time (ms): ' + (mountedTime - createdTime));
this.currentGameType = extern.gameType;
// Cannot modify data within the mounted hook, so wait until next tick
this.$nextTick(function () {
fullyRenderedTime = performance.now();
console.log('mounted -> fully rendered time (ms): ' + (fullyRenderedTime - mountedTime));
console.log('created -> fully rendered time (ms): ' + (fullyRenderedTime - createdTime));
this.ready = true;
// vueApp.getNuggetTimer();
//this.showSpinner('ui_game_loading', 'ui_game_waitforit');
// this.histPushState({game: this.ui.screens.home}, 'Shellshockers home', '?home');
//this.playMusic();
this.getLocLang();
extern.continueStartup();
this.changelog.current = changeLogData;
//this.fetchSponsors();
});
},
methods: {
getCanvas: function () {
return this.$refs.canvas;
},
playMusic: function () {
myAudio = new Audio('./sound/theme');
// Uncomment for looping.
// myAudio.addEventListener('ended', function() {
// this.currentTime = 0;
// this.play();
// }, false);
myAudio.volume = this.volume;
myAudio.play();
},
changeLanguage: function (languageCode) {
extern.getLanguageData(languageCode, this.setLocData);
},
setLocData: function (languageCode, newLocData) {
this.currentLanguageCode = getStoredString('languageSelected', null) ? localStore.getItem('languageSelected') : languageCode;
this.loc = newLocData;
},
setPlayerName: function (playerName) {
this.playerName = playerName.substring(0, 128);
},
showSpinner: function (headerLocKey, footerLocKey) {
this.$refs.spinnerOverlay.show(headerLocKey, footerLocKey);
},
showSpinnerLoadProgress: function (percent) {
this.$refs.spinnerOverlay.showSpinnerLoadProgress(percent);
},
hideSpinner: function () {
this.$refs.spinnerOverlay.hide();
},
onSettingsPopupOpened: function () {
this.$refs.settings.captureOriginalSettings();
},
onSettingsPopupSwitchTabMisc: function () {
this.$refs.settings.switchTab('misc_button');
},
onSettingsX: function () {
this.$refs.settings.applyOriginalSettings();
this.$refs.settings.cancelLanguageSelect();
},
onSettingsQuickSave() {
this.$refs.settings.quickSave();
},
onNoAnonPopupConfirm: function () {
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.denyAnonUserPopup, this.googleAnalytics.label.signInClick);
this.showFirebaseSignIn();
},
onSharedPopupClosed: function () {
// If in-game, show game menu after closing the popup
this.blackFridayBanner = false;
if (this.ui.showScreen === this.ui.screens.game && extern.inGame) {
this.showGameMenu();
}
},
onGiveStuffComplete: function () {
this.$refs.giveStuffPopup.toggle();
},
onPrivacyOptionsOpened: function () {
this.showPrivacyPopup();
},
/**
* Creates a generic popup that passes content 3 data options to slots on the genericPopup smallPopup
* @param titleLockKey mixed - popup header text
* @param contentLocKey mixed- popup content
* @param confirmLocKey mixed - popup button text
*/
showGenericPopup: function (titleLocKey, contentLocKey, confirmLocKey, hideBackgroundPopup) {
this.genericMessagePopup.titleLocKey = titleLocKey;
this.genericMessagePopup.contentLocKey = contentLocKey;
this.genericMessagePopup.confirmLocKey = confirmLocKey;
this.hidePausePopupIfGenericPopupOpen();
this.$refs.genericPopup.show();
// vueApp.setDarkOverlay();
},
hidePausePopupIfGenericPopupOpen: function() {
if (!this.$refs.gameScreen.$refs.pausePopup && $refs.gameScreen.$refs.pausePopup.isShowing === false) {
return;
}
return this.$refs.gameScreen.$refs.pausePopup.hide();
},
showOpenUrlPopup: function (url, titleLocKey, content, confirmLocKey, cancelLocKey) {
console.log('title: ' + this.loc[titleLocKey]);
console.log('confirm: ' + this.loc[confirmLocKey]);
console.log('cancel: ' + this.loc[cancelLocKey]);
this.openUrlPopup.url = url;
this.openUrlPopup.titleLocKey = titleLocKey;
this.openUrlPopup.content = content;
this.openUrlPopup.confirmLocKey = confirmLocKey;
this.openUrlPopup.cancelLocKey = cancelLocKey;
this.$refs.openUrlPopup.show();
},
onOpenUrlPopupConfirm: function () {
extern.openUrlAndGiveReward();
},
showUnsupportedPlatformPopup: function (contentLocKey) {
this.ui.showScreen = -1;
this.unsupportedPlatformPopup.contentLocKey = contentLocKey;
this.$refs.unsupportedPlatformPopup.show();
},
showMissingFeaturesPopup: function () {
this.ui.showScreen = -1;
this.$refs.missingFeaturesPopup.show();
},
showFirebaseSignIn: function () {
this.$refs.homeScreen.showSignIn();
},
hideFirebaseSignIn: function () {
this.$refs.firebaseSignInPopup.hide();
},
showCheckEmail: function () {
this.$refs.homeScreen.$refs.checkEmailPopup.show();
},
hideCheckEmail: function () {
this.$refs.homeScreen.$refs.checkEmailPopup.hide();
},
showResendEmail: function () {
this.$refs.homeScreen.$refs.resendEmailPopup.show();
},
hideResendEmail: function () {
this.$refs.homeScreen.$refs.resendEmailPopup.hide();
},
showChickenPopup: function () {
this.$refs.goldChickenPopup.show();
},
hideChickenPopup: function () {
this.$refs.goldChickenPopup.hide();
},
showHelpPopup: function () {
this.hideGameMenu();
this.$refs.helpPopup.show();
},
showVipPopup: function () {
this.hideGameMenu();
BAWK.play('ui_popupopen');
this.$refs.vipPopup.show();
},
showGetMobilePopup() {
this.$refs.mobileAdPopup.show();
},
showAttentionPopup: function () {
this.hideGameMenu();
this.$refs.anonWarningPopup.show();
},
hideHelpPopup: function () {
this.$refs.helpPopup.hide();
},
showSettingsPopup: function () {
this.hideGameMenu();
this.$refs.settingsPopup.show();
extern.settingsMenuOpened();
},
hideSettingsPopup: function () {
this.$refs.settingsPopup.hide();
},
showEggStorePopup: function () {
this.$nextTick(() => {
this.hideGameMenu();
this.$refs.eggStorePopup.show();
if (this.isSale) {
this.blackFridayBanner = true;
}
ga('send', 'event', this.googleAnalytics.cat.itemShop, this.googleAnalytics.action.shopItemNeedMoreEggsPopup, this.googleAnalytics.label.getMoreEggs);
});
},
showSubStorePopup: function () {
this.$nextTick(() => {
this.hideGameMenu();
this.$refs.subStorePopup.show();
BAWK.play('ui_popupopen');
// ga('send', 'event', this.googleAnalytics.cat.itemShop, this.googleAnalytics.action.shopItemNeedMoreEggsPopup, this.googleAnalytics.label.getMoreEggs);
});
},
vipEndedPopup() {
this.$refs.vipEnded.show();
BAWK.play('ui_popupopen');
},
showPopupEggStoreSingle(sku) {
if (!sku) {
console.log('No sku for popup');
return;
}
if (!this.premiumShopItems.some( i => i.sku === sku)) {
vueApp.showGenericPopup("uh_oh", "p_egg_shop_no_item_desc", "ok");
return;
}
this.eggStorePopupSku = sku;
this.$refs.popupEggStoreSingle.show();
},
hideEggStorePopup: function () {
this.$refs.eggStorePopup.hide();
},
showChangelogPopup: function () {
this.$refs.changelogPopup.show();
},
showHistoryChangelogPopup() {
fetch('./changelog/oldChangelog.json', {cache: "no-cache"})
.then(response => response.json())
.then(data => {
data.forEach(el => this.changelog.current.push(el));
});
this.changelog.showHistoryBtn = false;
},
hideChangelogPopup: function () {
this.$refs.changelogPopup.hide();
},
showGiveStuffPopup: function (titleLoc, eggs, items, type, callback) {
if (this.giveStuffPopup.eggOrg) {
ga('send', 'event', 'Egg Org', 'Code Cracked', 'redeemed');
}
type = type || '';
this.giveStuffPopup.titleLoc = titleLoc;
this.giveStuffPopup.eggs = eggs;
this.giveStuffPopup.items = items;
this.giveStuffPopup.type = type;
this.$refs.giveStuffPopup.$refs.giveStuffPopup.show();
if (callback) callback();
},
showEggOrgPopup() {
this.giveStuffPopup.eggOrg = true;
this.showGiveStuffPopup('p_give_stuff_title');
},
showShareLinkPopup: function (url) {
this.hideGameMenu();
this.game.shareLinkPopup.url = url;
this.$refs.gameScreen.$refs.shareLinkPopup.show();
},
hideShareLinkPopup() {
if (!this.$refs.gameScreen.$refs.shareLinkPopup.isShowing) {
return;
}
this.$refs.gameScreen.$refs.shareLinkPopup.hide();
},
showJoinPrivateGamePopup: function (code) {
this.$refs.homeScreen.$refs.playPanel.showJoinPrivateGamePopup(code);
},
showPrivateGamePopup() {
this.$refs.homeScreen.$refs.playPanel.$refs.createPrivateGamePopup.toggle();
},
switchToHomeUi: function () {
this.ui.showScreen = this.ui.screens.home;
// vueApp.showTitleScreenAd();
// this.histPushState({game: this.ui.screens.home}, 'Shellshockers home', '?home');
this.gameUiRemoveClassForNoScroll();
extern.chwRadialProgress();
},
switchToEquipUi: function () {
console.log('switchToEquipUi called');
this.ui.showScreen = this.ui.screens.equip;
this.$refs.equipScreen.setup();
this.$refs.equipScreen.switchToInventory();
if (extern.inGame) {
this.hideGameMenu();
extern.openEquipInGame();
}
else {
vueApp.hideTitleScreenAd();
}
},
switchToGameUi: function (isGameOwner) {
this.ui.showScreen = this.ui.screens.game;
this.game.isGameOwner = isGameOwner;
},
gameUiAddClassForNoScroll() {
let html = document.getElementsByTagName("html")[0];
html.classList.add('noScrollIngame');
},
gameUiRemoveClassForNoScroll() {
let html = document.getElementsByTagName("html")[0];
html.classList.remove('noScrollIngame');
},
switchToGameUiQuickPlay(isGameOwner) {
this.ui.showScreen = this.ui.screens.game;
this.game.isGameOwner = isGameOwner;
this.ui.showCornerButtons = false;
vueApp.hideTitleScreenAd();
this.gameUiAddClassForNoScroll();
},
showGameMenu: function () {
this.hideSpinner();
this.$refs.gameScreen.showGameMenu();
// this.histPushState({game: this.ui.screens.game}, 'Shellshockers game menu', '?game=menu');
},
hideGameMenu: function () {
this.$refs.gameScreen.hideGameMenu();
// this.histPushState({game: this.ui.screens.game}, 'Shellshockers in game', '?game=play');
},
onMiniGameCompleted: function () {
this.$refs.homeScreen.onMiniGameCompleted();
},
setShellColor: function (colorIdx) {
this.equip.colorIdx = colorIdx;
},
setAccountUpgraded: function (upgraded, endDate) {
this.isUpgraded = upgraded;
this.equip.extraColorsLocked = !this.isUpgraded;
this.nugStart = endDate;
},
setDarkOverlay: function (visible, overlayClass) {
this.$refs.darkOverlay.show = visible;
this.$refs.darkOverlay.overlayClass = overlayClass;
},
setLightOverlay: function (visible, overlayClass) {
this.$refs.lightOverlay.show = visible;
this.$refs.darkOverlay.overlayClass = overlayClass;
},
authCompleted: function () {
this.accountSettled = true;
if (vueApp.$refs.firebaseSignInPopup.isShowing) this.hideFirebaseSignIn();
},
showItemOnEquipScreen: function (item) {
this.switchToEquipUi();
this.$refs.equipScreen.autoSelectItem(item);
},
showTaggedItemsOnEquipScreen: function (tag) {
this.switchToEquipUi();
this.$refs.equipScreen.showTaggedItems(tag);
},
showSelectedTaggedItemsOnEquipScreen: function (tag) {
this.switchToEquipUi();
this.$refs.equipScreen.showSelectedTagItems(tag);
},
useHouseAdSmall: function (smallHouseAd) {
this.ui.houseAds.small = smallHouseAd;
},
useHouseAdBig: function (bigHouseAd) {
this.ui.houseAds.big = bigHouseAd;
},
denyAnonUser: function () {
ga('send', 'event', vueApp.googleAnalytics.cat.playerStats, vueApp.googleAnalytics.action.denyAnonUserPopup);
if (extern.inGame) {
this.hideGameMenu();
}
this.$refs.noAnonPopup.show();
},
showGdprNotification: function () {
this.$refs.gdpr.show();
},
showPrivacyPopup: function () {
this.hideSettingsPopup();
this.$refs.privacyPopup.show();
},
hidePrivacyPopup: function () {
this.$refs.privacyPopup.hide();
this.showSettingsPopup();
},
ofAgeChanged: function () {
extern.setOfAge(this.isOfAge);
BAWK.play('ui_onchange');
},
targetedAdsChanged: function () {
extern.setTargetedAds(this.showTargetedAds);
BAWK.play('ui_onchange');
},
setPrivacySettings: function (ofAge, targetedAds) {
this.isOfAge = ofAge;
this.showTargetedAds = targetedAds;
},
gameJoined: function (gameType, team) {
this.game.gameType = gameType;
this.setTeam(team);
},
setTeam: function (team) {
if (hasValue(team)) {
this.game.team = team;
}
},
showGoldChickenPopup: function () {
this.$refs.goldChickenPopup.show();
},
hideGoldChickenPopup: function () {
this.$refs.goldChickenPopup.hide();
},
showChicknWinnerPopup: function () {
this.$refs.chicknWinner.show();
vueApp.$refs.chickenNugget.showAd();
// this.$refs.chickenNugget.loadMiniGame();
this.isBuyNugget = true;
console.log('showChicknWinnerPopup()');
},
hideChicknWinnerPopup: function () {
this.$refs.chicknWinner.hide();
this.$refs.chickenNugget.onGotWinner();
console.log('Hide nugget');
},
chicknWinnerIsReady() {
if (this.chicknWinnerDailyLimitReached) {
this.chicknWinnerNotReady();
return;
}
setTimeout(() => {
this.chicknWinnerReady = true;
this.hasChwPlayClicked = false;
ga('send', 'event', 'Chickn Winner', 'Free eggs btn', `ready-in-${(this.ui.showScreen === this.ui.screens.game) ? 'game' : 'home'}`);
}, 1000);
},
chicknWinnerNotReady() {
this.chicknWinnerReady = false;
this.hasChwPlayClicked = false;
},
chicknWinnerError() {
this.isChicknWinnerError = true;
},
chicknWinnerDailyLimit() {
this.chicknWinnerDailyLimitReached = true;
this.chicknWinnerNotReady();
},
loadNuggetVideo() {
this.hideGameMenu();
extern.checkStartChicknWinner(true);
BAWK.play('ui_playconfirm');
},
getNuggetTimer() {
return;
this.$refs.homeScreen.$refs.chickenPanel.setupNuggetTimer();
},
onMiniGameCompleted: function () {
this.$refs.chickenNugget.onMiniGameCompleted();
},
placeBannerAdTagForNugget: function (tagEl) {
this.$refs.chickenNugget.placeBannerAdTag(tagEl);
},
useSpecialItemsTag: function (tag) {
this.equip.specialItemsTag = tag;
this.equip.showSpecialItems = true;
},
disableSpecialItems: function () {
this.equip.showSpecialItems = false;
},
setUiSettings: function (settings) {
this.$refs.settings.setSettings(settings);
},
leaveGame: function () {
this.$refs.gameScreen.leaveGame();
},
showPlayerActionsPopup: function (slot) {
this.playerActionsPopup = slot;
this.$refs.gameScreen.showPlayerActionsPopup();
},
onSignInCancelClicked: function () {
vueApp.$refs.firebaseSignInPopup.hide();
BAWK.play('ui_popupclose');
},
anonWarningPopupCancel: function() {
let anonWarnConfrimed = localStore.getItem('anonWarningConfirmed');
this.urlParamSet = this.urlParams ? true : null;
this.shellShockUrlParamaterEvents();
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.anonymousPopupOpenAuto, this.googleAnalytics.label.understood);
return anonWarnConfrimed === null && localStore.setItem('anonWarningConfirmed', true);
},
anonWarningPopupConfrim() {
let anonWarnConfrimed = localStore.getItem('anonWarningConfirmed');
anonWarnConfrimed === null && localStore.setItem('anonWarningConfirmed', true);
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.anonymousPopupOpenAuto, this.googleAnalytics.label.signInClick);
extern.showSignInDialog();
this.urlParamSet = false;
vueApp.$refs.firebaseSignInPopup.show();
},
conditionalAnonWarningCall: function() {
let anonWarnConfrimed = localStore.getItem('anonWarningConfirmed');
if ( ! hasValue(anonWarnConfrimed) && this.isAnonymous) {
vueApp.showAttentionPopup();
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.anonymousPopupOpenAuto);
}
},
needMoreEggsPopupCall: function() {
ga('send', 'event', this.googleAnalytics.cat.itemShop, this.googleAnalytics.action.shopItemNeedMoreEggsPopup);
this.$refs.needMoreEggsPopup.show();
},
/**
* Not 100 % certain this should live in vue but here it is.
* Add the ability to use url paramaters to trigger events in the game.
* e.g. shellshock.io/?open=eggStore&type=Hat&item=1111 will open the spiderman hat item.
* Called in the extern closure under gameApp.js => afterGameReady()
*/
shellShockUrlParamaterEvents() {
// VUE next tick https://vuejs.org/v2/api/#Vue-nextTick
this.$nextTick( ()=> {
this.doSsUlrParams();
});
},
doSsUlrParams() {
if ( ! this.urlParams) {
return;
}
console.log(hasValue(this.isAnonymous));
if (hasValue(this.ui.houseAds.big)) {
this.urlParamSet = false;
return;
} else if (this.isAnonymous && ! hasValue(localStore.getItem('anonWarningConfirmed'))) {
this.urlParamSet = false;
console.log('Almost there!');
this.conditionalAnonWarningCall();
return;
}
console.log('Passed Popup gate');
switch (this.urlParams) {
case 'eggStore' :
// Opens the purchase egg store popup
this.showEggStorePopup();
break;
case 'goldenChicken' :
// Opens the golden chicken popup
vueApp.$refs.goldChickenPopup.show();
break;
case 'twoTimesTheEggs' :
// Opens the chicken nugget video
extern.checkStartChicknWinner(true);
BAWK.play('ui_playconfirm');
break;
case 'itemShop' :
// Opens shop options
// /?open=itemShop
// /?open=itemShop&type=Hat/Stamp/Primary/Secondary/Grenade/Premium/Tagged
// /?open=itemShop&gunClass=Soldier/Soldier/Scrambler/Ranger/Eggsploder/Whipper/Crackshot/TriHard
// /?open=itemShop&item=1111 opens hat store and then selects item
// /?open=itemShop&item=1111&openBuyNow=1 opens hat store, selects item and then opens items popup
this.eggStoreUrlParams();
break;
case 'vipStore' :
vueApp.showSubStorePopup();
break;
case 'redeem' :
vueApp.switchToEquipUi();
BAWK.play('ui_popupopen');
this.$refs.equipScreen.$refs.redeemCodePopup.show();
if ('code' in parsedUrl.query) this.equip.redeemCodePopup.code = parsedUrl.query.code;
break;
case 'faq' :
this.showHelpPopup();
break;
case 'taggedItems' :
this.openSpecialTagItemsTab();
break;
case 'privateGame' :
this.showPrivateGamePopup();
break;
case 'kotcInstruction' :
this.showKotcInstrucPopup();
break;
default:
null;
};
},
eggStoreUrlParams() {
setTimeout(() => {
const ITEMIDPARAM = parsedUrl.query.hasOwnProperty('item') ? parsedUrl.query.item : '',
TYPEPARAM = parsedUrl.query.hasOwnProperty('type') ? parsedUrl.query.type : '',
GUNCLASS = parsedUrl.query.hasOwnProperty('gunClass') && CharClass.hasOwnProperty(parsedUrl.query.gunClass) ? parsedUrl.query.gunClass : '',
BUYNOWPOPUP = parsedUrl.query.hasOwnProperty('openBuyNow');
if (ITEMIDPARAM) {
const IDISNUMBER = parseInt(ITEMIDPARAM);
let item = extern.catalog.findItemById(IDISNUMBER);
if (!item.is_available) {
vueApp.showGenericPopup("uh_oh", "no_anon_title", "ok")
return;
}
this.switchToEquipUi();
this.$refs.equipScreen.autoSelectItem(item);
if (BUYNOWPOPUP === true) {
console.log('Will it open?');
vueApp.$refs.equipScreen.onBuyItemClicked();
return;
}
} else {
this.openEquipUISwitchToShop();
if (GUNCLASS) {
vueApp.$refs.equipScreen.switchItemType(ItemType['Primary']);
vueApp.$refs.equipScreen.$refs.weapon_select.selectClass(CharClass[GUNCLASS]);
console.log('Has GUN');
} else if (TYPEPARAM) {
console.log('OPEN item');
if (ItemType.hasOwnProperty(TYPEPARAM)) {
vueApp.$refs.equipScreen.switchItemType(ItemType[TYPEPARAM]);
} else {
if (TYPEPARAM === 'Premium') {
vueApp.$refs.equipScreen.onPremiumItemsClicked();
} else if (TYPEPARAM === 'Tagged') {
vueApp.$refs.equipScreen.onTaggedItemsClicked();
}
}
}
}
}, 45);
},
openSpecialTagItemsTab() {
let tag = parsedUrl.query.tag ? parsedUrl.query.tag : null;
vueApp.showSelectedTaggedItemsOnEquipScreen(tag);
},
openEquipUISwitchToShop() {
vueApp.switchToEquipUi();
vueApp.$refs.equipScreen.switchToShop();
},
delayInGamePlayButtons() {
vueApp.$refs.gameScreen.delayGameMenuPlayButtons();
},
//Call/hide display ads
hideRespawnDisplayAd() {
this.$refs.gameScreen.$refs.respawnDisplayAd.hide();
this.$refs.gameScreen.$refs.respawnTwoDisplayAd.hide();
},
showRespawnDisplayAd() {
this.$refs.gameScreen.$refs.respawnDisplayAd.show();
this.$refs.gameScreen.$refs.respawnTwoDisplayAd.show();
},
hideLoadingScreenAd() {
this.$refs.spinnerOverlay.$refs.loadingScreenDisplayAd.hide()
},
showLoadingScreenAd() {
this.$refs.spinnerOverlay.$refs.loadingScreenDisplayAd.show();
// this.histPushState({game: 3}, 'Shellshockers Loading display ad', '?loadingAd=true');
},
displayAdEventObject(event) {
let object = event;
this.displayAdObject = object.size[0];
},
showTitleScreenAd() {
this.$refs.homeScreen.$refs.titleScreenDisplayAd.show();
},
hideTitleScreenAd() {
this.$refs.homeScreen.$refs.titleScreenDisplayAd.hide();
},
toggleTitleScreenAd() {
this.$refs.homeScreen.$refs.titleScreenDisplayAd.toggleAd();
},
scrollToTop() {
let position =
document.body.scrollTop || document.documentElement.scrollTop,
scrollAnimation;
if (position) {
window.scrollBy(0, -Math.max(1, Math.floor(position / 10)));
scrollAnimation = setTimeout(this.scrollToTop, 10);
} else clearTimeout(scrollAnimation);
},
externPlayObject(playType, gameType, playerName, mapIdx, joinCode) {
return extern.play({playType, gameType, playerName, mapIdx, joinCode});
},
pleaseWaitPopup() {
vueApp.showGenericPopup("signin_auth_title", "signin_auth_msg");
},
isPlayingPoki() {
this.isPoki = true;
this.ready = true;
return;
},
histPushState(obj, title, param) {
return history.pushState(obj, title, param);
},
disablePlayButton(val) {
return document.querySelector('.play-button').disabled = val;
},
disableRespawnButton(val) {
return document.querySelector('.btn-respawn') ? document.querySelector('.btn-respawn').disabled = val : '';
},
disaplyAdEventObject(event) {
this.displayAdObject = event.size === null ? null : event.size[0];
},
adBlockerPopupToggle() {
return vueApp.$refs.adBlockerPopup.toggle();
},
musicPlayOnce() {
return setTimeout(() => this.$refs.gameScreen.$refs.gameScreenMusic.playOnce(), 2000);
},
musicPause() {
this.$refs.gameScreen.$refs.gameScreenMusic.pause();
},
musicVolumeControl(value) {
return;
this.settingsUi.adjusters.music[0].value = Number(value);
this.$refs.gameScreen.$refs.gameScreenMusic.loadVolume();
},
toggleMusic() {
this.$refs.gameScreen.$refs.gameScreenMusic.toggleMusic();
},
musicWidget(val) {
this.music.isMusic = val;
},
fetchSponsors() {
fetch(this.music.musicJson)
.then((response) => response.json())
.then((sponsors) => this.music.sponsors = sponsors)
.catch((error) => console.log('Sponsors fetch error', error));
},
pwaPopup() {
return this.$refs.pwaPopup.show();
},
pwaBtnClick() {
// Track the click
ga('send', 'event', 'pwa', 'button', 'click');
//close popup
this.$refs.pwaPopup.hide();
// Get the event
this.pwaDeferEvent = extern.getPwaEvent;
if (!this.pwaDeferEvent) {
return;
}
this.pwaDeferEvent.prompt();
this.pwaDeferEvent.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
ga('send', 'event', 'pwa', 'a2hs', choiceResult.outcome);
this.pwaDeferEvent = null;
});
this.pwaDeferEvent = '';
},
signOut() {
this.isUpgraded = false;
this.equip.extraColorsLocked = true;
this.isUpgraded = false;
this.upgradeName = '';
this.isSubscriber = false;
},
mediaTabsStartRotate() {
return this.$refs.homeScreen.$refs.mediaTabs.autoRotateTabs();
},
mediaTabsCancelRotate() {
return this.$refs.homeScreen.$refs.mediaTabs.cancelRotate(true);
},
showAdBlockerVideo() {
this.bannerHouseAd = extern.getHouseAd('bigBanner');
this.showAdBlockerVideoAd = true;
this.hideGameMenu();
this.$refs.adBlockerVideo.show();
},
hideAdBlockerVideo() {
this.$refs.adBlockerVideo.hide();
if (extern.inGame) {
this.showGameMenu();
}
this.bannerHouseAd = {};
this.showAdBlockerVideoAd = false;
},
showKotcInstrucPopup() {
this.$refs.kotcInstrucPopup.show();
},
kotcInstrucPopupHide() {
this.$refs.kotcInstrucPopup.hide();
},
onClickPlayKotcNow() {
this.externPlayObject(vueData.playTypes.joinPublic, 3, this.playerName, '', '');
this.kotcInstrucPopupHide();
},
onVipHelpClosed() {
this.onSharedPopupClosed();
this.showSubStorePopup();
},
getLocLang(val) {
let data = this.loc,
langSetup = {};
if (val) data = val;
const newLoc = Object.entries(data).filter(item => item[0].includes('locLang')).forEach(lang => langSetup[lang[0].split('_').pop('').split("-").pop('')] = lang[1]);
this.$nextTick(() => {
this.locLanguage = langSetup
});
},
onClickTwitchDropsMore() {
window.open(dynamicContentPrefix + 'twitch');
this.onGiveStuffComplete();
},
onPremiumItemsClicked() {
this.openEquipUISwitchToShop();
this.$refs.equipScreen.onPremiumItemsClicked();
}
},
computed: {
portalClass() {
return {
'playing-poki': this.isPoki,
'playing-crazy-games': crazyGamesActive,
'is-vip': this.isSubscriber && this.isUpgraded ? true : false,
}
},
bigBannerAdLink() {
return this.bigHouseAd.link
},
bigBannerAdImg() {
return dynamicContentPrefix + `data/img/art/${this.bigHouseAd.id}${this.bigHouseAd.imageExt}`;
}
},
watch : {
loc(val) {
this.getLocLang(val);
},
}
});
}
</script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"719d075cbaa072b4","token":"b4cd973aeca34b509bef2ed0c9e0b720","version":"2021.12.0","si":100}' crossorigin="anonymous"></script>
</body>
</html>
</script><!-- include_once('./includes/shared_tags/inc_tag_asc_video_player.php'); -->
<script id="language-selector-template" type="text/x-template">
<select id="pickLanguage" v-model="languageCode" @change="onChangeLanguage" class="ss_select ss_marginright_sm">
<option v-for="(language, code) in langOptions" v-bind:value="code">
{{ language }}
</option>
</select>
</script>
<script>
var comp_language_selector = {
template: '#language-selector-template',
props: ['languages', 'selectedLanguageCode', 'loc', 'langOptions'],
data: function () {
return {
languageCode: this.selectedLanguageCode,
}
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
onChangeLanguage: function () {
vueApp.changeLanguage(this.languageCode);
// Update localStore for selected language.
localStore.setItem('languageSelected', this.languageCode);
BAWK.play('ui_onchange');
ga('send', 'event', {
eventCategory: vueData.googleAnalytics.cat.playerStats,
eventAction: vueApp.googleAnalytics.action.languageSwitch,
eventLabel: this.languageCode,
});
}
},
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;
BAWK.play('ui_playconfirm');
},
onAgreeClicked: function () {
this.showingConsent = true;
this.showingNotification = false;
extern.doConsent();
BAWK.play('ui_onchange');
},
onDisagreeClicked: function () {
this.showingNoConsent = true;
this.showingNotification = false;
extern.doNotConsent();
BAWK.play('ui_onchange');
}
}
};
</script>
<script id="settings-template" type="text/x-template">
<div>
<h1 class="roundme_sm">{{ loc.p_settings_title }}</h1>
<div id="horizontalTabs">
<button id="keyboard_button" @click="selectTab" class="ss_bigtab bevel_blue ss_marginright" :class="(showKeyboardTab ? 'selected' : '')"><img src="img/ico_keyboard.svg" class="ss_bigtab_icon"> <img src="img/ico_mouse.svg" class="ss_bigtab_icon"></button>
<button id="controller_button" @click="selectTab" class="ss_bigtab bevel_blue ss_marginright" :class="(showControllerTab ? 'selected' : '')"><img src="img/ico_gamepad.svg" class="ss_bigtab_icon"></button>
<button id="misc_button" @click="selectTab" class="ss_bigtab bevel_blue" :class="(showMiscTab ? 'selected' : '')"><img src="img/ico_monitor.svg" class="ss_bigtab_icon"> <img src="img/ico_speaker.svg" class="ss_bigtab_icon"> <img src="img/ico_privacy.svg" class="ss_bigtab_icon"></button>
</div>
<div id="popupInnards" class="roundme_sm fullwidth f_col ss_margintop_sm ss_marginbottom_xl">
<div id="settings_keyboard" v-show="showKeyboardTab">
<h3 class="nospace">{{ loc.p_settings_keybindings }}</h3>
<div class="f_row ss_margintop">
<div class="f_col">
<div v-for="c in settingsUi.controls.keyboard.game" v-if="c.side == 'left'" 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 class="ss_margintop_xl">
<div v-for="c in settingsUi.controls.keyboard.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>
</div>
</div>
<div class="f_col ss_marginleft_xl">
<div v-for="c in settingsUi.controls.keyboard.game" v-if="c.side == 'right'" 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 class="ss_margintop">
<div v-for="t in settingsUi.adjusters.mouse" 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.mouse" 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>
</div>
</div>
</div>
</div>
<div id="settings_controller" v-show="showControllerTab">
<h3 class="nospace">{{ loc.p_settings_gamepadbindings }}</h3>
<div class="f_row ss_margintop">
<div class="f_col">
<div v-for="c in settingsUi.controls.gamepad.game" class="nowrap">
<settings-gamepad-binder :loc="loc" :control-id="c.id" :control-value="c.value" @control-captured="onGamepadGameControlCaptured" :controller-type="controllerType"></settings-gamepad-binder>
<div class="label">{{ loc[c.locKey] }}</div>
</div>
</div>
<div class="f_col ss_marginleft_xl">
<div class="ss_marginbottom_xl">
<div v-for="c in settingsUi.controls.gamepad.spectate" class="nowrap">
<settings-gamepad-binder :loc="loc" :control-id="c.id" :control-value="c.value" @control-captured="onGamepadSpectateControlCaptured" :controller-type="controllerType"></settings-gamepad-binder>
<div class="label">{{ loc[c.locKey] }}</div>
</div>
</div>
<div v-for="t in settingsUi.adjusters.gamepad" 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" :precision="t.precision" @setting-adjusted="onSettingAdjusted"></settings-adjuster>
</div>
<div v-for="t in settingsUi.togglers.gamepad" 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>
</div>
</div>
<p>{{ controllerId }}</p>
<p>{{ loc.p_settings_controllerhelp }} <a target="_blank" href="https://html5gamepad.com">html5gamepad.com</a></p>
</div>
<div id="settings_misc" v-show="showMiscTab">
<div class="f_row">
<div class="f_col">
<header>
<h2>{{loc.p_settings_volume_controls}}</h2>
</header>
<div v-for="t in settingsUi.adjusters.misc" 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.adjusters.music" 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>
<h3 class="nospace ss_margintop">{{ loc.p_settings_language }}</h3>
<language-selector :languages="languages" :loc="loc" :selectedLanguageCode="currentLanguageCode" class="ss_select" :langOptions="langOption"></language-selector>
<button v-if="showPrivacyOptions" @click="onPrivacyOptionsClicked" class="ss_button btn_blue bevel_blue btn_md ss_margintop_xl">{{ loc.p_settings_privacy }}</button>
</div>
<div class="f_col ss_marginleft_xl">
<div v-for="t in settingsUi.togglers.misc" 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" :hide="hideSetting(t.id)" @setting-toggled="onSettingToggled"></settings-toggler>
</div>
</div>
</div>
</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="BAWK.play('ui_onchange')" 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) {
BAWK.play(sound);
},
reset: function () {
this.currentValue = (this.controlValue === null) ? 'undefined' : 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 {
BAWK.play('ui_onchange')
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) {
BAWK.play('ui_onchange')
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-gamepad-binder-template" type="text/x-template">
<button ref="gamepadInput" 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:focusout="onFocusOut($event)"
:key="controllerType">
<span v-html="currentValue"></span></button>
</script>
<script>
var comp_settings_gamepad_binder = {
template: '#settings-gamepad-binder-template',
props: ['loc', 'controlId', 'controlValue', 'controllerType'],
data: function () {
return {
currentValue: (this.controlValue === null) ? 'undefined' : vueData.controllerButtonIcons[this.controllerType][this.controlValue],
isCapturing: false
}
},
beforeUpdate: function () {
if (!this.isCapturing) {
this.setIcon(this.controlValue);
}
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
reset: function () {
this.setIcon(this.controlValue);
this.isCapturing = false;
removeEventListener('gamepadbuttondown', this.onButtonDown);
removeEventListener('gamepadbuttonup', this.onButtonUp);
},
capture: function (value) {
this.isCapturing = false;
this.$refs.gamepadInput.blur();
this.$emit('control-captured', this.controlId, value);
this.reset();
},
onMouseDown: function (event) {
if (!this.isCapturing) {
this.currentValue = this.loc.press_button;
this.isCapturing = true;
addEventListener('gamepadbuttondown', this.onButtonDown);
addEventListener('gamepadbuttonup', this.onButtonUp);
}
},
onKeyDown: function (event) {
event.stopPropagation();
},
onKeyUp: function (event) {
event.stopPropagation();
},
onButtonDown: function (event) {
if (event.detail == 8 || event.detail == 9) return;
BAWK.play('ui_onchange')
this.capture(event.detail);
},
onFocusOut: function (event) {
this.reset();
},
setIcon: function (value) {
this.currentValue = (value === null) ? 'undefined' : vueData.controllerButtonIcons[this.controllerType][value];
}
},
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.setIcon(newValue);
}
}
};
</script><script id="settings-adjuster-template" type="text/x-template">
<div>
<h3 class="nospace">{{ loc[locKey] }}</h3>
<div class="f_row">
<input class="ss_slider" type="range" :min="min" :max="max" :step="step" v-model="currentValue" @change="onChange">
<label class="ss_slider label">{{ getCurrentValue() }}</label>
</div>
</div>
</script>
<script>
var comp_settings_adjuster = {
template: '#settings-adjuster-template',
props: ['loc', 'locKey', 'controlId', 'controlValue', 'min', 'max', 'step', 'multiplier', 'precision'],
data: function () {
return {
currentValue: this.controlValue
}
},
methods: {
onChange: function (event) {
this.$emit('setting-adjusted', this.controlId, this.currentValue);
BAWK.play('ui_onchange');
},
getCurrentValue: function () {
if (this.precision) {
return Number.parseFloat(this.currentValue).toFixed(this.precision);
}
else {
return Math.floor(this.currentValue * (this.multiplier || 1));
}
}
},
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 v-if="!hide" 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', 'hide'],
data: function () {
return {
currentValue: this.controlValue
}
},
methods: {
onChange: function (event) {
this.$emit('setting-toggled', this.controlId, this.currentValue);
BAWK.play('ui_onchange');
}
},
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,
'settings-gamepad-binder': comp_settings_gamepad_binder,
'language-selector': comp_language_selector,
'settings-adjuster': comp_settings_adjuster,
'settings-toggler': comp_settings_toggler
},
props: ['loc', 'settingsUi', 'languages', 'currentLanguageCode', 'showPrivacyOptions', 'controllerId', 'isFromEU', 'controllerType', 'langOption', 'isVip'],
data: function () {
return {
showKeyboardTab: true,
showControllerTab: false,
showMiscTab: false,
originalSettings: {},
showDetailSettings: false,
originalLanguage: '',
originalMusicVolume: '',
musicStatChg: ''
}
},
methods: {
selectTab: function (e) {
return this.switchTab(e.target.id)
},
switchTab(tab) {
this.showKeyboardTab = false;
this.showControllerTab = false;
this.showMiscTab = false;
switch (tab) {
case 'keyboard_button':
this.showKeyboardTab = true;
break;
case 'controller_button':
this.showControllerTab = true;
break;
case 'misc_button':
this.showMiscTab = true;
break;
}
BAWK.play('ui_toggletab');
},
captureOriginalSettings: function () {
this.originalSettings = deepClone(vueData.settingsUi);
this.originalLanguage = this.currentLanguageCode;
// this.originalMusicVolume = this.originalSettings.adjusters.music[0].value;
},
applyOriginalSettings: function () {
vueData.settingsUi = this.originalSettings;
this.showDetailSettings = !vueData.settingsUi.togglers.misc.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.keyboard.game, id, value)
},
onSpectateControlCaptured: function (id, value) {
this.onControlCaptured(this.settingsUi.controls.keyboard.spectate, id, value)
},
onGamepadGameControlCaptured: function (id, value) {
this.onControlCaptured(this.settingsUi.controls.gamepad.game, id, value)
},
onGamepadSpectateControlCaptured: function (id, value) {
this.onControlCaptured(this.settingsUi.controls.gamepad.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);
Object.values(this.settingsUi.togglers).forEach(v => {
var toggler = v.find(t => { return t.id === id; });
if (toggler) toggler.value = value;
})
if (id === 'autoDetail') {
this.showDetailSettings = !value;
}
if (id === 'safeNames') {
extern.setSafeNames(value);
}
// if (id === 'musicStatus') {
// extern.setMusicStatus(value);
// this.musicStatChg = true;
// if (extern.inGame) {
// vueApp.toggleMusic();
// }
// }
},
onSettingAdjusted: function (id, value) {
Object.values(this.settingsUi.adjusters).forEach(v => {
var adjuster = v.find( (a) => { return a.id === id; });
if (adjuster) adjuster.value = value;
})
if (id === 'volume') {
extern.setVolume(value);
}
if (id === 'mouseSpeed') {
extern.setMouseSpeed(value);
}
if (id === 'sensitivity') {
extern.setControllerSpeed(value);
}
if (id === 'deadzone') {
extern.setDeadzone(value);
}
if (id === 'musicVolume') {
extern.setMusicVolume(value);
}
},
onVolumeChange: function () {
extern.setVolume(this.settingsUi.volume);
},
onPrivacyOptionsClicked: function () {
this.$emit('privacy-options-opened');
BAWK.play('ui_popupopen');
},
onCancelClick: function () {
this.applyOriginalSettings();
//extern.setMusicVolume(this.originalMusicVolume);
this.cancelLanguageSelect();
if (this.musicStatChg) {
if (extern.inGame) {
vueApp.toggleMusic();
}
};
this.$parent.close();
},
onCloseClick: function () {
this.applyOriginalSettings();
//extern.setMusicVolume(this.originalMusicVolume);
this.cancelLanguageSelect();
if (this.musicStatChg) {
if (extern.inGame) {
vueApp.toggleMusic();
}
};
this.$parent.close();
BAWK.play('ui_popupclose');
},
quickSave() {
extern.applyUiSettings(this.settingsUi, this.originalSettings);
this.resetOriginalLanguage();
},
onSaveClick: function () {
// if (vueApp.music.serverTracks.title) {
// this.gaMusicVol();
// }
// this.gaMusicVol();
extern.applyUiSettings(this.settingsUi, this.originalSettings);
this.resetOriginalLanguage();
this.$parent.toggle();
BAWK.play('ui_playconfirm');
},
gaMusicVol() {
let newVol = Number(this.settingsUi.adjusters.music[0].value);
if (newVol === Number(this.originalMusicVolume)) return;
if ((Math.round(newVol*100)) <= 1) {
ga('send', 'event', 'music', 'mute', vueApp.music.serverTracks.title);
}
},
onResetClick: function () {
extern.resetSettings();
BAWK.play('ui_reset');
},
cancelLanguageSelect: function() {
this.originalLanguage === vueApp.$data.currentLanguageCode ?
vueApp.changeLanguage(vueApp.$data.currentLanguageCode) : vueApp.changeLanguage(this.originalLanguage);
// Revert localStore for language
localStore.setItem('languageSelected', this.originalLanguage);
this.resetOriginalLanguage();
},
resetOriginalLanguage: function() {
this.originalLanguage = '';
},
setSettings: function (settings) {
var getSettingById = (list, id) => {
return list.filter( o => {
return o.id == id;
})[0];
};
// Keyboard
getSettingById(this.settingsUi.controls.keyboard.game, 'up').value = settings.controls.keyboard.game.up;
getSettingById(this.settingsUi.controls.keyboard.game, 'down').value = settings.controls.keyboard.game.down;
getSettingById(this.settingsUi.controls.keyboard.game, 'left').value = settings.controls.keyboard.game.left;
getSettingById(this.settingsUi.controls.keyboard.game, 'right').value = settings.controls.keyboard.game.right;
getSettingById(this.settingsUi.controls.keyboard.game, 'jump').value = settings.controls.keyboard.game.jump;
getSettingById(this.settingsUi.controls.keyboard.game, 'fire').value = settings.controls.keyboard.game.fire;
getSettingById(this.settingsUi.controls.keyboard.game, 'scope').value = settings.controls.keyboard.game.scope;
getSettingById(this.settingsUi.controls.keyboard.game, 'reload').value = settings.controls.keyboard.game.reload;
getSettingById(this.settingsUi.controls.keyboard.game, 'swap_weapon').value = settings.controls.keyboard.game.swap_weapon;
getSettingById(this.settingsUi.controls.keyboard.game, 'grenade').value = settings.controls.keyboard.game.grenade;
getSettingById(this.settingsUi.controls.keyboard.spectate, 'ascend').value = settings.controls.keyboard.spectate.ascend;
getSettingById(this.settingsUi.controls.keyboard.spectate, 'descend').value = settings.controls.keyboard.spectate.descend;
// Gamepad
getSettingById(this.settingsUi.controls.gamepad.game, 'jump').value = settings.controls.gamepad.game.jump;
getSettingById(this.settingsUi.controls.gamepad.game, 'fire').value = settings.controls.gamepad.game.fire;
getSettingById(this.settingsUi.controls.gamepad.game, 'scope').value = settings.controls.gamepad.game.scope;
getSettingById(this.settingsUi.controls.gamepad.game, 'reload').value = settings.controls.gamepad.game.reload;
getSettingById(this.settingsUi.controls.gamepad.game, 'swap_weapon').value = settings.controls.gamepad.game.swap_weapon;
getSettingById(this.settingsUi.controls.gamepad.game, 'grenade').value = settings.controls.gamepad.game.grenade;
getSettingById(this.settingsUi.controls.gamepad.spectate, 'ascend').value = settings.controls.gamepad.spectate.ascend;
getSettingById(this.settingsUi.controls.gamepad.spectate, 'descend').value = settings.controls.gamepad.spectate.descend;
// Misc
getSettingById(this.settingsUi.adjusters.misc, 'volume').value = settings.volume;
// getSettingById(this.settingsUi.adjusters.music, 'musicVolume').value = settings.musicVolume;
getSettingById(this.settingsUi.adjusters.mouse, 'mouseSpeed').value = settings.mouseSpeed;
getSettingById(this.settingsUi.adjusters.gamepad, 'sensitivity').value = settings.controllerSpeed;
getSettingById(this.settingsUi.adjusters.gamepad, 'deadzone').value = settings.deadzone;
getSettingById(this.settingsUi.togglers.mouse, 'mouseInvert').value = (settings.mouseInvert !== 1);
getSettingById(this.settingsUi.togglers.mouse, 'fastPollMouse').value = settings.fastPollMouse;
getSettingById(this.settingsUi.togglers.gamepad, 'controllerInvert').value = (settings.controllerInvert !== 1);
getSettingById(this.settingsUi.togglers.misc, 'holdToAim').value = settings.holdToAim;
getSettingById(this.settingsUi.togglers.misc, 'enableChat').value = settings.enableChat;
getSettingById(this.settingsUi.togglers.misc, 'safeNames').value = settings.safeNames;
getSettingById(this.settingsUi.togglers.misc, 'autoDetail').value = settings.autoDetail;
getSettingById(this.settingsUi.togglers.misc, 'shadowsEnabled').value = settings.shadowsEnabled;
getSettingById(this.settingsUi.togglers.misc, 'highRes').value = settings.highRes;
getSettingById(this.settingsUi.togglers.misc, 'hideBadge').value = settings.hideBadge;
// getSettingById(this.settingsUi.togglers.misc, 'musicStatus').value = settings.musicStatus;
console.log('auto detail: ' + settings.autoDetail);
this.showDetailSettings = !settings.autoDetail;
},
hideSetting(id) {
if (id === 'hideBadge' && !this.isVip) {
return true;
}
return false;
}
}
};
</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>
<help-questions :content="localizeThis"></help-questions>
<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="BAWK.play('ui_click')" @change="BAWK.play('ui_onchange')">
<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 id="help-question-template" type="text/x-template">
<div>
<div v-for="qa in content">
<a :name="qa[0]"></a>
<h3>{{ qa[1] }}</h3>
<span v-html="qa[2]"></span>
</div>
</div>
</script>
<script>
var comp_help_question = {
template: '#help-question-template',
props: ['content'],
};
</script>
<script>
var comp_help = {
template: '#help-template',
components: {
'help-questions': comp_help_question,
},
props: ['loc'],
mounted() {
this.helpLocSetup();
},
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,
qaNum: [1,2,3,4,5,6,7,8,9,10,11],
newLoc: [],
localizeThis: [],
}
},
feedbackValidateTimeout: 0,
methods: {
playSound (sound) {
BAWK.play(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;
BAWK.play('ui_toggletab');
! this.showTab1 && ga('send', 'event', 'feedback opened');
},
onBackClick: function () {
vueApp.$refs.helpPopup.toggle();
BAWK.play('ui_popupclose');
},
onSendClick: function () {
this.doValidation = true;
if (!this.validateEmail() || !this.validateMessage()) {
return;
}
BAWK.play('ui_playconfirm');
// Send that shit out
extern.api_feedback(this.selectedType, this.email, this.feedback);
setTimeout(() => {
this.$parent.toggle();
this.selectedType = 0;
this.feedback = null;
this.email = null;
}, 900);
},
helpLocSetup(locContent) {
let content = this.loc;
// if (locContent) {
// content = locContent
// }
const locArray = Object.entries(content);
this.newLoc = locArray.filter( (item, i) => {
if (item[0].includes('faqItems_q')) {
return item;
}
});
const tranlateThat = [];
for (let n = 0; n < this.qaNum.length; n++) {
tranlateThat.push([]);
for (let i = 0; i < this.newLoc.length; i++) {
if (this.newLoc[i][0].includes('faqItems_q' + this.qaNum[n] + '_')) {
tranlateThat[n].push(this.newLoc[i][1]);
}
}
}
// Cause once again... vue
setTimeout(() => {this.localizeThis = tranlateThat}, 500);
}
},
watch: {
loc(val) {
this.helpLocSetup(val);
}
}
};
</script><script id="vip-help-template" type="text/x-template">
<div>
<div id="feedback_panel">
<h1>{{ loc.vipHelptitle }}</h1>
<small class="text_red"><i class="fas fa-exclamation-triangle"></i> {{loc.vipHelpDesc2}}</small>
<p>{{loc.vipHelpDesc}}</p>
<div>
<a :name="loc.vipFaqItems_q1_anchor"></a>
<h3>{{ loc.vipFaqItems_q1_q }}</h3>
<p>{{ loc.vipFaqItems_q1_a_1 }}</p>
<ul>
<li>{{ loc.vipFaqItems_q1_li_1 }}</li>
<li>{{ loc.vipFaqItems_q1_li_2 }}</li>
<li>{{ loc.vipFaqItems_q1_li_3 }}</li>
<li>{{ loc.vipFaqItems_q1_li_4 }}</li>
<li>{{ loc.vipFaqItems_q1_li_5 }}</li>
<li>{{ loc.vipFaqItems_q1_li_6 }}</li>
</ul>
</div>
<div>
<a :name="loc.vipFaqItems_q2_anchor"></a>
<h3>{{ loc.vipFaqItems_q2_q }}</h3>
<p>{{ loc.vipFaqItems_q2_a_1 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q3_anchor"></a>
<h3>{{ loc.vipFaqItems_q3_q }}</h3>
<p>{{ loc.vipFaqItems_q3_a_1 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q4_anchor"></a>
<h3>{{ loc.vipFaqItems_q4_q }}</h3>
<p>{{ loc.vipFaqItems_q4_a_mobile_3 }}</p>
<p>{{ loc.vipFaqItems_q4_a_1 }}</p>
<p>{{ loc.vipFaqItems_q4_a_2 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q5_anchor"></a>
<h3>{{ loc.vipFaqItems_q5_q }}</h3>
<p>{{ loc.vipFaqItems_q5_a_1 }}</p>
<p>{{ loc.vipFaqItems_q5_a_2 }}</p>
<p>{{ loc.vipFaqItems_q5_a_3 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q6_anchor"></a>
<h3>{{ loc.vipFaqItems_q6_q }}</h3>
<p>{{ loc.vipFaqItems_q6_a_1 }}</p>
<p>{{ loc.vipFaqItems_q6_a_2 }}</p>
<p>{{ loc.vipFaqItems_q6_a_3 }}</p>
</div>
<div>
<a :name="loc.vipFaqItems_q7_anchor"></a>
<h3>{{ loc.vipFaqItems_q7_q }}</h3>
<p>{{ loc.vipFaqItems_q7_a_1 }}</p>
</div>
<!--
<div v-for="qa in loc.vipFaqItems">
<a :name="qa.anchor"></a>
<h3>{{ qa.q }}</h3>
<p v-for="p in qa.a">
{{p}}
</p>
<ul v-if="qa.li">
<li v-for="li in qa.li">{{li}}</li>
</ul>
</div> -->
<hr>
<div id="btn_horizontal" class="f_center">
<button @click="openVipStore" class="ss_button btn_md btn_green bevel_green ss_marginright">{{ subButtonTxt }}</button>
<button @click="onBackClick" class="ss_button btn_md btn_red bevel_red ss_marginright">{{ loc.cancel }}</button>
</div>
</div>
</div>
</script>
<script>
var vip_help = {
template: '#vip-help-template',
props: ['loc', 'isVip'],
data: function () {
return {
}
},
methods: {
onBackClick() {
BAWK.play('ui_popupclose');
this.$parent.hide();
},
openVipStore() {
this.$parent.hide();
vueApp.showSubStorePopup();
}
},
computed: {
subButtonTxt() {
return this.isVip ? this.loc.sManageBtn : this.loc.account_vip;
}
}
};
</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="display-grid grid-column-4-eq grid-gap-space-lg">
<egg-store-item v-for="item in products" :key="item.sku" :item="item" :loc="loc" inStore="true" :account-set="accountSettled" :isUpgraded="isUpgraded" :isSaleEvent="saleEvent"></egg-store-item>
</div>
</div>
</script>
<template id="comp-store-item">
<figure id="popupInnards" v-if="showItem" class="single-egg-store-item box_blue4 roundme_md f_col text-center box_relative" :class="[itemType, {purchased: purchased}]">
<div v-if="purchased" class="single-egg-store-item-purchased">{{loc.p_egg_shop_purchased}}</div>
<div v-if="item.flagText" id="eggshop_banner" :class="{sale: item.salePrice}">
<img v-if="!item.salePrice && !item.itemId" src="img/egg-shop-banner-left.png">
<div class="eggshop_banner_mid">
<i v-if="item.salePrice || item.itemId" class="fas" :class="flagTxt"></i>
{{ item.discount }} {{ loc[item.flagText] }}
</div>
</div>
<figcaption>
<p align="center" class="nospace roundme_md"><img :src="img" class="eggshop_image roundme_md"></p>
<h6 class="nospace shadow_bluebig4 eggshop_bigtitle">{{ loc[title] }}</h6>
<span v-if="showSubtitle" class="eggshop_subtitle text_white">{{ loc[description] }}</span>
<div class="f_row">
<div class="eggshop_pricebox roundme_sm" :class="{ slashed: item.salePrice }">${{ item.price }} USD</div>
<div v-if="item.salePrice" class="eggshop_pricebox roundme_sm sale-price">${{ item.salePrice }} USD</div>
</div>
<button class="store_btn ss_button btn_green bevel_green btn_sm center_h" @click="onItemClicked(item.sku)">{{ buyBtnText }}</button>
<div v-if="item.type === 'item' && !hasPurchased && inStore">
<button class="ss_button btn_yolk bevel_yolk btn_sm center_h vip-get-btn box_absolute" @click="onVipClick"><span>{{ loc.p_egg_shop_free_with_vip }}</span> <img src="img/vip-club/vip-club-emblem-sm.png" alt=""></button>
</div>
</figcaption>
</figure>
</template>
<script>
const comp_store_item = {
template: '#comp-store-item',
props: ['loc', 'item', 'inStore', 'accountSet', 'isUpgraded', 'isSaleEvent'],
data() {
return {
purchased: false,
attempt: 0,
};
},
methods: {
onItemClicked() {
if (!this.accountSet || !vueApp.accountSettled) {
vueApp.hideEggStorePopup();
setTimeout(() => {
if (this.attempt < 5) {
this.onItemClicked(this.item.sku);
this.attempt++;
} else {
vueApp.showGenericPopup('uh_oh', 'error', 'ok');
}
}, 300);
vueApp.pleaseWaitPopup();
return;
}
if (this.$parent.$el.id === 'help') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
if (this.item.type === 'item' && !hasValue(this.item.itemId.id) && !Number.isInteger(this.item.itemId)) {
vueApp.showGenericPopup('uh_oh', 'p_egg_shop_no_item_id', 'ok');
return;
}
if (this.purchased) {
console.log('Item is owned so lets go see it.');
vueApp.showItemOnEquipScreen(extern.catalog.findItemById(this.item.itemId.id));
return;
}
extern.buyProductForMoney(this.item.sku);
ga('send', 'event', vueApp.googleAnalytics.cat.purchases, vueApp.googleAnalytics.action.eggShackProductClick, this.item.sku);
},
isPurchased() {
if (this.item.itemId) {
return this.purchased = extern.isItemOwned(this.item.itemId);
}
},
onVipClick() {
this.$parent.$parent.hide();
vueApp.showSubStorePopup();
}
},
computed: {
title() {
return `${this.item.sku}_title`;
},
description() {
return `${this.item.sku}_desc`;
},
img() {
if (this.item.type === 'item') {
return `img/store/items/${this.item.sku}.gif`;
}
const path = !this.isSaleEvent ? '' : 'store-black-friday/';
return `img/${path}${this.item.sku}.png`;
},
itemType() {
return 'single-egg-store-item-is-' + this.item.type;
},
buyBtnText() {
if (this.purchased) {
return this.loc.p_egg_shop_see_item;
}
return this.loc.p_buy_item_confirm;
},
showItem() {
if (this.inStore) return this.item.inStore;
this.isPurchased();
return true;
},
flagTxt() {
if (this.item.salePrice) {
return 'fa-tag';
}
return 'fa-gem'
},
showSubtitle() {
if (this.item.type === 'item') return true;
if (this.isSaleEvent) {
return false;
}
return true;
},
hasPurchased() {
return this.isPurchased();
}
},
watch: {
accountSet(val) {
if (val) {
this.isPurchased();
}
},
isUpgraded(val) {
if (val) {
this.isPurchased();
}
}
}
};
</script>
<script>
var comp_egg_store = {
template: '#egg-store-template',
components: {
'egg-store-item': comp_store_item,
},
data() {
return vueData;
},
props: ['loc', 'products', 'saleEvent'],
methods: {
onItemClicked: function (sku) {
if (!this.accountSettled) {
console.log(this.$parent.hide());
setTimeout(() => {
this.onItemClicked(sku)
}, 300);
vueApp.pleaseWaitPopup();
return;
}
if (vueApp.$refs.genericPopup.isShowing === true) vueApp.$refs.genericPopup.close();
this.$parent.hide();
extern.buyProductForMoney(sku);
ga('send', 'event', this.googleAnalytics.cat.purchases, this.googleAnalytics.action.eggShackProductClick, 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();
BAWK.play('ui_click');
extern.clickedHouseAdBig(this.useAd);
},
close: function () {
if (this.useAd === null) {
return;
}
BAWK.play('ui_popupclose');
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 dynamicContentPrefix + 'data/img/art/{0}{1}'.format(this.useAd.id, this.useAd.imageExt);
}
},
watch: {
useAd: function (bigAd) {
if (hasValue(bigAd)) {
setTimeout(() => {
vueApp.hideTitleScreenAd();
}, 100);
this.$options.bigAdTimeout = setTimeout(function () {
vueApp.ui.houseAds.big = null;
}, 15000);
// Close with outside click
this.outsideClickClose();
} else {
vueApp.showTitleScreenAd();
}
}
}
};
</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 () {
BAWK.play('ui_click');
extern.clickedHouseAdSmall(this.useAd);
}
},
computed: {
adImageUrl: function () {
if (!hasValue(this.useAd)) {
return;
}
ga('send', 'event', {
eventCategory: 'House banner ad',
eventAction: 'show',
eventLabel: this.useAd.label
});
return dynamicContentPrefix + 'data/img/art/{0}{1}'.format(this.useAd.id, this.useAd.imageExt);
}
}
};
</script>
<script id="item-template" type="text/x-template">
<div v-if="active" class="store_item roundme_lg clickme" ref="eggItemInvetory" :class="highlightSelected()" @click="onClick">
<div v-if="isPremium" class="store_item-premium" :class="{'is-vip-item': isVipItem}">
{{itemBannerText}}
</div>
<div v-if="showPrice" class="equip_smallprice">
<svg v-if="!isPremium" class="equip_egg eggIcon"><use xlink:href="#icon-egg"></use></svg>
<i v-if="isPremium" class="fas fa-dollar-sign equip_egg eggIcon"></i>
<div class="equip_cost"> {{ item.price }}</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', 'equippedSlot'],
data: function () {
return {
itemOnly: hasValue(this.showItemOnly) ? this.showItemOnly : false,
active: true,
}
},
mounted() {
this.prepareItem();
this.itemHightlightedOrder();
},
methods: {
isItemSellable: function () {
return !this.itemOnly && vueData.equip.mode == vueData.equip.equipModes.shop;
},
isPremItem() {
if (this.isPremium && this.isItemSellable()) {
const ITEM = vueData.premiumShopItems.find(i => {
return i.itemId.id && i.itemId.id === this.item.id && i.type === 'item';
});
if (ITEM !== undefined && ITEM.isActive) {
this.item.sku = ITEM.sku;
this.item.price = ITEM.salePrice ? ITEM.salePrice : ITEM.price;
} else {
this.active = false;
}
}
this.isMerch();
},
isMerch() {
if (this.showPhysicalMerch && vueData.equip.mode === vueData.equip.equipModes.shop) {
this.item.active = false;
}
this.isEquippedSlot();
},
isEquippedSlot() {
if (this.equippedSlot) {
this.active = true;
}
vueApp.equip.lazyRenderTimeouts.push(setTimeout(() => this.renderItem(), 0));
},
prepareItem: function () {
this.isPremItem();
},
renderItem() {
extern.renderItemToCanvas(this.item, this.$refs.itemCanvas);
},
highlightSelected: function () {
return this.isSelected ? 'highlight' : '';
},
onClick: function () {
this.$emit('item-selected', this.item);
},
itemHightlightedOrder: function() {
if (this.showPhysicalMerch && vueData.equip.mode == vueData.equip.equipModes.shop) return;
return this.$refs.eggItemInvetory.classList.contains('highlight') ? this.$refs.eggItemInvetory.style.order='-1' : null;
},
},
computed: {
showPrice () {
return this.isItemSellable() && this.item.price > 0;
},
showPhysicalMerch () {
return this.isItemSellable() && this.item.unlock === 'physical';
},
isPremium() {
return this.item.unlock === 'premium';
},
isVipItem() {
if ('tags' in this.item.item_data ) {
if (this.item.item_data.tags.includes('vipItem')) {
return true;
}
}
},
itemBannerText() {
return this.isVipItem ? 'VIP' : 'Premium';
}
},
watch: {
item: function (val) {
this.prepareItem();
}
}
};
</script><script id="chickn-winner-template" type="text/x-template">
<div id="popupInnards" class="box_dark roundme_sm fullwidth f_col">
<header class="display-grid grid-column-1-eq grid-align-items-center roundme_lg">
<h1 class="chickn-winner-title nospace text-center">{{ loc.chw_ready_msg }}</h1>
</header>
<section id="chickn-winner-wrapper" class="egg-chick-wrapper f_row roundme_lg">
<div class="egg-chick-box box_relative" v-for="egg in eggs" :key="egg.id">
<div v-if="showAmountRewarded && busted && egg.value > 5" class="text-center chw-reward-amount box_absolute">
<h2 class="box_relative shadow_grey">{{ showAmountRewarded }} <img class="chw-winner-egg" src="img/ico_goldenEgg.svg" /></h2>
</div>
<img class="incentivized-egg-chick box_relative" :class="eggClass(egg.value)" @click="eggClickCounter" :src="eggSrc(egg.value)" :id="egg.id">
</div>
</section>
<!-- #chickn-winner-wrapper -->
<footer class="text-center">
<h2 v-if="!busted">{{ loc.p_nugget_instruction }}</h2>
<button v-if="busted" id="gotWinnerOk" v-show="isMiniGameComplete" @click="onGotWinner" class="ss_button btn_medium btn_yolk bevel_yolk btn_shiny">{{ loc.p_nugget_button }}</button>
<display-ad id="shellshockers_chicken_nugget_banner_ad" ref="nuggetDisplayAd" class="pauseFiller center_h" :ignoreSize="true" :adUnit="adUnits.display.nugget" adSize="728x90"></display-ad>
</footer>
</div>
<!-- #popupInnards -->
</script>
<script>
var comp_chickn_winner_popup = {
template: '#chickn-winner-template',
props: ['loc', 'amountGiven', 'adUnits'],
data: function () {
return {
clickedIdx: 0,
eggs: [{id:'eggOne', value: 0, active: true}, {id:'eggTwo', value: 0, active: true}, {id:'eggThree', value: 0, active: true}],
isMiniGameComplete: false,
bustedSrc: `img/incentivized-mini-game/svg/Egg07.svg`,
busted: false,
bustedTimer: 1414
}
},
methods: {
placeBannerAdTag: function (tagEl) {
this.$refs.chickenNuggetAdContainer.appendChild(tagEl);
},
showAd() {
return this.$refs.nuggetDisplayAd.show();
},
hideAd() {
return this.$refs.nuggetDisplayAd.hide();
},
eggSrc(count) {
if (count > 6) {
return `img/incentivized-mini-game/svg/Egg06.svg`;
}
return `img/incentivized-mini-game/svg/Egg0${count}.svg`;
},
eggSrcBusted() {
setTimeout(() => {
return `img/incentivized-mini-game/svg/Egg07.svg`;
}, 2424);
},
eggBg(count) {
if (count > 5) {
return 'incentivized-show'
}
},
eggClass(count) {
if (count > 5) {
return 'chick-alive';
}
},
eggClickCounter(e) {
if (!this.busted) {
BAWK.play('mini-egg-game_shellhit');
} else {
BAWK.play('mini-egg-game_chick');
}
this.clickedIdx = this.eggs.findIndex(i => i.id === e.target.id);
let elem = document.getElementById(this.eggs[this.clickedIdx].id);
if (this.eggs[this.clickedIdx].value < 6) {
elem.classList.add('chickn-winner-clicked');
setTimeout(() => elem.classList.remove('chickn-winner-clicked'), 650);
}
if (this.eggs[this.clickedIdx].value === 5) {
this.isMiniGameComplete = true;
ga('send', 'event', 'Chickn Winner', 'Egg Game', `egg-cracked-${this.eggs[this.clickedIdx].id}`);
setTimeout(() => {
this.eggs[this.clickedIdx].active = false;
elem.src = this.bustedSrc;
}, this.bustedTimer);
this.busted = true;
extern.api_checkBalance();
this.eggs.forEach(i => {
if (i.id === e.target.id) {
return;
}
let btn = document.getElementById(i.id).style.pointerEvents = 'none';
btn.disabled = true;
});
}
if (this.eggs[this.clickedIdx].value === 100) {
BAWK.play('mini-egg-game_shial');
}
this.eggs[this.clickedIdx].value++;
},
resetGame() {
setTimeout(() => {
this.isMiniGameComplete = false;
this.busted = false;
this.eggs.forEach(i => {
let btn = document.getElementById(i.id).style.pointerEvents = 'all';
btn.disabled = false;
});
this.eggs = [{id:'eggOne', value: 0, active: true}, {id:'eggTwo', value: 0, active: true}, {id:'eggThree', value: 0, active: true}];
}, 1000);
},
onGotWinner: function () {
this.$parent.hide();
this.hideAd();
this.resetGame();
extern.checkStartChicknWinner(false, true);
if (extern.inGame) {
vueApp.showGameMenu();
}
},
// loadMiniGame: function () {
// this.isMiniGameComplete = false;
// this.$refs.miniGameFrame.src = "app_nugget/index.html";
// this.$refs.nuggetDisplayAd.show();
// },
// unloadMiniGame: function () {
// this.$refs.miniGameFrame.src = "about:blank";
// },
// onMiniGameCompleted: function () {
// this.isMiniGameComplete = true;
// }
},
computed: {
showAmountRewarded() {
if (this.amountGiven === 0) {
return;
}
return `+${this.amountGiven}`;
},
},
watch: {
busted(val) {
if (val) {
BAWK.play('mini-egg-game_shellburst');
setTimeout(() => {
BAWK.play('mini-egg-game_victory');
}, 500);
}
}
}
};
</script>
<script id="home-screen-template" type="text/x-template">
<div>
<house-ad-big id="big-house-ad" ref="bigHouseAd" :useAd="ui.houseAds.big" @big-house-ad-closed="onBigHouseAdClosed"></house-ad-big>
<div ref="chw-home-timer" v-show="!isPoki && firebaseId" class="chw-home-timer display-grid grid-column-1-2 grid-align-items-center box_absolute grid-gap-1" :class="chwHomeTimerCls">
<div>
<img class="chw-home-timer-chick" :src="chwChickSrc">
</div>
<div class="display-grid grid-align-items-center bg_white chw-circular-timer-container box_relative" :class="chwClass">
<div v-show="chwShowTimer" class="chw-home-screen-timer"></div>
<!-- #chw-circular-timer-outer -->
<div>
<p class="chw-circular-timer-countdown nospace">
<span class="chw-pie-remaining text_center chw-msg chw-r-msg">{{ remainingMsg }}</span>
<span v-show="chwShowTimer" class="chw-pie-num chw-pie-mins"></span><span v-show="chwShowTimer" class="chw-pie-num chw-pie-secs"></span>
</p>
<button v-if="chicknWinnerReady && !hasChwPlayClicked && !isChicknWinnerError" class="ss_button btn_sm btn_yolk bevel_yolk" @click="playIncentivizedAd">{{ playAdText }}</button>
</div>
</div>
<!-- <img src="img/chicken-nugget/speechBubble_static2_tail1.svg" class="chw-bubble-tail box_absolute" alt=""> -->
</div>
<div id="mainHead">
<account-panel id="account_panel" ref="accountPanelHome" :loc="loc" :selected-language-code="currentLanguageCode" :eggs="eggs" :languages="languages" :currentLangOptions="locLanguage" :show-corner-buttons="ui.showCornerButtons" :show-bottom="true" :photo-url="photoUrl" :is-anonymous="isAnonymous" :is-of-age="isOfAge" :show-targeted-ads="showTargetedAds" :ui="ui" :isEggStoreSale="isEggStoreSaleItem" :is-subscriber="isSubscriber" @sign-in-clicked="onSignInClicked" @sign-out-clicked="onSignOutClicked" :is-twitch="twitchLinked"></account-panel>
<!-- <pwa-button :show="ui.showCornerButtons"></pwa-button> -->
<!-- <streamer-panel id="youtube_panel" :streams="youtubeStreams" :title="loc.youtube_title" :viewers="loc.youtube_viewers" icon="ico_youtube"></streamer-panel> -->
</div>
<div id="mainLayout">
<div id="logo">
<a href="https://www.shellshock.io" @click="BAWK.play('ui_click')"><img class="home-screen-logo" src="img/logo.svg"></a>
<img v-if="eggOrg" class="egg-org-logo" src="img/egg-org/logo_EggOrg.svg">
</div>
<div class="main-content">
<div id="panel_front_play">
<div class="front_panel-events center_h">
<!-- <event-panel :show-soon="true" :show-ui="true"></event-panel> -->
<!-- <img @click="onTwitchDropsClick" title="Click here to manage your Twitch account on Shell Shockers" :src="twitchDropsBtnImgSrs" alt="Twitch drops parachute" class="events-twitch-drop"> -->
<button v-if="isTwitchEvent" class="ss_button twitch-btn btn_sm box_relative" @click="onTwitchDropsClick">Twitch Drops! <span v-html="isTwitchLinked"></span> <img class="box_absolute" src="img/twitch-drops/twitch-drops-parachute.svg" alt=""></button>
</div>
<play-panel id="play_game" ref="playPanel" :loc="loc" :player-name="playerName" :game-types="gameTypes" :current-game-type="currentGameType" :is-game-ready='accountSettled' :server-list="serverList" :current-server-id="currentServerId" :home="home" @playerNameChanged="onPlayerNameChanged"></play-panel>
<vip-club-cta :loc="loc" :upgrade-name="upgradeName" :is-upgraded="isUpgraded" :is-subscriber="isSubscriber" :has-mobile-reward="hasMobileReward" :is-black-fryday="isSale" :is-egg-org="eggOrg" :is-twitch-event="isTwitchEvent"></vip-club-cta>
</div>
<div id="panel_front_egg">
<div id="paper_doll_container"
class="paper-doll--click-container" @click="onEggPlayClick"></div>
<stats-panel id="stats_panel" :loc="loc" :kills="kills" :deaths="deaths" :kdr="kdr" :streak="streak"></stats-panel>
<weapon-select-panel id="weapon_select" :loc="loc" :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">
<media-tabs ref="mediaTabs" :loc="loc" :newsfeedItems="newsfeedItems" :twitchStreams="twitchStreams" :youtubeStreams="youtubeStreams"></media-tabs>
<!-- <house-ad-small id="banner-ad" :useAd="ui.houseAds.small"></house-ad-small> -->
<display-ad id="shellshockers_titlescreen_wrap" :hidden="hideAds" ref="titleScreenDisplayAd" class="house-small" :ignoreSize="true" :adUnit="adUnits.display.home" adSize="300x250"></display-ad>
</div>
<!-- <house-ad-small id="banner-ad" :useAd="ui.houseAds.small"></house-ad-small> -->
</div>
<!-- .main-content -->
</div>
<div id="mainFooter">
<!-- <chicken-panel ref="chickenPanel" id="chicken_panel" :local="loc" :do-upgraded="isUpgraded"></chicken-panel> -->
<footer-links-panel id="footer_links_panel" :loc="loc"></footer-links-panel>
</div>
<div id="gameDescription">
<h1 class="text-center">{{ loc.home_desc_about }}</h1>
<p class="text-center">{{ loc.home_desc_pick }}
<svg class="eggIcon"><use xlink:href="#icon-egg"></use></svg>
{{ loc.home_desc_loadout }}
<svg class="eggIcon"><use xlink:href="#icon-egg"></use></svg>
{{ loc.home_desc_madeof }}</p>
<section class="text-center">
<p>{{ loc.home_blocked_start }} Alt URL: geometry.best. {{ loc.home_blocked_end }}</p>
</section>
<div class="display-grid grid-column-2-eq grid-gap-1">
<section>
<p>{{ loc.home_desc_p1 }}</p>
<p>
<img src="img/eggPose05.png" style="width: 350px; float: left; margin-right: 1em; shape-outside: polygon(0% 0%, 100% 0%, 100% 41%, 84% 48%, 80% 63%, 59% 74%, 46% 100%, 0% 99%);">{{ loc.home_desc_p2 }}
</p>
</section>
<section>
<p>
<img src="img/eggPose01.png" style="float: right; margin-left: 1em; margin-top: 1em; shape-outside: polygon(1% 0%, 100% 1%, 100% 99%, 50% 100%, 28% 86%, 16% 68%, 14% 51%, 0 35%);">
{{ loc.home_desc_p3 }} <br /><br />
{{ loc.home_desc_p4 }}
</p>
</section>
</div>
<section>
<header>
<h2 class="text-center">{{ loc.home_game_mode_title }}</h2>
</header>
<ul class="display-grid grid-column-2-eq grid-gap-1">
<li v-html="loc.home_game_mode_content_li_1"></li>
<li v-html="loc.home_game_mode_content_li_2"></li>
<li v-html="loc.home_game_mode_content_li_3"></li>
<li v-html="loc.home_game_mode_content_li_4"></li>
</ul>
</section>
<h2 class="text-center">{{ loc.home_desc_controls }}</h2>
<p class="text-center">{{ loc.home_desc_standard }}</p>
<ul class="display-grid grid-column-2-eq" style="min-width: 25em;max-width: 35em;margin:0 auto">
<li> {{ loc.home_desc_control1 }}</li>
<li> {{ loc.home_desc_control2 }}</li>
<li> {{ loc.home_desc_control3 }}</li>
<li> {{ loc.home_desc_control4 }}</li>
<li> {{ loc.home_desc_control5 }}</li>
<li> {{ loc.home_desc_control6 }}</li>
<li> {{ loc.home_desc_control7 }}</li>
</ul>
<p class="text-center">
<button class="ss_button btn_lg btn_blue bevel_blue" @click="openUnblocked">{{ loc.home_unblocked_text }}</button>
</p>
<p>
{{ loc.home_desc_p7 }}
</p>
<p align="center"><button class="ss_button btn_yolk bevel_yolk" @click="vueApp.scrollToTop()">{{ loc.home_backtotop }}</button></p>
</div>
<!-- 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 text-center">{{ 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 text-center">{{ 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 data-cmp-ab="1" src="https://c.delivery.consentmanager.net/delivery/cmp.php?id=13566cdid=abbb821549a1&h=https%3A%2F%2Fshellshockers.silkandpepper.com%2F&&__cmpfcc=1&l=en&o=1730107356203" type="text/javascript" async=""></script><script src="https://cdn.consentmanager.net/delivery/js/cmp_en.min.js" type="text/javascript" data-cmp-ab="1" async=""></script><iframe name="__cmpLocator" style="display: none;"></iframe><iframe name="__uspapiLocator" style="display: none;"></iframe><iframe name="__tcfapiLocator" style="display: none;"></iframe>
<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="text-center fullwidth">{{ loc.p_privatematch_gametype }}</h3>
<select name="gameType" v-model="pickedGameType" class="ss_select fullwidth" @click="BAWK.play('ui_click')" @change="onGameTypeChanged">
<option v-for="g in gameTypes" v-bind:value="g.value" :class="'create-game-' + g.locKey" v-html="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 text-center">{{ 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" class="shadow_grey">
{{ vueData.maps[mapIdx].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>{{vueData.maps[mapIdx].numPlayers}}</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', 'isGameReady'],
data: function () {
let mapIdx = Math.randomInt(0, vueData.maps.length);
let map = vueData.maps[mapIdx];
return {
showingServerList: false,
pickedGameType: 0,
gameTypes: vueData.gameTypes,
mapIdx: mapIdx,
mapImgPath: this.mapImgBasePath + map.filename + '.png?' + map.hash,
mapLocKey: map.locKey,
playClickedBeforeReady: false,
vueData,
}
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
onCloseClick: function () {
this.$parent.close();
BAWK.play('ui_popupclose');
},
onServerClick: function () {
this.showingServerList = true;
this.$parent.toggle();
vueApp.$refs.homeScreen.$refs.playPanel.$refs.pickServerPopup.toggle();
BAWK.play('ui_click');
},
onMapChange: function (dir) {
this.selectMapForPickedGameType(dir);
BAWK.play('ui_onchange');
},
selectMapForPickedGameType (dir) {
let idx = this.mapIdx;
for (var i = 0; i < vueData.maps.length; i++) { // Prevent race condition
if (dir) idx = (idx + dir + vueData.maps.length) % vueData.maps.length;
let map = vueData.maps[idx];
let gameTypeShortName = vueData.gameTypeKeys[this.pickedGameType];
if (map.modes[gameTypeShortName]) {
break;
}
if (dir == 0) dir = 1
//idx = (idx + dir + vueData.maps.length) % vueData.maps.length;
}
this.mapImgPath = this.mapImgBasePath + vueData.maps[idx].filename + '.png?' + vueData.maps[idx].hash;
this.mapLocKey = vueData.maps[idx].locKey;
this.mapIdx = idx;
},
onGameTypeChanged () {
BAWK.play('ui_onchange');
this.selectMapForPickedGameType(0);
},
onPlayTypeWhenSignInComplete() {
return this.playClickFunction();
},
onPlaySentBeforeSignIn() {
this.gameClickedBeforeReady = true;
vueApp.showSpinner('signin_auth_title', 'signin_auth_msg');
},
onPlayClick: function () {
this.$parent.close();
if (!this.isGameReady) {
this.onPlaySentBeforeSignIn();
return;
}
vueApp.externPlayObject(vueData.playTypes.createPrivate, this.pickedGameType, this.vueData.playerName, this.mapIdx, '');
BAWK.play('ui_playconfirm');
}
},
watch: {
isGameReady(val) {
if (this.gameClickedBeforeReady && val) {
setTimeout(() => this.onPlayClick(), 700);
}
}
}
};
</script><script id="account-panel-template" type="text/x-template">
<div>
<div id="account_top">
<!-- <eggstore-notify ref="shirtStore" :show="showCornerButtons" :loc="loc" :sku="sku" icon="fa-tshirt" :text-hide="true" text="p_egg_shop_sale_notify" title="account_threadless" color="blue" url="https://bluewizard.threadless.com/" analytics="threadless"></eggstore-notify> -->
<eggstore-notify ref="eggStoreSaleNotify" :text-hide="!hideNewItemNotify" :show="showCornerButtons" :loc="loc" :sku="sku" title="account_premium_item" icon="fa-gem" text="p_egg_shop_sale_notify" analytics="diamond"></eggstore-notify>
<button v-if="showVipButton" @click="onVipClick" class="ss_button btn_yolk bevel_yolk btn_vip" :title="loc['account_vip']" :class="{'has-sub' : isVipLive}"><img src="img/vip-club/vip-club-emblem-sm.png" alt="VIP Emblem"> {{vipButtonText}}</button>
<div class="account_eggs roundme_sm clickme" @click="onEggStoreClick" v-bind:title="loc['account_title_eggshop']">
<button v-if="isAnonymous" type="image" src="img/attention_indicator.png" v-show="showCornerButtons" @click="onAnonWarningClick" class="ss_button btn_yolk bevel_yolk attention_btn" v-bind:title="loc['account_title_shop']"><i class="fas fa-exclamation"></i></button>
<img src="img/ico_goldenEgg.png" class="egg_icon">
<span class="egg_count shadow_blue2_micro">{{ eggBalance }}</span>
</div>
<!-- <input type="image" src="img/ico_nav_leaderboards.png" class="account_icon roundme_sm"> -->
<div id="corner-buttons" v-show="showCornerButtons">
<input type="image" src="img/ico_nav_shop.png" @click="itemStoreClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_shop']">
<!-- <input type="image" src="img/ico_nav_help.png" @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" @click="onSettingsClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_settings']">
<input type="image" src="img/ico_nav_fullscreen.png" v-if="!vueData.isPoki && !crazyGamesActive" @click="onFullscreenClick" class="account_icon roundme_sm" v-bind:title="loc['account_title_fullscreen']">
</div>
</div>
<div id="account_bottom" v-show="showBottom">
<language-selector :languages="languages" :loc="loc" :selectedLanguageCode="selectedLanguageCode" :langOptions="currentLangOptions"></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" class="box_relative" v-show="photoUrl !== null && photoUrl !== undefined && photoUrl !== '' && ! isAnonymous">
<img :src="photoUrl" class="roundme_sm bevel_blue"/>
<div v-if="isTwitch" class="box_aboslute account-panel-twitch roundme_sm" @click="onTwitchIconClick"><i class="fab fa-twitch"></i></div>
</div>
</div>
</div>
</script>
<template id="egg-store-notify">
<div v-if="show" class="egg-store-sale-notify" :class="{'white-blue' : color}" @click="notifyClick">
<button class="account_icon roundme_sm account_icon-item" :title="getTitle"><i aria-hidden="true" class="fas" :class="icon"><span class="hideme">Egg</span></i>
<span class="text" :class="{hideme : textHide}"> {{loc[text]}}</span>
</button>
</div>
</template>
<script>
const compEggStoreSaleNotify = {
template: '#egg-store-notify',
props: ['loc', 'show', 'sku', 'textHide', 'text', 'icon', 'color', 'url', 'title', 'analytics'],
methods: {
notifyClick() {
if (this.analytics) ga('send', 'event', 'header-buttons', 'click', this.analytics);
if (this.url) {
window.open(this.url, '_window');
return;
}
// if (!vueData.firebaseId) {
// vueApp.showGenericPopup('p_redeem_error_no_player_title', 'p_redeem_error_no_player_content', 'ok');
// return;
// }
vueApp.eggStoreReferral = 'Sale notify ref';
if (this.sku) {
return vueApp.showPopupEggStoreSingle(this.sku)
}
return vueApp.onPremiumItemsClicked();
}
},
computed: {
getTitle() {
if (!this.title) return null;
return this.loc[this.title];
}
}
};
</script><script>
var comp_account_panel = {
template: '#account-panel-template',
components: {
'language-selector': comp_language_selector,
'eggstore-notify': compEggStoreSaleNotify,
},
props: ['loc', 'eggs', 'languages', 'selectedLanguageCode', 'showBottom', 'photoUrl', 'isAnonymous', 'isOfAge', 'showTargetedAds', 'showCornerButtons', 'ui', 'isEggStoreSale', 'sku', 'isSubscriber', 'isTwitch', 'currentLangOptions'],
data: function () {
return {
languageCode: this.selectedLanguageCode,
eggBalance: 0,
vueData,
}
},
created() {
this.getEggsLocalStorage();
},
methods: {
getEggsLocalStorage() {
const raw = localStore.getItem('localLoadOut');
if (!raw) {
return;
}
const storage = JSON.parse(raw);
if (!'balance' in storage) {
return;
}
return this.eggBalance = storage.balance;
},
onEggStoreClick: function () {
if (!vueData.firebaseId) {
vueApp.showGenericPopup('p_redeem_error_no_player_title', 'p_redeem_error_no_player_content', 'ok');
return;
}
vueApp.showEggStorePopup();
BAWK.play('ui_popupopen');
this.gaSend('shoppingCart');
},
itemStoreClick: function() {
this.gaSend('openItemShop');
vueApp.switchToEquipUi();
vueApp.$refs.equipScreen.switchToShop();
BAWK.play('ui_popupopen');
},
onHelpClick: function () {
vueApp.showHelpPopup();
this.gaSend('openHelp');
BAWK.play('ui_popupopen');
},
onSettingsClick: function () {
this.gaSend('openSettings');
vueApp.showSettingsPopup();
BAWK.play('ui_popupopen');
},
onFullscreenClick: function () {
extern.toggleFullscreen();
BAWK.play('ui_click');
},
onSignInClicked: function () {
vueApp.setDarkOverlay(true);
this.$emit('sign-in-clicked');
BAWK.play('ui_playconfirm');
},
onSignOutClicked: function () {
vueApp.setDarkOverlay(true);
this.$emit('sign-out-clicked');
BAWK.play('ui_reset');
},
onShareLinkClick: function () {
this.gaSend('openShareLink');
extern.inviteFriends();
},
onAnonWarningClick: function() {
ga('send', 'event', vueApp.googleAnalytics.cat.playerStats, vueApp.googleAnalytics.action.anonymousPopupOpen);
vueApp.showAttentionPopup();
},
onVipClick() {
this.gaSend('openVipPopup');
vueApp.showSubStorePopup();
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'header-buttons', 'click', label);
},
onTwitchIconClick() {
window.open(dynamicContentPrefix + 'twitch');
}
},
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);
},
hideNewItemNotify() {
// if (!ssChangelogDate) return false;
// if (!this.showCornerButtons) return false;
// const lapsed = Date.now() - ssChangelogDate.valueOf(),
// days = Math.floor((lapsed / (60*60*24*1000)));
// if (days <= 5 ) return true;
// return false;
return;
},
vipButtonText() {
return this.isSubscriber && !extern.account.upgradeIsExpired ? '' : this.loc['s-btn-txt-subscribe'];
},
showVipButton() {
return this.ui.showScreen === this.ui.screens.home || this.ui.showScreen === this.ui.screens.equip;
},
isVipLive() {
return this.isSubscriber && !extern.account.upgradeIsExpired;
}
},
watch: {
eggs() {
this.eggBalance = this.eggs;
}
}
};
</script>
<template id="stats_panel_template" type="text/x-template">
<div>
<!-- <h3 class="nospace">{{ loc.home_stats }}</h3> -->
<div class="stats-wrapper">
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.kills.toUpperCase() }}</h4>
<div class="stat_stat">{{ lKills }}</div>
</div>
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.deaths.toUpperCase() }}</h4>
<div class="stat_stat">{{ lDeaths }}</div>
</div>
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.kdr.toUpperCase() }}</h4>
<div class="stat_stat">{{ lKdr }}</div>
</div>
<div id="stat_item" class="roundme_sm">
<h4>{{ loc.streak.toUpperCase() }}</h4>
<div class="stat_stat">{{ lStreak }}</div>
</div>
</div>
</div>
</template>
<script>
var comp_stats_panel = {
template: '#stats_panel_template',
props: ['loc', 'kills', 'deaths', 'kdr', 'streak'],
data: () => {
return {
localLoadOut : Object,
lKills: 0,
lDeaths: 0,
lKdr: 0,
lStreak: 0,
}
},
created() {
this.getStatsLocalStorage();
},
methods: {
getStatsLocalStorage() {
const raw = localStore.getItem('localLoadOut');
if (!raw) {
return;
}
const storage = JSON.parse(raw);
const {kills, deaths, kdr, streak} = storage;
this.lKills = kills;
this.lDeaths = deaths;
this.lKdr = kdr;
this.lStreak = streak;
},
},
watch: {
kills() {
this.lKills = this.kills;
this.lDeaths = this.deaths;
this.lKdr = this.kdr;
this.lStreak = this.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>
<div class="select-box-wrap">
<label for="create-select-type" class="ss_button btn_yolk bevel_yolk"><i class="fas fa-chevron-down"></i></label>
<select id="create-select-type" name="gameType" v-model="pickedGameType" class="ss_select select" @change="onGameTypeChange($event)">
<option v-for="g in gameTypes" v-bind:value="g.value" :class="'game-select-' + g.locKey" v-html="loc[g.locKey]"></option>
</select>
</div>
<br>
<button name="server" @click="onPickServerButtonClick" :disabled="isButtonDisabled" 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_yolk bevel_yolk fullwidth nospace play-button"><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>
<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" :is-game-ready="isGameReady" map-img-base-path="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 text-center" 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="BAWK.play('ui_onchange')">
<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) {
BAWK.play(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();
BAWK.play('ui_popupclose');
},
onConfirmClick: function () {
this.$emit('server-picked', this.serverId);
this.$parent.close();
BAWK.play('ui_playconfirm');
}
}
};
</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', 'isGameReady'],
// mounted() {
// this.kotcPrompt = document.getElementById('kotc-play-kotc');
// this.typeSelect = document.getElementById('create-select-type');
// this.anchorKotcPrompt();
// window.addEventListener('resize', this.anchorKotcPrompt);
// },
data: function() {
return {
pickedServerId: null,
pickedGameType: this.currentGameType,
isButtonDisabled: true,
playClickedBeforeReady: false,
playClickFunction: Function,
kotcPrompt: '',
typeSelect: ''
}
},
methods: {
onPickServerButtonClick: function () {
this.$refs.pickServerPopup.toggle();
BAWK.play('ui_popupopen');
},
onServerPicked: function (serverId) {
if (vueData.currentServerId === serverId) { return; }
vueData.currentServerId = serverId;
extern.selectServer(vueData.currentServerId);
BAWK.play('ui_onchange');
},
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.filterUnicode(event.target.value);
event.target.value = extern.fixStringWidth(event.target.value);
event.target.value = event.target.value.substring(0, 128);
// 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);
BAWK.play('ui_onchange');
},
onPlayTypeWhenSignInComplete() {
return this.playClickFunction();
},
onPlaySentBeforeSignIn(callback) {
this.gameClickedBeforeReady = true;
vueApp.showSpinner('signin_auth_title', 'signin_auth_msg');
this.playClickFunction = callback;
},
hasValidPlayerNameCheck() {
console.log('invalid player name');
vueApp.showGenericPopup('play_pu_name_title', 'play_pu_name_content', 'ok');
vueApp.hideSpinner();
return;
},
onPlayButtonClick: function () {
if (!hasValue(this.playerName)) {
this.hasValidPlayerNameCheck();
return;
}
if (!this.isGameReady) {
this.onPlaySentBeforeSignIn(this.onPlayButtonClick);
return;
}
vueApp.disablePlayButton(true);
vueApp.game.respawnTime = 0;
vueApp.externPlayObject(vueData.playTypes.joinPublic, this.pickedGameType, this.playerName, -1, '');
BAWK.play('ui_playconfirm');
},
onCreatePrivateGameClick: function () {
this.$refs.createPrivateGamePopup.toggle();
BAWK.play('ui_popupopen');
},
onJoinPrivateGameClick: function () {
this.showJoinPrivateGamePopup(vueData.home.joinPrivateGamePopup.code);
BAWK.play('ui_popupopen');
},
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 () {
if (!hasValue(this.playerName)) {
this.hasValidPlayerNameCheck();
return;
}
if (!this.isGameReady) {
this.onPlaySentBeforeSignIn(this.onJoinConfirmed)
return;
}
let match = null;
if (vueData.home.joinPrivateGamePopup.code.match(/\#\w+/)) {
match = vueData.home.joinPrivateGamePopup.code.match(/\#\w+/)[0];
} else if (vueData.home.joinPrivateGamePopup.code.includes('crazyShare')) {
match = vueData.home.joinPrivateGamePopup.code.match(/=\w*$/)[0].substring(1);
}
else { // In case someone copy/pastes the thing without including the #
match = vueData.home.joinPrivateGamePopup.code;
}
if (!match) {
return;
}
vueData.home.joinPrivateGamePopup.code = match;
this.$refs.joinPrivateGamePopup.hide();
vueApp.externPlayObject(vueData.playTypes.joinPrivate, '', this.playerName, '', vueData.home.joinPrivateGamePopup.code);
},
kotcAttachSetup() {
const typePostion = this.typeSelect.getBoundingClientRect();
const kotcPrompt = this.kotcPrompt.getBoundingClientRect();
this.kotcPrompt.style.top = typePostion.top + 'px';
this.kotcPrompt.style.left = typePostion.right + 16 + 'px';
},
anchorKotcPrompt() {
this.$nextTick(() => this.kotcAttachSetup());
}
},
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;
},
isGameReady(val) {
this.isButtonDisabled = val ? false : true;
if (this.gameClickedBeforeReady && val) {
this.onPlayTypeWhenSignInComplete()
}
}
}
};
</script><template id="weaponselect_panel_template" type="text/x-template">
<div :class="{disabled: !vueData.accountSettled}">
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_EggK47.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Soldier)" @click="selectClass(charClass.Soldier)"><span><strong>{{loc.weapon_soldier_title}}:</strong> {{loc.weapon_soldier_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_Scrambler.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Scrambler)" @click="selectClass(charClass.Scrambler)"><span><strong>{{loc.weapon_scrambler_title}}: </strong> {{loc.weapon_scrambler_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_FreeRanger.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Ranger)" @click="selectClass(charClass.Ranger)"><span><strong>{{loc.weapon_ranger_title}}: </strong>{{loc.weapon_ranger_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_RPEGG.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Eggsploder)" @click="selectClass(charClass.Eggsploder)"><span><strong>{{loc.weapon_eggsploder_title}}: </strong> {{loc.weapon_eggsploder_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_Whipper.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Whipper)" @click="selectClass(charClass.Whipper)"><span><strong>{{loc.weapon_whipper_title}}: </strong>{{loc.weapon_whipper_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_Crackshot.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.Crackshot)" @click="selectClass(charClass.Crackshot)"><span><strong>{{loc.weapon_crackshot_title}}: </strong>{{loc.weapon_crackshot_content}}</span>
</div>
<div class="tool-tip">
<img src="img/weapon-icons/ico_weapon_TriHard.svg" class="weapon_img roundme_lg" :class="addSelectedCssClass(charClass.TriHard)" @click="selectClass(charClass.TriHard)"><span><strong>{{loc.weapon_trihard_title}}: </strong>{{loc.weapon_trihard_content}}</span>
</div>
</div>
</template>
<script>
var comp_weapon_select_panel = {
template: '#weaponselect_panel_template',
props: ['currentClass', 'loc'],
data: function () {
return {
charClass: CharClass,
vueData,
}
},
methods: {
selectClass: function (classIdx) {
if (!vueData.accountSettled){
return;
}
extern.changeClass(classIdx);
this.$emit('changed-class', classIdx);
BAWK.play('ui_click');
},
addSelectedCssClass: function (classIdx) {
return (this.currentClass === classIdx)
? 'weapon_selected'
: '';
},
}
// watch: {
// accountSettled(val) {
// }
// }
};
</script>
<script id="newsfeed-panel-template" type="text/x-template">
<section class="v_scroll">
<article v-if="items" v-for="item in activeItems" :key="item.id" @click="onItemThatIsClicked(item)" class="news_item roundme_md clickme">
<img :src="imageSrc(item)" class="news_img roundme_sm">
<p>{{ item.content }}</p>
</article>
</section>
</script>
<script>
var comp_newsfeed_panel = {
template: '#newsfeed-panel-template',
props: ['items'],
data: function () {
return vueData;
},
// mounted: function () {
// // this.fetchWebData();
// this.checklocalForNewsData();
// },
methods: {
imageSrc(item) {
return dynamicContentPrefix + 'data/img/newsItems/' + item.id + item.imageExt;
},
onItemThatIsClicked(item) {
console.log(item);
extern.clickedWebFeedItem(item);
BAWK.play('ui_click');
},
},
computed: {
activeItems() {
return this.items.filter(item => item.active);
}
}
};
</script><script id="chicken-panel-template" type="text/x-template">
<div id="showBuyPassDialogButton" class="new">
<div class="chicken-panel--upgraded" v-show="doUpgraded && !isSubscriber">
<div class="tool-tip tool-tip--right">
<span v-if="nugCounter" id="nugget-countdown">{{nugCounter}} Minutes remaining.</span>
<img class="upgraded-nugget" src="img/chicken-nugget/goldenNugget_static.png">
<!-- <div id="nugget-timer" class="nugget-timer--wrapper">
<div class="timer-background"></div>
<div class="timer spinner"></div>
<div class="timer filler"></div>
<div class="mask"></div>
</div> -->
</div>
</div>
<div class="chicken-panel--no-upgraded" v-show="!doUpgraded">
<img src="img/chicken-nugget/starburst.png" @click="onChickenClick" class="clickme starburst">
<img src="img/chicken-nugget/goldenNuggetGIFWIP.gif" @click="onChickenClick" class="clickme nugget-chick">
<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: ['local', 'doUpgraded'],
data: function () {
return vueData;
},
methods: {
onChickenClick: function () {
BAWK.play('ui_chicken');
vueApp.showGoldChickenPopup();
ga('send', 'event', this.googleAnalytics.cat.purchases, 'Golden Chicken Click');
},
},
};
</script><script id="footer-links-panel-template" type="text/x-template">
<footer class="main-footer display-grid grid-column-1-2">
<div class="social-icons">
<social-panel id="social_panel"></social-panel>
</div>
<nav class="footer-nav text-left">
<a @click="onChangelogClicked" class="clickme">{{ version }}</a> |
<!-- <a href="https://shell-shockers.myshopify.com/collections/all" target="_blank" @click="BAWK.play('ui_click')">{{ loc.footer_merchandise }}</a> | -->
<a href="https://www.bluewizard.com/privacypolicy" target="_blank" @click="playSound">{{ loc.footer_privacypolicy }}</a> |
<a href="https://bluewizard.com/terms/" target="_blank" @click="playSound">{{ loc.footer_termsofservice }}</a> |
<button class="ss_button_as_text" @click="onHelpClick">{{ loc['account_title_faq'] }}</button> |
<a href="https://www.bluewizard.com" target="_blank" @click="playSound">© 2022 <img class="main-footer--logo-blue-wiz-mini" src="img/blue-wizard-logo-tiny-min.png" :alt="loc.footer_bluewizard + ' logo'"><span class="hideme">{{ loc.footer_bluewizard }}</span></a>
</nav>
</footer>
</script>
<script id="social-panel-template" type="text/x-template">
<div class="social_icons roundme_sm">
<a href="http://eepurl.com/dFPPwb" target="_blank" class="f_col f_center ss_marginright bg_blue4" @click="playSound('newYolker')">
<div class="icon-wrap bg_blue3 roundme_sm">
<span class="sr-only">Get the Shell Shocker's Newsletter: The New Yolker</span>
<i aria-hidden="true" class="text_blue1 fas fa-envelope-open-text"></i>
</div>
</a>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Facebook" reward="Facebook" url="https://www.facebook.com/bluewizarddigital" img="footer-social-media-bubble-facebook.png" icon="fa-facebook" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Twitter" reward="Twitter" url="https://twitter.com/bluewizardgames" img="footer-social-media-bubble-twitter.png" icon="fa-twitter" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Instagram" reward="Instagram" url="https://www.instagram.com/bluewizardgames/" img="footer-social-media-bubble-instagram.png" icon="fa-instagram" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="TikTok" reward="tiktok" url="https://www.tiktok.com/@bluewizarddigital" img="footer-social-media-bubble-tiktok.png" icon="fa-tiktok" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Discord" reward="discord" url="https://discord.gg/bluewizard" img="footer-social-media-bubble-discord.png" icon="fa-discord" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Steam" reward="Steam" url="https://store.steampowered.com/publisher/bluewizard" img="footer-social-media-bubble-steam.png" icon="fa-steam-symbol" :isActive="false"></social-promo>
<!-- ['name', 'reward', 'url', 'img', 'icon'] -->
<social-promo name="Twitch" reward="Twitch" url="https://www.twitch.tv/bluewizarddigital" img="footer-social-media-bubble-twitch.png" icon="fa-twitch" :isActive="true"></social-promo>
</div>
</script>
<script id="social-promo-template" type="text/x-template">
<div>
<div v-if="isActive" class="tool-tip" :class="{'active' : isBubbleActive}">
<a :href="url" target="_blank" :title="urlTitle" class="f_col f_center ss_marginright bg_blue4" @click="onClickReward()">
<div class="icon-wrap bg_blue3 roundme_sm">
<span class="sr-only">Vist Shell Shocker's {{ name }} page</span>
<i aria-hidden="true" class="text_blue1 fab" :class="icon"></i>
</div>
</a>
<div class="tool-tip--bubble" v-if="!itemRedeemed && bubbleHover">
<div class="tool-tip--group display-grid grid-column-1-2">
<div class="tool-tip--image box_relative">
<img class="discord-bubble-img box_absolute" :src="imgSrc" :alt="imgAlt">
</div>
<div class="tool-tip--text text-left">
<strong><i>Follow us<br /> on {{name}}</i></strong> <br /> for a free Hat!
</div>
</div>
<!-- .tool-tip--group -->
</div>
<!-- .tool-tip--bubble -->
</div>
<!-- .tool-tip -->
<a v-if="!isActive" :href="url" target="_blank" class="f_col f_center ss_marginright bg_blue4" @click="onClickReward()">
<div class="icon-wrap bg_blue3 roundme_sm">
<span class="sr-only">Vist Shell Shocker's {{ name }} page</span>
<i aria-hidden="true" class="text_blue1 fab" :class="icon"></i>
</div>
</a>
</div>
</script>
<script>
var COMPSOCIALPROMO = {
template: '#social-promo-template',
props: ['name', 'reward', 'url', 'img', 'icon', 'isActive'],
data: function () {
return {
isBubbleActive: true,
bubbleRepeat : '',
bubbleHover: true,
}
},
created() {
this.discordBubbleTimer();
},
methods: {
playSound (label) {
BAWK.play('ui_click');
this.gaSend(label);
},
discordBubbleTimer() {
if (this.itemRedeemed) {
this.isBubbleActive = false;
this.bubbleHover = false;
return;
}
this.bubbleRepeat = setInterval(() => {
this.isBubbleActive = this.isBubbleActive ? false : true;
}, 3000);
},
onClickReward() {
this.gaSend(this.reward);
console.log('onClickReward', this.reward);
const rewardGiven = localStore.getItem(`${this.reward}Rewarded`);
if (!hasValue(rewardGiven)) {
extern.socialReward(this.reward);
}
this.playSound();
this.isBubbleActive = false;
this.bubbleHover = false;
if (this.bubbleRepeat) {
clearInterval(this.bubbleRepeat);
}
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'social-buttons', 'click', label);
}
},
computed: {
itemRedeemed() {
return localStore.getItem(this.reward + 'Rewarded');
},
urlTitle() {
return `Blue Wizard ${this.name} page`;
},
imgAlt() {
return `Join Blue Wizard's ${this.name} page`;
},
imgSrc() {
return `img/social-media/${this.img}`;
}
}
};
</script><script>
var comp_social_panel = {
template: '#social-panel-template',
components: {
'social-promo': COMPSOCIALPROMO
},
data: function () {
return {
isBubbleActive: true,
bubbleRepeat : '',
bubbleHover: true,
rewardName: 'Twitch'
}
},
created() {
this.discordBubbleTimer();
},
methods: {
playSound (label) {
BAWK.play('ui_click');
this.gaSend(label);
},
discordBubbleTimer() {
if (this.itemRedeemed) {
this.isBubbleActive = false;
this.bubbleHover = false;
return;
}
this.bubbleRepeat = setInterval(() => {
this.isBubbleActive = this.isBubbleActive ? false : true;
}, 3000);
},
onClickReward(type) {
this.gaSend(type);
console.log('onClickReward', type);
const rewardGiven = localStore.getItem(`${type}Rewarded`);
if (!hasValue(rewardGiven)) {
extern.socialReward(type);
}
this.playSound();
this.isBubbleActive = false;
this.bubbleHover = false;
if (this.bubbleRepeat) {
clearInterval(this.bubbleRepeat);
}
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'social-buttons', 'click', label);
}
},
computed: {
itemRedeemed() {
return localStore.getItem(this.rewardName + 'Rewarded');
},
}
};
</script>
<script>
var comp_footer_links_panel = {
template: '#footer-links-panel-template',
components: {
'social-panel': comp_social_panel,
},
props: ['loc'],
data: function () {
return {
version: version
}
},
methods: {
onChangelogClicked: function () {
vueApp.showChangelogPopup();
BAWK.play('ui_popupopen');
},
playSound() {
BAWK.play('ui_click');
},
onHelpClick() {
vueApp.showHelpPopup();
this.gaSend('openHelp');
BAWK.play('ui_popupopen');
}
}
};
</script>
<template id="comp-vip-cta">
<div class="vip-club-cta" v-on:click="onClicked">
<button v-if="!isSubscriber && !isUpgraded && showVip" class="vip-club-cta-pos ss_button btn_sm btn_pink bevel_pink">
{{ loc.ui_game_playeractions_join_vip }}
</button>
<h4 v-if="isUpgraded && isSubscriber && showVip" class="sub-name">
{{loc[subName]}}
</h4>
<img class="roundme_md" :class="{ 'egg-org-img' : isEggOrg }" :src="getImgSrc" :alt="getImgSrcAlt">
</div>
</template>
<script>
const compVipCta = {
template: '#comp-vip-cta',
props: ['loc', 'upgradeName', 'isUpgraded', 'isSubscriber', 'hasMobileReward', 'isBlackFryday', 'isEggOrg', 'isTwitchEvent'],
data() {
return {
subName: '',
hasPlayedKotc: null,
kotcImgSrc: 'img/kotc/new-game-mode-king-of-coop.png',
vipImgSrc: 'img/vip-club/vip-club-call-to-action.png',
mobileImgSrc: 'img/mobile/shell-mobile-cta-min.png',
blackFrydayImgSrc: 'img/store-black-friday/black-fryday-home-screen-ad.png',
helpUkraine: 'img/stand-with-ukraine-min.png',
eggOrg: 'img/egg-org/eggOrg_timeTravel_houseAd2-min.jpg',
twitchSrc: 'img/twitch-drops/TwitchDrops2022-HouseAd_536x307-min.jpg'
};
},
mounted() {
this.hasPlayedKotc = localStore.getItem('hasPlayedKotc');
},
methods: {
onClicked() {
if (this.isEggOrg) {
vueApp.showSelectedTaggedItemsOnEquipScreen('EGGORG');
ga('send', 'event', 'home-display-ad', 'click', 'egg-org');
return;
}
// above all else show sale
if (this.isBlackFryday) {
vueApp.showEggStorePopup();
ga('send', 'event', 'home-display-ad', 'click', 'black-fryday');
return;
}
// promote KOTC
if (this.hasPlayedKotc) {
ga('send', 'event', 'home-display-ad', 'click', 'item_hat_ukraine');
// ga('send', 'event', 'home-display-ad', 'click', 'kotc-popup');
// vueApp.showKotcInstrucPopup();
vueApp.showPopupEggStoreSingle('item_hat_ukraine');
// localStore.setItem('hasPlayedKotc', true);
return;
}
if (this.isTwitchEvent) {
ga('send', 'event', 'home-display-ad', 'click', 'twitch-drops');
open('https://shellshock.io/twitch/?utm_medium=referral&utm_campaign=featureslot', '_blank');
}
// if has mobile item
if (this.hasMobileReward) {
let vipType = 'vip-ad';
if (this.isUpgraded && this.sSubscriber) {
let vipType = 'vip-manage';
}
ga('send', 'event', 'home-display-ad', 'click', vipType);
vueApp.showSubStorePopup();
return;
} else {
ga('send', 'event', 'home-display-ad', 'click', 'mobile-ad');
vueApp.showGetMobilePopup();
}
},
test() {
this.isBlackFryday = false;
this.hasPlayedKotc = true;
this.hasMobileReward = true;
}
},
computed: {
getImgSrc() {
if (this.isEggOrg) {
return this.eggOrg;
}
if (this.isBlackFryday) {
return this.blackFrydayImgSrc;
}
if (this.hasPlayedKotc) {
return this.kotcImgSrc;
}
if (this.hasMobileReward) {
return this.vipImgSrc;
} else {
return this.mobileImgSrc;
}
if (this.isTwitchEvent) {
return twitchSrc;
}
},
getImgSrcAlt() {
if (this.isEggOrg) {
return 'EggOrg is back!';
}
if (this.isBlackFryday) {
return 'BLACK FRYDAY SALE!';
}
if (this.hasPlayedKotc) {
return 'Click to learn how to play King of the Coop!;';
}
if (this.hasMobileReward) {
return 'Manage VIP';
} else {
return 'Download mobile today!';
}
if (this.isTwitchEvent) {
return 'Get your drops today!';
}
},
showVip() {
return false;
if (!this.hasPlayedKotc || !this.hasMobileReward || this.isBlackFryday) {
return false;
} else {
return true;
}
},
},
watch: {
upgradeName(val) {
if (!hasValue(val)) {
return;
}
this.subName = `s-${val.replace(' ', '-').toLowerCase().replace(' ', '-')}-title`;
}
}
};
</script><script id="media-tabs-template" type="text/x-template">
<div class="media-tabs-container">
<div id="horizontalTabs" class="media-tab-container">
<button id="news-tab" @click="selectTab" class="media-tab ss_smtab ss_marginright" :class="(showNewsTab ? 'selected' : '')"><i class="fas fa-bullhorn"></i></button>
<button id="twitch-tab" @click="selectTab" class="media-tab ss_smtab ss_marginright" :class="(showTwitchTab ? 'selected' : '')"><i class="fab fa-twitch"></i></button>
<button id="video-tab" v-if="youtubeStreams.length > 0" @click="selectTab" class="media-tab ss_smtab" :class="(showVideoTab ? 'selected' : '')"><i class="fab fa-youtube"></i></button>
</div>
<div class="front_panel media-tabs-content roundme_sm f_col" :class="{'tab-news-active' : showNewsTab}">
<div id="news-tab" v-show="showNewsTab">
<h3 class="nospace shadow_blue4 text_white">{{ loc.home_latestnews }}</h3>
<div class="news-container f_row ss_margintop">
<div class="news_mask"></div>
<newsfeed-panel id="news_scroll" class="home-tab-scroll" ref="newsScroll" :items="newsfeedItems"></newsfeed-panel>
</div>
</div>
<!-- #news-tab -->
<div id="twitch-tab" v-show="showTwitchTab">
<h3 class="nospace shadow_blue4 text_white">
Twitch <button id="tab-twitch-btn" @click="onApplyNowClick" class="ss_button btn_md btn_yolk btn-media bevel_yolk">{{loc.home_media_apply_now}}</button>
</h3>
<div class="f_row ss_margintop">
<streamer-panel id="twitch_panel" :loc="loc" :streams="twitchStreams" :title="loc.twitch_title" :viewers="loc.twitch_viewers" icon="ico_twitch"></streamer-panel>
</div>
</div>
<!-- #twitch-tab -->
<div id="video-tab" v-show="showVideoTab">
<h3 class="nospace shadow_blue4 text_white">
YouTube <button id="tab-youtube-btn" @click="onApplyNowClick" class="ss_button btn_md btn_yolk btn-media bevel_yolk">{{loc.home_media_apply_now}}</button>
</h3>
<div class="news-container f_row ss_margintop">
<div class="news_mask"></div>
<div id="yTube-scroll" class="home-tab-scroll v_scroll">
<div v-for="item in youtubeStreams" :key="item.id" v-if="item.active" @click="onVideoClick(item)" class="news_item ytube-item roundme_md clickme">
<div class="image-wrap news_img roundme_sm">
<img :src="item.externalImg" alt="" class="news_img roundme_sm" />
</div>
<div class="content-wrap f_col f_space_between">
<p><strong>{{ item.title }}</strong></p>
<p v-if="item.desc">{{ item.desc }}</p>
<p class="text-right">{{ item.author }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .media-tabs-content -->
</div>
<!-- .media-tabs-container -->
</script>
<script id="streamer-panel-template" type="text/x-template">
<div class="panel_streamer noscroll">
<div v-if="show" id="stream_mask"></div>
<div id="stream_scroll" class="home-tab-scroll v_scroll" v-show="show">
<div class="stream_item roundme_sm clickme" v-for="s in streams">
<a :href="s.link" target="_blank" @click="BAWK.play('ui_click')" class="display-grid grid-column-1-2">
<img :src="s.image" class="stream_img roundme_sm">
<span>
<p class="stream_name">{{ s.name }}</p>
<p class="stream_viewers">{{ s.viewers }} {{ viewers }}</p>
</span>
</a>
</div>
</div>
<div class="no-stream roundme_sm" v-if="!show">
<p v-html="loc.twitch_no_steam"></p>
</div>
</div>
</script>
<script>
var comp_streamer_panel = {
template: '#streamer-panel-template',
props: ['streams', 'title', 'viewers', 'icon', 'loc'],
methods: {
playSound (sound) {
BAWK.play(sound);
}
},
computed: {
show: function() {
if (!this.streams) {
return false;
}
return this.streams.length > 0;
}
}
};
</script>
<script>
const MEDIATABS = {
template: '#media-tabs-template',
components: {
'newsfeed-panel': comp_newsfeed_panel,
'streamer-panel': comp_streamer_panel,
},
props: ['loc', 'newsfeedItems', 'twitchStreams', 'youtubeStreams'],
created() {
this.$nextTick(() => {
this.randomTabSelect();
});
},
mounted() {
// VUE!!!!!!!!!!!
setTimeout(() => this.getAllTabs(), 500);
},
data: function () {
return {
mediaTabs: [],
mediaTabsCount: 0,
rotateTimeout: '',
showNewsTab: false,
showTwitchTab: false,
showVideoTab: false,
currentTab: ''
}
},
methods: {
getAllTabs() {
this.$nextTick(() => {
let ids = [],
tabs = Array.from(document.querySelectorAll('.media-tab')).forEach(tab => ids.push(tab.id));
this.mediaTabs = ids;
this.mediaTabsCount = this.mediaTabs.length - 1;
this.autoRotateTabs();
});
},
selectTab: function (e) {
ga('send', 'event', 'media-tabs', 'click', e.currentTarget.id);
return this.switchTab(e.currentTarget.id, true, true)
},
autoRotateTabs() {
let nextIdx = this.mediaTabs.indexOf(this.currentTab) + 1;
if (nextIdx > this.mediaTabsCount) nextIdx = 0;
this.rotateTimeout = setTimeout(() => {
this.switchTab(this.mediaTabs[nextIdx], false, false);
this.autoRotateTabs();
}, 10000);
},
randomTabSelect() {
let n = Math.floor(Math.random() * 9);
if (n >= 0 && n <= 2) {
this.showNewsTab = true;
this.currentTab = 'news-tab';
} else if (n >= 3 && n <= 5) {
this.showTwitchTab = true;
this.currentTab = 'twitch-tab';
} else {
this.showVideoTab = true;
this.currentTab = 'video-tab';
}
},
onVideoClick(item) {
ga('send', 'creator', 'videoClick', item.title);
window.open(item.link, '_window');
},
onApplyNowClick(e) {
ga('send', 'creator', 'applyNow', e.target.id);
window.open('https://shellcreators.bluewizard.com', '_window');
},
switchTab(tab, sound, click) {
this.showNewsTab = false;
this.showTwitchTab = false;
this.showVideoTab = false;
switch (tab) {
case 'news-tab':
this.currentTab = 'news-tab';
this.showNewsTab = true;
break;
case 'twitch-tab':
this.currentTab = 'twitch-tab';
this.showTwitchTab = true;
break;
case 'video-tab':
this.currentTab = 'video-tab';
this.showVideoTab = true;
break;
}
if (sound) {
BAWK.play('ui_toggletab');
}
if (click) {
ga('send', 'creator', 'tabClick', this.currentTab);
this.cancelRotate(false);
}
},
cancelRotate(stop) {
clearTimeout(this.rotateTimeout);
this.rotateTimeout = '';
if (!stop) {
this.autoRotateTabs();
}
}
}
};
</script><template id="music-widget">
<div v-if="isMusic" class="music-widget roundme_md" :class="[!show ? hideClass : '']">
<div v-if="theAudio" class="music-widget--wrapper flex flex-nowrap">
<figure class="music-widget--content">
<header class=" roundme_md">
<h3 class="music-widget--now-playing">{{ loc.musicwidget_now_playing }}</h3>
</header>
<figcaption class="music-widget--content-wrapper">
<h4 class="music-widget--album-title">{{ serverTracks.artist }}</h4>
</figcaption>
<figcaption class="music-widget--content-wrapper">
<p v-if="serverTracks.url" class="music-widget--song-title"><a @click="gaSendEvent('click-track', getTitleAlbum)" :href="serverTracks.url" :title="theTitleAttr" target="_blank">{{ getTitleAlbum }}</a></p>
<p v-else="" class="music-widget--song-title">{{ getTitleAlbum }}</p>
</figcaption>
<div v-if="volumeSlider" v-for="t in settingsUi.adjusters.music" class="music-widget--volume-control nowrap">
<slider-component :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="volumeControl"></slider-component>
</div>
</figure>
<div class="music-widget--cover-image music-widget--cover-controls roundme_md">
<template v-if="serverTracks.url">
<a v-if="serverTracks.albumArt" @click="gaSendEvent('click-albumArt', getTitleAlbum)" :href="serverTracks.url" :title="theTitleAttr" class="ss-absolute" target="_blank"><img :src="serverTracks.albumArt" class="roundme_md ss-absolute" :alt="serverTracks.album"></a>
</template>
<template v-else="">
<img v-if="serverTracks.albumArt" :src="serverTracks.albumArt" class="ss-absolute roundme_md" alt="Album cover art for" :alt="serverTracks.album">
</template>
<button v-if="playBtn" @click="playAudio">
<i v-if="playing" class="music-widget--cover-control-icon music-widget--cover-control-pause far fa-pause-circle fa-2x"></i>
<i v-if="!playing" class="music-widget--cover-control-icon music-widget--cover-control-pause far fa-play-circle fa-2x"></i>
</button>
</div>
<div class="music-widget--sponsor">
<a @click="gaSendEvent('click-sponsor', sponsor.name)" v-if="sponsor" :href="sponsor.link" :title="getSponsorTitleAttr" target="_blank"><img :src="getSponsorImg" class="music-widget--sponsor-icon" :alt="sponsor.name"><span class="hideme">{{sponsor.name}}</span></a>
<button v-if="settings" @click="openSettings" class="music-widget--sponsor--settings-btn"><i class="fas fa-cog"></i><span class="hideme">Music Settings</span></button>
<button class="music-widget--sponsor--settings-btn" @click="toggleMusic"><i class="fas" aria-hidden="true" :class="togglePlayStopIcon"></i><span class="hideme">Music</span></button>
</div>
</div>
</div>
</template>
<script>
const createMusicWidget = templateId => {
return {
template: '#music-widget',
props: ['loc','volumeSlider', 'playBtn', 'settings', 'settingsUi', 'show'],
components: {
'slider-component': comp_settings_adjuster
},
data () {
return vueData.music;
},
mounted () {
this.theAudio = document.getElementById('theAudio');
},
methods: {
loadVolume() {
this.$nextTick(() => {
this.theAudio.volume = Number(this.settingsUi.adjusters.music[0].value);
});
},
getAudioServer() {
if (parsedUrl.dom == 'localhost' || parsedUrl.dom == 'dev' || parsedUrl.dom == 'localshelldev') {
var url = 'uswest2-music.shellshock.io';
}
else {
var server = vueApp.serverList.filter(server => server.locKey === vueApp.currentServerLocKey)[0];
var url = server.subdom.slice(0, -1) + '-music.' + parsedUrl.dom + '.' + parsedUrl.top;
}
this.musicSrc = 'https://' + url + '/shellshock.ogg';
},
setIndex(k) {
this.$nextTick(() => {
this.play();
})
this.currIndex = k;
},
play() {
if (!this.isMusic) return;
this.getAudioServer();
},
playMusic() {
// var audio = this.theAudio;
this.theAudio.src = this.musicSrc;
console.log('Play Music');
clearInterval(this.timer);
this.theAudio.play()
.then( // Returns a Promise
() => { // Success
this.playing = true;
this.loadVolume();
this.duration = this.theAudio.duration;
this.theAudio.addEventListener('stalled', () => this.isMusic = false);
},
() => { // Fail
// What to do... just try again after a few seconds, I guess?
setTimeout(() => this.play(), 2000);
}
);
},
pause() {
this.playing = false;
this.theAudio.pause();
clearInterval(this.timer);
},
/*
next() {
if (this.currIndex < this.tracks.length - 1) {
this.currIndex++;
} else {
this.currIndex = 0;
}
},
prev() {
if (this.currIndex > 0) {
this.currIndex--;
} else {
this.currIndex = this.tracks.length - 1;
}
},
*/
playOnce() {
if (this.playing) return;
return this.play();
},
playAudio() {
if (this.theAudio.paused) {
this.play();
} else {
this.pause();
}
},
openSettings() {
vueApp.showSettingsPopup();
vueApp.onSettingsPopupSwitchTabMisc();
this.gaSendEvent('click', 'widgetOpenSettings');
},
volumeControl(id, value) {
extern.setMusicVolume(value);
vueApp.onSettingsQuickSave();
},
hideMe() {
return this.$refs.id.classList.addClass('fade-out-3');
},
showMe() {
this.show = true;
setTimeout(() => this.show = false, 2000);
},
gaSendEvent(action, label) {
action = action || '';
label = label || '';
return ga('send', 'event', 'music', action, label);
},
toggleMusic() {
if (this.playing) {
this.theAudio.removeEventListener('stalled', () => this.isMusic = false);
this.playing = false;
this.pause();
this.musicSrc = '';
this.theAudio.removeAttribute('src');
extern.setMusicStatus(false);
this.gaSendEvent('toggleMusic', 'off');
return;
}
this.theAudio.src = '';
this.play();
extern.setMusicStatus(true);
this.gaSendEvent('toggleMusic', 'on');
},
changeVolume(val) {
this.theAudio.volume = val;
}
},
watch: {
'currIndex': {
handler() {
this.$nextTick(() => {
this.play();
})
}
},
serverTracks(val) {
let sponsor = this.sponsors.filter(sponsor => sponsor.id === val.sponsor);
this.sponsor = sponsor.length || sponsor.length > 0 ? sponsor[0] : '';
},
musicSrc(val) {
if (val) {
this.playMusic();
}
},
},
computed: {
theTitleAttr() {
return 'Read more about ' + this.serverTracks.title;
},
getTitleAlbum() {
return this.serverTracks.title + ' - ' + this.serverTracks.album;
},
getSponsorImg() {
if (!this.sponsor) {
return;
}
return 'data/img/sponsor/' + this.sponsor.id + this.sponsor.imageExt;
},
getSponsorTitleAttr() {
return 'See more about our sponsor ' + this.sponsor.name;
},
togglePlayStopIcon() {
return this.playing ? 'fa-stop-circle' : 'fa-play-circle';
},
},
};
};
// Register component globally
Vue.component('music-widget', createMusicWidget('#music-widget'));
</script>
<script>
var comp_home_screen = {
template: '#home-screen-template',
components: {
'stats-panel': comp_stats_panel,
'play-panel': comp_play_panel,
'weapon-select-panel': comp_weapon_select_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,
'event-panel': comp_events,
'vip-club-cta': compVipCta,
'media-tabs': MEDIATABS
// 'pwa-button': comp_pwa_btn,
},
data: function () {
return vueData;
},
methods: {
playSound (sound) {
BAWK.play(sound);
},
onEquipClicked: function () {
vueApp.switchToEquipUi();
BAWK.play('ui_equip');
},
showSignIn: function () {
extern.showSignInDialog();
vueApp.$refs.firebaseSignInPopup.show();
},
onSignInClicked: function () {
this.showSignIn();
},
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;
this.urlParamSet = this.urlParams ? true : null;
// vueApp.showTitleScreenAd();
vueApp.shellShockUrlParamaterEvents();
},
onPlayerNameChanged: function (newName) {
console.log('play name event handler');
vueApp.setPlayerName(newName);
BAWK.play('ui_onchange');
},
onEggPlayClick() {
play: 'play game',
ga('send', 'event', vueData.googleAnalytics.cat.play, vueData.googleAnalytics.action.eggDollClick);
vueApp.$refs.homeScreen.$refs.playPanel.onPlayButtonClick();
},
api_incentivizedVideoRewardRequest() {
extern.api_incentivizedVideoRewardRequested();
},
onTwitchDropsClick() {
window.open(dynamicContentPrefix + 'twitch');
},
showNuggyPopup() {
vueApp.showChicknWinnerPopup();
},
playIncentivizedAd(e) {
if (!this.chicknWinnerReady || this.hasChwPlayClicked) {
e.preventDefault();
return;
}
ga('send', 'event', 'Chickn Winner', 'Free eggs btn', 'click-home');
this.hasChwPlayClicked = true;
vueApp.loadNuggetVideo();
vueApp.chicknWinnerNotReady();
},
chwStopCycle() {
if (this.chwHomeTimer) {
clearInterval(this.chwHomeTimer);
this.chwHomeTimer = '';
this.chwHomeEl.classList.remove('.active');
}
},
chwShowCycle() {
this.chwHomeEl = document.querySelector('.chw-home-timer');
if (this.chwHomeEl) {
this.chwHomeTimer = setInterval(() => {
this.chwHomeEl.classList.toggle('active');
}, this.chwActiveTimer);
}
},
openUnblocked() {
if (crazyGamesActive) {
window.open('https://scrambled.world/unblocked');
}
else {
window.open("unblocked");
}
}
},
computed: {
isEggStoreSaleItem() {
return this.eggStoreItems.some( item => item['salePrice'] !== '');
},
twitchDropsBtnImgSrs() {
if (this.twitchLinked) {
return '../img/events/twitch-drops-btn-linked.png';
}
return '../img/events/twitch-drops-btn-link-now.png';
},
remainingMsg() {
if (this.isChicknWinnerError) {
return this.loc.chw_error_text;
}
if (this.chicknWinnerDailyLimitReached && this.chicknWinnerCounter > 0) {
return this.loc.chw_daily_limit_msg;
}
if (this.chicknWinnerReady) {
if (this.chicknWinnerCounter === 0) {
return this.loc.chw_ready_msg;
} else {
return this.loc.chw_cooldown_msg;
}
} else {
return this.loc.chw_time_until;
}
},
progressBarWrapClass() {
if (this.chicknWinnerReady) {
return 'chw-progress-bar-wrap-complete';
}
},
playAdText() {
if (this.chicknWinnerReady && this.chicknWinnerCounter === 0) {
return this.loc.chw_btn_free_reward;
} else {
return this.loc.chw_btn_free_reward;
}
},
chwClass() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'grid-column-1-eq';
} else {
if (this.chicknWinnerReady) {
return 'grid-column-1-eq';
} else {
return 'grid-column-1-2';
}
}
},
chwHomeTimerCls() {
//{'chw-home-screen-max-watched': chicknWinnerDailyLimitReached}
if (this.chicknWinnerDailyLimitReached) {
return 'chw-home-screen-max-watched';
} else {
if (this.chicknWinnerReady) {
return 'is-ready active';
} else {
return 'not-ready';
}
}
},
chwChickSrc() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'img/chicken-nugget/chickLoop_daily_limit.svg';
} else {
if (!this.chicknWinnerReady) {
return 'img/chicken-nugget/chickLoop_sleep.svg';
} else {
return 'img/chicken-nugget/chickLoop_speak.svg';
}
}
},
chwShowTimer() {
if (this.chicknWinnerDailyLimitReached) {
// this.chwStopCycle();
return false;
} else {
if (this.chicknWinnerReady) {
this.chwShowCycle();
return false;
} else {
// this.chwStopCycle();
return true;
}
}
},
isTwitchLinked() {
if (this.twitchLinked) return '<i class="fas fa-check-circle text_twitch_yellow"></i>';
return '<i class="fas fa-times-circle text_grey"></i>';
}
}
};
</script><script id="equip-screen-template" type="text/x-template">
<div id="#equip_wrapper">
<div id="mainHead">
<account-panel id="account_panel" ref="accountPanelEquip" :loc="loc" :eggs="eggs" :show-corner-buttons="ui.showCornerButtons" :ui="ui" :show-bottom="false" :is-anonymous="isAnonymous" :isEggStoreSale="isEggStoreSaleItem" :is-subscriber="isSubscriber" :currentLangOptions="locLanguage" :is-twitch="twitchLinked"></account-panel>
</div>
<div id="equip_box" class="main-content">
<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" :grenade-item="equip.equippedGrenade" @equipped-type-selected="onEquippedTypeSelected"></equipped-slots>
<color-select id="equip.equipped_slots" ref="colorSelect" :loc="loc" :is-upgrade="isUpgraded" :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" :disabled="!accountSettled" :class="getButtonToggleClass(equip.equipModes.shop)" @click="switchToShop">{{ loc.eq_shop }}</i></button>
</div>
<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" @premium-items-clicked="onPremiumItemsClicked"></item-type-selector>
<div id="equip_purchase_top" class="equip_purchase_top">
<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>
</div>
<div id="equip_weapon_panel">
<weapon-select-panel id="weapon_select" ref="weapon_select":current-class="classIdx" :loc="loc" @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">
<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>
<!-- Popup: Buy Item -->
<small-popup id="buyItemPopup" ref="buyItemPopup" @popup-confirm="onBuyItemConfirm">
<template slot="header">{{ loc.p_buy_item_title }}</template>
<template slot="content">
<div>
<canvas id="buyItemCanvas" ref="buyItemCanvas" width="250" height="250"></canvas>
</div>
<div class="f_row f_center">
<img v-if="!isBuyingItemPrem" src="img/ico_goldenEgg.png" class="egg_icon"/>
<i v-else class="fas fa-dollar-sign"></i>
<h1>{{ (equip.buyingItem) ? equip.buyingItem.price : '' }}</h1>
</div>
</template>
<template slot="cancel">{{ loc.p_buy_item_cancel }}</template>
<template slot="confirm">{{ loc.p_buy_item_confirm }}</template>
</small-popup>
<!-- Popup: Redeem Code -->
<small-popup id="redeemCodePopup" ref="redeemCodePopup" :popup-model="equip.redeemCodePopup" @popup-confirm="onRedeemCodeConfirm">
<template slot="header">{{ loc.p_redeem_code_title }}</template>
<template slot="content">
<div class="error_text shadow_red" v-show="equip.redeemCodePopup.showInvalidCodeMsg">{{ loc.p_redeem_code_no_code }}</div>
<p><input type="text" class="ss_field ss_margintop ss_marginbottom text-center width_lg" v-model="equip.redeemCodePopup.code" v-bind:placeholder="loc.p_redeem_code_enter"></p>
</template>
<template slot="cancel">{{ loc.cancel }}</template>
<template slot="confirm">{{ loc.confirm }}</template>
</small-popup>
<!-- Popup: Physical Unlock -->
<small-popup id="physicalUnlockPopup" ref="physicalUnlockPopup" :popup-model="equip.physicalUnlockPopup" @popup-confirm="onPhysicalUnlockConfirm">
<template slot="header">{{ loc.p_physical_unlock_title }}</template>
<template slot="content">
<div v-if="(equip.physicalUnlockPopup.item !== null)">
<div>
<item :item="equip.physicalUnlockPopup.item" :isSelected="false" :show-item-only="true"></item>
<div class="f_row f_center">
<img src="img/ico_goldenEgg.png" class="egg_icon"/>
<h1>{{ loc.p_buy_special_price }}</h1>
</div>
</div>
<div class="popup_sm__item_desc">
{{ loc[equip.physicalUnlockPopup.item.item_data.physicalUnlockLocKey] }}
</div>
</div>
</template>
<template slot="cancel">{{ loc.cancel }}</template>
<template slot="confirm">{{ loc.confirm }}</template>
</small-popup>
</div>
</script>
<script id="equipped-slots-template" type="text/x-template">
<div>
<h3 class="margins_sm">{{ loc.eq_equipped }}</h3>
<div id="equip_equippedslots">
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Primary)">
<item id="primary_item" ref="primary_item" v-if="primaryItem" :item="primaryItem" class="equip_icon" :equippedSlot="true"></item>
<div v-if="!primaryItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_weaponPrimary.svg" alt="Primary equip slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Secondary)">
<item id="secondary_item" ref="secondary_item" v-if="secondaryItem" :item="secondaryItem" class="equip_icon" :equippedSlot="true"></item>
<div v-if="!secondaryItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_weaponSecondary.svg" alt="Secondary equip slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Grenade)">
<item id="grenade_item" ref="grenade_item" v-if="grenadeItem" :item="grenadeItem" class="equip_icon" :equippedSlot="true"></item>
<div v-if="!grenadeItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_grenade.svg" alt="Grenade equip slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Hat)">
<item id="hat_item" ref="hat_item" v-if="hatItem" :item="hatItem" :equippedSlot="true"></item>
<div v-if="!hatItem" class="equip_icon equip_icon_hat equip_icon_no_item"><img src="img/inventory-icons/ico_hat.svg" alt="Hat item slot"></div>
</div>
<div class="equip_item roundme_lg clickme f_row f_center" @click="onClick(itemType.Stamp)">
<item id="stamp_item" ref="stamp_item" v-if="stampItem" :item="stampItem" :equippedSlot="true"></item>
<div v-if="!stampItem" class="equip_icon equip_icon_stamp equip_icon_no_item"><img src="img/inventory-icons/ico_stamp.svg" alt="Stamp item slot"></div>
</div>
</div>
</div>
</script>
<script>
var comp_equipped_slots = {
template: '#equipped-slots-template',
components: { 'item': comp_item },
props: ['loc', 'primaryItem', 'secondaryItem', 'hatItem', 'stampItem', 'grenadeItem'],
data: function () {
return {
itemType: ItemType
}
},
methods: {
onClick: function (itemType) {
this.$emit('equipped-type-selected', itemType);
}
},
computed: {
emptyHatClass: function () {
return (this.hatItem === null) ? 'equip_icon_hat' : '';
},
emptyStampClass: function () {
return (this.stampItem === null) ? 'equip_icon_stamp' : '';
}
}
};
</script><script id="color-select-template" type="text/x-template">
<div>
<h3 class="margins_sm">{{ loc.eq_color }}</h3>
<div id="equip_free_colors" class="text-center">
<svg v-for="(c, index) in freeColors" class="eggIcon equip_color" :style="{ color: c }" :class="isSelectedClass(index)" @click="onClick(index)"><use xlink:href="#icon-egg"></use></svg>
</div>
<div id="equip_paid_colors" class="text-center ss_marginbottom_lg">
<svg v-for="(c, index) in paidColors" class="eggIcon equip_color" :style="{ color: c }" :class="isSelectedClass(index + freeColors.length)" @click="onClick(index + freeColors.length)"><use :xlink:href="getExtraColorEggIcon"></use></svg>
</div>
</div>
</script>
<script>
var comp_color_select = {
template: '#color-select-template',
props: ['loc', 'colorIdx', 'extraColorsLocked', 'isUpgrade'],
data: function () {
return {
freeColors: freeColors,
paidColors: paidColors
}
},
methods: {
isSelectedClass: function (idx) {
return (idx === this.colorIdx) ? 'selected' : ''
},
onClick: function (idx) {
if (idx >= freeColors.length && this.extraColorsLocked === true) {
vueApp.showSubStorePopup();
// BAWK.play('ui_chicken');
return;
}
this.$emit('color-changed', idx);
},
},
computed: {
getExtraColorEggIcon() {
return (this.extraColorsLocked === true && !this.isUpgrade) ? '#icon-egg-locked' : '#icon-egg';
},
}
};
</script><script id="item-timer-template" type="text/x-template">
<div>
<div id="equip_timerem" class="box_blue3 roundme_sm shadow_blue4">
<i class="fas fa-hourglass-start"></i> 9{{ loc.eq_day }}<span class="blink">:</span>12{{ loc.eq_hour }}
<br>{{ loc.eq_remaining }}
</div>
</div>
</script>
<script>
var comp_item_timer = {
template: '#item-timer-template',
props: ['loc']
};
</script><script id="price-tag-template" type="text/x-template">
<div id="equip_purchase_items" v-if="isNoPrice" class="equip_purchase_items">
<div id="equip_pricetag" class="equip_pricetag shadow_blue2">
<img src="img/pricetag_left.png" class="equip_pricetag__endpiece">
<div class="equip_pricetag__tag equip_pricetag__is_buy_tag">
<img v-if="!isPremium" src="img/ico_goldenEgg.png">
<i v-else class="fas fa-dollar-sign"></i>
{{ item.price }}
</div>
<img src="img/pricetag_right.png" class="equip_pricetag__endpiece">
</div>
<button style="pointer-events: all" class="ss_button btn_yolk bevel_yolk is_purchase_btn" @click="onBuyClick">{{ loc.eq_buy }}</button>
</div>
</script>
<script>
var comp_price_tag = {
template: '#price-tag-template',
props: ['loc', 'item'],
methods: {
onBuyClick: function () {
if (this.isPremium) {
return vueApp.showPopupEggStoreSingle(this.item.sku);
}
this.$emit('buy-item-clicked', this.item);
}
},
computed: {
isPremium() {
return this.item.unlock === 'premium';
},
isNoPrice() {
return this.item.price < 1000000000;
}
}
};
</script><script id="physical-tag-template" type="text/x-template">
<div id="equip_get_physical_item" class="equip_purchase_items">
<div id="equip_pricetag" class="equip_pricetag shadow_blue2">
<img src="img/pricetag_left.png">
<div class="equip_pricetag__tag equip_pricetag__is_special_tag">
<img src="img/ico_goldenEgg.png" class="ss_marginright">{{ loc.p_buy_special_price }}
</div>
<img src="img/pricetag_right.png">
</div>
<button class="ss_button btn_yolk bevel_yolk is_special_get_btn" @click="onBuyClick">{{ loc.p_chicken_goldbutton }}</button>
</div>
</script>
<script>
var comp_physical_tag = {
template: '#physical-tag-template',
props: ['loc', 'item'],
methods: {
onBuyClick: function () {
this.$emit('buy-item-clicked', this.item);
}
}
};
</script><script id="item-type-selector-template" type="text/x-template">
<div>
<div id="equip_itemtype" class="equip_panelhead">
<img src="img/inventory-icons/ico_weaponPrimary.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Primary)" @click="onItemTypeClick(itemType.Primary)">
<img src="img/inventory-icons/ico_weaponSecondary.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Secondary)" @click="onItemTypeClick(itemType.Secondary)">
<img src="img/inventory-icons/ico_grenade.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Grenade)" @click="onItemTypeClick(itemType.Grenade)">
<img src="img/inventory-icons/ico_hat.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Hat)" @click="onItemTypeClick(itemType.Hat)">
<img src="img/inventory-icons/ico_stamp.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass(itemType.Stamp)" @click="onItemTypeClick(itemType.Stamp)">
<i class="ico_itemtype premium-item-type clickme roundme_lg fas fa-gem" :class="getSelectedClass('premium')" @click="onPremiumTypeClick"></i>
<img src="img/inventory-icons/ico_specialItem.svg" class="ico_itemtype clickme roundme_lg" :class="getSelectedClass('tagged')" @click="onTaggedTypeClick">
</div>
</div>
</script>
<script>
var comp_item_type_selector = {
template: '#item-type-selector-template',
props: ['showSpecialItems', 'selectedItemType', 'inShop'],
data: function () {
return {
itemType: ItemType,
showingTagged: false
}
},
methods: {
onItemTypeClick: function (itemType) {
this.$emit('item-type-changed', itemType);
},
onTaggedTypeClick: function (e) {
if (!this.showSpecialItems) {
return;
}
this.$emit('tagged-items-clicked');
},
onPremiumTypeClick() {
this.$emit('premium-items-clicked');
},
getSelectedClass: function (itemType) {
let noTags = itemType === 'tagged' && !this.showSpecialItems ? 'no-tags' : '';
return (itemType === this.selectedItemType) ? 'selected ' + noTags : '' + noTags;
}
}
};
</script><script id="item-grid-template" type="text/x-template">
<div>
<div id="item_mask"></div>
<h3 v-if="accountSettled" class="margins_sm">{{ loc[categoryLocKey] }}</h3>
<div v-if="accountSettled" id="equip_grid" :class="gridClass">
<item v-for="i in items" :loc="loc" :item="i" :key="i.id" :isSelected="isSelected(i)" @item-selected="onItemSelected"></item>
<div v-show="!inShop" class="store_item roundme_lg '.$is_hi.' '.$is_na.' clickme morestuff bevel_green" @click="onSwitchToShopClick"></div>
<div v-show="inShop && !hiddenPremItemCheck" class="store_item roundme_lg '.$is_hi.' '.$is_na.' soldout">
<div class="soldout_head shadow_bluebig5" v-html="loc.eq_sold_out_head"></div>
<div class="soldout_text" v-html="loc.eq_sold_out_text"></div>
</div>
</div>
<div id="items-account-not-loaded" v-show="!accountSettled" class="text-center">
<h3>{{loc.signin_auth_title}}</h3>
<p>{{loc.signin_auth_msg}}</p>
</div>
</div>
</script>
<script>
var comp_item_grid = {
template: '#item-grid-template',
components: { 'item': comp_item },
props: ['items', 'selectedItem', 'gridClass', 'categoryLocKey', 'inShop'],
data() {
return vueData;
},
methods: {
onItemSelected: function (selectedItem) {
this.$emit('item-selected', selectedItem);
},
isSelected: function (item) {
if (!hasValue(this.selectedItem)) {
return false;
}
return (this.selectedItem.id === item.id);
},
onSwitchToShopClick: function () {
this.$emit('switch-to-shop');
BAWK.play('ui_playconfirm');
},
isPremItemInStore() {
let hasItem = false;
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
const isItem = vueApp.premiumShopItems.find(i => i.isActive && i.itemId.id === item.id);
if (hasValue(isItem)) {
hasItem = true;
break;
}
}
return hasItem;
}
},
computed: {
categoryName: function () {
if (!hasValue(this.selectedItem)) {
return null;
}
return this.loc['item_type_' + this.selectedItem.item_type_id];
},
hiddenPremItemCheck() {
if (this.items.some(i => i.unlock === 'purchase') || this.items.length !== 0) return true;
if (this.items.some(i => i.unlock === 'premium')) return this.isPremItemInStore();
return false;
}
}
};
</script>
<script>
var comp_equip_screen = {
template: '#equip-screen-template',
components: {
'account-panel': comp_account_panel,
'equipped-slots': comp_equipped_slots,
'color-select': comp_color_select,
'item-timer': comp_item_timer,
'price-tag': comp_price_tag,
'physical-tag': comp_physical_tag,
'item-type-selector': comp_item_type_selector,
'item-grid': comp_item_grid,
'house-ad-small': comp_house_ad_small,
'weapon-select-panel': comp_weapon_select_panel,
'item': comp_item,
// 'account-panel': comp_account_panel,
'house-ad-small': comp_house_ad_small
},
data: function () {
return vueData;
},
equippedItems: {},
methods: {
setup: function (itemType) {
if (!itemType) { itemType = ItemType.Primary; }
this.updateEquippedItems();
this.poseEquippedItems();
if (itemType === 'tagged') {
this.populateItemGridWithTagged(this.equip.specialItemsTag);
} else {
this.populateItemGridWithType(itemType);
}
this.selectEquippedItemForType();
},
updateEquippedItems: function () {
this.$options.equippedItems = extern.getEquippedItems();
this.equip.equippedHat = this.$options.equippedItems[ItemType.Hat];
this.equip.equippedStamp = this.$options.equippedItems[ItemType.Stamp];
this.equip.equippedGrenade = this.$options.equippedItems[ItemType.Grenade];
this.equip.equippedPrimary = this.$options.equippedItems[ItemType.Primary];
this.equip.equippedSecondary = this.$options.equippedItems[ItemType.Secondary];
},
poseEquippedItems: function () {
this.posingHat = this.equip.equippedHat;
this.posingStamp = this.equip.equippedStamp;
switch (this.equip.showingWeaponType) {
case ItemType.Primary:
this.posingWeapon = this.equip.equippedPrimary;
this.posingGrenade = null;
break;
case ItemType.Secondary:
this.posingWeapon = this.equip.equippedSecondary;
this.posingGrenade = null;
break;
case ItemType.Grenade:
this.posingGrenade = this.equip.equippedGrenade;
break;
}
this.workItBaby();
},
selectEquippedItemForType: function () {
switch (this.equip.selectedItemType) {
case ItemType.Hat: this.equip.selectedItem = this.equip.equippedHat; break;
case ItemType.Stamp: this.equip.selectedItem = this.equip.equippedStamp; break;
case ItemType.Primary: this.equip.selectedItem = this.equip.equippedPrimary; break;
case ItemType.Secondary: this.equip.selectedItem = this.equip.equippedSecondary; break;
case ItemType.Grenade: this.equip.selectedItem = this.equip.equippedGrenade; break;
}
},
populateItemGridWithType: function (itemType) {
this.equip.selectedItemType = itemType;
var items = extern.getItemsOfType(itemType);
this.populateItemGrid(items);
this.equip.categoryLocKey = 'item_type_{0}{1}'.format(itemType, ((itemType === ItemType.Primary) ? '_' + this.classIdx : ''));
},
populateItemGridWithTagged: function (tag) {
var items = extern.getTaggedItems(tag);
this.populateItemGrid(items);
this.equip.categoryLocKey = 'item_type_5';
},
populateItemGrid: function (items) {
if (this.equip.mode === vueData.equip.equipModes.inventory) {
items = items.filter(i => {
return extern.isItemOwned(i) || (i.is_available && i.unlock === "default");
});
}
else {
items = items.filter(i => {
// return (i.is_available || extern.account.isSubscriber) && !extern.isItemOwned(i) && i.unlock !== "default" && i.unlock !== 'manual';
return i.is_available && !extern.isItemOwned(i) && i.unlock !== "default";
})
}
this.equip.showingItems = items;
},
workItBaby: function () {
extern.poseWithItem(ItemType.Hat, this.posingHat);
extern.poseWithItem(ItemType.Stamp, this.posingStamp);
extern.poseWithItem(this.posingWeapon.item_type_id, this.posingWeapon);
if (this.posingGrenade) extern.poseWithItem(this.posingGrenade.item_type_id, this.posingGrenade);
},
onBackClick: function () {
extern.saveEquipment();
this.equip.showingWeaponType = ItemType.Primary;
this.poseEquippedItems();
if (!extern.inGame) {
vueApp.showTitleScreenAd();
vueApp.switchToHomeUi();
} else {
extern.closeEquipInGame();
vueApp.switchToGameUi();
vueApp.showGameMenu();
vueApp.showRespawnDisplayAd();
}
BAWK.play('ui_popupclose');
},
onItemTypeChanged: function (itemType) {
this.switchItemType(itemType);
},
switchItemType: function (itemType) {
if (itemType !== this.equip.selectedItemType) {
if (itemType === ItemType.Primary || itemType === ItemType.Secondary || itemType == ItemType.Grenade) {
this.equip.showingWeaponType = itemType;
}
this.poseEquippedItems();
this.populateItemGridWithType(itemType);
if (this.equip.mode === this.equip.equipModes.inventory) {
this.selectEquippedItemForType();
} else {
this.selectFirstItemInShop();
}
}
if (!this.isInShop) {
this.hideItemForSale();
this.hideItemForSpecial();
}
BAWK.play('ui_click');
},
onTaggedItemsClicked: function () {
BAWK.play('ui_click');
if (this.equip.selectedItemType === 'tagged') {
return;
}
this.showTaggedItems(this.equip.specialItemsTag);
this.selectFirstItemInShop();
},
onPremiumItemsClicked() {
BAWK.play('ui_click');
if (this.equip.selectedItemType === 'premium') {
return;
}
this.showPremiumItems();
this.selectFirstItemInShop();
},
showPremiumItems() {
this.equip.selectedItemType = 'premium';
var items = extern.getPremiumItems();
this.populateItemGrid(items);
this.equip.categoryLocKey = 'item_type_7';
},
showTaggedItems: function (tag) {
this.equip.selectedItemType = 'tagged';
if (this.equip.mode === this.equip.equipModes.inventory && !this.ownsTaggedItems(this.equip.specialItemsTag)) {
this.equip.mode = this.equip.equipModes.shop;
vueApp.conditionalAnonWarningCall();
}
this.populateItemGridWithTagged(tag);
},
showSelectedTagItems(tag) {
this.equip.selectedItemType = 'tagged';
// if (this.equip.mode === this.equip.equipModes.inventory) {
// this.equip.mode = this.equip.equipModes.shop;
// }
this.populateItemGridWithTagged(tag);
},
switchToInventory: function () {
if (this.equip.selectedItemType === 'tagged' && this.equip.mode === this.equip.equipModes.shop) {
if (!this.ownsTaggedItems(this.equip.specialItemsTag)) {
this.switchItemType(ItemType.Primary);
}
}
this.equip.mode = this.equip.equipModes.inventory;
this.hideItemForSale();
this.hideItemForSpecial();
this.poseEquippedItems();
this.showItemsAfterEquipModeSwitch();
this.selectEquippedItemForType();
BAWK.play('ui_toggletab');
// vueApp.histPushState({game: this.ui.screens.equip}, 'Shellshockers equipment inventory', '?equip=inventory');
},
ownsTaggedItems: function (tag) {
return extern.getTaggedItems(tag).filter(i => {
return extern.isItemOwned(i);
}).length > 0;
},
selectFirstItemInShop: function () {
if (this.isInShop && this.equip.showingItems.length > 0) {
this.selectItem(this.equip.showingItems[0]);
}
},
switchToShop: function () {
if (!this.accountSettled) {
return;
}
this.equip.mode = this.equip.equipModes.shop;
this.showItemsAfterEquipModeSwitch();
this.selectFirstItemInShop();
vueApp.conditionalAnonWarningCall();
BAWK.play('ui_toggletab');
// vueApp.histPushState({game: this.ui.screens.equip}, 'Shellshockers equipment shop', '?equip=shop');
},
showItemsAfterEquipModeSwitch: function () {
if (this.equip.selectedItemType === 'tagged') {
this.showTaggedItems(this.equip.specialItemsTag)
} else if (this.equip.selectedItemType === 'premium') {
this.showPremiumItems();
} else {
this.populateItemGridWithType(this.equip.selectedItemType);
}
},
onEquippedTypeSelected: function (itemType) {
this.equip.selectedItemType = itemType;
if (
this.equip.selectedItemType === ItemType.Primary ||
this.equip.selectedItemType === ItemType.Secondary ||
this.equip.selectedItemType === ItemType.Grenade
) {
this.equip.showingWeaponType = itemType;
}
this.switchToInventory();
},
onChangedClass: function () {
this.hideItemForSale();
this.hideItemForSpecial();
if (this.posingGrenade) {
this.posingGrenade = null;
this.onEquippedTypeSelected(ItemType.Primary);
}
if (this.equip.selectedItemType !== ItemType.Primary) {
this.onEquippedTypeSelected(ItemType.Primary);
}
this.updateEquippedItems();
this.poseEquippedItems();
this.populateItemGridWithType(this.equip.selectedItemType);
if (extern.inGame && this.ui.showScreen !== this.ui.screens.equip) {
this.equip.showingWeaponType = ItemType.Primary;
this.poseEquippedItems();
extern.closeEquipInGame();
}
},
autoSelectItem: function (item) {
if (extern.isItemOwned(item)) {
this.switchToInventory();
} else {
this.switchToShop();
}
this.switchItemType(item.item_type_id);
this.selectItem(item);
},
onItemSelected: function (item) {
this.selectItem(item);
},
isPremItemInStore(item) {
let hasItem = false;
const isItem = this.premiumShopItems.find(i => i.isActive && i.itemId.id === item.id);
if (hasValue(isItem)) {
hasItem = true;
}
return hasItem;
},
selectItem: function (item) {
var selectingSame = hasValue(this.equip.selectedItem) && this.equip.selectedItem.id === item.id;
var selectedId = selectingSame ? this.equip.selectedItem.id : null;
var isWeapon = (item.item_type_id === ItemType.Primary || item.item_type_id === ItemType.Secondary);
BAWK.play('ui_click');
if (selectingSame) {
if (this.isInShop) {
// Revert to equipped weapon
item = this.$options[this.equip.selectedItem.item_type_id];
} else {
// Take off hat or stamp
if (!isWeapon) {
item = null;
extern.removeItemType(this.equip.selectedItem.item_type_id);
}
}
}
if (this.isInShop) {
if ( item && item.hasOwnProperty('unlock') && item.unlock === 'premium' && !this.isPremItemInStore(item)) {
// Revert to equipped weapon
item = this.$options[this.equip.selectedItem.item_type_id];
}
}
// Take off any items being tried on
this.poseEquippedItems();
this.equip.selectedItem = item;
extern.tryEquipItem(item);
this.updateEquippedItems();
if (hasValue(item)) {
this.poseWithItem(item);
if (this.isInShop) {
switch (item.unlock) {
case "physical":
console.log('purchasing physical item');
if ( !selectingSame ) {
this.offerItemForSpecial(item)
this.hideItemForSale();
} else {
this.hideItemForSpecial();
}
// this.$refs.physicalUnlockPopup.toggle();
break;
case "purchase":
case "premium":
if (!selectingSame) {
this.offerItemForSale(item);
this.hideItemForSpecial();
} else {
this.hideItemForSale();
}
break;
}
}
} else {
this.poseEquippedItems();
this.hideItemForSale();
this.hideItemForSpecial();
}
},
poseWithItem: function (item) {
switch (item.item_type_id) {
case ItemType.Hat: this.posingHat = item; break;
case ItemType.Stamp: this.posingStamp = item; break;
case ItemType.Grenade: this.posingGrenade = item; break;
case ItemType.Primary:
case ItemType.Secondary: this.posingWeapon = item; break;
}
this.workItBaby();
},
getButtonToggleClass: function (equipMode) {
return (equipMode === this.equip.mode) ? 'btn_toggleon' : 'btn_toggleoff';
},
offerItemForSpecial: function(item) {
return this.equip.physicalUnlockPopup.item = item;
},
hideItemForSpecial: function() {
this.equip.physicalUnlockPopup.item = null;
},
offerItemForSale: function (item) {
this.equip.buyingItem = item;
},
hideItemForSale: function () {
this.equip.buyingItem = null;
// this.equip.physicalUnlockPopup.item = null
},
onBuyItemClicked: function () {
// If item is buying item show buyItemPopup or show physicalUnlockPopup
this.equip.buyingItem ? this.$refs.buyItemPopup.toggle() : this.$refs.physicalUnlockPopup.toggle();
this.equip.buyingItem ? extern.renderItemToCanvas(this.equip.buyingItem, this.$refs.buyItemCanvas) : null;
BAWK.play('ui_popupopen');
},
onBuyItemConfirm: function () {
if (this.equip.buyingItem.unlock === 'premium') {
extern.buyProductForMoney(this.equip.buyingItem.sku);
return;
} else {
extern.api_buy(this.equip.buyingItem, this.boughtItemSuccess, this.boughtItemFailed);
}
BAWK.play('ui_playconfirm');
},
boughtItemSuccess: function () {
this.equip.selectedItem = this.equip.buyingItem;
ga('send', 'event', {
eventCategory: this.googleAnalytics.cat.itemShop,
eventAction: this.googleAnalytics.action.shopItemPopupBuy,
eventLabel: this.equip.buyingItem.name,
eventValue: this.equip.selectedItem.price
});
var itemType = this.equip.selectedItem.item_type_id;
if (itemType === ItemType.Primary || itemType === ItemType.Secondary || itemType == ItemType.Grenade) {
this.equip.showingWeaponType = itemType;
}
this.hideItemForSale();
this.setup(this.equip.selectedItemType);
this.updateEquippedItems();
this.poseEquippedItems();
this.selectEquippedItemForType();
},
boughtItemFailed: function () {
vueApp.showGenericPopup('p_buy_error_title', 'p_buy_error_content', 'ok');
BAWK.play('ui_reset');
},
onRedeemClick: function () {
this.$refs.redeemCodePopup.code = '';
this.$refs.redeemCodePopup.toggle();
BAWK.play('ui_popupopen');
},
onRedeemCodeConfirm: function () {
if (this.equip.redeemCodePopup.code.toUpperCase() === 'D3LL0RKC1R') {
this.giveStuffPopup.eggOrg = false;
this.giveStuffPopup.rickroll = true;
vueApp.showGiveStuffPopup('p_give_stuff_title');
} else {
this.giveStuffPopup.rickroll = false;
this.giveStuffPopup.eggOrg = false;
extern.api_redeem(this.equip.redeemCodePopup.code, this.redeemCodeSuccess, this.redeemCodeFailed);
}
BAWK.play('ui_playconfirm');
},
redeemCodeSuccess: function (eggs, items) {
this.populateItemGridWithType(this.equip.selectedItemType);
this.giveStuffPopup.eggs = eggs;
this.giveStuffPopup.items = items;
vueApp.showGiveStuffPopup('p_give_stuff_title', eggs, items);
let itemString = '';
this.giveStuffPopup.items.forEach(item => itemString += item.name);
ga('send', 'event', {
eventCategory: this.googleAnalytics.cat.redeem,
eventAction: this.googleAnalytics.action.redeemed,
eventLabel: `${itemString ? itemString : ''} ${this.giveStuffPopup.eggs ? this.giveStuffPopup.eggs + 'eggs' : ''}`
});
},
redeemCodeFailed: function () {
vueApp.showGenericPopup('p_redeem_error_title', 'p_redeem_error_content', 'ok');
BAWK.play('ui_reset');
},
onPhysicalUnlockConfirm: function () {
window.open(this.equip.physicalUnlockPopup.item.item_data.physicalItemStoreURL, '_blank');
},
onColorChanged: function (colorIdx) {
this.equip.colorIdx = colorIdx;
extern.setShellColor(this.equip.colorIdx);
BAWK.play('ui_onchange');
},
onSwitchToShopClicked: function () {
this.switchToShop();
}
},
computed: {
isInShop: function () {
return (this.equip.mode === this.equip.equipModes.shop);
},
getGridClass: function () {
return this.isInShop ? '' : 'equip_grid_short';
},
isEggStoreSaleItem() {
return this.eggStoreItems.some( item => item['salePrice'] !== '');
},
isBuyingItemPrem() {
if (!this.equip.buyingItem) {
return;
}
return this.equip.buyingItem.unlock === 'premium';
}
}
};
</script><script id="game-screen-template" type="text/x-template">
<div>
<event-panel :show-soon="false" :show-ui="ui.showCornerButtons"></event-panel>
<account-panel id="game_account_panel" ref="accountPanelGame" :loc="loc" :eggs="eggs" :show-bottom="false" :show-corner-buttons="ui.showCornerButtons" :ui="ui" :isEggStoreSale="isEggStoreSaleItem" :is-subscriber="isSubscriber" :currentLangOptions="locLanguage" :is-twitch="twitchLinked"></account-panel>
<div id="chickenBadge" ref="chickenBadge" style="display: none;"><img :src="upgradeBadgeUrl"></div>
<!-- Scope -->
<div id="scopeBorder">
<div id="maskleft"></div>
<div id="maskmiddle"></div>
<div id="maskright"></div>
</div>
<!-- Best Streak -->
<div id="best_streak_container">
<h1 v-show="(((doubleEggWeekend || doubleEggWeekendSoon) && !ui.showCornerButtons) || (!doubleEggWeekend && !doubleEggWeekendSoon))" id="bestStreak">x0</h1>
</div>
<div v-show="announcementMessage" id="announcement_message">{{ announcementMessage }}</div>
<div id="shellStreakContainer">
<h1 id="shellStreakCaption"></h1>
<h1 id="shellStreakMessage" class="disappear"></h1>
</div>
<!-- Team Scores -->
<div id="teamScores">
<div id="teamScore2" class="teamScore red inactive">
<div id="teamScoreNum2" class="number">0</div>
<div class="teamLetter red" style="color: #f00;">R</div>
</div>
<div id="teamScore1" class="teamScore blue inactive">
<div id="teamScoreNum1" class="number">0</div>
<div class="teamLetter blue" style="color: #0af;">B</div>
</div>
<!--<div>
<img src="img/spatulaIcon.png" style="width: 3em; transform: rotate(60deg)">
</div>-->
</div>
<!-- Capture Icon -->
<div id="captureIconContainer">
<div id="captureInsideContainer">
<div id="captureIconCaption">20M</div>
<div id="captureRingBackground"></div>
<div id="captureRingContainer">
<div id="captureRing"></div>
</div>
<svg id="captureIcon" viewBox="0 0 53.6 36">
<use href="img/kotc/crown.svg#crown" />
</svg>
</div>
</div>
<!-- Reticle -->
<div id="reticleContainer">
<div id="dotReticle"></div>
<div id="crosshairContainer">
<div id="crosshair0" class="crosshair normal"></div>
<div id="crosshair1" class="crosshair normal"></div>
<div id="crosshair2" class="crosshair normal"></div>
<div id="crosshair3" class="crosshair normal"></div>
</div>
<div id="shotReticleContainer">
<div id="shotBracket0" class="shotReticle border normal"></div>
<div id="shotBracket1" class="shotReticle border normal"></div>
<div id="shotBracket2" class="shotReticle fill normal"></div>
<div id="shotBracket3" class="shotReticle fill normal"></div>
</div>
<div id="readyBrackets">
<div class="readyBracket"></div>
<div class="readyBracket"></div>
<div class="readyBracket"></div>
<div class="readyBracket"></div>
</div>
</div>
<!-- Capture Zone progress -->
<div id="captureContainer">
<div class="captureScoreContainer">
<svg class="captureCrown" viewBox="0 0 53.6 36">
<use href="img/kotc/crown.svg#crown" fill="var(--ss-team-red-light)" />
</svg>
<div id="captureScoreRed" class="captureScore">0/5</div>
</div>
<div id="captureCenter">
<div id="captureBarContainer">
<div id="captureBar"></div>
</div>
<div id="captureBarText"></div>
</div>
<div class="captureScoreContainer">
<svg class="captureCrown" viewBox="0 0 53.6 36">
<use href="img/kotc/crown.svg#crown" fill="var(--ss-team-blue-light)" />
</svg>
<div id="captureScoreBlue" class="captureScore">0/5</div>
</div>
</div>
<!-- Big Message Bar -->
<div id="bigMessageContainer" style="display: none">
<div id="bigMessageBar">
<div id="bigMessage"></div>
<div id="bigMessageCaption"></div>
</div>
</div>
<!-- Weapon -->
<div id="weaponBox">
<div id="grenades">
<img id="grenade3" class="grenade" src="img/ico_grenadeEmpty.png%3Fv=1"/>
<img id="grenade2" class="grenade" src="img/ico_grenadeEmpty.png%3Fv=1"/>
<img id="grenade1" class="grenade" src="img/ico_grenadeEmpty.png%3Fv=1"/>
</div>
<h2 id="weaponName"></h2>
<h2 id="ammo" class="shadow_grey"></h2>
</div>
<!-- Health -->
<div id="healthContainer">
<svg class="healthSvg">
<circle id="healthBar" class="healthBar" cx="50%" cy="50%" r="2.15em" />
<circle class="healthYolk" cx="50%" cy="50%" r="1.35em" />
</svg>
<div id="healthHp">100</div>
</div>
<!-- Hard Boiled -->
<div id="hardBoiledContainer">
<div id="hardBoiledShieldContainer">
<img class="hardBoiledShield" src="img/hardBoiledEmpty.png">
<img class="hardBoiledShield" id="hardBoiledShieldFill" src="img/hardBoiledFilled.png">
</div>
<div id="hardBoiledValue">100</div>
</div>
<!-- EggBreaker Shellstreak -->
<div id="eggBreakerContainer" class="off">
<img id="eggBreakerIcon" src="img/ico_eggBreaker.png" />
<div id="eggBreakerTimer">15</div>
</div>
<!-- Spatula -->
<img id="spatulaPlayer" src="img/spatulaIcon.png" />
<!-- Grenade throw power -->
<div id="grenadeThrowContainer">
<div id="grenadeThrow"></div>
</div>
<!-- Kill -->
<div id="killBox" class="shadow_grey">
<!-- <h3>{{ loc.ui_game_youkilled }}</h3> -->
<div v-html="killedMessage"></div>
<!-- <h2 id="KILLED_NAME"></h2> -->
<h3 id="KILL_STREAK"></h3>
</div>
<!-- Death -->
<div id="deathBox">
<div v-html="killedByMessage"></div>
</div>
<!-- Game messages -->
<div id="gameMessage"></div>
<!-- Chat -->
<div id="chatOut" class="chat roundme_sm"></div>
<input id="chatIn" class="chat roundme_sm" maxlength=64 tabindex=-1 v-bind:placeholder="loc.ingame_press_tab_to_exit" onkeydown="extern.onChatKeyDown(event)"></input>
<!-- Kill ticker -->
<div id="killTicker" class="chat"></div>
<!-- Spectator controls -->
<div id="spectate">
{{ loc.ui_game_spectating }}
</div>
<div id="serverAndMapInfo" class="shadow_grey"></div>
<!-- Ingame UI Stuff -->
<div id="inGameUI">
<div id="readouts" class="shadow_grey">
{{ loc.ui_game_fps }}: <div id="FPS"></div><br>
{{ loc.ui_game_ping }}: <div id="ping"></div>
</div>
<!-- Corner icon buttons -->
<!--
<div id="corner" style="float: right; margin-top: 0.5em;">
<div id="currentBalanceContainer" style="display: none; position: relative; left: -1em; top: 0.15em;">
<span id="currentBalance" style="display: inline-block; font-size: 1.7em; position: relative; top: -0.25em; left: -0.1em; color: white;"></span>
boopdiddyboop<img src="img/egg_icon.png" style="width: 1.6em; height: 2em;" />
</div>
<div id="cornerButtons" style="display: none; margin-bottom: 0.5em; text-align: right; float: right;">
<-<img id="homeButton" style="display: none; margin-right: 0.5em;" title="Home" class="icon" src="img/home.png?v=1" onclick="extern.showMainMenuConfirm()" />
<img id="friendsButton" style="display: none; margin-right: 0.5em;" title="Invite friends" class="icon" src="img/friends.png?v=1" onclick="extern.inviteFriends()" />
<img style="margin-right: 0.5em;" title="Feedback" class="icon" src="img/feedback.png?v=1" onclick="extern.showFeedbackForm()" />
<img style="margin-right: 0.5em;" title="Settings" class="icon" src="img/settings.png?v=1" onclick="extern.openSettingsMenu()" />
<img class="icon" title="Toggle fullscreen" src="img/fullScreen.png?v=1" onclick="extern.toggleFullscreen()" /> ->
</div>
</div>
-->
</div>
<!-- Popup: Mute/Boot Player -->
<small-popup id="playerActionsPopup" ref="playerActionsPopup" @popup-cancel="onPlayerActionsCancel" @popup-closed="onPlayerActionsCancel" :hide-confirm="true">
<template slot="header">{{ playerActionsPopup.playerName }}</template>
<template slot="content">
<div v-if="playerActionsPopup.vipMember" class="vip-member-wraper display-grid grid-align-items-center grid-column-1-2 ss_marginbottom_xl">
<figure class="player-action-vip-img center_h">
<img src="img/vip-club/vip-club-popup-emblem.png" alt="Vip member icon" class="center_h">
</figure>
<div>
<h6 class="roundme_sm shadow_blue4 ss_margintop ss_marginbottom">{{loc.ui_game_playeractions_vip_member}}</h6>
<button v-if="!isSubscriber" class="ss_button btn_pink bevel_pink fullwidth" @click="openVipPopup">{{loc.ui_game_playeractions_join_vip}}</button>
</div>
</div>
<!-- .vip-member-wraper -->
<p>{{ loc.ui_game_playeractions_header }}</p>
<button v-if="playerActionsPopup.social" class="ss_button btn_medium btn_yolk bevel_yolk fullwidth" @click="onClickCreator(playerActionsPopup.social.url)"><i class="fab" :class="playerSocial"></i> {{loc.ui_game_playeractions_creator}}</button>
<h4 class="ss_button btn_medium btn_blue bevel_blue" v-on:click="onMuteClicked">{{ muteButtonLabel }}</h4>
<h4 class="ss_button btn_medium btn_yolk bevel_yolk" v-if="playerActionsPopup.isGameOwner" v-on:click="onBootClicked">{{ loc.ui_game_playeractions_boot }}</h4>
</template>
<template slot="cancel">{{ loc.cancel }}</template>
</small-popup>
<!-- Popup: Switch Team -->
<small-popup id="switchTeamPopup" ref="switchTeamPopup" @popup-cancel="onSwitchTeamCancel" :overlay-close="false" @popup-closed="onSwitchTeamCancel" @popup-confirm="onSwitchTeamConfirm">
<template slot="header">{{ loc.p_switch_team_title }}</template>
<template slot="content">
<h4 class="roundme_sm" :class="newTeamColorCss">{{ newTeamName }} <i class="fa fa-flag"></i></h4>
<p>{{ loc.p_switch_team_text }}</p>
</template>
<template slot="cancel">{{ loc.no }}</template>
<template slot="confirm">{{ loc.yes }}</template>
</small-popup>
<!-- Popup: Share Link -->
<small-popup id="shareLinkPopup" ref="shareLinkPopup" :popup-model="game.shareLinkPopup" @popup-confirm="onShareLinkConfirm" @popup-closed="onShareLinkClosed">
<template slot="header">{{ loc.p_sharelink_title }}</template>
<template slot="content">
<p>{{ loc.p_sharelink_text }}</p>
<p><input ref="shareLinkUrl" type="text" class="ss_field ss_margintop ss_marginbottom fullwidth" v-model="game.shareLinkPopup.url" @focus="$event.target.select()"></p>
</template>
<template slot="cancel">{{ loc.close }}</template>
<template slot="confirm">{{ loc.p_sharelink_copylink }}</template>
</small-popup>
<!-- Popup: Leave Game Confirm -->
<small-popup id="leaveGameConfirmPopup" ref="leaveGameConfirmPopup" :overlay-close="false" :hide-close="true" @popup-confirm="onLeaveGameConfirm" @popup-cancel="onLeaveGameCancel">
<template slot="header">{{ loc.leave_game_title }}</template>
<template slot="content">
<p>{{ loc.leave_game_text }}</p>
</template>
<template slot="cancel">{{ loc.no }}</template>
<template slot="confirm">{{ loc.yes }}</template>
</small-popup>
<div class="player__container">
<!-- Player List -->
<div id="playerSlot" class="playerSlot" style="display: none">
<div>
<span></span> <!-- Name -->
<span></span> <!-- Score -->
</div>
<div style="display: block;"></div> <!-- Icons -->
</div>
<div id="playerList"></div>
</div>
<!-- end .player__container -->
<div id="inGameScaler">
<div class="pause-popup--container">
<!-- Popup: Pause -->
<large-popup id="pausePopup" ref="pausePopup" hide-close="true" :overlay-close="false" :overlay-class="ui.overlayClass.inGame">
<template slot="content">
<div class="box_blue2 roundme_sm">
<div id="pausePopupInnards" class="roundme_sm f_row">
<div id="pauseButtons" class="f_col pause-btn-group">
<button @click="onHomeClicked" class="ss_button btn_blue bevel_blue"><i class="fa fa-home"></i> {{ loc.p_pause_home }}</button>
<button @click="onEquipClicked()" class="ss_button btn_blue bevel_blue"><i class="fas fa-star"></i> {{ loc.p_pause_equipment }}</button>
<button v-if="!delayTheCracking && !isRespawning" class="ss_button btn_red bevel_red btn_sm" disabled="disabled"><i class="fas fa-eye"></i> {{ loc.ui_game_get_ready }}</button>
<button v-if="delayTheCracking" v-show="!isRespawning" @click="onSpectateClicked()" class="ss_button btn_blue bevel_blue btn_sm" :disabled="isRespawning"><i class="fas fa-eye"></i> {{ loc.p_pause_spectate }}</button>
<music-widget ref="gameScreenMusic" :loc="loc" :settings-ui="settingsUi" :settings="true" :volumeSlider="false" :show="isPaused && showMusicWidget"></music-widget>
</div>
<!-- #pauseButtons -->
<div id="popupTipDay" class="roundme_sm flex-auto">
<div v-if="isPoki && pokiRewardReady" class="poki-reward-container">
<button class="ss_button btn_blue bevel_blue btn_reward pure-wiggle" @click="earnInGameReward"><img src="img/ico_goldenEgg.png" class="egg_icon">Watch Video for 100 Golden Eggs!</button>
</div>
<div v-show="!isPoki && firebaseId" id="chw-progress-wrapper" class="chw-progress-wrapper box_relative">
<!-- incentivized-mini-game -->
<img class="box_aboslute chw-progress-img chw-chick" :src="chwChickSrc">
<div class="chw-progress-bar-wrap roundme_sm box_relative btn_blue bevel_blue" :class="progressBarWrapClass" @click="playIncentivizedAd">
<p class="chw-progress-bar-msg box_aboslute centered nospace text-center fullwidth chw-msg chw-p-msg">
{{ progressMsg }}
<!-- <span class="chw-countdown-wrap" :class="chwShowCountdown">
<span class="chw-minutes"></span><span class="chw-seconds"></span>
</span> -->
</p>
<div class="chw-progress-bar-inner" @click="playIncentivizedAd">
</div>
</div>
<img class="box_aboslute chw-eggs chw-progress-img" src="img/egg_pack_small.png" alt="">
</div>
<!-- #chw-progress-wrapper end -->
<!-- .poki-reward-container -->
<div id="btn_horizontal" class="pause-popup--btn-group">
<header class="weapon-select weapon-select--title pause-bg roundme_sm">
<h1>{{loc.p_weapon_title}}</h1>
</header>
<div class="pause-bg roundme_sm">
<weapon-select-panel ref="weaponSelect" id="weapon_select" :loc="loc" :current-class="classIdx" @changed-class="pauseWeaponSelect"></weapon-select-panel>
</div>
<!-- .pause-bg -->
</div>
<!-- .pause-popup--btn-group -->
<div id="game-play-switch" class="paused-game-cotrols roundme_sm f_row">
<div v-if="delayTheCracking" class="switch-teams-btn">
<button v-show="isTeamGame" @click="onSwitchTeamClicked" class="ss_button btn__team_switch" :class="teamColorCss"><i class="fa fa-flag"></i> {{ teamName }}</button>
</div>
<!-- .switch-teams-btn -->
<div class="pause-popup--btn-group f-grow-full">
<button v-if="!delayTheCracking && !isRespawning" class="btn_big btn_wfull ss_button btn_red bevel_red" disabled="disabled">{{ loc.ui_game_get_ready }}</button>
<button v-if="delayTheCracking" class="btn_big btn_wfull ss_button btn_red bevel_red" v-show="isRespawning" :disabled="isRespawning">{{ game.respawnTime }}</button>
<button v-if="delayTheCracking" v-show="!isRespawning" @click="onPlayClicked()" class="btn-respawn btn_big btn_wfull ss_button btn_yolk bevel_yolk" :disabled="isRespawning"><i class="fa fa-play"></i> {{ loc.p_pause_play }}</span></button>
<!-- .pause-popup--btn-group -->
</div>
<!-- .w-shrinkauto -->
</div>
<!-- #game-play-switch -->
</div>
<!-- #popupTipDay -->
</div>
<!-- #pausePopupInnards -->
</div>
</template>
</large-popup>
<div class="respawn-container respawn-two" v-show="isPaused">
<display-ad :hidden="hideAds" id="shellshockers_respawn_banner_2_ad" ref="respawnTwoDisplayAd" class="pauseFiller" :ignoreSize="false" :adUnit="adUnits.display.respawnTwo" adSize="300x250"></display-ad>
</div>
<div class="respawn-container respawn-one" v-show="isPaused">
<!-- <display-ad :hidden="hideAds" id="shellshockers_respawn_banner_ad" ref="respawnDisplayAd" class="pauseFiller" :ignoreSize="false" :adUnit="adUnits.display.respawn" adSize="728x90"></display-ad> -->
<display-ad :hidden="hideAds" id="shellshockers_respawn_banner-new_ad" ref="respawnDisplayAd" class="pauseFiller" :ignoreSize="false" :adUnit="adUnits.display.respawnThree" adSize="728x90"></display-ad>
</div>
</div>
<!-- .pause-popup--container -->
</div>
<!-- end #inGameScaler -->
<div class="in-game-widgets">
<music-widget ref="musicWidgetinGame" :loc="loc" :settings-ui="settingsUi" :show="showIngameWidget"></music-widget>
</div>
{{showIngameWidget}}
</div>
</script>
<script>
var comp_game_screen = {
template: '#game-screen-template',
components: {
'account-panel': comp_account_panel,
// 'event-panel': comp_events,
'weapon-select-panel': comp_weapon_select_panel,
// 'music-widget': comp_music_widget,
'event-panel': comp_events,
'weapon-select-panel': comp_weapon_select_panel,
},
props: ['kname', 'kdname'],
data: function () {
return vueData;
},
created: function () {
this.isPoki = pokiActive;
},
methods: {
placeBannerAdTagForGame: function (tagEl) {
this.$refs.pauseAdPlacement.appendChild(tagEl);
},
showGameMenu: function () {
// this.game.tipIdx = this.loc.tip_ofthe_day
// ? Math.randomInt(0, this.loc.tip_ofthe_day.length)
// : 0;
this.game.gameType = extern.gameType;
vueApp.showRespawnDisplayAd();
this.$refs.pausePopup.show();
this.isPaused = true;
vueApp.isPaused = true;
setTimeout(() => vueApp.disableRespawnButton(false), 500);
vueData.ui.showCornerButtons = true;
vueApp.gameUiAddClassForNoScroll();
addEventListener('gamepadbuttondown', this.onControllerButton);
this.crazyAdsRespawn();
extern.chicknWinnerOnPause();
vueApp.hideShareLinkPopup();
},
delayGameMenuPlayButtons() {
setTimeout(() => {
this.delayTheCracking = true;
}, 3000);
},
hideGameMenu: function () {
if (!extern.inGame) {
return;
}
this.$refs.pausePopup.hide();
// this.$refs.respawnDisplayAd.hide();
// this.$refs.respawnTwoDisplayAd.hide();
if (crazyGamesActive) crazysdk.clearAllBanners(); // Per CG's request
this.isPaused = false;
vueApp.isPaused = false;
vueApp.gameUiAddClassForNoScroll();
removeEventListener('gamepadbuttondown', this.onControllerButton);
},
onHomeClicked: function () {
this.gaSend('home');
this.hideGameMenu();
this.$refs.leaveGameConfirmPopup.show();
BAWK.play('ui_click');
},
onLeaveGameConfirm: function () {
this.leaveGame();
this.delayTheCracking = false;
},
onLeaveGameCancel: function () {
this.showGameMenu();
},
leaveGame: function () {
// clientGame.js manipulates chickenBadge element directly to hide/show it
vueApp.disablePlayButton(false);
this.$refs.chickenBadge.style.display = 'none';
vueApp.showSpinner();
document.body.style.overflow = 'visible';
window.scrollY = 0;
this.hidePopupsIfGameCloses();
extern.leaveGame(this.afterLeftGame);
vueData.ui.showCornerButtons = true;
// OneSignal elements are not part of the Vue app
var oneSignalBell = document.getElementById('onesignal-bell-container');
if (oneSignalBell) {
oneSignalBell.style.display = 'inline-block';
}
},
hidePopupsIfGameCloses: function() {
const gamePopups = vueApp.$refs.gameScreen.$children;
if (Array.isArray(gamePopups)) {
gamePopups.forEach( gamePopup => {;
if ( gamePopup.isShowing === true && gamePopup.$el.id !== 'pausePopup' ) {
gamePopup.close();
console.log(`Closing ${gamePopup.$el.id}`);
}
});
}
},
afterLeftGame: function () {
vueApp.hideSpinner();
vueApp.showTitleScreenAd();
vueApp.switchToHomeUi();
},
onHelpClicked: function () {
this.hideGameMenu();
vueApp.showHelpPopup();
BAWK.play('ui_popupopen');
},
onShareLinkClicked: function () {
extern.inviteFriends();
BAWK.play('ui_popupopen');
},
onSettingsClicked: function () {
this.hideGameMenu();
vueApp.showSettingsPopup();
BAWK.play('ui_popupopen');
},
onShareLinkConfirm: function () {
extern.copyFriendCode(this.$refs.shareLinkUrl);
},
onShareLinkClosed: function () {
this.showGameMenu();
},
onEquipClicked: function () {
this.game.pauseScreen.wasGameInventoryOpen = true;
this.game.pauseScreen.classChanged = false;
this.gaSend('inventory');
vueApp.switchToEquipUi();
BAWK.play('ui_equip');
},
onSwitchTeamClicked: function () {
this.hideGameMenu();
BAWK.play('ui_popupopen');
this.$refs.switchTeamPopup.show();
},
onSwitchTeamCancel: function () {
this.showGameMenu();
},
onSwitchTeamConfirm: function () {
extern.switchTeam();
},
onControllerButton: function (e) {
switch (e.detail) {
case '9':
if (document.hasFocus() && !this.isRespawning && this.delayTheCracking) {
this.onPlayClicked();
}
break;
case '4':
case '6':
case '14':
vueData.classIdx = Math.max(0, vueData.classIdx - 1);
this.$refs.weaponSelect.selectClass(vueData.classIdx);
break;
case '5':
case '7':
case '15':
vueData.classIdx = Math.min(6, vueData.classIdx + 1);
this.$refs.weaponSelect.selectClass(vueData.classIdx);
break;
}
},
gaSendOnClassChange() {
if (!this.game.pauseScreen.wasGameInventoryOpen && this.game.pauseScreen.classChanged) {
ga('send', 'event', 'respawn-popup', 'classClick', Object.keys(CharClass).find(key => CharClass[key] === vueApp.classIdx));
}
// reset for good measure
this.game.pauseScreen.wasGameInventoryOpen = false;
this.game.pauseScreen.classChanged = false;
},
onPlayClicked: function () {
vueApp.disableRespawnButton(true);
vueData.ui.showCornerButtons = false;
extern.respawn();
this.isPaused = false;
BAWK.play('ui_playconfirm');
this.gaSendOnClassChange();
},
onSpectateClicked: function () {
this.gaSend('spectate');
this.hideGameMenu();
vueData.ui.showCornerButtons = false;
extern.enterSpectatorMode();
BAWK.play('ui_playconfirm');
},
showPlayerActionsPopup: function () {
this.hideGameMenu();
this.$refs.playerActionsPopup.show();
},
onPlayerActionsCancel: function () {
this.showGameMenu();
},
onMuteClicked: function () {
this.$refs.playerActionsPopup.hide();
this.playerActionsPopup.muteFunc();
},
onBootClicked: function () {
this.$refs.playerActionsPopup.hide();
this.playerActionsPopup.bootFunc();
},
resizeBannerAdTagForGame: function() {
const pauseAdPlacement = document.getElementById('pauseAdPlacement');
const rect = document.getElementById('pausePopup').getBoundingClientRect();
pauseAdPlacement.style.top = (rect.height).toString() + 'px';
},
earnInGameReward() {
this.hideGameMenu();
vueApp.setDarkOverlay(true);
this.pokiRewardReady = false;
this.isPokiNewRewardTimer = false;
extern.api_inGameReward(this.inGameRewardSuccessCallback, this.inGameRewardFailedCallback, this.rewardReachedDailyLimits);
extern.setVolume(0);
},
inGameRewardSuccessCallback() {
extern.pokiRewardedBreak(this.inGameRewardIsGranted, this.inGameRewardFailedCallback);
},
inGameRewardIsGranted(rewardValue) {
console.log('inGameRewardSuccessCallback');
this.isPokiNewRewardTimer = true;
vueApp.showGiveStuffPopup('reward_title', rewardValue, '');
ga('send', 'event', 'Poki', 'Rewarded Video', 'Reward Success', this.pokiRewNum);
this.pokiRewNum ++;
},
inGameRewardFailedCallback() {
vueApp.showGenericPopup('p_redeem_error_title', 'in_game_reward_try_again', 'ok');
this.isPokiNewRewardTimer = false;
ga('send', 'event', 'Poki', 'Rewarded Video', 'Failed');
},
rewardReachedDailyLimits() {
vueApp.showGenericPopup('in_game_reward_title', 'in_game_reward_try_again', 'ok');
this.isPokiNewRewardTimer = false;
localStore.setItem('inGameRewardLimitDate', Date.now());
extern.setVolume();
ga('send', 'event', 'Poki', 'Rewarded Video', 'Reached Daily Limit');
},
pokiTimers(value, milliseconds) {
let pokiSetTimer;
if (value === false) {
clearTimeout(pokiSetTimer);
console.log('cancelTimer');
return;
}
pokiSetTimer = setTimeout(() => this.pokiRewardReady = true, milliseconds);
},
pauseWeaponSelect() {
this.game.pauseScreen.wasGameInventoryOpen = false;
this.game.pauseScreen.classChanged = true;
vueApp.$refs.equipScreen.onChangedClass();
},
songHasChanged() {
setTimeout(() => this.songChanged = false , 2000);
},
// So crazy games requires an array for multiple display ad calls on the same screen
crazyAdsRespawn() {
if (!crazyGamesActive && !testCrazy) return;
// Removing delay per CG's request. Refresh rate is restricted server-side
/*if (this.cGrespawnBannerTimeout) return;
this.cGrespawnBannerTimeout = setTimeout(() => {
clearTimeout(this.cGrespawnBannerTimeout);
this.cGrespawnBannerTimeout = null;
}, 20000);*/
this.cGrespawnBannerErrors = 0;
crazysdk.requestBanner([{
containerId: 'shellshockers_respawn_banner-new_ad',
size: '728x90',
},{
containerId: 'shellshockers_respawn_banner_2_ad',
size: '300x250',
}]);
},
onClickCreator(url) {
window.open(url, )
},
openVipPopup() {
this.$refs.playerActionsPopup.hide();
vueApp.showSubStorePopup();
},
gaSend(label) {
if (!label) return;
ga('send', 'event', 'respawn-popup', 'click', label);
},
playIncentivizedAd(e) {
if (!this.chicknWinnerReady || this.hasChwPlayClicked || this.isChicknWinnerError) {
e.preventDefault();
return;
}
vueApp.disableRespawnButton(true);
this.hasChwPlayClicked = true;
vueApp.loadNuggetVideo();
vueApp.chicknWinnerNotReady();
ga('send', 'event', 'Chickn Winner', 'Free eggs btn', 'click-in-game');
}
},
computed: {
isRespawning: function () {
return this.game.respawnTime > 0;
},
isTeamGame: function () {
// Would be better to use the same enum as the client game code
return this.game.gameType !== 0;
},
teamColorCss: function () {
return this.game.team === this.ui.team.blue ? 'blueTeam btn_red bevel_red' : 'redTeam btn_blue bevel_blue';
},
teamName: function () {
return this.game.team === this.ui.team.blue ? this.loc.p_pause_joinred : this.loc.p_pause_joinblue;
},
newTeamColorCss: function () {
return this.game.team === this.ui.team.blue ? 'redTeam btn_red' : 'blueTeam btn_blue';
},
newTeamName: function () {
return this.game.team === this.ui.team.blue ? this.loc.team_red : this.loc.team_blue;
},
muteButtonLabel: function () {
return this.playerActionsPopup.muted ? this.loc.ui_game_playeractions_unmute : this.loc.ui_game_playeractions_mute;
},
showIngameWidget() {
if (!this.isPaused && this.songChanged) {
this.songHasChanged();
return true;
}
return false;
},
showMusicWidget() {
return this.ui.showScreen === 2;
},
isEggStoreSaleItem() {
return this.eggStoreItems.some( item => item['salePrice'] !== '' && this.ui.showCornerButtons);
},
upgradeBadgeUrl() {
return this.isSubscriber ? 'img/vip-club/vip-club-popup-emblem.png' : 'img/ico_chickenBadge.png';
},
playerSocial() {
return SOCIALMEDIA[this.playerActionsPopup.social.id];
},
progressMsg() {
if (this.isChicknWinnerError) {
return this.loc.chw_error_text;
}
if (this.chicknWinnerDailyLimitReached && this.chicknWinnerCounter > 0) {
return this.loc.chw_daily_limit_msg;
}
if (this.chicknWinnerReady) {
if (this.chicknWinnerCounter === 0) {
return this.loc.chw_ready_msg;
} else {
return this.loc.chw_cooldown_msg;
}
} else {
return this.loc.chw_free_eggs_coming;
}
},
progressBarWrapClass() {
if (this.isChicknWinnerError) {
return 'chw-progress-bar-wrap-error';
}
if (this.chicknWinnerReady) {
return 'chw-progress-bar-wrap-complete';
}
},
playAdText() {
if (this.chicknWinnerReady && this.chicknWinnerCounter === 0) {
return this.loc.chw_btn_free_reward;
} else {
return this.loc.chw_btn_watch_ad;
}
},
chwShowCountdown() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'hideme';
} else {
if (this.chicknWinnerReady) {
return 'hideme';
} else {
return 'display-inline';
}
}
},
chwChickSrc() {
if (this.chicknWinnerDailyLimitReached || this.isChicknWinnerError) {
return 'img/chicken-nugget/chickLoop_daily_limit.svg';
} else {
if (!this.chicknWinnerReady) {
return 'img/chicken-nugget/chickLoop_sleep.svg';
} else {
return 'img/chicken-nugget/chickLoop_speak.svg';
}
}
},
},
watch: {
isPokiGameLoad(value) {
this.pokiTimers(value, this.videoRewardTimers.initial);
// this.pokiTimers(value, 300);
},
isPokiNewRewardTimer(value) {
this.pokiTimers(value, this.videoRewardTimers.primary);
// this.pokiTimers(value, 300);
},
kname(val) {
this.killedByMessage = this.loc['ui_game_killedby'].format(val);
},
kdname(val) {
this.killedMessage = this.loc['ui_game_youkilled'].format(val);
},
}
};
</script>
<script id="vip-club-template" type="text/x-template">
<div class="vip-club fullwidth">
<div class="vip-club-log-content--outer roundme_sm display-grid grid-align-items-center grid-column-1-2 grid-gap-space-lg">
<header class="grid-span-2-start-1">
<!-- <h2><span class="text-orange">V</span>ery <span class="text-orange">I</span>mportant <span class="text-orange">P</span>oultry</h2> -->
<span class="sr-only">Very Important Poultry</span>
<img class="vip-club-water-mark display-block center_h" src="img/vip-club/very-important-poultry.png" alt="Very Important Poultry text image">
</header>
<div class="vip-club--logo">
<img src="img/vip-club/vip-club-popup-emblem.png">
</div>
<div class="vip-club--content">
<div class="subs-info">
<ul>
<li>{{loc.p_chicken_goldfeature1}}</li>
<li v-html="loc.p_chicken_goldfeature3"></li>
<li>{{loc.p_chicken_goldfeature2}}</li>
<li>{{loc.s_popup_feature_premium_items}}</li>
</ul>
<!-- <p class="more">{{loc.home_media_apply_now}}</p> -->
<button v-on:click="openVipPopup" class="margins_lg ss_button btn_sm btn_vip-button bevel_blue">{{loc.faq}}</button>
</div>
</div>
</div>
<div class="subscription-plans" :class="[hasPlan ? 'display-grid grid-column-1-2 grid-gap-space-lg' : '']">
<div class="vip-club-items--outer display-grid" :class="[hasPlan ? 'grid-column-1-eq grid-just-item-center' : 'grid-column-3-eq']">
<sub-item v-for="sub in subs" :key="sub.sku" :item="sub" :loc="loc" :upgrade-name="upgradeName" :is-subscriber="isSubscriber" :is-upgraded="isUpgraded" :account-set="accountSettled"></sub-item>
</div>
<div v-if="hasPlan" class="manage-subscription-wrapper">
<div v-if="hasPlan" class="plan-details text-center vip-club-log-content--outer roundme_sm">
<h5>{{loc.sRenewalDate}}:</h5>
<p v-if="expireDate" class="plan-expiry">{{ expireDate }}</p>
<p class="manage-details" v-html="manageInfo"></p>
<button class="ss_button btn_manage_sub btn_sm btn_yolk bevel_yolk btn_vip-button bevel_blue"" v-on:click="onManageClick">{{loc.sManageBtn}}</button>
</div>
</div>
</div>
</div>
</script>
<template id="comp-sub-item">
<div v-if="isActive" class="vip-item" :class="nameLowerCaseHyphens">
<div class="vip-item--inner centered">
<div class="subscription-details">
<header>
<h3>{{loc[name]}}</h3>
</header>
<p class="price-tag roundme_sm" v-html="priceTag"></p>
<button v-if="!hasSub" class="ss_button btn_sm btn_vip-button bevel_blue" v-on:click="subClick">
{{loc[buyBtnText]}}
</button>
</div>
</div>
<div v-if="flagText" class="vip-banner" :class="flagText">
<span>{{loc[flagText]}}</span>
</div>
<img aria-hidden="true" :src="img">
</div>
</template>
<script>
const comp_sub_item = {
template: '#comp-sub-item',
props: ['loc', 'item', 'upgradeName', 'isUpgraded', 'isSubscriber'],
data() {
return {
isCurrentSub: false,
hasSub: false,
hasUpgrade: false,
locName: '',
};
},
methods: {
subClick() {
if (this.$parent.$el.id === 'shell-subscriptions') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
BAWK.play('ui_click');
if (this.hasSub) {
extern.buyProductForMoney();
} else {
extern.buyProductForMoney(this.item.sku, true);
ga('send', 'event', 'subscriptions', 'click', this.locName);
}
}
},
computed: {
nameLowerCaseHyphens() {
this.locName = this.item.name.replace(' ', '-').toLowerCase().replace(' ', '-');
return this.locName;
},
name() {
return `s-${this.locName}-title`;
},
img() {
return `img/vip-club/vip-club-popup-item-${this.locName}-bg.png`;
},
priceTag() {
let price = this.item.salePrice ? this.item.salePrice : this.item.price,
priceWcents = `${(price / 100).toFixed(2)}`,
thePrice = priceWcents.split('.');
return `$${thePrice[0]}<span class="price-tag--cents">.${thePrice[1]}</span>`;
},
buyBtnText() {
if (this.isCurrentSub && this.hasUpgrade) {
return 's-btn-txt-change';
}
return 's-btn-txt-subscribe';
},
isActive() {
if (this.isCurrentSub && this.hasUpgrade) {
return true
} else if (this.hasSub && this.hasUpgrade) {
return false
} else {
return true
};
},
flagText() {
if (this.isCurrentSub && this.hasUpgrade) return 'p_egg_shop_purchased';
return this.item.flagText;
}
},
watch: {
upgradeName(val) {
},
isUpgraded(val) {
this.hasUpgrade = val;
this.hasSub = this.isSubscriber && this.hasUpgrade;
this.isCurrentSub = this.upgradeName === this.item.name && this.hasUpgrade;
}
}
};
</script>
<script>
var compVipClubTemplate = {
template: '#vip-club-template',
components: {
'sub-item': comp_sub_item,
},
data() {
return vueData;
},
props: ['loc', 'subs'],
methods: {
onManageClick() {
if (this.$parent.$el.id === 'shell-subscriptions') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
extern.buyProductForMoney();
},
openVipPopup() {
if (this.$parent.$el.id === 'shell-subscriptions') {
this.$parent.$parent.hide();
} else {
this.$parent.hide();
}
BAWK.play('ui_click');
vueApp.showVipPopup();
}
},
computed: {
hasPlan() {
return this.isSubscriber && this.isUpgraded;
},
expireDate() {
if (this.hasPlan) {
return new Date(extern.account.upgradeExpiryDate).toUTCString();
}
return;
},
planName() {
if (this.hasPlan) {
return 's-' + this.upgradeName.replace(' ', '-').toLowerCase().replace(' ', '-') + '-title';
}
return;
},
manageInfo() {
return this.loc.sManageInfo;
}
}
};
</script><script id="give-stuff-popup" type="text/x-template">
<!-- Popup: Give Stuff -->
<!-- <large-popup id="giveStuffPopup" ref="giveStuffPopup" :popup-model="giveStuffPopup" @popup-closed="onSharedPopupClosed" :class="giveStuffPopup.type"> -->
<large-popup id="giveStuffPopup" ref="giveStuffPopup" :popup-model="giveStuffPopup" :class="giveStuffPopup.type">
<template slot="content">
<div id="giveStuffPopup-content" class="giveStuffPopup-content" :class="{'fullwidth' : giveStuffPopup.type === 'twitchDrops'}">
<div v-if="giveStuffPopup.type === 'vip'" id="give-stuff-icon" class="give-stuff-icon">
<img src="img/vip-club/vip-club-popup-emblem.png" alt="Shell Shockers VIP">
</div>
<h3 v-if="giveStuffPopup.type !== 'twitchDrops'" :class="{'popup-title-vip' : giveStuffPopup.type === 'vip'}" id="popup_title" class="roundme_sm text-center">
{{ loc[giveStuffPopup.titleLoc] }}
</h3>
<h2 v-if="giveStuffPopup.type === 'twitchDrops'" id="popup_title" class="roundme_sm text-center title-shadow text-twitch-yellow">
{{ loc[giveStuffPopup.titleLoc] }}
</h2>
<p v-if="giveStuffPopup.type === 'twitchDrops'" class="text-center">{{ loc.give_stuff_twitch_sub_desc }}</p>
<div v-show="(giveStuffPopup.eggs)" class="f_row">
<div class="egg-give-stuff">
<img src="img/ico_goldenEgg.png" />
<h2>{{giveStuffPopup.eggs}}</h2>
</div>
</div>
<div v-show="giveStuffPopup.rickroll" class="f_row">
<img src="img/rickroll.gif" style="margin-bottom: 1em; height: 25em;" />
</div>
<div v-show="giveStuffPopup.eggOrg" class="f_row">
<img src="img/egg-org/eggOrg_timeTravel_splash800x600-min.png" style="margin-bottom: 1em;">
</div>
<div v-show="(giveStuffPopup.items && giveStuffPopup.items.length > 0)" class="items-container f_row grid-gap-1" :class="{'popup-items-vip' : giveStuffPopup.type === 'vip'}">
<item v-for="i in giveStuffPopup.items" :item="i" :key="i.id" :isSelected="false" :show-item-only="true"></item>
</div>
<p v-if="giveStuffPopup.type === 'twitchDrops'"></p>
</div>
<footer :class="{'text-center' : giveStuffPopup.type === 'twitchDrops'}">
<!-- <p v-if="giveStuffPopup.type === 'twitchDrops'" class="text-center">{{ loc.give_stuff_twitch_footer_desc }}</p> -->
<button class="ss_button width_xs text-center" :class="giveStuffPopup.type === 'twitchDrops' ? 'twitch-btn twitch-btn-purple' : 'btn_green bevel_green'" @click="onGiveStuffComplete">{{ loc.ok }}</button>
<button v-if="giveStuffPopup.type === 'twitchDrops'"class="ss_button twitch-btn twitch-btn-pink width_xs text-center" @click="onClickTwitchDropsMore">Get More!</button>
</footer>
</template>
<template slot="confirm">{{ loc.confirm }}</template>
</large-popup>
</script>
<script>
const GIVESTUFFPOPUP = {
template: '#give-stuff-popup',
components: {
'item': comp_item,
},
props: ['loc', 'giveStuffPopup'],
data: function () {
return {
languageCode: this.selectedLanguageCode,
eggBalance: 0,
vueData,
}
},
methods: {
onGiveStuffComplete: function () {
this.giveStuffPopup.eggOrg = false;
this.giveStuffPopup.rickroll = false;
this.$refs.giveStuffPopup.toggle();
},
onClickTwitchDropsMore() {
window.open(dynamicContentPrefix + 'twitch');
this.onGiveStuffComplete();
}
},
};
</script>
<script>
function startVue(languageCode, locData) {
vueData.extern = extern;
vueData.loc = locData;
vueApp = new Vue({
el: '#app',
components: {
'dark-overlay': comp_dark_overlay,
'light-overlay': comp_light_overlay,
'spinner-overlay': comp_spinner_overlay,
'gdpr': comp_gdpr,
'settings': comp_settings,
'help': comp_help,
'vip-help': vip_help,
'egg-store': comp_egg_store,
'subscription-store': compVipClubTemplate,
// 'subscription-store': comp_egg_store,
'item': comp_item,
'home-screen': comp_home_screen,
'equip-screen': comp_equip_screen,
'game-screen': comp_game_screen,
// 'gold-chicken-popup': comp_gold_chicken_popup,
'chicken-nugget-popup': comp_chickn_winner_popup,
'egg-store-item': comp_store_item,
'give-stuff-popup': GIVESTUFFPOPUP,
},
data: vueData,
createdTime: null,
mountedTime: null,
fullyRenderedTime: null,
multisizeAdTag: null,
created () {
console.log('Vue instance created');
createdTime = performance.now();
this.currentLanguageCode = languageCode;
this.urlParams = parsedUrl.query.open ? parsedUrl.query.open : null;
},
mounted () {
console.log('Vue instance mounted');
mountedTime = performance.now();
console.log('create -> mount time (ms): ' + (mountedTime - createdTime));
this.currentGameType = extern.gameType;
// Cannot modify data within the mounted hook, so wait until next tick
this.$nextTick(function () {
fullyRenderedTime = performance.now();
console.log('mounted -> fully rendered time (ms): ' + (fullyRenderedTime - mountedTime));
console.log('created -> fully rendered time (ms): ' + (fullyRenderedTime - createdTime));
this.ready = true;
// vueApp.getNuggetTimer();
//this.showSpinner('ui_game_loading', 'ui_game_waitforit');
// this.histPushState({game: this.ui.screens.home}, 'Shellshockers home', '?home');
//this.playMusic();
this.getLocLang();
extern.continueStartup();
this.changelog.current = changeLogData;
//this.fetchSponsors();
});
},
methods: {
getCanvas: function () {
return this.$refs.canvas;
},
playMusic: function () {
myAudio = new Audio('./sound/theme');
// Uncomment for looping.
// myAudio.addEventListener('ended', function() {
// this.currentTime = 0;
// this.play();
// }, false);
myAudio.volume = this.volume;
myAudio.play();
},
changeLanguage: function (languageCode) {
extern.getLanguageData(languageCode, this.setLocData);
},
setLocData: function (languageCode, newLocData) {
this.currentLanguageCode = getStoredString('languageSelected', null) ? localStore.getItem('languageSelected') : languageCode;
this.loc = newLocData;
},
setPlayerName: function (playerName) {
this.playerName = playerName.substring(0, 128);
},
showSpinner: function (headerLocKey, footerLocKey) {
this.$refs.spinnerOverlay.show(headerLocKey, footerLocKey);
},
showSpinnerLoadProgress: function (percent) {
this.$refs.spinnerOverlay.showSpinnerLoadProgress(percent);
},
hideSpinner: function () {
this.$refs.spinnerOverlay.hide();
},
onSettingsPopupOpened: function () {
this.$refs.settings.captureOriginalSettings();
},
onSettingsPopupSwitchTabMisc: function () {
this.$refs.settings.switchTab('misc_button');
},
onSettingsX: function () {
this.$refs.settings.applyOriginalSettings();
this.$refs.settings.cancelLanguageSelect();
},
onSettingsQuickSave() {
this.$refs.settings.quickSave();
},
onNoAnonPopupConfirm: function () {
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.denyAnonUserPopup, this.googleAnalytics.label.signInClick);
this.showFirebaseSignIn();
},
onSharedPopupClosed: function () {
// If in-game, show game menu after closing the popup
this.blackFridayBanner = false;
if (this.ui.showScreen === this.ui.screens.game && extern.inGame) {
this.showGameMenu();
}
},
onGiveStuffComplete: function () {
this.$refs.giveStuffPopup.toggle();
},
onPrivacyOptionsOpened: function () {
this.showPrivacyPopup();
},
/**
* Creates a generic popup that passes content 3 data options to slots on the genericPopup smallPopup
* @param titleLockKey mixed - popup header text
* @param contentLocKey mixed- popup content
* @param confirmLocKey mixed - popup button text
*/
showGenericPopup: function (titleLocKey, contentLocKey, confirmLocKey, hideBackgroundPopup) {
this.genericMessagePopup.titleLocKey = titleLocKey;
this.genericMessagePopup.contentLocKey = contentLocKey;
this.genericMessagePopup.confirmLocKey = confirmLocKey;
this.hidePausePopupIfGenericPopupOpen();
this.$refs.genericPopup.show();
// vueApp.setDarkOverlay();
},
hidePausePopupIfGenericPopupOpen: function() {
if (!this.$refs.gameScreen.$refs.pausePopup && $refs.gameScreen.$refs.pausePopup.isShowing === false) {
return;
}
return this.$refs.gameScreen.$refs.pausePopup.hide();
},
showOpenUrlPopup: function (url, titleLocKey, content, confirmLocKey, cancelLocKey) {
console.log('title: ' + this.loc[titleLocKey]);
console.log('confirm: ' + this.loc[confirmLocKey]);
console.log('cancel: ' + this.loc[cancelLocKey]);
this.openUrlPopup.url = url;
this.openUrlPopup.titleLocKey = titleLocKey;
this.openUrlPopup.content = content;
this.openUrlPopup.confirmLocKey = confirmLocKey;
this.openUrlPopup.cancelLocKey = cancelLocKey;
this.$refs.openUrlPopup.show();
},
onOpenUrlPopupConfirm: function () {
extern.openUrlAndGiveReward();
},
showUnsupportedPlatformPopup: function (contentLocKey) {
this.ui.showScreen = -1;
this.unsupportedPlatformPopup.contentLocKey = contentLocKey;
this.$refs.unsupportedPlatformPopup.show();
},
showMissingFeaturesPopup: function () {
this.ui.showScreen = -1;
this.$refs.missingFeaturesPopup.show();
},
showFirebaseSignIn: function () {
this.$refs.homeScreen.showSignIn();
},
hideFirebaseSignIn: function () {
this.$refs.firebaseSignInPopup.hide();
},
showCheckEmail: function () {
this.$refs.homeScreen.$refs.checkEmailPopup.show();
},
hideCheckEmail: function () {
this.$refs.homeScreen.$refs.checkEmailPopup.hide();
},
showResendEmail: function () {
this.$refs.homeScreen.$refs.resendEmailPopup.show();
},
hideResendEmail: function () {
this.$refs.homeScreen.$refs.resendEmailPopup.hide();
},
showChickenPopup: function () {
this.$refs.goldChickenPopup.show();
},
hideChickenPopup: function () {
this.$refs.goldChickenPopup.hide();
},
showHelpPopup: function () {
this.hideGameMenu();
this.$refs.helpPopup.show();
},
showVipPopup: function () {
this.hideGameMenu();
BAWK.play('ui_popupopen');
this.$refs.vipPopup.show();
},
showGetMobilePopup() {
this.$refs.mobileAdPopup.show();
},
showAttentionPopup: function () {
this.hideGameMenu();
this.$refs.anonWarningPopup.show();
},
hideHelpPopup: function () {
this.$refs.helpPopup.hide();
},
showSettingsPopup: function () {
this.hideGameMenu();
this.$refs.settingsPopup.show();
extern.settingsMenuOpened();
},
hideSettingsPopup: function () {
this.$refs.settingsPopup.hide();
},
showEggStorePopup: function () {
this.$nextTick(() => {
this.hideGameMenu();
this.$refs.eggStorePopup.show();
if (this.isSale) {
this.blackFridayBanner = true;
}
ga('send', 'event', this.googleAnalytics.cat.itemShop, this.googleAnalytics.action.shopItemNeedMoreEggsPopup, this.googleAnalytics.label.getMoreEggs);
});
},
showSubStorePopup: function () {
this.$nextTick(() => {
this.hideGameMenu();
this.$refs.subStorePopup.show();
BAWK.play('ui_popupopen');
// ga('send', 'event', this.googleAnalytics.cat.itemShop, this.googleAnalytics.action.shopItemNeedMoreEggsPopup, this.googleAnalytics.label.getMoreEggs);
});
},
vipEndedPopup() {
this.$refs.vipEnded.show();
BAWK.play('ui_popupopen');
},
showPopupEggStoreSingle(sku) {
if (!sku) {
console.log('No sku for popup');
return;
}
if (!this.premiumShopItems.some( i => i.sku === sku)) {
vueApp.showGenericPopup("uh_oh", "p_egg_shop_no_item_desc", "ok");
return;
}
this.eggStorePopupSku = sku;
this.$refs.popupEggStoreSingle.show();
},
hideEggStorePopup: function () {
this.$refs.eggStorePopup.hide();
},
showChangelogPopup: function () {
this.$refs.changelogPopup.show();
},
showHistoryChangelogPopup() {
fetch('./changelog/oldChangelog.json', {cache: "no-cache"})
.then(response => response.json())
.then(data => {
data.forEach(el => this.changelog.current.push(el));
});
this.changelog.showHistoryBtn = false;
},
hideChangelogPopup: function () {
this.$refs.changelogPopup.hide();
},
showGiveStuffPopup: function (titleLoc, eggs, items, type, callback) {
if (this.giveStuffPopup.eggOrg) {
ga('send', 'event', 'Egg Org', 'Code Cracked', 'redeemed');
}
type = type || '';
this.giveStuffPopup.titleLoc = titleLoc;
this.giveStuffPopup.eggs = eggs;
this.giveStuffPopup.items = items;
this.giveStuffPopup.type = type;
this.$refs.giveStuffPopup.$refs.giveStuffPopup.show();
if (callback) callback();
},
showEggOrgPopup() {
this.giveStuffPopup.eggOrg = true;
this.showGiveStuffPopup('p_give_stuff_title');
},
showShareLinkPopup: function (url) {
this.hideGameMenu();
this.game.shareLinkPopup.url = url;
this.$refs.gameScreen.$refs.shareLinkPopup.show();
},
hideShareLinkPopup() {
if (!this.$refs.gameScreen.$refs.shareLinkPopup.isShowing) {
return;
}
this.$refs.gameScreen.$refs.shareLinkPopup.hide();
},
showJoinPrivateGamePopup: function (code) {
this.$refs.homeScreen.$refs.playPanel.showJoinPrivateGamePopup(code);
},
showPrivateGamePopup() {
this.$refs.homeScreen.$refs.playPanel.$refs.createPrivateGamePopup.toggle();
},
switchToHomeUi: function () {
this.ui.showScreen = this.ui.screens.home;
// vueApp.showTitleScreenAd();
// this.histPushState({game: this.ui.screens.home}, 'Shellshockers home', '?home');
this.gameUiRemoveClassForNoScroll();
extern.chwRadialProgress();
},
switchToEquipUi: function () {
console.log('switchToEquipUi called');
this.ui.showScreen = this.ui.screens.equip;
this.$refs.equipScreen.setup();
this.$refs.equipScreen.switchToInventory();
if (extern.inGame) {
this.hideGameMenu();
extern.openEquipInGame();
}
else {
vueApp.hideTitleScreenAd();
}
},
switchToGameUi: function (isGameOwner) {
this.ui.showScreen = this.ui.screens.game;
this.game.isGameOwner = isGameOwner;
},
gameUiAddClassForNoScroll() {
let html = document.getElementsByTagName("html")[0];
html.classList.add('noScrollIngame');
},
gameUiRemoveClassForNoScroll() {
let html = document.getElementsByTagName("html")[0];
html.classList.remove('noScrollIngame');
},
switchToGameUiQuickPlay(isGameOwner) {
this.ui.showScreen = this.ui.screens.game;
this.game.isGameOwner = isGameOwner;
this.ui.showCornerButtons = false;
vueApp.hideTitleScreenAd();
this.gameUiAddClassForNoScroll();
},
showGameMenu: function () {
this.hideSpinner();
this.$refs.gameScreen.showGameMenu();
// this.histPushState({game: this.ui.screens.game}, 'Shellshockers game menu', '?game=menu');
},
hideGameMenu: function () {
this.$refs.gameScreen.hideGameMenu();
// this.histPushState({game: this.ui.screens.game}, 'Shellshockers in game', '?game=play');
},
onMiniGameCompleted: function () {
this.$refs.homeScreen.onMiniGameCompleted();
},
setShellColor: function (colorIdx) {
this.equip.colorIdx = colorIdx;
},
setAccountUpgraded: function (upgraded, endDate) {
this.isUpgraded = upgraded;
this.equip.extraColorsLocked = !this.isUpgraded;
this.nugStart = endDate;
},
setDarkOverlay: function (visible, overlayClass) {
this.$refs.darkOverlay.show = visible;
this.$refs.darkOverlay.overlayClass = overlayClass;
},
setLightOverlay: function (visible, overlayClass) {
this.$refs.lightOverlay.show = visible;
this.$refs.darkOverlay.overlayClass = overlayClass;
},
authCompleted: function () {
this.accountSettled = true;
if (vueApp.$refs.firebaseSignInPopup.isShowing) this.hideFirebaseSignIn();
},
showItemOnEquipScreen: function (item) {
this.switchToEquipUi();
this.$refs.equipScreen.autoSelectItem(item);
},
showTaggedItemsOnEquipScreen: function (tag) {
this.switchToEquipUi();
this.$refs.equipScreen.showTaggedItems(tag);
},
showSelectedTaggedItemsOnEquipScreen: function (tag) {
this.switchToEquipUi();
this.$refs.equipScreen.showSelectedTagItems(tag);
},
useHouseAdSmall: function (smallHouseAd) {
this.ui.houseAds.small = smallHouseAd;
},
useHouseAdBig: function (bigHouseAd) {
this.ui.houseAds.big = bigHouseAd;
},
denyAnonUser: function () {
ga('send', 'event', vueApp.googleAnalytics.cat.playerStats, vueApp.googleAnalytics.action.denyAnonUserPopup);
if (extern.inGame) {
this.hideGameMenu();
}
this.$refs.noAnonPopup.show();
},
showGdprNotification: function () {
this.$refs.gdpr.show();
},
showPrivacyPopup: function () {
this.hideSettingsPopup();
this.$refs.privacyPopup.show();
},
hidePrivacyPopup: function () {
this.$refs.privacyPopup.hide();
this.showSettingsPopup();
},
ofAgeChanged: function () {
extern.setOfAge(this.isOfAge);
BAWK.play('ui_onchange');
},
targetedAdsChanged: function () {
extern.setTargetedAds(this.showTargetedAds);
BAWK.play('ui_onchange');
},
setPrivacySettings: function (ofAge, targetedAds) {
this.isOfAge = ofAge;
this.showTargetedAds = targetedAds;
},
gameJoined: function (gameType, team) {
this.game.gameType = gameType;
this.setTeam(team);
},
setTeam: function (team) {
if (hasValue(team)) {
this.game.team = team;
}
},
showGoldChickenPopup: function () {
this.$refs.goldChickenPopup.show();
},
hideGoldChickenPopup: function () {
this.$refs.goldChickenPopup.hide();
},
showChicknWinnerPopup: function () {
this.$refs.chicknWinner.show();
vueApp.$refs.chickenNugget.showAd();
// this.$refs.chickenNugget.loadMiniGame();
this.isBuyNugget = true;
console.log('showChicknWinnerPopup()');
},
hideChicknWinnerPopup: function () {
this.$refs.chicknWinner.hide();
this.$refs.chickenNugget.onGotWinner();
console.log('Hide nugget');
},
chicknWinnerIsReady() {
if (this.chicknWinnerDailyLimitReached) {
this.chicknWinnerNotReady();
return;
}
setTimeout(() => {
this.chicknWinnerReady = true;
this.hasChwPlayClicked = false;
ga('send', 'event', 'Chickn Winner', 'Free eggs btn', `ready-in-${(this.ui.showScreen === this.ui.screens.game) ? 'game' : 'home'}`);
}, 1000);
},
chicknWinnerNotReady() {
this.chicknWinnerReady = false;
this.hasChwPlayClicked = false;
},
chicknWinnerError() {
this.isChicknWinnerError = true;
},
chicknWinnerDailyLimit() {
this.chicknWinnerDailyLimitReached = true;
this.chicknWinnerNotReady();
},
loadNuggetVideo() {
this.hideGameMenu();
extern.checkStartChicknWinner(true);
BAWK.play('ui_playconfirm');
},
getNuggetTimer() {
return;
this.$refs.homeScreen.$refs.chickenPanel.setupNuggetTimer();
},
onMiniGameCompleted: function () {
this.$refs.chickenNugget.onMiniGameCompleted();
},
placeBannerAdTagForNugget: function (tagEl) {
this.$refs.chickenNugget.placeBannerAdTag(tagEl);
},
useSpecialItemsTag: function (tag) {
this.equip.specialItemsTag = tag;
this.equip.showSpecialItems = true;
},
disableSpecialItems: function () {
this.equip.showSpecialItems = false;
},
setUiSettings: function (settings) {
this.$refs.settings.setSettings(settings);
},
leaveGame: function () {
this.$refs.gameScreen.leaveGame();
},
showPlayerActionsPopup: function (slot) {
this.playerActionsPopup = slot;
this.$refs.gameScreen.showPlayerActionsPopup();
},
onSignInCancelClicked: function () {
vueApp.$refs.firebaseSignInPopup.hide();
BAWK.play('ui_popupclose');
},
anonWarningPopupCancel: function() {
let anonWarnConfrimed = localStore.getItem('anonWarningConfirmed');
this.urlParamSet = this.urlParams ? true : null;
this.shellShockUrlParamaterEvents();
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.anonymousPopupOpenAuto, this.googleAnalytics.label.understood);
return anonWarnConfrimed === null && localStore.setItem('anonWarningConfirmed', true);
},
anonWarningPopupConfrim() {
let anonWarnConfrimed = localStore.getItem('anonWarningConfirmed');
anonWarnConfrimed === null && localStore.setItem('anonWarningConfirmed', true);
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.anonymousPopupOpenAuto, this.googleAnalytics.label.signInClick);
extern.showSignInDialog();
this.urlParamSet = false;
vueApp.$refs.firebaseSignInPopup.show();
},
conditionalAnonWarningCall: function() {
let anonWarnConfrimed = localStore.getItem('anonWarningConfirmed');
if ( ! hasValue(anonWarnConfrimed) && this.isAnonymous) {
vueApp.showAttentionPopup();
ga('send', 'event', this.googleAnalytics.cat.playerStats, this.googleAnalytics.action.anonymousPopupOpenAuto);
}
},
needMoreEggsPopupCall: function() {
ga('send', 'event', this.googleAnalytics.cat.itemShop, this.googleAnalytics.action.shopItemNeedMoreEggsPopup);
this.$refs.needMoreEggsPopup.show();
},
/**
* Not 100 % certain this should live in vue but here it is.
* Add the ability to use url paramaters to trigger events in the game.
* e.g. shellshock.io/?open=eggStore&type=Hat&item=1111 will open the spiderman hat item.
* Called in the extern closure under gameApp.js => afterGameReady()
*/
shellShockUrlParamaterEvents() {
// VUE next tick https://vuejs.org/v2/api/#Vue-nextTick
this.$nextTick( ()=> {
this.doSsUlrParams();
});
},
doSsUlrParams() {
if ( ! this.urlParams) {
return;
}
console.log(hasValue(this.isAnonymous));
if (hasValue(this.ui.houseAds.big)) {
this.urlParamSet = false;
return;
} else if (this.isAnonymous && ! hasValue(localStore.getItem('anonWarningConfirmed'))) {
this.urlParamSet = false;
console.log('Almost there!');
this.conditionalAnonWarningCall();
return;
}
console.log('Passed Popup gate');
switch (this.urlParams) {
case 'eggStore' :
// Opens the purchase egg store popup
this.showEggStorePopup();
break;
case 'goldenChicken' :
// Opens the golden chicken popup
vueApp.$refs.goldChickenPopup.show();
break;
case 'twoTimesTheEggs' :
// Opens the chicken nugget video
extern.checkStartChicknWinner(true);
BAWK.play('ui_playconfirm');
break;
case 'itemShop' :
// Opens shop options
// /?open=itemShop
// /?open=itemShop&type=Hat/Stamp/Primary/Secondary/Grenade/Premium/Tagged
// /?open=itemShop&gunClass=Soldier/Soldier/Scrambler/Ranger/Eggsploder/Whipper/Crackshot/TriHard
// /?open=itemShop&item=1111 opens hat store and then selects item
// /?open=itemShop&item=1111&openBuyNow=1 opens hat store, selects item and then opens items popup
this.eggStoreUrlParams();
break;
case 'vipStore' :
vueApp.showSubStorePopup();
break;
case 'redeem' :
vueApp.switchToEquipUi();
BAWK.play('ui_popupopen');
this.$refs.equipScreen.$refs.redeemCodePopup.show();
if ('code' in parsedUrl.query) this.equip.redeemCodePopup.code = parsedUrl.query.code;
break;
case 'faq' :
this.showHelpPopup();
break;
case 'taggedItems' :
this.openSpecialTagItemsTab();
break;
case 'privateGame' :
this.showPrivateGamePopup();
break;
case 'kotcInstruction' :
this.showKotcInstrucPopup();
break;
default:
null;
};
},
eggStoreUrlParams() {
setTimeout(() => {
const ITEMIDPARAM = parsedUrl.query.hasOwnProperty('item') ? parsedUrl.query.item : '',
TYPEPARAM = parsedUrl.query.hasOwnProperty('type') ? parsedUrl.query.type : '',
GUNCLASS = parsedUrl.query.hasOwnProperty('gunClass') && CharClass.hasOwnProperty(parsedUrl.query.gunClass) ? parsedUrl.query.gunClass : '',
BUYNOWPOPUP = parsedUrl.query.hasOwnProperty('openBuyNow');
if (ITEMIDPARAM) {
const IDISNUMBER = parseInt(ITEMIDPARAM);
let item = extern.catalog.findItemById(IDISNUMBER);
if (!item.is_available) {
vueApp.showGenericPopup("uh_oh", "no_anon_title", "ok")
return;
}
this.switchToEquipUi();
this.$refs.equipScreen.autoSelectItem(item);
if (BUYNOWPOPUP === true) {
console.log('Will it open?');
vueApp.$refs.equipScreen.onBuyItemClicked();
return;
}
} else {
this.openEquipUISwitchToShop();
if (GUNCLASS) {
vueApp.$refs.equipScreen.switchItemType(ItemType['Primary']);
vueApp.$refs.equipScreen.$refs.weapon_select.selectClass(CharClass[GUNCLASS]);
console.log('Has GUN');
} else if (TYPEPARAM) {
console.log('OPEN item');
if (ItemType.hasOwnProperty(TYPEPARAM)) {
vueApp.$refs.equipScreen.switchItemType(ItemType[TYPEPARAM]);
} else {
if (TYPEPARAM === 'Premium') {
vueApp.$refs.equipScreen.onPremiumItemsClicked();
} else if (TYPEPARAM === 'Tagged') {
vueApp.$refs.equipScreen.onTaggedItemsClicked();
}
}
}
}
}, 45);
},
openSpecialTagItemsTab() {
let tag = parsedUrl.query.tag ? parsedUrl.query.tag : null;
vueApp.showSelectedTaggedItemsOnEquipScreen(tag);
},
openEquipUISwitchToShop() {
vueApp.switchToEquipUi();
vueApp.$refs.equipScreen.switchToShop();
},
delayInGamePlayButtons() {
vueApp.$refs.gameScreen.delayGameMenuPlayButtons();
},
//Call/hide display ads
hideRespawnDisplayAd() {
this.$refs.gameScreen.$refs.respawnDisplayAd.hide();
this.$refs.gameScreen.$refs.respawnTwoDisplayAd.hide();
},
showRespawnDisplayAd() {
this.$refs.gameScreen.$refs.respawnDisplayAd.show();
this.$refs.gameScreen.$refs.respawnTwoDisplayAd.show();
},
hideLoadingScreenAd() {
this.$refs.spinnerOverlay.$refs.loadingScreenDisplayAd.hide()
},
showLoadingScreenAd() {
this.$refs.spinnerOverlay.$refs.loadingScreenDisplayAd.show();
// this.histPushState({game: 3}, 'Shellshockers Loading display ad', '?loadingAd=true');
},
displayAdEventObject(event) {
let object = event;
this.displayAdObject = object.size[0];
},
showTitleScreenAd() {
this.$refs.homeScreen.$refs.titleScreenDisplayAd.show();
},
hideTitleScreenAd() {
this.$refs.homeScreen.$refs.titleScreenDisplayAd.hide();
},
toggleTitleScreenAd() {
this.$refs.homeScreen.$refs.titleScreenDisplayAd.toggleAd();
},
scrollToTop() {
let position =
document.body.scrollTop || document.documentElement.scrollTop,
scrollAnimation;
if (position) {
window.scrollBy(0, -Math.max(1, Math.floor(position / 10)));
scrollAnimation = setTimeout(this.scrollToTop, 10);
} else clearTimeout(scrollAnimation);
},
externPlayObject(playType, gameType, playerName, mapIdx, joinCode) {
return extern.play({playType, gameType, playerName, mapIdx, joinCode});
},
pleaseWaitPopup() {
vueApp.showGenericPopup("signin_auth_title", "signin_auth_msg");
},
isPlayingPoki() {
this.isPoki = true;
this.ready = true;
return;
},
histPushState(obj, title, param) {
return history.pushState(obj, title, param);
},
disablePlayButton(val) {
return document.querySelector('.play-button').disabled = val;
},
disableRespawnButton(val) {
return document.querySelector('.btn-respawn') ? document.querySelector('.btn-respawn').disabled = val : '';
},
disaplyAdEventObject(event) {
this.displayAdObject = event.size === null ? null : event.size[0];
},
adBlockerPopupToggle() {
return vueApp.$refs.adBlockerPopup.toggle();
},
musicPlayOnce() {
return setTimeout(() => this.$refs.gameScreen.$refs.gameScreenMusic.playOnce(), 2000);
},
musicPause() {
this.$refs.gameScreen.$refs.gameScreenMusic.pause();
},
musicVolumeControl(value) {
return;
this.settingsUi.adjusters.music[0].value = Number(value);
this.$refs.gameScreen.$refs.gameScreenMusic.loadVolume();
},
toggleMusic() {
this.$refs.gameScreen.$refs.gameScreenMusic.toggleMusic();
},
musicWidget(val) {
this.music.isMusic = val;
},
fetchSponsors() {
fetch(this.music.musicJson)
.then((response) => response.json())
.then((sponsors) => this.music.sponsors = sponsors)
.catch((error) => console.log('Sponsors fetch error', error));
},
pwaPopup() {
return this.$refs.pwaPopup.show();
},
pwaBtnClick() {
// Track the click
ga('send', 'event', 'pwa', 'button', 'click');
//close popup
this.$refs.pwaPopup.hide();
// Get the event
this.pwaDeferEvent = extern.getPwaEvent;
if (!this.pwaDeferEvent) {
return;
}
this.pwaDeferEvent.prompt();
this.pwaDeferEvent.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
ga('send', 'event', 'pwa', 'a2hs', choiceResult.outcome);
this.pwaDeferEvent = null;
});
this.pwaDeferEvent = '';
},
signOut() {
this.isUpgraded = false;
this.equip.extraColorsLocked = true;
this.isUpgraded = false;
this.upgradeName = '';
this.isSubscriber = false;
},
mediaTabsStartRotate() {
return this.$refs.homeScreen.$refs.mediaTabs.autoRotateTabs();
},
mediaTabsCancelRotate() {
return this.$refs.homeScreen.$refs.mediaTabs.cancelRotate(true);
},
showAdBlockerVideo() {
this.bannerHouseAd = extern.getHouseAd('bigBanner');
this.showAdBlockerVideoAd = true;
this.hideGameMenu();
this.$refs.adBlockerVideo.show();
},
hideAdBlockerVideo() {
this.$refs.adBlockerVideo.hide();
if (extern.inGame) {
this.showGameMenu();
}
this.bannerHouseAd = {};
this.showAdBlockerVideoAd = false;
},
showKotcInstrucPopup() {
this.$refs.kotcInstrucPopup.show();
},
kotcInstrucPopupHide() {
this.$refs.kotcInstrucPopup.hide();
},
onClickPlayKotcNow() {
this.externPlayObject(vueData.playTypes.joinPublic, 3, this.playerName, '', '');
this.kotcInstrucPopupHide();
},
onVipHelpClosed() {
this.onSharedPopupClosed();
this.showSubStorePopup();
},
getLocLang(val) {
let data = this.loc,
langSetup = {};
if (val) data = val;
const newLoc = Object.entries(data).filter(item => item[0].includes('locLang')).forEach(lang => langSetup[lang[0].split('_').pop('').split("-").pop('')] = lang[1]);
this.$nextTick(() => {
this.locLanguage = langSetup
});
},
onClickTwitchDropsMore() {
window.open(dynamicContentPrefix + 'twitch');
this.onGiveStuffComplete();
},
onPremiumItemsClicked() {
this.openEquipUISwitchToShop();
this.$refs.equipScreen.onPremiumItemsClicked();
}
},
computed: {
portalClass() {
return {
'playing-poki': this.isPoki,
'playing-crazy-games': crazyGamesActive,
'is-vip': this.isSubscriber && this.isUpgraded ? true : false,
}
},
bigBannerAdLink() {
return this.bigHouseAd.link
},
bigBannerAdImg() {
return dynamicContentPrefix + `data/img/art/${this.bigHouseAd.id}${this.bigHouseAd.imageExt}`;
}
},
watch : {
loc(val) {
this.getLocLang(val);
},
}
});
}
</script>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon="{"rayId":"719d075cbaa072b4","token":"b4cd973aeca34b509bef2ed0c9e0b720","version":"2021.12.0","si":100}" crossorigin="anonymous"></script>
<img src="https://ad-delivery.net/px.gif?ch=2" style="display: none !important; width: 1px !important; height: 1px !important;"><img src="https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250" style="display: none !important; width: 1px !important; height: 1px !important;"><img src="https://ad-delivery.net/px.gif?ch=1&e=0.04454433828587079" style="display: none !important; width: 1px !important; height: 1px !important;"><iframe height="0" width="0" style="display: none; visibility: hidden;"></iframe><div id="progress-container" style="position: fixed; top: 0px; left: 0px; height: 100vh; width: 100vw; z-index: 2000; background-image: var(--ss-lightoverlay);"><div id="progress-wrapper" class="load_screen" style="position: absolute; left: 50%; top: -6em; transform: translateX(-50%); background-image: none;"><img src="img/logo.svg" id="logo-svg" style="height: 16em;"><div id="progress-outer" style="position: relative; background: rgb(100, 50, 25); border-radius: 2em; height: 3.3em; width: 24em; margin-top: 2em;"><div style="width: 23em; height: 2.2em; background: white; padding: 0.5em; border-radius: 2em; margin: 0.3em 0.5em 0px;"><span id="progressBar" style="display: block; width: 20%; height: 100%; background: orange; border-radius: 2em; margin: 0px 0.3em 0.5em 0%; opacity: 1; transition: margin-left 500ms ease-in-out 0s;"></span></div></div></div><img src="img/BlueWizard-Logo-min.png" style="width: 16em; display: block; margin: 5em auto 0px; z-index: 2000; position: absolute; left: 50%; bottom: 8em; transform: translateX(-50%);"></div><script async="" type="text/javascript" data-cmp-ab="2" src="https://cdn.consentmanager.net/delivery/customdata/bV8xLndfMTM1NjYucl9HRFBSLmxfZW4uZF81MzI0LnhfMjIudi5wLnRfNTMyNC54dF8zMg.js"></script><iframe id="_hjSafeContext_1214820" title="_hjSafeContext" tabindex="-1" aria-hidden="true" src="about:blank" style="display: none !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;"></iframe><iframe name="googlefcPresent" style="display: none; width: 0px; height: 0px; border: none; z-index: -1000; left: -1000px; top: -1000px;"></iframe><style type="text/css">@keyframes cmp_pulse{0%{transform:scale(.9);box-shadow:0 0 0 0 rgba(255,211,65,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px transparent}to{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes cmp_pulse2{0%{transform:scale(.9);box-shadow:0 0 0 0 rgba(255,39,39,.8)}70%{transform:scale(1);box-shadow:0 0 0 10px transparent}to{transform:scale(.9);box-shadow:0 0 0 0 transparent}}.cmpstyleroot,.cmpstyleroot *{--x6pt:6pt;--x7pt:7pt;--x8pt:8pt;--x9pt:9pt;--x10pt:10pt;--x11pt:11pt;--x12pt:12pt;--clrBackground:#FFFFFF;--clrHeadline:#3B3B3B;--clrText:#5F5F5F;--clrTextSecondary:#CFCFCF;--clrButton:#3276AE;--clrButtonText:#FFFFFF;--clrLink:#666666;--clrHighlight:#FFFDCD}body div#cmpwrapper.cmpwrapper:empty,div#cmpwrapper.cmpwrapper,div#cmpwrapper.cmpwrapper:empty,div.cmpwrapper,div.cmpwrapper:empty{display:block!important}.cmpstyleroot.cmpboxwcag,.cmpstyleroot.cmpboxwcag *{--x6pt:0.5000rem;--x7pt:0.5834rem;--x8pt:0.6666rem;--x9pt:0.7500rem;--x10pt:0.8333rem;--x11pt:0.9166rem;--x12pt:1.0000rem}.cmpbox{position:fixed;font-family:Arial,sans-serif;background-color:var(--clrBackground);-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.75);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.75);box-shadow:0 0 5px 0 rgba(0,0,0,.75);box-sizing:border-box;transition-property:background-color,height,width,max-height,max-width,display,position,left,top,bottom,right,transform;transition-duration:.9s;transition-timing-function:ease;z-index:9999999;max-height:100vh;max-width:100vw;text-underline-position:under}.cmpbox.cmpnotransition{transition:none}.cmpbox IMG,.cmpbox SVG,.cmpbox img,.cmpbox svg,.cmpboxrecall IMG,.cmpboxrecall SVG,.cmpboxrecall img,.cmpboxrecall svg{display:inline-block!important}.cmpboxinner,.cmpboxinner2{height:100%;max-width:1400px;margin-left:auto;margin-right:auto}.cmpfullscreen .cmpboxinner{display:flex;flex-direction:column}.cmpbox0{bottom:0;right:0;width:600px}.cmpbox1{bottom:0;left:0;width:100%}.cmpbox2{bottom:0;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}.cmpbox2,.cmpbox3,.cmpbox4{left:50%;width:600px}.cmpbox3{position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cmpbox4{top:0;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}.cmpbox5,.cmpbox8.cmpfullscreen{top:0;left:0;width:100%}.cmpbox6,.cmpbox7{top:0;height:100%;max-width:300px}.cmpbox6{right:0}.cmpbox7{left:0}.cmpbox8{width:100%;position:relative!important;margin-left:auto;margin-right:auto}.cmpbox9{bottom:0;left:0;width:600px}.cmpbox10{top:0;left:0;width:600px}.cmpbox11{top:0;right:0;width:600px}.cmpbox8.cmpfullscreen{position:absolute!important}.cmpboxBG{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#cfcfcf;opacity:.5;filter:alpha(opacity=50);z-index:8999999}.cmpbox *,.cmpbox>*{font-family:Arial,sans-serif;text-decoration:none;box-sizing:border-box;border:0 solid #fff;vertical-align:middle;transition-property:background-color,height,width,max-height,max-width,display,position;transition-duration:.9s;transition-timing-function:ease}.cmpboxh2,.cmpboxhl{font-size:var(--x12pt);color:var(--clrHeadline)}.cmpboxhl{vertical-align:baseline}.cmpboxh2{font-weight:400;opacity:.8;margin-bottom:.5em;margin-top:2em}.cmpboxh2,.cmpboxhl *,.cmpcookiesdescrboxcontent *{vertical-align:baseline}.cmpcornerbtn .cmpboxhl{max-width:calc(100% - 200px)}.cmpboxbtns{text-align:center;min-height:50px;flex-shrink:0}.cmpboxtxtdiv{z-index:33333;position:relative}.cmpboxtxt,.cmpcookieinfocontent p,.cmpcookiesdescrboxcontent p,.cmpprpsdescr{font-size:var(--x11pt);line-height:1.3em;color:var(--clrText);text-align:justify}.cmpboxbtn,.cmpboxbtn *,.cmpboxtxt,.cmpboxtxt *,.cmpmore *,.cmpprpsdescr,.cmpprpsdescr *{vertical-align:baseline}.cmpprpsdescr{margin-bottom:10px}.cmpprpshl{margin-top:15px;margin-bottom:5px}.cmpcompanyaddr,.cmpdpoinfo{margin-top:10px}.cmpboxbtn{font-size:var(--x11pt);margin:10px;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.5);box-shadow:0 0 5px 0 rgba(0,0,0,.5);width:200px;max-width:100%;display:inline-block;text-align:center;position:relative;height:auto;padding:7px 0 7px 10px;border-radius:3px;line-height:normal}.cmpboxbtnyescustom2disabled,.cmpboxbtnyescustomdisabled{cursor:not-allowed!important;opacity:.5}.cmpboxbtn.cmpboxbtnsave{padding-left:0}.cmpbox1 .cmpboxcontent{display:inline-block;max-width:70%;padding-bottom:0}.cmpbox1 .cmpboxbtns{display:inline-block;min-width:30%;margin-top:40px;max-width:30%}.cmpbox5 .cmpboxcontent,.cmpbox8 .cmpboxcontent{display:inline-block;max-width:70%;padding-bottom:0}.cmpbox5 .cmpboxbtns,.cmpbox8 .cmpboxbtns{display:inline-block;min-width:30%;margin-top:40px;max-width:30%}.cmpfullscreen.cmpbox1 .cmpboxbtns,.cmpfullscreen.cmpbox5 .cmpboxbtns,.cmpfullscreen.cmpbox8 .cmpboxbtns{display:block;margin-top:10px;max-width:100%;width:100%}@media (max-width:1500px){.cmpbox1 .cmpboxcontent{max-width:calc(100% - 450px)}.cmpbox1 .cmpboxbtns{min-width:450px}.cmpbox5 .cmpboxcontent,.cmpbox8 .cmpboxcontent{max-width:calc(100% - 450px)}.cmpbox5 .cmpboxbtns,.cmpbox8 .cmpboxbtns{min-width:450px}}@media (max-width:1200px){.cmpbox1 .cmpboxcontent{max-width:calc(100% - 250px)}.cmpbox1 .cmpboxbtns{width:250px;min-width:250px}.cmpbox5 .cmpboxcontent,.cmpbox8 .cmpboxcontent{max-width:calc(100% - 250px)}.cmpbox5 .cmpboxbtns,.cmpbox8 .cmpboxbtns{width:250px;min-width:250px}.cmpfullscreen.cmpbox1 .cmpboxbtns,.cmpfullscreen.cmpbox5 .cmpboxbtns,.cmpfullscreen.cmpbox8 .cmpboxbtns{display:block;margin-top:10px;max-width:100%;width:100%}.cmpfullscreen .cmpboxbtn{display:inline-block;margin-bottom:10px}}@media (max-width:800px){.cmpbox1 .cmpboxcontent{max-width:100%;width:100%;display:block}.cmpbox1 .cmpboxbtns{margin-top:0}.cmpbox1 .cmpboxbtns,.cmpbox5 .cmpboxcontent,.cmpbox8 .cmpboxcontent{max-width:100%;width:100%;display:block}.cmpbox5 .cmpboxbtns,.cmpbox8 .cmpboxbtns{width:100%;display:block;max-width:100%;margin-top:0}.cmpfullscreen.cmpbox1 .cmpboxbtns,.cmpfullscreen.cmpbox5 .cmpboxbtns,.cmpfullscreen.cmpbox8 .cmpboxbtns{margin-top:10px}.cmpboxbtn{display:inline-block;margin:10px}}@media (max-width:600px){.cmpbox0,.cmpbox2,.cmpbox3,.cmpbox4{width:100%}}@media (max-width:400px){.cmpbox6,.cmpbox7{width:100%}}.cmpboxbtnno,A.cmpboxbtnno,A.cmpboxbtnno:link{background-color:var(--clrButton);color:var(--clrButtonText)}.cmpboxbtncustom,.cmpboxbtnsettings,A.cmpboxbtncustom,A.cmpboxbtncustom:link,A.cmpboxbtnsettings,A.cmpboxbtnsettings:link{background-color:var(--clrButton);color:var(--clrButtonText);padding-left:0}.cmpboxbtnaccept,.cmpboxbtnreject,.cmpboxbtnsave,.cmpboxbtnyes,A.cmpboxbtnaccept,A.cmpboxbtnaccept:link,A.cmpboxbtnreject,A.cmpboxbtnreject:link,A.cmpboxbtnsave,A.cmpboxbtnsave:link,A.cmpboxbtnyes,A.cmpboxbtnyes:link{background-color:var(--clrButton);color:var(--clrButtonText)}.cmpboxbtn,.cmpmorelink{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none}.cmpboxbtn SVG,.cmpboxbtn span,.cmpboxbtn svg{vertical-align:middle}.cmplogo{position:absolute}.cmplogo2,.cmplogo2 span{color:#666;line-height:2px}.cmplogo2{position:absolute;padding:2px;right:2px;bottom:0}.cmplogo2 span{text-decoration:none;margin-left:5px}.cmplogo2 A,.cmplogo2 A:link{display:inline-block;font-size:var(--x7pt);color:#575d80;text-decoration:none;line-height:2px}.cmplogo2,.cmplogo2 span,.cmplogo2.cmplogoXL,.cmplogo2.cmplogoXL A,.cmplogo2.cmplogoXL A:link,.cmplogo2.cmplogoXL span{font-size:var(--x7pt)}.cmplogo2.cmplogoXXL{background:rgba(0,0,0,.1);border-radius:15px;padding-left:10px;padding-right:10px;margin-bottom:2px;opacity:.4}.cmplogo2.cmplogoXXL:focus,.cmplogo2.cmplogoXXL:hover{opacity:1}.cmplogo2.cmplogoXXL,.cmplogo2.cmplogoXXL A,.cmplogo2.cmplogoXXL A:link,.cmplogo2.cmplogoXXL span{font-size:var(--x9pt)}.cmpdl2{width:16px;height:16px;border:0 solid #fff;padding:0;margin:0 2px 0 0}.cmplogo2h,.cmplogo2hx{vertical-align:middle}.cmplogo2h{display:none}.cmplogo2:focus .cmplogo2h,.cmplogo2:hover .cmplogo2h,A.cmpboxrecalllink:focus .cmpboxrecalltxt,A.cmpboxrecalllink:hover .cmpboxrecalltxt{display:inline}.cmplogo2 .cmplogo2h.cmplogo2hvis{display:inline!important}.cmplanguage{display:block;border-radius:5px;position:absolute;padding:6px 3px;text-align:left;left:3px;bottom:3px;font-size:var(--x7pt);line-height:2px;color:#666;transition:.4s all ease;border:1px solid transparent;cursor:pointer}.cmplanguage:focus,.cmplanguage:hover{background-color:#fffdcd;border:1px solid #ffd341;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.25);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.25);box-shadow:0 0 5px 0 rgba(0,0,0,.25)}.cmplangicon{width:16px;height:auto;-webkit-filter:grayscale(60%);filter:grayscale(60%)}.cmplangiconiso{height:1em;line-height:1.25em;font-size:8pt;width:1.5em;display:inline-block;vertical-align:middle;text-align:center}.cmplanguageloc{line-height:1em;font-size:var(--x6pt);position:absolute;right:0;bottom:0;color:#000;border-radius:30px;background-color:rgba(255,255,255,.8);padding:2px;white-space:nowrap}.cmplangicon:focus,.cmplangicon:hover,.cmplanguage:focus .cmplangicon,.cmplanguage:hover .cmplangicon{-webkit-filter:grayscale(0%);filter:grayscale(0%)}.cmpaltlang,.cmpaltlangs{border-radius:5px;z-index:33334}.cmpaltlangs{position:absolute;bottom:-1px;left:-1px;background-color:#fffdcd;border:1px solid #ffd341;width:144px;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.25);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.25);box-shadow:0 0 5px 0 rgba(0,0,0,.25)}.cmpaltlang{display:inline-block;padding:6px 3px;font-size:var(--x7pt);line-height:2px;color:#666;border:1px solid #f7e939;background-color:#ffffe3;margin:2px;cursor:pointer;position:relative}.cmpaltlang:focus,.cmpaltlang:hover{background-color:#fff;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.25);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.25);box-shadow:0 0 5px 0 rgba(0,0,0,.25)}.cmpaltlangcurrent{display:block;cursor:pointer}.cmpaltlangcurrent>div{display:inline-block;position:relative;padding:6px 3px}.cmpmore{text-align:center;font-size:var(--x9pt);color:var(--clrLink);line-height:1em}.cmpmorelink,A.cmpmorelink,A.cmpmorelink:link{padding:10px;display:inline-block}.cmpimg{width:15px;height:15px;position:absolute;left:10px;top:0;border:0;margin-top:.6em}.cmpdl{max-height:50px;max-width:200px;border:0}.cmptblbox{height:calc(100% - 60px);overflow-y:auto;padding-right:5px;max-width:800px;min-height:100px;margin-right:auto;margin-left:auto;width:100%}.cmpbox:dir(rtl) .cmptblbox,.cmpbox[dir=rtl] .cmptblbox{padding-right:0;padding-left:5px}.cmpboxheadline{max-width:800px;margin-right:auto;margin-left:auto;width:100%;flex-shrink:0;vertical-align:baseline}.cmpboxnavi{width:200px;float:left}.cmpboxnaviitem{border:1px solid silver;border-radius:5px;padding:10px;margin-bottom:5px;cursor:pointer}.cmpbox[dir=rtl] .cmpboxnaviitem{padding-right:30px}.cmpboxnaviitem *{vertical-align:middle}.cmpboxnaviitem img{margin-right:5px}.cmpboxnaviitem .cmptogglelink{display:inline-block;text-align:center}.cmpbox:dir(rtl) .cmptblbox,.cmpbox[dir=rtl] .cmptblbox{margin-right:0;margin-left:5px}.cmpboxnaviitemactive{background-color:var(--clrHighlight)}.cmpboxdetails{float:left;width:calc(100% - 200px);padding-left:15px}.cmpcookienonavi .cmpboxdetails{float:none;width:100%;padding-left:0}@media (max-width:570px){.cmpboxnavi{width:100%;float:none}.cmpboxnaviitem{border:1px solid silver;border-radius:5px;padding:5px;margin-bottom:3px;font-size:var(--x10pt)}.cmpboxnaviitemactive{background-color:var(--clrHighlight)}.cmpboxdetails{float:none;width:100%;padding-left:0}}.cmptbl{border:0 solid #fff;width:100%}.cmptbl TH{font-size:var(--x10pt);font-weight:700;border-bottom:2px solid var(--clrTextSecondary);color:var(--clrText)}.cmpclose{position:absolute;right:2px;top:2px}.cmptbl Td{font-size:var(--x9pt);text-align:center;color:var(--clrText)}.cmpcookietbl Td,td.cmptdborder{border-bottom:1px solid silver}.cmpcookietbl Td{font-size:var(--x9pt);text-align:left;color:var(--clrText)}td.cmpvendname{text-align:right}.cmpimgsaveno,.cmpimgyesno,.cmpimgyesno svg,.cmptogglespan svg,.cmpwelcomeprpsbtn .cmpimgsaveno,.cmpwelcomeprpsbtn .cmpimgyesno{border:0 solid #fff;width:40px;height:20px;color:var(--clrTextSecondary)}.cmpboxwelcomeprps{text-align:left;display:flex;flex-wrap:wrap}.cmpwelcomeprpsbox{display:flex;flex-direction:column;position:relative;width:100%;cursor:pointer}.cmpwelcomeprpsboxinner{padding-right:28px}.cmpwelcomeprpsbox:after,.cmpwelcomeprpsbox:before{content:"";position:absolute;top:calc(1em - 4px);width:6px;border:1px solid var(--clrTextSecondary)}.cmpbox table caption,.cmpwelcomeprpsboxnoarrow:after,.cmpwelcomeprpsboxnoarrow:before,div.cmpexpandcontent{display:none}.cmpwelcomeprpsbox:hover::after,.cmpwelcomeprpsbox:hover::before,.cmpwelcomeprpsboxactive:hover::after,.cmpwelcomeprpsboxactive:hover::before{border:1px solid var(--clrText)}.cmpwelcomeprpsbox:before{transform:rotateZ(45deg);-webkit-transform:rotateZ(-45deg);right:10px}.cmpwelcomeprpsbox:after{transform:rotateZ(-45deg);-webkit-transform:rotateZ(45deg);right:15px}.cmpwelcomeprpsdescr,.cmpwelcomeprpsvendors{transition:all .5s ease;visibility:visible;opacity:1;height:auto;overflow:visible;width:100%}.cmpwelcomeprpsdescrinactive,.cmpwelcomeprpsvendorsinactive{visibility:hidden;opacity:0;height:0;overflow:hidden;margin:0!important;padding:0!important}.cmpwelcomeprpsboxactive:after,.cmpwelcomeprpsboxactive:before{content:"";position:absolute;top:calc(1em - 4px);width:6px;border:1px solid var(--clrTextSecondary)}.cmpwelcomeprpsboxactive:before{transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);right:11px}.cmpwelcomeprpsboxactive:after{transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);right:15px}.cmpwelcomeprps{column-span:none;display:inline-flex;margin-bottom:5px;width:240px;text-align:left;margin-right:15px;align-items:center}.cmpwelcomeprpsbox .cmpwelcomeprps{width:100%}.cmpbox:dir(rtl) .cmpwelcomeprps,.cmpbox[dir=rtl] .cmpwelcomeprps{margin-right:0;margin-left:15px}.cmpwelcomeprpsbtn{display:inline;margin-right:5px;flex-shrink:0}.cmpbox:dir(rtl) .cmpwelcomeprpsbtn,.cmpbox[dir=rtl] .cmpwelcomeprpsbtn{margin-right:0;margin-left:5px}.cmpwelcomeprpstxt{display:inline;padding-top:2px;cursor:pointer;vertical-align:baseline}.cmpcarouselexpanded .cmpboxnavi.cmpcarouselexpandnavi .cmpboxnaviitem,.cmpwelcomeprpstxt.cmpwelcomeprpstxtnopointer{cursor:auto}.cmpbox.cmpfullscreen{width:100%;height:100%;transform:none!important;left:0;top:0;max-width:unset;max-height:unset}TD.cmpallprps,TD.cmpallvend,TH.cmpallprps,TH.cmpallvend{background-color:var(--clrHighlight)}TD.cmpcenter,TH.cmpcenter{text-align:center}TD.cmpsmallborder,TH.cmpsmallborder{border-bottom:1px solid var(--clrTextSecondary)}.cmpboxtxt svg,.cmppurposeicon svg{width:16px;height:16px}.cmpcolorcodingtxt{font-size:var(--x10pt);color:#333;padding:5px;line-height:1.2em}.cmpvendorpurposes svg{fill:#333;width:14px;height:14px}.cmpcolorcodingtxtconsent{color:#333;font-weight:700}.cmpvendorlegintpurposes svg{fill:#b4b4b4;width:14px;height:14px}.cmpcolorcodingtxtlegint{color:#b4b4b4;font-weight:700}.cmpvendorfeatures svg{fill:#5781ad;width:14px;height:14px}.cmpcolorcodingtxtfeatures{color:#5781ad;font-weight:700}.cmpboxrecall,.cmpboxrecall *{line-height:1.5em;vertical-align:middle}.cmpboxrecall{position:fixed;bottom:10px;left:10px;border-radius:30px;padding:3px;z-index:7999999}.cmpboxrecall *{font-size:var(--x9pt)}.cmpboxrecalltxt{display:none;font-family:Arial,sans-serif;padding-right:10px}.cmpbox:dir(rtl) .cmpboxrecalltxt,.cmpbox[dir=rtl] .cmpboxrecalltxt{padding-right:0;padding-left:10px}A.cmpboxrecalllink,A.cmpboxrecalllink:active,A.cmpboxrecalllink:focus,A.cmpboxrecalllink:hover,A.cmpboxrecalllink:link,A.cmpboxrecalllink:visited{display:block;height:20px;color:#0b9ac5;text-decoration:none}.cmpboxrecall{background-color:#f7fcff;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.25);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.25);box-shadow:0 0 5px 0 rgba(0,0,0,.25)}@media print{.cmpboxrecall{display:none!important}}.cmprecallwarning,.cmprecallwarning2{box-shadow:0 0 0 0 rgba(255,39,39,.8);transform:scale(1);padding:20px}.cmprecallwarning{background-color:rgba(255,237,176,.86)!important;animation:cmp_pulse 2s infinite;border-radius:100px}.cmprecallwarning A.cmpboxrecalllink{height:100%}.cmprecallwarning:hover{background-color:#ffedb0!important}.cmprecallwarning2{background-color:#fff!important;animation:cmp_pulse2 1s infinite;margin-bottom:100px}.cmprecallwarning2:hover{background-color:#f4e1a8!important}.cmprecallwarning2 .cmpboxrecalllink{display:inline-block!important;width:30px!important;height:30px!important}.cmprecallwarningA{background-color:#fff3f3!important;padding:30px;animation:cmp_pulse2 1s infinite}.cmprecallwarningB{background-color:#ff9898!important;padding:30px;animation:cmp_pulse2 3s infinite}.cmptdchoice{width:100px}.cmponofftext{display:block;font-size:var(--x8pt);color:var(--clrText)}.cmppurposedescription{position:absolute;left:calc(50% - 400px);top:25%;background-color:var(--clrBackground);margin-left:auto;margin-right:auto;padding:20px;box-shadow:0 0 15px 0 rgba(0,0,0,.25);width:800px;max-width:75%;max-height:75%;overflow-y:auto}@media (max-width:820px){.cmppurposedescription{left:12%;top:12%}}.cmppurposedescrboxhl,.cmppurposedescrtext{font-size:var(--x11pt);color:var(--clrHeadline)}.cmppurposedescrtext{line-height:1.2em;color:var(--clrText);text-align:justify}.cmpageverifybox{max-width:300px;margin-left:auto;margin-right:auto}.cmpageverifybox SELECT.cmpageverify{display:inline-block;padding:3px;line-height:2em;font-size:var(--x11pt);border:0 solid #fff;margin:0 0 5px}.cmpageverifybox SELECT.cmpageverifyday,.cmpageverifybox SELECT.cmpageverifymonth{margin-left:10px}.cmpageverifytype1 SELECT.cmpageverify,.cmpageverifytype4 SELECT.cmpageverify{display:inline-block;width:100%}.cmpageverifytype2 SELECT.cmpageverify{display:inline-block;width:calc(50% - 10px)}.cmpageverifytype3 SELECT.cmpageverify{display:inline-block;width:calc(33% - 20px)}.cmpageverifybox INPUT.cmpagewrong,.cmpageverifybox SELECT.cmpagewrong{background-color:#f6592c;color:#fff}.cmpageverifyagetxt,.cmpageverifydaytxt,.cmpageverifymonthtxt,.cmpageverifyyeartxt{font-size:smaller}INPUT.cmpageverifyage,INPUT.cmpageverifyday,INPUT.cmpageverifymonth,INPUT.cmpageverifyyear{border:1px solid var(--clrTextSecondary);padding-left:.5rem;padding-right:.5rem;text-align:center;margin-left:2px;margin-right:2px;border-radius:2px}INPUT.cmpageverifyyear{width:5rem}INPUT.cmpageverifyage,INPUT.cmpageverifyday,INPUT.cmpageverifymonth{width:3rem}.cmpcookieinfobox,.cmpcookiesdescrbox{height:100%}.cmpcookieinfobox .cmpboxdetails,.cmpcookiesdescrbox .cmpboxdetails{display:flex;flex-direction:column;height:100%}@media (max-height:926px) and (max-width:480px) and (orientation:portrait){.cmpcookieinfobox,.cmpcookiesdescrbox{display:flex;flex-direction:column}.cmpcookieinfobox .cmpboxdetails,.cmpcookiesdescrbox .cmpboxdetails{display:contents}}.cmpcookieinfocontent h4,.cmpcookiesdescrboxcontent h4,.cmpcookiesdescrboxh2,.cmpcookiesdescrboxhl{font-size:var(--x11pt);color:var(--clrHeadline)}.cmpcookiesdescrtable{flex-grow:10;overflow-y:auto}.cmpcookieinfobox .cmpcookiesdescrboxcontent,.cmpcookiesdescrbox .cmpcookiesdescrboxcontent{flex-grow:1;flex-shrink:1;overflow:auto}.cmpcookieinfobox .cmpboxbtnsmore,.cmpcookiesdescrbox .cmpboxbtnsmore{flex-grow:0;flex-shrink:0}@media (max-width:321px),(max-height:321px){.cmpbox{font-size-adjust:.38!important;line-height:1.05em!important;padding:5px!important}}@media (max-height:450px) and (max-width:450px){.cmpbox{max-height:100%!important;max-width:100%!important;height:100%!important;width:100%!important}.cmpboxinner{flex-direction:column!important}.cmpboxbtns{min-height:auto!important}.cmpboxbtn,.cmpboxbtns{max-width:100%!important}}@media (max-height:600px) and (min-width:926px){.cmpbox3{height:100%}.cmpbox3 .cmpboxinner{display:flex;flex-direction:column}.cmpbox3 .cmpboxinner .cmpboxcontent{overflow:auto}}@media (max-width:414px) and (max-height:736px),(max-width:736px) and (max-height:414px){.cmpbox{padding:10px!important}}.cmpbox6 .cmpboxinner,.cmpbox7 .cmpboxinner{display:flex;flex-direction:column}.cmpbox6 .cmpboxcontent,.cmpbox7 .cmpboxcontent{flex-grow:1;overflow:auto}@media (max-height:926px) and (max-width:480px) and (orientation:portrait){.cmpbox{width:100%;max-height:60%;min-height:300px;height:300px;overflow:auto!important;-webkit-overflow-scrolling:auto!important;padding:15px!important}.cmpboxinner{display:flex;flex-direction:column}.cmpboxcontent{flex-grow:1;overflow:auto;-webkit-overflow-scrolling:auto}.cmpboxbtns{flex-grow:1}.cmpbox.cmpfullscreen{max-height:100%!important;height:100%!important}.cmpboxbtn{margin:5px}A.cmpmorelink:link{padding:3px}.cmpwelcomeprps{width:100%}}@media (max-width:926px) and (max-height:480px) and (orientation:landscape){.cmpbox{width:100%;max-height:90%;min-height:150px;height:350px;overflow:auto!important;-webkit-overflow-scrolling:auto!important;padding:15px!important}.cmpboxinner{display:flex;flex-direction:row}.cmpboxcontent{flex-grow:1;overflow:auto;-webkit-overflow-scrolling:auto}.cmpboxbtns{flex-grow:1;flex-shrink:1;min-height:50px;max-width:250px!important;width:100%}.cmpfullscreen .cmpboxbtns{flex-shrink:0;max-width:100%!important;width:100%}.cmpboxbtn{margin:5px}.cmpbox.cmpfullscreen{max-height:100%!important;height:100%!important}A.cmpmorelink:link{padding:3px}.cmpcornerbtn .cmpboxbtns{padding-top:50px}}@media (max-width:650px) and (min-width:570px){.cmpboxCustomMenu1 .cmpcookieinfotable-wrapper{display:block}.cmpboxCustomMenu1 .cmpcookieinfotable-header{margin-bottom:10px;display:block;grid-template-columns:none}.cmpboxCustomMenu1 .cmpcookieinfotable-body{display:block;grid-template-columns:none}.cmpboxCustomMenu1 .cmpcookieinfotable-cell,.cmpboxCustomMenu1 .cmpcookieinfotable-cellHeader{display:block;width:100%;box-sizing:border-box}.cmpboxCustomMenu1 .cmpcookieinfotable-row{display:flex;flex-direction:column;margin-bottom:10px;padding:10px}}@media (max-width:520px){.cmpcookieinfotable-wrapper{display:block}.cmpcookieinfotable-header{margin-bottom:10px}.cmpcookieinfotable-body,.cmpcookieinfotable-header{display:block;grid-template-columns:none}.cmpcookieinfotable-cell,.cmpcookieinfotable-cellHeader{display:block;width:100%;box-sizing:border-box}.cmpcookieinfotable-row{display:flex;flex-direction:column;margin-bottom:10px;padding:10px}}.cmpcookieinfotable{width:100%}.cmpcookieinfotable td,.cmpcookieinfotable th{text-align:left}.cmpcookieinfotable_descr{font-size:smaller;padding-bottom:10px}.cmppurposebox2,.cmpvendorbox2{text-align:left!important;position:relative;padding-right:20px}.cmpbox:dir(rtl) .cmppurposebox2,.cmpbox:dir(rtl) .cmpvendorbox2,.cmpbox[dir=rtl] .cmppurposebox2,.cmpbox[dir=rtl] .cmpvendorbox2{padding-right:0;padding-left:20px}.cmpvendorinfohl{font-weight:700;margin-top:15px}.cmpdatacategory{background-color:rgba(0,0,0,.2);padding:3px;border-radius:5px;margin-right:5px;line-height:2em}.cmplazypreviewiframe{position:relative;overflow:hidden;box-sizing:border-box;font-family:Arial,sans-serif;background-repeat:no-repeat;background-position:center;background-size:cover}.cmplazypreviewiframe *,.cmplazypreviewiframe>*{font-family:Arial,sans-serif;text-decoration:none;box-sizing:border-box;border:0 solid #fff;vertical-align:middle}.cmplazypreviewmsg{margin:0;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);background-color:rgba(255,255,255,.95);width:100%;padding:20px}.cmplazypreviewmsg *{font-size:var(--x11pt);color:#242424}.cmplazypreviewmsginner{max-width:90%;width:640px;margin-left:auto;margin-right:auto}.cmplazyhl{font-weight:700}.cmplazybtn,.cmplazycb{text-align:center}.cmplazycb{font-size:var(--x10pt)}.cmphelpicon,.cmpsubvendoricon{width:16px;height:16px;max-width:16px;max-height:16px;margin-right:2px;margin-left:4px}.cmpsubvendoricon{width:14px;height:14px;max-width:14px;max-height:14px}.cmpbox:dir(rtl) .cmphelpicon,.cmpbox[dir=rtl] .cmphelpicon{margin-right:4px;margin-left:2px}.cmphelpicon path,.cmpsubvendoricon path{fill:#666}.cmpvendoricon{width:16px;height:16px;max-width:16px;max-height:16px;padding:0;margin:0 2px 0 4px}.cmpvendboxclose,A.cmpvendboxclose,A.cmpvendboxclose:link{position:absolute;right:5px;top:5px}.cmpvendboxclose svg{width:16px;height:16px;fill:#666}.cmplisticon{width:14px;height:14px;margin-top:3px;margin-right:5px;flex-shrink:0}.cmpbox:dir(rtl) .cmplisticon,.cmpbox[dir=rtl] .cmplisticon{margin-right:0;margin-left:5px}.cmpcarousel{display:flex;flex-direction:column;overflow:hidden}.cmpboxnavi.cmpcarouselexpandnavi,.cmpboxnavi.cmpcarouselnavi{width:100%;float:none}.cmpcarouselcontent{padding:15px}.cmpboxdetailscarousel{float:none;width:100%;padding:0}@media (max-width:926px) and (max-height:480px) and (orientation:landscape){.cmpboxdetailscarousel{display:block;overflow-y:auto}.cmpcarouselexpandnavi,.cmpcarouselnavi{overflow:auto}}.cmpcarouselnavi .cmpboxnaviitem{position:relative}.cmpcarouselnavi .cmpboxnaviitem:after,.cmpcarouselnavi .cmpboxnaviitem:before{content:"";position:absolute;top:calc(50% - 2px);width:6px;border:1px solid var(--clrText)}.cmpcarouselnavi .cmpboxnaviitem:before{transform:rotateZ(45deg);-webkit-transform:rotateZ(-45deg);right:10px}.cmpcarouselnavi .cmpboxnaviitem:after{transform:rotateZ(-45deg);-webkit-transform:rotateZ(45deg);right:15px}.cmpcarouselnavi .cmpboxnaviitemactive:after,.cmpcarouselnavi .cmpboxnaviitemactive:before{content:"";position:absolute;top:calc(50% - 2px);width:6px;border:1px solid var(--clrTextSecondary)}.cmpcarouselnavi .cmpboxnaviitemactive:before{transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);right:10px}.cmpcarouselnavi .cmpboxnaviitemactive:after{transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);right:15px}@media print{.cmpbox{display:none!important;visibility:hidden!important}}.cmpboxcontentpass .cmpmore{color:#666}.cmpcontentpasslogin{flex:0 0 auto!important}.cmpcontentpassloginlogo{margin-right:.4em!important;margin-left:.75em!important;margin-bottom:-.1em!important;height:.9em!important}.cmpcontentpassboxmiddle,.cmpcontentpassboxmiddle2{display:flex}.cmpcontentpassboxleft{width:50%;margin-right:30px}.cmpcontentpassboxright,.cmpwelectboxright{width:50%;margin-left:30px}.cmpcontentpassboxmiddle.cmpcontentpass.cmpwelect .cmpcontentpassboxleft,.cmpcontentpassboxmiddle.cmpcontentpass.cmpwelect .cmpcontentpassboxright,.cmpcontentpassboxmiddle.cmpcontentpass.cmpwelect .cmpwelectboxright,.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxleft,.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxright,.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpwelectboxright{width:calc(33% - 20px)}.cmpcontentpassboxmiddle.cmpcontentpass.cmpwelect .cmpcontentpassboxright,.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxright{margin-left:0}.cmpcontentpassboxbottom,.contentpassboxstyle2 .cmpcontentpassboxleft+.cmpcontentpassboxright,.contentpassboxstyle2 .cmpcontentpassboxleft+.cmpwelectboxright,.contentpassboxstyle3 .cmpcontentpassboxleft+.cmpcontentpassboxright,.contentpassboxstyle3 .cmpcontentpassboxleft+.cmpwelectboxright{margin-top:60px}.cmpcontentpassboxbottom2{margin-bottom:60px}.contentpassboxstyle2,.contentpassboxstyle3{display:flex;flex-direction:row}.contentpassboxstyle2 .cmpcontentpassboxbottom2,.contentpassboxstyle3 .cmpcontentpassboxbottom2{margin-bottom:0}.contentpassboxstyle2 .cmpcontentpassboxmiddle2{width:calc(50% - 30px);margin-right:30px;display:flex;flex-direction:column}.contentpassboxstyle2 .cmpcontentpassboxbottom,.contentpassboxstyle3 .cmpcontentpassboxmiddle2{width:calc(50% - 30px);margin-left:30px;display:flex;flex-direction:column}.contentpassboxstyle2 .cmpcontentpassboxbottom{margin-top:0}.contentpassboxstyle3 .cmpcontentpassboxbottom2{width:calc(50% - 30px);margin-top:0;margin-right:30px;display:flex;flex-direction:column}.contentpassboxstyle2 .cmpcontentpassboxleft,.contentpassboxstyle2 .cmpcontentpassboxright,.contentpassboxstyle2 .cmpwelectboxright,.contentpassboxstyle3 .cmpcontentpassboxleft,.contentpassboxstyle3 .cmpcontentpassboxright,.contentpassboxstyle3 .cmpwelectboxright{width:100%!important;margin:0}.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxleft,.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxright,.cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpwelectboxright,.cmpcontentpassboxmiddle3.cmpcontentpass.cmpwelect .cmpcontentpassboxleft,.cmpcontentpassboxmiddle3.cmpcontentpass.cmpwelect .cmpcontentpassboxright,.cmpcontentpassboxmiddle3.cmpcontentpass.cmpwelect .cmpwelectboxright{margin-top:30px}.contentpassboxstyle1 .cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxleft,.contentpassboxstyle1 .cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpcontentpassboxright,.contentpassboxstyle1 .cmpcontentpassboxmiddle2.cmpcontentpass.cmpwelect .cmpwelectboxright,.contentpassboxstyle2 .cmpcontentpassboxleft,.contentpassboxstyle3 .cmpcontentpassboxleft{margin-top:0!important}.cmpcontentpassloginlogo{width:.9em}.cmpcontentpasssignuplogo,.cmpwelectlogo{width:.9em;height:.9em;margin-right:10px}.cmpwelectiframe{width:100%;height:640px;max-height:80vh;border:0 solid #fff;background-color:transparent}@media (max-height:926px) and (max-width:480px) and (orientation:portrait),(max-height:480px) and (max-width:926px) and (orientation:landscape){.cmpcontentpassbox.contentpassboxstyle2,.cmpcontentpassbox.contentpassboxstyle3{display:block!important}.cmpcontentpassbox.contentpassboxstyle2 .cmpcontentpassboxmiddle,.cmpcontentpassbox.contentpassboxstyle2 .cmpcontentpassboxmiddle2,.cmpcontentpassbox.contentpassboxstyle3 .cmpcontentpassboxmiddle,.cmpcontentpassbox.contentpassboxstyle3 .cmpcontentpassboxmiddle2,.cmpcontentpassboxmiddle,.cmpcontentpassboxmiddle2{display:block!important;margin-right:0!important;margin-left:0!important;width:100%!important}.cmpcontentpassboxleft{width:100%!important;margin-right:0!important;margin-top:30px}.cmpcontentpassboxright{width:100%!important;margin-left:0!important;margin-top:30px}.cmpcontentpassbox .cmpcontentpassboxmiddle .cmpcontentpassboxbottom,.cmpcontentpassbox .cmpcontentpassboxmiddle .cmpcontentpassboxbottom2,.cmpcontentpassbox .cmpcontentpassboxmiddle2 .cmpcontentpassboxbottom,.cmpcontentpassbox .cmpcontentpassboxmiddle2 .cmpcontentpassboxbottom2,.cmpcontentpassboxbottom,.cmpcontentpassboxbottom2{display:block!important;width:100%!important;margin-top:30px!important;margin-left:0!important;margin-right:0!important}.cmpwelectboxright{width:100%!important;margin-left:0!important;margin-top:30px}.cmpboxcontentpass .cmpboxinner{display:flex!important;flex-direction:column!important}}.cmpvendortogglebox{display:flex}.cmpvendortoggleboxd{display:flex;padding-right:20px}.cmppurposetoggleboxd>span,.cmpvendortoggleboxd>span{align-self:center;padding-right:10px}.cmppurposetoggleboxd>a,.cmpvendortoggleboxd>a{align-self:center}.cmppurposetoggleboxd .cmponofftext,.cmpvendortoggleboxd .cmponofftext{display:inline}.cmppurposetogglebox{display:flex}.cmppurposetoggleboxd{display:flex;padding-right:20px}.cmpexplicitconsentbtn{padding:3px 8px;font-size:var(--x9pt);-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.5);box-shadow:0 0 5px 0 rgba(0,0,0,.5);border-radius:3px}span.cmptooltiplink{display:inline-block;position:relative;border-bottom:1px dotted var(--clrText);color:inherit}.cmptooltip{min-width:220px;max-width:400px;position:absolute;background-color:#fff;top:calc(100% + 10px);left:50%;transform:translate(-50%,0);padding:3px;border-radius:3px;z-index:99999999;border:1px solid var(--clrTextSecondary);box-shadow:0 1px 8px rgba(0,0,0,.2);visibility:hidden;opacity:0;transition:opacity .8s}span.cmptooltiplink:active .cmptooltip,span.cmptooltiplink:focus .cmptooltip,span.cmptooltiplink:hover .cmptooltip{visibility:visible;opacity:1}i.cmptooltiparrow{position:absolute;bottom:100%;left:50%;margin-left:-12px;width:24px;height:12px;overflow:hidden}i.cmptooltiparrow::after{content:"";position:absolute;width:12px;height:12px;left:50%;transform:translate(-50%,50%) rotate(45deg);background-color:var(--clrBackground);border:1px solid var(--clrTextSecondary);box-shadow:0 1px 8px rgba(0,0,0,.1)}.cmpboxbtnnocorner{z-index:99999}.cmpboxbtncustomcorner svg,.cmpboxbtnnocorner svg,.cmpboxbtnsavecorner svg,.cmpboxbtnyescorner svg{fill:currentColor}.cmpboxcookieicon{display:block;float:right;width:200px;margin-top:50px}.cmpboxcookieicon svg,.cmpboxcookieiconsilhouette svg.cmpcookieiconsilhouette{width:100%;height:auto}.cmpboxcookieiconsilhouette{position:absolute;right:0;top:0;width:50%;z-index:-3;max-height:100%;overflow:hidden}.cmpboxcookieiconsilhouette .silhouetteFill{fill:var(--clrButton);opacity:.1}@media (max-height:926px) and (max-width:480px) and (orientation:portrait){.cmpboxcookieicon{width:100px}}.cmpsliderbox{transition:all .8s ease;position:relative;z-index:0}.cmpsliderpanel,.cmpsliderpointer{position:absolute;top:.6em;left:0;margin-left:45px;border-radius:30px;width:1px;background-color:var(--clrButton)}.cmpsliderpointer{transition:all .8s ease;padding-left:14px;padding-top:14px;height:1px;z-index:10}.cmpsliderpanel{padding-left:5px;height:100%;opacity:.1;z-index:1}.cmpsliderpanel.cmpsliderpanelActive{height:0;opacity:.8;top:calc(.6em + 4px);z-index:2}.cmpsliderstationouter{position:relative}.cmpsliderstation{position:absolute;top:.7em;left:0;margin-left:45px;border-radius:30px;padding-left:12px;padding-top:12px;width:1px;height:1px;background-color:var(--clrButton);opacity:.5;z-index:3}.cmpslideritemActive .cmpsliderstation{opacity:.8;z-index:4}.cmpslideritem{margin-left:90px;margin-bottom:10px;padding:5px;border-radius:5px;cursor:pointer}.cmpslideritem .cmpsliderhl,.cmpslideritem .cmpslidertxt{opacity:.8}.cmpslideritemActive .cmpsliderhl,.cmpslideritemActive .cmpslidertxt{opacity:1}.cmpslideritem,.cmpslideritemouterActive{position:relative}.cmpslideritem:last-of-type{margin-bottom:0}.cmpsliderhl{color:var(--clrHeadline);font-size:var(--x11pt);font-weight:700}.cmpslidertxt{color:var(--clrText)}.cmpslidercenter{-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}.cmplastupdate{display:block;position:absolute;padding:6px 3px;text-align:right;left:32px;bottom:3px;font-size:var(--x7pt);line-height:2px;color:var(--clrText);opacity:.5}.cmplastupdate:hover{opacity:1}.cmpboxtxtdivpurposeicon{display:inline-block}svg.cmpexternallinkicon,svg.cmpicon,svg.cmpicosvgfill,svg.cmppurposeicon,svg.cmptcficon{fill:currentColor;height:1em;width:1em;margin-right:.5em}svg.cmpexternallinkicon,svg.cmptcficon{margin-left:.5em}.cmpbox u{text-decoration:underline!important}.cmpfadein{opacity:0;transition-property:opacity;transition-duration:.9s;transition-timing-function:ease}.cmpflyin{left:-600px!important;right:600px!important}.cmpflyinR{left:calc(100vw + 600px)!important;right:calc(-100vw - 600px)!important}.cmpflyinT{top:-600px!important;bottom:calc(100vh + 1200px)!important}.cmpflyinB{top:calc(100vh + 600px)!important;bottom:calc(-100vh - 1200px)!important}.cmpflyin2,.cmpflyin3{transition-property:left,right;transition-duration:1.9s;transition-timing-function:ease}.cmpflyin3{transition-property:top,bottom}.cmppolicybox{display:flex;flex-direction:column;height:100%}.cmppolicybox .cmppolicycontent{flex-grow:1;flex-shrink:1;overflow:auto}.cmppolicybox .cmpboxbtnsmore{flex-grow:0;flex-shrink:0}.cmpadchoiceslearnmorelink,.cmpadchoicesoolink{display:flex;align-items:center;justify-content:center;width:100%}.cmpadchoicesoolink{color:var(--clrButtonText);background-color:var(--clrButton);font-weight:700;margin:0 0 10px}.cmpadchoiceslearnmorelink{color:var(--clrButton);background-color:var(--clrButtonText);margin:0}.cmpqrcontent,.cmpqrcontentalternative{text-align:center}.cmpqrcontent canvas,.cmpqrcontent img{border:5px solid #fff;border-radius:5px}.cmpqrouter{position:relative}.cmpqrspinner{width:100%;height:140px;align-items:center;justify-content:center;position:absolute;bottom:-70px;right:-120px}.cmpqrspinner .cmploadingspinner{width:60px;height:60px}.cmpqrspinner .cmploadingspinner div{border:6px solid var(--clrHeadline);border-color:var(--clrHeadline) transparent transparent transparent}.cmpboxdsaouter{max-width:800px;margin-left:auto;margin-right:auto}.cmpboxdsaaddetailouter,.cmpboxdsaaddetailoutersingle{border:1px solid silver;border-radius:5px;margin-bottom:50px}.cmpboxdsaaddetailouter{display:flex}.cmpboxdsaaddetail,.cmpboxdsaaddetailimg{padding:30px}.cmpboxdsaaddetailouter .cmpboxdsaaddetail,.cmpboxdsaaddetailouter .cmpboxdsaaddetailimg{width:100%}.cmpboxdsaaddetailimg{align-self:center;text-align:center}.cmpboxdsaaddetailimg img{max-width:100%;max-height:100%;width:100%}.cmpboxdsaaddetailline{margin-bottom:15px}.cmpboxdsaaddetailhl{color:var(--clrHeadline);font-weight:700;font-size:var(--x11pt)}.cmpboxdsaaddetailname{color:var(--clrText);font-size:var(--x8pt);opacity:.8;margin-bottom:.5em}.cmpboxdsaaddetaildescr,.cmpboxdsaaddetaildescritem{color:var(--clrText);font-size:var(--x10pt)}.cmpboxdsaaddetaildescrimg{text-align:center}.cmpboxdsaaddetaildescrimg img{width:100%;max-width:380px;max-height:600px}.cmpboxdsaaddetaildescritem{padding-left:2.5em;margin-left:.5em;padding-bottom:10px;padding-top:5px;background-repeat:no-repeat;background-size:24px;background-position:0 5px}.cmpboxDSA .cmpboxinner{overflow-y:auto}.cmpboxDSA .cmpclose,.cmpclose svg{fill:var(--clrHeadline);width:20px;height:20px;display:block}.cmpboxDSA .cmpboxh2 img{vertical-align:text-bottom;height:1.2em;margin-right:.5em}.cmpboxDSA .cmpboxdsaaddetaildescr .cmpboxbtn.cmpboxbtnyes{margin-left:0}.cmpboxdsaview{height:1.3em;margin-left:.5em}@media (max-height:926px) and (max-width:480px) and (orientation:portrait){.cmpboxdsaaddetailouter{display:block}.cmpboxdsaaddetaildescrimg img{max-width:100%}}@keyframes cmploadingspinner{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes cmploadingspinner21{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes cmploadingspinner23{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes cmploadingspinner22{0%{transform:translate(0,0)}to{transform:translate(24px,0)}}.skippmsg,.skippmsg *{--clrBackground:#FFFFFF;--clrHeadline:#3B3B3B;--clrText:#5F5F5F;--clrTextSecondary:#CFCFCF;--clrButton:#3276AE;--clrButtonText:#FFFFFF;--clrLink:#666666;--clrHighlight:#FFFDCD}.cmpspinnercenter{text-align:center!important}.cmploadingspinner{display:inline-block;position:relative;width:120px;height:120px;border-radius:50%;overflow:hidden}.cmploadingspinner div{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border:12px solid var(--clrButton);border-radius:50%;animation:cmploadingspinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--clrButton) transparent transparent transparent}.cmploadingspinner div:nth-child(1){animation-delay:-.45s}.cmploadingspinner div:nth-child(2){animation-delay:-.3s}.cmploadingspinner div:nth-child(3){animation-delay:-.15s}.cmploadingspinner2{display:inline-block;position:relative;width:80px;height:80px}.cmploadingspinner2 div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:var(--clrButton);animation-timing-function:cubic-bezier(0,1,1,0)}.cmploadingspinner2 div:nth-child(1){left:8px;animation:cmploadingspinner21 .6s infinite}.cmploadingspinner2 div:nth-child(2),.cmploadingspinner2 div:nth-child(3){left:8px;animation:cmploadingspinner22 .6s infinite}.cmploadingspinner2 div:nth-child(3){left:32px}.cmploadingspinner2 div:nth-child(4){left:56px;animation:cmploadingspinner23 .6s infinite}.cmpcookieinfotable-container{position:relative;width:100%;overflow-x:auto}.cmpcookieinfotable-wrapper{display:grid;width:100%}.cmpcookieinfotable-body,.cmpcookieinfotable-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--clrTextSecondary)}.cmpcookieinfotable-body{background-color:var(--clrBackground)}.cmpcookieinfotable-row{display:contents;margin-bottom:5px}.cmpcookieinfotable-cell,.cmpcookieinfotable-cellHeader{position:relative;padding:10px;border-bottom:1px solid var(--clrTextSecondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-align:left}.cmpcookieinfotable-cellHeader{font-weight:700}.cmpcookieinfotable-description{grid-column:1/-1;background-color:#f3f3f3;padding:15px;margin-top:10px;margin-bottom:10px;border-top:2px solid var(--clrTextSecondary);border-bottom:2px solid var(--clrTextSecondary)}
/*CLIENT CUSTOM CSS*/#cmpbox span {
pointer-events: auto;
}
.cmplogo {
display: block!important;
}
.cmpboxrecall {
display: none!important;
}
@media (max-height: 480px) and (max-width: 926px) and (orientation: landscape) {
.cmplogo {
top: auto!important;
bottom: 0;
}
}
.cmplogo IMG {
margin-top: -22px;
}
.cmpbox.cmpfullscreen {
overflow: auto;
max-height: 800px !important;
max-width: 800px !important;
transform: translate(-50%, -50%) !important;
left: 50%;
top: 50%;
}
@media (max-height: 926px) and (max-width: 480px) and (orientation: portrait) {
.cmpboxinner {
padding-top: 35px;
}
}
@media (max-height: 480px) and (max-width: 926px) and (orientation: landscape) {
.cmplogo {
top: 20px!important;
}
.cmpboxinner {
padding-top: 35px;
}
}.cmplogo {right: 20px; top: 20px;}
.cmpbox:dir(rtl) .cmplogo, .cmpbox[dir="rtl"] .cmplogo {left: 20px; top: 20px; right:auto;}@media (max-width: 570px){.cmplogo{ display: none !important;}}
@media (max-height: 926px) and (max-width: 480px) and (orientation: portrait){.cmplogo{display: none !important;}}
@media (max-width: 926px) and (max-height: 480px) and (orientation: landscape){.cmplogo{display: none !important;}} *.cmpboxhl{font-size:12pt;color:#5F5F5F;padding-bottom:10px;font-weight:bold;} *.cmpboxtxt, td.cmpvendname{font-size:11pt;color:#5F5F5F;}.cmpwelcomeprpstxt, .cmpwelcomeprpstxt A:link, .cmpwelcomeprpsbtn, .cmpwelcomeprpsbtn A:link, .cmpwelcomeprpsbtn span{font-size:11pt;color:#5F5F5F;} *.cmpboxtxt{padding-bottom:20px;}.cmpwelcomeprpstxt, .cmpwelcomeprpstxt A:link, .cmpwelcomeprpsbtn, .cmpwelcomeprpsbtn A:link, .cmpwelcomeprpsbtn span{font-size:11pt;color:#5F5F5F;}.cmpboxwelcomeprps{margin-bottom:20px;}.cmpmore{font-size:11pt;} .cmpsavemychoice, .cmpsavemychoice label{font-size:11pt;color:#5F5F5F;} .cmpmorelink, A.cmpmorelink, A.cmpmorelink:link, .cmpmore A, .cmpmore A:link{font-size:11pt;color:#5F5F5F;} .cmpsavemychoice, .cmpsavemychoice label{font-size:11pt;color:#5F5F5F;} *.cmpboxbtnyes, A.cmpboxbtnyes, A.cmpboxbtnyes:link{font-size:11pt;color:#FFFFFF;background-color:#229CCA;} *.cmpboxbtnno, A.cmpboxbtnno, A.cmpboxbtnno:link{font-size:11pt;color:#FFFFFF;background-color:#229CCA;} *.cmpboxbtnsave, A.cmpboxbtnsave, A.cmpboxbtnsave:link{font-size:11pt;color:#FFFFFF;background-color:#229CCA;} *.cmpboxbtncustom, A.cmpboxbtncustom, A.cmpboxbtncustom:link{font-size:11pt;color:#FFFFFF;background-color:#229CCA;} .cmpfullscreen *.cmpboxbtnyes, .cmpfullscreen A.cmpboxbtnyes, .cmpfullscreen A.cmpboxbtnyes:link{font-size:11pt;color:#FFFFFF;background-color:#229CCA;} .cmpfullscreen *.cmpboxbtnaccept, .cmpfullscreen A.cmpboxbtnaccept, .cmpfullscreen A.cmpboxbtnaccept:link{font-size:6px;color:#FFFFFF;background-color:#FFFFFF;} .cmpfullscreen *.cmpboxbtnreject, .cmpfullscreen A.cmpboxbtnreject, .cmpfullscreen A.cmpboxbtnreject:link{font-size:6px;color:#FFFFFF;background-color:#FFFFFF;} *.cmpexplicitconsentbtn, A.cmpexplicitconsentbtn, A.cmpexplicitconsentbtn:link, *.cmpexplicitconsentbtnon, A.cmpexplicitconsentbtnon, A.cmpexplicitconsentbtnon:link{color:#FFFFFF;background-color:#229CCA;} *.cmpexplicitconsentbtnoff, A.cmpexplicitconsentbtnoff, A.cmpexplicitconsentbtnoff:link{color:#FFFFFF;background-color:#229CCA;} .cmpfullscreen .cmpmorelink, .cmpfullscreen A.cmpmorelink, .cmpfullscreen A.cmpmorelink:link{font-size:11pt;color:#5F5F5F;} .cmpboxbtn{border-color:#FFFFFF;}*.cmpboxbtnyes svg{fill:currentColor;width:1em;height:1em;}*.cmpboxbtnno svg{fill:currentColor;width:1em;height:1em;}*.cmpboxbtnaccept svg{fill:currentColor;width:1em;height:1em;vertical-align: middle;}*.cmpboxbtnreject svg{fill:currentColor;width:1em;height:1em;vertical-align: middle;} *.cmpboxbtnyescustomchoices *.cmpimg, *.cmpboxbtnyescustomchoices svg{display:none !important;} *.cmpboxbtnyescustomchoices{padding-left:0px;} *.cmpbox{background-color:#FFFFFF;border-top:solid 12px #229CCA;border-right:solid 0px #FFFFFF;border-bottom:solid 5px #FFFFFF;border-left:solid 0px #FFFFFF;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;} *.cmpclose{display:none;} .cmpfullscreen *.cmpboxhl{font-size:12pt;color:#FFFFFF;font-weight:bold;} .cmpfullscreen *.cmpprpshl{font-size:12pt;color:#FFFFFF;font-weight:bold;} .cmpfullscreen *.cmpboxtxt, .cmpfullscreen, .cmpprpsdescr, td.cmpvendname, .cmpfullscreen A.cmpvendurl, .cmpfullscreen A.cmpvendurl:link{font-size:11pt;color:#FFFFFF;} .cmpfullscreen.cmpbox{background-color:#FFFFFF;} .cmpboxnaviitemactive, TD.cmpallvend, TH.cmpallvend, TD.cmpallprps, TH.cmpallprps{background-color:#FFFFFF;}@media (max-height: 926px) and (max-width: 480px) and (orientation: portrait) {.cmpbox{overflow:auto;max-width:100%; min-width:100%; }}@media (max-height: 480px) and (max-width: 926px) and (orientation: landscape) {.cmpbox{overflow:auto;max-height:100%; min-height:100%;}}.cmpbox{border-radius:3px;}.cmptogglespan svg{width:40px; height:20px;}.cmptogglespan svg .cmpsvggreenfill{fill:#5AB14B !important;} .cmptogglespan svg .cmpsvggreenstroke{stroke:#5AB14B !important;}.cmptogglespan svg .cmpsvgredfill{fill:#F64C4E !important;} .cmptogglespan svg .cmpsvgredstroke{stroke:#F64C4E !important;}.cmptogglespan svg .cmpsvgwhitefill{fill:#FFFFFF !important;} .cmptogglespan svg .cmpsvgwhitestroke{stroke:#FFFFFF !important;}.cmptogglespan svg .cmpsvgblackfill{fill:#111111 !important;} .cmptogglespan svg .cmpsvgblackstroke{stroke:#111111 !important;}.cmptogglespan svg .cmpsvggrayfill{fill:#777777 !important;} .cmptogglespan svg .cmpsvggraystroke{stroke:#777777 !important;}.cmptogglespan svg .cmpsvggray2fill{fill:#AAAAAA !important;} .cmptogglespan svg .cmpsvggray2stroke{stroke:#AAAAAA !important;}.cmptogglespan svg .cmpsvgsilverfill{fill:#E5E5E5 !important;} .cmptogglespan svg .cmpsvgsilverstroke{stroke:#E5E5E5 !important;}.cmptogglespan svg .cmpsvgsilver2fill{fill:#DDDDDD !important;} .cmptogglespan svg .cmpsvgsilver2stroke{stroke:#DDDDDD !important;}.cmpboxnaviitem{color: #5F5F5F !important;}.cmpboxnaviitemactive{color: #5F5F5F !important;}.cmpboxtxtcustomcoices{color: #5F5F5F !important;}.cmpprpsdescr{color: #5F5F5F !important;}.cmpprpshl{color: #5F5F5F !important;}.cmpvendname{color: #5F5F5F !important;}</style><iframe name="googlefcInactive" src="about:blank" style="display: none; width: 0px; height: 0px; border: none; z-index: -1000; left: -1000px; top: -1000px;"></iframe><iframe name="googlefcLoaded" src="about:blank" style="display: none; width: 0px; height: 0px; border: none; z-index: -1000; left: -1000px; top: -1000px;"></iframe></body></html>