\r\n 
\r\n
\r\n \r\n
\r\n {Strings().header_section_lets_play}
\r\n {Strings().header_section_characters}
\r\n {Strings().header_section_development}
\r\n \r\n \r\n 
\r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n 
\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n )\r\n}","import * as React from 'react';\r\nimport '../css/splash.css';\r\nimport { useAnimation } from '../hooks/animation';\r\n\r\nexport default function Splash() {\r\n useAnimation(() => ({\r\n target: 'splash-container',\r\n anchor: { start: 'header-scroll-anchor' },\r\n keyframes: {\r\n 100: { top: { from: 0, to: parseInt(getComputedStyle(document.documentElement)\r\n .getPropertyValue('--splash-parallax')), unit: 'vw' } },\r\n }\r\n }));\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n}","import * as React from 'react';\r\nimport '../css/store-badge.css';\r\nimport { getLanguage } from '../strings';\r\n\r\nconst EXTENSIONS = {\r\n app_store: 'svg',\r\n google_play: 'png',\r\n};\r\n\r\nexport default function StoreBadge({ store }) {\r\n let lang = getLanguage();\r\n let ext = EXTENSIONS[store];\r\n\r\n return (\r\n 
\r\n )\r\n}","import * as React from 'react';\r\nimport '../css/lets-play.css';\r\nimport Strings from '../strings';\r\nimport StoreBadge from '../components/StoreBadge';\r\n\r\nexport default function LetsPlay() {\r\n return (\r\n \r\n \r\n\r\n 
\r\n
\r\n )\r\n}","import * as React from 'react';\r\nimport '../css/characters.css';\r\nimport { useAnimation } from '../hooks/animation';\r\nimport Strings from '../strings';\r\n\r\nexport default function Characters() {\r\n useCharAnimations();\r\n\r\n return (\r\n {Strings().lets_play_title}
\r\n \r\n \r\n \r\n {Strings().lets_play_text_2}
\r\n \r\n \r\n\r\n
\r\n )\r\n}\r\n\r\nconst useCharAnimations = () => {\r\n useAnimation({\r\n target: 'char-box-1',\r\n anchor: {\r\n start: 'char-scroll-anchor-1',\r\n end: 'char-scroll-anchor-1',\r\n onBefore: hideChar,\r\n onAfter: showChar,\r\n }\r\n });\r\n\r\n useAnimation({\r\n target: 'char-box-2',\r\n anchor: {\r\n start: 'char-scroll-anchor-2',\r\n end: 'char-scroll-anchor-2',\r\n onBefore: hideChar,\r\n onAfter: showChar,\r\n }\r\n });\r\n\r\n useAnimation({\r\n target: 'char-box-3',\r\n anchor: {\r\n start: 'char-scroll-anchor-3',\r\n end: 'char-scroll-anchor-3',\r\n onBefore: hideChar,\r\n onAfter: showChar,\r\n }\r\n });\r\n\r\n useAnimation({\r\n target: 'char-description-1',\r\n anchor: {\r\n end: 'char-name-1',\r\n onBetween: () => playChar(1),\r\n onBefore: () => pauseChar(1),\r\n onAfter: () => pauseChar(1),\r\n }\r\n });\r\n\r\n useAnimation({\r\n target: 'char-description-2',\r\n anchor: {\r\n end: 'char-name-2',\r\n onBetween: () => playChar(2),\r\n onBefore: () => pauseChar(2),\r\n onAfter: () => pauseChar(2),\r\n }\r\n });\r\n\r\n useAnimation({\r\n target: 'char-description-3',\r\n anchor: {\r\n end: 'char-name-3',\r\n onBetween: () => playChar(3),\r\n onBefore: () => pauseChar(3),\r\n onAfter: () => pauseChar(3),\r\n }\r\n });\r\n}\r\n\r\nconst showChar = (el) => {\r\n el.classList.remove('char-hidden');\r\n}\r\n\r\nconst hideChar = (el) => {\r\n el.classList.add('char-hidden');\r\n}\r\n\r\nconst playChar = (id) => {\r\n let video = document.getElementById(`char-video-${id}`);\r\n if (video.paused) {\r\n video.play();\r\n }\r\n}\r\n\r\nconst pauseChar = (id) => {\r\n let video = document.getElementById(`char-video-${id}`);\r\n if (!video.paused) {\r\n video.pause();\r\n }\r\n}","import * as React from 'react';\r\nimport '../css/development.css';\r\nimport Strings from '../strings';\r\n\r\nexport default function Development() {\r\n return (\r\n {Strings().characters_description}
\r\n \r\n {Strings().characters_main_text}
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {Strings().characters_1_name}
\r\n {Strings().characters_1_description}
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {Strings().characters_2_name}
\r\n {Strings().characters_2_description}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {Strings().characters_3_name}
\r\n {Strings().characters_3_description}
\r\n \r\n \r\n
\r\n )\r\n}","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nexport default function _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n var target = objectWithoutPropertiesLoose(source, excluded);\n var key, i;\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n return target;\n}","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}","import * as React from 'react';\r\n\r\nexport default function DiscordIcon() {\r\n return (\r\n \r\n )\r\n}","import * as React from 'react';\r\nimport '../css/discord-button.css';\r\nimport Strings from '../strings';\r\nimport DiscordIcon from './DiscordIcon';\r\n\r\n/**\r\n * @param {{\r\n * color: 'light'|'dark',\r\n * size: 'regular'|'large'\r\n * }} props\r\n */\r\nexport default function DiscordButton({ color, size, ...rest }) {\r\n const realSize = size || 'regular';\r\n const buttonClassName = `discord-button ${color} ${realSize}`;\r\n const textClassName = `discord-button-text ${color} ${realSize}`;\r\n\r\n return (\r\n \r\n {Strings().development_title}
\r\n {Strings().development_description}
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}","export default function _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}","export default function _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import arrayWithHoles from \"./arrayWithHoles.js\";\nimport iterableToArrayLimit from \"./iterableToArrayLimit.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableRest from \"./nonIterableRest.js\";\nexport default function _slicedToArray(arr, i) {\n return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();\n}","export default function _iterableToArrayLimit(arr, i) {\n var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"];\n if (null != _i) {\n var _s,\n _e,\n _x,\n _r,\n _arr = [],\n _n = !0,\n _d = !1;\n try {\n if (_x = (_i = _i.call(arr)).next, 0 === i) {\n if (Object(_i) !== _i) return;\n _n = !1;\n } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);\n } catch (err) {\n _d = !0, _e = err;\n } finally {\n try {\n if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return;\n } finally {\n if (_d) throw _e;\n }\n }\n return _arr;\n }\n}","'use strict';\n\nexport default function bind(fn, thisArg) {\n return function wrap() {\n return fn.apply(thisArg, arguments);\n };\n}\n","'use strict';\n\nimport bind from './helpers/bind.js';\n\n// utils is a library of generic helper functions non-specific to axios\n\nconst {toString} = Object.prototype;\nconst {getPrototypeOf} = Object;\n\nconst kindOf = (cache => thing => {\n const str = toString.call(thing);\n return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());\n})(Object.create(null));\n\nconst kindOfTest = (type) => {\n type = type.toLowerCase();\n return (thing) => kindOf(thing) === type\n}\n\nconst typeOfTest = type => thing => typeof thing === type;\n\n/**\n * Determine if a value is an Array\n *\n * @param {Object} val The value to test\n *\n * @returns {boolean} True if value is an Array, otherwise false\n */\nconst {isArray} = Array;\n\n/**\n * Determine if a value is undefined\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if the value is undefined, otherwise false\n */\nconst isUndefined = typeOfTest('undefined');\n\n/**\n * Determine if a value is a Buffer\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Buffer, otherwise false\n */\nfunction isBuffer(val) {\n return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor)\n && isFunction(val.constructor.isBuffer) && val.constructor.isBuffer(val);\n}\n\n/**\n * Determine if a value is an ArrayBuffer\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is an ArrayBuffer, otherwise false\n */\nconst isArrayBuffer = kindOfTest('ArrayBuffer');\n\n\n/**\n * Determine if a value is a view on an ArrayBuffer\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false\n */\nfunction isArrayBufferView(val) {\n let result;\n if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {\n result = ArrayBuffer.isView(val);\n } else {\n result = (val) && (val.buffer) && (isArrayBuffer(val.buffer));\n }\n return result;\n}\n\n/**\n * Determine if a value is a String\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a String, otherwise false\n */\nconst isString = typeOfTest('string');\n\n/**\n * Determine if a value is a Function\n *\n * @param {*} val The value to test\n * @returns {boolean} True if value is a Function, otherwise false\n */\nconst isFunction = typeOfTest('function');\n\n/**\n * Determine if a value is a Number\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Number, otherwise false\n */\nconst isNumber = typeOfTest('number');\n\n/**\n * Determine if a value is an Object\n *\n * @param {*} thing The value to test\n *\n * @returns {boolean} True if value is an Object, otherwise false\n */\nconst isObject = (thing) => thing !== null && typeof thing === 'object';\n\n/**\n * Determine if a value is a Boolean\n *\n * @param {*} thing The value to test\n * @returns {boolean} True if value is a Boolean, otherwise false\n */\nconst isBoolean = thing => thing === true || thing === false;\n\n/**\n * Determine if a value is a plain Object\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a plain Object, otherwise false\n */\nconst isPlainObject = (val) => {\n if (kindOf(val) !== 'object') {\n return false;\n }\n\n const prototype = getPrototypeOf(val);\n return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in val) && !(Symbol.iterator in val);\n}\n\n/**\n * Determine if a value is a Date\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Date, otherwise false\n */\nconst isDate = kindOfTest('Date');\n\n/**\n * Determine if a value is a File\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a File, otherwise false\n */\nconst isFile = kindOfTest('File');\n\n/**\n * Determine if a value is a Blob\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Blob, otherwise false\n */\nconst isBlob = kindOfTest('Blob');\n\n/**\n * Determine if a value is a FileList\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a File, otherwise false\n */\nconst isFileList = kindOfTest('FileList');\n\n/**\n * Determine if a value is a Stream\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Stream, otherwise false\n */\nconst isStream = (val) => isObject(val) && isFunction(val.pipe);\n\n/**\n * Determine if a value is a FormData\n *\n * @param {*} thing The value to test\n *\n * @returns {boolean} True if value is an FormData, otherwise false\n */\nconst isFormData = (thing) => {\n let kind;\n return thing && (\n (typeof FormData === 'function' && thing instanceof FormData) || (\n isFunction(thing.append) && (\n (kind = kindOf(thing)) === 'formdata' ||\n // detect form-data instance\n (kind === 'object' && isFunction(thing.toString) && thing.toString() === '[object FormData]')\n )\n )\n )\n}\n\n/**\n * Determine if a value is a URLSearchParams object\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a URLSearchParams object, otherwise false\n */\nconst isURLSearchParams = kindOfTest('URLSearchParams');\n\nconst [isReadableStream, isRequest, isResponse, isHeaders] = ['ReadableStream', 'Request', 'Response', 'Headers'].map(kindOfTest);\n\n/**\n * Trim excess whitespace off the beginning and end of a string\n *\n * @param {String} str The String to trim\n *\n * @returns {String} The String freed of excess whitespace\n */\nconst trim = (str) => str.trim ?\n str.trim() : str.replace(/^[\\s\\uFEFF\\xA0]+|[\\s\\uFEFF\\xA0]+$/g, '');\n\n/**\n * Iterate over an Array or an Object invoking a function for each item.\n *\n * If `obj` is an Array callback will be called passing\n * the value, index, and complete array for each item.\n *\n * If 'obj' is an Object callback will be called passing\n * the value, key, and complete object for each property.\n *\n * @param {Object|Array} obj The object to iterate\n * @param {Function} fn The callback to invoke for each item\n *\n * @param {Boolean} [allOwnKeys = false]\n * @returns {any}\n */\nfunction forEach(obj, fn, {allOwnKeys = false} = {}) {\n // Don't bother if no value provided\n if (obj === null || typeof obj === 'undefined') {\n return;\n }\n\n let i;\n let l;\n\n // Force an array if not already something iterable\n if (typeof obj !== 'object') {\n /*eslint no-param-reassign:0*/\n obj = [obj];\n }\n\n if (isArray(obj)) {\n // Iterate over array values\n for (i = 0, l = obj.length; i < l; i++) {\n fn.call(null, obj[i], i, obj);\n }\n } else {\n // Iterate over object keys\n const keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);\n const len = keys.length;\n let key;\n\n for (i = 0; i < len; i++) {\n key = keys[i];\n fn.call(null, obj[key], key, obj);\n }\n }\n}\n\nfunction findKey(obj, key) {\n key = key.toLowerCase();\n const keys = Object.keys(obj);\n let i = keys.length;\n let _key;\n while (i-- > 0) {\n _key = keys[i];\n if (key === _key.toLowerCase()) {\n return _key;\n }\n }\n return null;\n}\n\nconst _global = (() => {\n /*eslint no-undef:0*/\n if (typeof globalThis !== \"undefined\") return globalThis;\n return typeof self !== \"undefined\" ? self : (typeof window !== 'undefined' ? window : global)\n})();\n\nconst isContextDefined = (context) => !isUndefined(context) && context !== _global;\n\n/**\n * Accepts varargs expecting each argument to be an object, then\n * immutably merges the properties of each object and returns result.\n *\n * When multiple objects contain the same key the later object in\n * the arguments list will take precedence.\n *\n * Example:\n *\n * ```js\n * var result = merge({foo: 123}, {foo: 456});\n * console.log(result.foo); // outputs 456\n * ```\n *\n * @param {Object} obj1 Object to merge\n *\n * @returns {Object} Result of all merge properties\n */\nfunction merge(/* obj1, obj2, obj3, ... */) {\n const {caseless} = isContextDefined(this) && this || {};\n const result = {};\n const assignValue = (val, key) => {\n const targetKey = caseless && findKey(result, key) || key;\n if (isPlainObject(result[targetKey]) && isPlainObject(val)) {\n result[targetKey] = merge(result[targetKey], val);\n } else if (isPlainObject(val)) {\n result[targetKey] = merge({}, val);\n } else if (isArray(val)) {\n result[targetKey] = val.slice();\n } else {\n result[targetKey] = val;\n }\n }\n\n for (let i = 0, l = arguments.length; i < l; i++) {\n arguments[i] && forEach(arguments[i], assignValue);\n }\n return result;\n}\n\n/**\n * Extends object a by mutably adding to it the properties of object b.\n *\n * @param {Object} a The object to be extended\n * @param {Object} b The object to copy properties from\n * @param {Object} thisArg The object to bind function to\n *\n * @param {Boolean} [allOwnKeys]\n * @returns {Object} The resulting value of object a\n */\nconst extend = (a, b, thisArg, {allOwnKeys}= {}) => {\n forEach(b, (val, key) => {\n if (thisArg && isFunction(val)) {\n a[key] = bind(val, thisArg);\n } else {\n a[key] = val;\n }\n }, {allOwnKeys});\n return a;\n}\n\n/**\n * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)\n *\n * @param {string} content with BOM\n *\n * @returns {string} content value without BOM\n */\nconst stripBOM = (content) => {\n if (content.charCodeAt(0) === 0xFEFF) {\n content = content.slice(1);\n }\n return content;\n}\n\n/**\n * Inherit the prototype methods from one constructor into another\n * @param {function} constructor\n * @param {function} superConstructor\n * @param {object} [props]\n * @param {object} [descriptors]\n *\n * @returns {void}\n */\nconst inherits = (constructor, superConstructor, props, descriptors) => {\n constructor.prototype = Object.create(superConstructor.prototype, descriptors);\n constructor.prototype.constructor = constructor;\n Object.defineProperty(constructor, 'super', {\n value: superConstructor.prototype\n });\n props && Object.assign(constructor.prototype, props);\n}\n\n/**\n * Resolve object with deep prototype chain to a flat object\n * @param {Object} sourceObj source object\n * @param {Object} [destObj]\n * @param {Function|Boolean} [filter]\n * @param {Function} [propFilter]\n *\n * @returns {Object}\n */\nconst toFlatObject = (sourceObj, destObj, filter, propFilter) => {\n let props;\n let i;\n let prop;\n const merged = {};\n\n destObj = destObj || {};\n // eslint-disable-next-line no-eq-null,eqeqeq\n if (sourceObj == null) return destObj;\n\n do {\n props = Object.getOwnPropertyNames(sourceObj);\n i = props.length;\n while (i-- > 0) {\n prop = props[i];\n if ((!propFilter || propFilter(prop, sourceObj, destObj)) && !merged[prop]) {\n destObj[prop] = sourceObj[prop];\n merged[prop] = true;\n }\n }\n sourceObj = filter !== false && getPrototypeOf(sourceObj);\n } while (sourceObj && (!filter || filter(sourceObj, destObj)) && sourceObj !== Object.prototype);\n\n return destObj;\n}\n\n/**\n * Determines whether a string ends with the characters of a specified string\n *\n * @param {String} str\n * @param {String} searchString\n * @param {Number} [position= 0]\n *\n * @returns {boolean}\n */\nconst endsWith = (str, searchString, position) => {\n str = String(str);\n if (position === undefined || position > str.length) {\n position = str.length;\n }\n position -= searchString.length;\n const lastIndex = str.indexOf(searchString, position);\n return lastIndex !== -1 && lastIndex === position;\n}\n\n\n/**\n * Returns new array from array like object or null if failed\n *\n * @param {*} [thing]\n *\n * @returns {?Array}\n */\nconst toArray = (thing) => {\n if (!thing) return null;\n if (isArray(thing)) return thing;\n let i = thing.length;\n if (!isNumber(i)) return null;\n const arr = new Array(i);\n while (i-- > 0) {\n arr[i] = thing[i];\n }\n return arr;\n}\n\n/**\n * Checking if the Uint8Array exists and if it does, it returns a function that checks if the\n * thing passed in is an instance of Uint8Array\n *\n * @param {TypedArray}\n *\n * @returns {Array}\n */\n// eslint-disable-next-line func-names\nconst isTypedArray = (TypedArray => {\n // eslint-disable-next-line func-names\n return thing => {\n return TypedArray && thing instanceof TypedArray;\n };\n})(typeof Uint8Array !== 'undefined' && getPrototypeOf(Uint8Array));\n\n/**\n * For each entry in the object, call the function with the key and value.\n *\n * @param {Object{Strings().join_us_title}
\r\n {Strings().join_us_description}
\r\n {Strings().join_us_text}
\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nfunction SubscribeEmail() {\r\n const [status, setStatus] = React.useState('empty');\r\n\r\n const handleSubscribe = (e) => {\r\n e.preventDefault();\r\n let email = document.getElementById('input-email');\r\n\r\n if (status === 'ready') {\r\n setStatus('submitted');\r\n email.blur();\r\n email.disabled = true;\r\n\r\n subscribeEmail(email.value)\r\n .then(() => {\r\n setStatus('success');\r\n })\r\n .catch(() => {\r\n setStatus('failure');\r\n email.disabled = false;\r\n email.value = Strings().email_invalid;\r\n });\r\n }\r\n }\r\n\r\n const handleFocus = (e) => {\r\n if (status === 'failure') {\r\n e.target.value = '';\r\n setStatus('empty');\r\n }\r\n }\r\n\r\n const handleInputChange = (e) => {\r\n if (status === 'empty' && e.target.value) {\r\n setStatus('ready');\r\n }\r\n else if (!e.target.value) {\r\n setStatus('empty');\r\n }\r\n }\r\n\r\n if (status === 'success') {\r\n return (\r\n {Strings().wrap_up_title}
\r\n \r\n
\r\n {Strings().wrap_up_description}
\r\n {Strings().wrap_up_copyright}
\r\n {Strings().email_finished}
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n {Strings().wrap_up_subscribe_text}
\r\n\r\n \r\n \r\n )\r\n}\r\n\r\nfunction setupPrivacyPolicyLink() {\r\n let privacyPolicy = document.getElementById('privacy_policy_link');\r\n privacyPolicy.href = Strings().link_privacy_policy;\r\n privacyPolicy.target = '__blank';\r\n privacyPolicy.classList.add('regular-text');\r\n}","import axios from 'axios';\r\n\r\nexport function subscribeEmail(email) {\r\n return fetch('/config.json')\r\n .then(res => res.json())\r\n .then(config => {\r\n return axios.post(config.subscribeUrl, { email }, { headers: { 'Content-Type': 'application/json' } });\r\n });\r\n}","import * as React from 'react';\r\nimport Carousel from 'react-multi-carousel';\r\nimport 'react-multi-carousel/lib/styles.css';\r\nimport '../css/skins.css';\r\nimport Strings from '../strings';\r\n\r\nconst images = require.context('../images/skins', true);\r\nconst imageList = images.keys().map(image => images(image));\r\n\r\nconst responsive = {\r\n desktop: {\r\n breakpoint: { max: 10000, min: 801 },\r\n items: 5,\r\n },\r\n mobile: {\r\n breakpoint: { max: 800, min: 0 },\r\n items: 5,\r\n },\r\n};\r\n\r\nexport default function Skins() {\r\n\r\n React.useEffect(() => {\r\n let itemContainer = document.getElementsByClassName('skins-carousel')[0];\r\n itemContainer.addEventListener('pointermove', onPointerMove);\r\n });\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n )\r\n}\r\n\r\nfunction SkinCard({ image, index }) {\r\n\r\n React.useEffect(() => {\r\n updateCarouselItem(index, 0);\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n {Strings().characters_title}
\r\n {Strings().skins_description}
\r\n \r\n {Strings().skins_main_text}
\r\n \r\n (window.skinsCarousel = el)}\r\n responsive={responsive}\r\n beforeChange={beforeChangeSlide}\r\n containerClass='skins-carousel'\r\n itemClass='skins-carousel-item'\r\n removeArrowOnDeviceType='mobile'\r\n draggable={false}\r\n swipeable={false}\r\n customTransition='transform 300ms ease-in-out'\r\n transitionDuration={300}\r\n customLeftArrow={
\r\n \r\n 
\r\n
\r\n );\r\n}\r\n\r\nfunction LeftArrow({ onClick }) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction RightArrow({ onClick }) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction onPointerMove(event) {\r\n if (event.buttons != 1) {\r\n return;\r\n }\r\n\r\n if (event.movementX == 0 || Math.abs(event.movementX) < Math.abs(event.movementY)) {\r\n return;\r\n }\r\n\r\n let direction = Math.sign(event.movementX);\r\n\r\n if (direction < 0) {\r\n window.skinsCarousel.next(1);\r\n }\r\n else {\r\n window.skinsCarousel.previous(1);\r\n }\r\n}\r\n\r\nfunction updateCarouselItem(index, nextSlide) {\r\n let item = document.getElementById(`skins-card-${index}`).parentElement;\r\n let centerSlide = nextSlide + 2;\r\n let distance = Math.abs(index - centerSlide);\r\n let direction = Math.sign(index - centerSlide);\r\n\r\n item.dataset.distance = distance;\r\n item.dataset.direction = direction;\r\n}\r\n\r\nfunction beforeChangeSlide(nextSlide, { currentSlide }) {\r\n\r\n let centerSlide = nextSlide + 2;\r\n let lastSlide = currentSlide + 4;\r\n\r\n updateCarouselItem(currentSlide, nextSlide);\r\n updateCarouselItem(lastSlide, nextSlide);\r\n updateCarouselItem(centerSlide - 2, nextSlide);\r\n updateCarouselItem(centerSlide - 1, nextSlide);\r\n updateCarouselItem(centerSlide, nextSlide);\r\n updateCarouselItem(centerSlide + 1, nextSlide);\r\n updateCarouselItem(centerSlide + 2, nextSlide);\r\n}","import * as React from 'react';\r\nimport Carousel from 'react-multi-carousel';\r\nimport 'react-multi-carousel/lib/styles.css';\r\nimport '../css/minigames.css';\r\nimport Strings from '../strings';\r\n\r\nconst images = require.context('../images/minigames', true);\r\nconst imageList = images.keys().map(key => ({ key: key.match(/\\d{2}/)[0], image: images(key) }));\r\n\r\nconst responsive = {\r\n desktop: {\r\n breakpoint: { max: 10000, min: 801 },\r\n items: 1,\r\n },\r\n mobile: {\r\n breakpoint: { max: 800, min: 0 },\r\n items: 1,\r\n },\r\n};\r\n\r\nexport default function Minigames() {\r\n\r\n React.useEffect(() => {\r\n let itemContainer = document.getElementsByClassName('minigames-carousel')[0];\r\n itemContainer.addEventListener('pointermove', onPointerMove);\r\n });\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n )\r\n}\r\n\r\nfunction MinigameCard({ image, index }) {\r\n\r\n return (\r\n \r\n
\r\n\r\n {Strings().minigames_title}
\r\n {Strings().minigames_description}
\r\n \r\n {Strings().minigames_main_text}
\r\n \r\n
\r\n \r\n (window.minigamesCarousel = el)}\r\n responsive={responsive}\r\n containerClass='minigames-carousel'\r\n itemClass='minigames-carousel-item'\r\n dotListClass='minigames-carousel-dot-list'\r\n removeArrowOnDeviceType='mobile'\r\n draggable={false}\r\n swipeable={false}\r\n showDots={true}\r\n customTransition='transform 300ms ease-in-out'\r\n transitionDuration={300}\r\n customLeftArrow={
\r\n \r\n 
\r\n
\r\n );\r\n}\r\n\r\nfunction LeftArrow({ onClick }) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction RightArrow({ onClick }) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction Dot({ onClick, active }) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction onPointerMove(event) {\r\n if (event.buttons != 1) {\r\n return;\r\n }\r\n\r\n if (event.movementX == 0 || Math.abs(event.movementX) < Math.abs(event.movementY)) {\r\n return;\r\n }\r\n\r\n let direction = Math.sign(event.movementX);\r\n\r\n if (direction < 0) {\r\n window.minigamesCarousel.next(1);\r\n }\r\n else {\r\n window.minigamesCarousel.previous(1);\r\n }\r\n}","import * as React from 'react';\r\nimport '../css/index.css';\r\nimport Header from './Header';\r\nimport Logo from './Logo';\r\nimport Splash from './Splash';\r\nimport LetsPlay from './LetsPlay';\r\nimport Characters from './Characters';\r\nimport Development from './Development';\r\nimport JoinUs from './JoinUs';\r\nimport WrapUp from './WrapUp';\r\nimport Skins from './Skins';\r\nimport Minigames from './Minigames';\r\n\r\nexport default function IndexPage() {\r\n return (\r\n <>\r\n \r\n
\r\n {Strings()[`minigame_title_${image.key}`]}
\r\n \r\n {Strings()[`minigame_description_${image.key}`]}
\r\n