\r\n {anchor ? (\r\n \r\n \r\n {t(data.name)}\r\n \r\n ) : (\r\n \r\n \r\n {t(data.name)}\r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nexport default function LocalNav(props) {\r\n const {\r\n mobile,\r\n premiumLogged,\r\n loggedIn,\r\n creator,\r\n mainPage,\r\n onAnchorClick\r\n } = props;\r\n const { t } = useTranslation();\r\n\r\n const subPages = [\r\n {\r\n name: t(\"Ranked Statistics History\"),\r\n URL: generatePageURI(pagePaths.RANKED_STATS),\r\n icon: \"icon-ranked\"\r\n },\r\n {\r\n name: t(\"Achievements\"),\r\n URL: generatePageURI(pagePaths.ACHIEVEMENTS),\r\n icon: \"icon-achievement\"\r\n },\r\n {\r\n name: t(\"Ribbons\"),\r\n URL: generatePageURI(pagePaths.RIBBONS),\r\n icon: \"icon-ribbons\"\r\n },\r\n {\r\n name: t(\"Inventory\"),\r\n URL: generatePageURI(pagePaths.INVENTORY),\r\n icon: \"icon-inventory\"\r\n },\r\n {\r\n name: t(\"Collections\"),\r\n URL: generatePageURI(pagePaths.COLLECTONS),\r\n icon: \"icon-collection\"\r\n }\r\n ];\r\n\r\n const anchors = Object.values(mainPageAnchors)\r\n .filter(element => {\r\n return element.name == mainPageAnchors.CONTENT_CREATOR.name\r\n ? creator\r\n : true;\r\n });\r\n\r\n return (\r\n \r\n {premiumLogged && mobile && (\r\n \r\n {t('Edit My Profile')}\r\n \r\n )}\r\n {t('Sub-Pages')}\r\n {subPages.map(item => (\r\n \r\n ))}\r\n {mobile && mainPage && (\r\n <>\r\n \r\n {t('Main Page Anchors')}\r\n \r\n {anchors.map(item => (\r\n {\r\n // console.log('sdfsd')\r\n // return
\r\n );\r\n}\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport ActionButton from \"../inputs/ActionButton\";\r\nimport HamburgerButton from \"../inputs/HamburgerButton\";\r\nimport { generatePageURI, pagePaths, CDN_URI } from \"../../common/utilities\";\r\nimport { Link } from \"react-router-dom\";\r\nimport ClanEmblem from \"./ClanEmblem\";\r\nimport LocalNav from \"./LocalNav\";\r\nimport { useTheme } from \"@material-ui/core/styles\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport clsx from \"clsx\";\r\n\r\nimport styles from \"./PlayerHeader.module.scss\";\r\n\r\n\r\n//I tried making this using mat-ui grid, but I couldn't find out how\r\n//to make grid items bump up aganinst each other the way that\r\n//header items need to in desktop mode according to the design.\r\n\r\nexport default function PlayerHeader(props) {\r\n const { data, creator, mainPage, premiumLogged } = props;\r\n\r\n const [navOpen, setNavOpen] = useState(false);\r\n\r\n const localNavMobileNode = useRef();\r\n const localNavDesktopNode = useRef();\r\n const hamburgerBtnDesktopNode = useRef();\r\n const hamburgerBtnMobileNode = useRef();\r\n\r\n const { t } = useTranslation();\r\n\r\n const theme = useTheme();\r\n const mobile = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n\r\n //for dropdown click outside and close - used pointerevent instead\r\n //of mouseevent because mouse event did not work on pins section\r\n //that uses indiana scroll component\r\n // https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-with-react-hook-ba77c37c7e82\r\n // Similar to componentDidMount and componentDidUpdate:\r\n useEffect(() => {\r\n document.addEventListener(\"pointerdown\", handleClick, false);\r\n\r\n return () => {\r\n document.removeEventListener(\"pointerdown\", handleClick);\r\n };\r\n }, []);\r\n\r\n //parse API data for use in jsx\r\n const parsedData = data && {\r\n ign: data.NICK,\r\n clanName: data.clanName,\r\n clanEmblem: {\r\n markLayer01: data.markLayer01,\r\n markLayer02: data.markLayer02,\r\n markLayer03: data.markLayer03,\r\n markLayer04: data.markLayer04\r\n },\r\n rankTitle: data.EXP_TIER_DISPLAY_NAME,\r\n rankID: data.EXP_TIER_CATEGORY_ID,\r\n prevRankEXP: data.EXP_TIER_SCORE_INI,\r\n nextRankEXP: data.EXP_TIER_SCORE_INI_NEXT,\r\n EXP: data.EXP,\r\n LEV: data.LEV,\r\n FAME_GRADE: data.FAME_GRADE,\r\n bannerURL: data\r\n };\r\n\r\n const dataLoaded = parsedData != null;\r\n\r\n const {\r\n ign = \"\",\r\n clanName = \"\",\r\n clanEmblem = null,\r\n rankTitle = \"\",\r\n rankID = 0,\r\n LEV = 0,\r\n FAME_GRADE = 0,\r\n prevRankEXP = 0,\r\n nextRankEXP = 0,\r\n EXP = 0\r\n } = dataLoaded ? parsedData : {};\r\n\r\n let l_exppercent =\r\n nextRankEXP === 0 ? \"0%\" : `${Math.floor(( (EXP - prevRankEXP) / (nextRankEXP - prevRankEXP) ) * 1000) / 10}%`;\r\n\r\n if(EXP > nextRankEXP)\r\n {\r\n l_exppercent = '100%';\r\n } \r\n \r\n const EXPPercent = l_exppercent;\r\n //const EXPPercent =\r\n // nextRankEXP === 0 ? \"0%\" : `${Math.round(( (EXP - prevRankEXP) / (nextRankEXP - prevRankEXP) ) * 100)}%`;\r\n \r\n const handleClick = e => {\r\n if (\r\n localNavDesktopNode.current.contains(e.target) ||\r\n localNavMobileNode.current.contains(e.target) ||\r\n hamburgerBtnDesktopNode.current.contains(e.target) ||\r\n hamburgerBtnMobileNode.current.contains(e.target)\r\n ) {\r\n return false;\r\n }\r\n\r\n //otuside click\r\n setNavOpen(false);\r\n };\r\n\r\n const hideNav = () => {\r\n setNavOpen(false);\r\n };\r\n\r\n const handleLocalNavToggle = () => {\r\n setNavOpen(!navOpen);\r\n };\r\n const backToMain = generatePageURI(pagePaths.MAIN);\r\n\r\n const marshalRank = 100;\r\n const maxFameGrade = 3;\r\n const marshalTitle = \"Marshal\";\r\n const grandMarshalRankImgSuffux = \"grandmarshal\";\r\n\r\n var displayRankTitle = rankTitle;\r\n var displayRankLevel = rankID + 1;\r\n // Grand Marshal Rule to be applied when necessary\r\n /*\r\n if (FAME_GRADE) {\r\n displayRankLevel =\r\n FAME_GRADE <= maxFameGrade && parseInt(LEV, 10) >= marshalRank\r\n ? displayRankLevel + parseInt(FAME_GRADE, 10)\r\n : displayRankLevel;\r\n //displayRankTitle = marshalTitle + ' ' + FAME_GRADE;\r\n }\r\n\r\n if( grandmarshal__rules__apply){ \r\n displayRankLevel = grandMarshalRankImgSuffux;\r\n }\r\n // */\r\n\r\n return (\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
\r\n \r\n )}\r\n \r\n
\r\n {(mainPage && mobile) && (\r\n \r\n {ign}\r\n
\r\n {(mainPage && !mobile) && (\r\n <>\r\n\r\n \r\n 
\r\n \r\n {displayRankTitle}\r\n {`${EXP} EXP`}\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n {displayRankTitle}\r\n {`${EXP} EXP`}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {displayRankTitle}\r\n {`${EXP} EXP`}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {(mainPage || !mobile) && (\r\n <>\r\n \r\n {premiumLogged && (\r\n \r\n {t('Edit My Profile')}\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 React from \"react\";\r\nimport PlayerBanner from \"./header/PlayerBanner\";\r\nimport PlayerHeader from \"./header/PlayerHeader\";\r\n\r\nexport default function(props) {\r\n const { \r\n showBanner, \r\n headerData, \r\n bannerAvatarData, \r\n creator,\r\n mainPage,\r\n premiumLogged\r\n } = props;\r\n \r\n return (\r\n <>\r\n {showBanner && \r\n {rankID < marshalRank &&\r\n `${EXP}/${nextRankEXP} (${EXPPercent})`}\r\n
\r\n \r\n
\r\n \r\n
\r\n - \r\n {anchors.map(item => (\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n","import React, { useRef, useEffect } from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport clsx from \"clsx\";\r\n\r\nimport YouTube from \"react-youtube\";\r\nimport ReactTwitchEmbedVideo from \"react-twitch-embed-video\";\r\n\r\nimport styles from \"./ContentCreatorMain.module.scss\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport default function ContentCreatorMain(props) {\r\n const { youTubePlayList, twitchChannel } = props; \r\n const { t } = useTranslation();\r\n\r\n const playerSettings = {\r\n width: 680\r\n };\r\n\r\n const sectionTitle = t('CF Content Creator');\r\n\r\n const ytOpts = {\r\n height: \"100%\",\r\n width: \"100%\",\r\n playerVars: {\r\n // https://developers.google.com/youtube/player_parameters\r\n listType:'playlist',\r\n list: youTubePlayList,\r\n autoplay: 0\r\n }\r\n };\r\n\r\n const twOpts = {\r\n width: \"100%\",\r\n height: \"100%\",\r\n autoplay: false\r\n };\r\n\r\n const _onReady = event => {\r\n // access to player in all event handlers via event.target\r\n event.target.pauseVideo();\r\n };\r\n\r\n return (\r\n \r\n {Object.keys(pins).map(pinID => (\r\n \r\n {pins[pinID].name}\r\n 
\r\n
\r\n ))}\r\n \r\n {sectionTitle}
\r\n{sectionTitle}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n return (\r\n \r\n // \r\n // \r\n // \r\n // {children}\r\n // \r\n // \r\n // );\r\n\r\n return (\r\n {myWinRate} \r\n\r\n return (\r\n \r\n {\r\n (t) =>\r\n \r\n\r\n \r\n }\r\n \r\n );\r\n\r\n /*\r\n return \r\n \r\n // */\r\n }\r\n \r\n function showKDR(props){\r\n \r\n // true is kill death rate\r\n const kills = (props && props.details && props.details.ENEMY_KILL_CNT) ? props.details.ENEMY_KILL_CNT : 0;\r\n const deaths = (props && props.details && props.details.DEATH_CNT) ? props.details.DEATH_CNT : 0;\r\n\r\n //console.log('kills', kills);\r\n //console.log('deaths', deaths);\r\n\r\n var myKillRate = {myKillRate} \r\n\r\n /**/\r\n return (\r\n \r\n {\r\n (t) =>\r\n \r\n\r\n \r\n }\r\n \r\n );\r\n // */\r\n\r\n /*\r\n return (\r\n {myModeChild}\r\n \r\n );\r\n // */ \r\n }\r\n\r\n function showKPW(props){\r\n\r\n /*\r\n RIFLE_KILL - assault rifle\r\n SHOT_KILL - sniper\r\n SMG_KILL - sub machine gun\r\n HEAVY_KILL - machine gun\r\n SHOTGUN_KILL - shotgun\r\n PISTOL_KILL - pistol\r\n KNIFE_KILL - melee\r\n DRAW_KILL - grenades\r\n */\r\n /**/\r\n \r\n const RIFLE_KILL = (props && props.details && props.details.RIFLE_KILL) ? props.details.RIFLE_KILL : 0;\r\n const SHOT_KILL = (props && props.details && props.details.SHOT_KILL) ? props.details.SHOT_KILL : 0;\r\n const SMG_KILL = (props && props.details && props.details.SMG_KILL) ? props.details.SMG_KILL : 0;\r\n const HEAVY_KILL = (props && props.details && props.details.HEAVY_KILL) ? props.details.HEAVY_KILL : 0;\r\n const SHOTGUN_KILL = (props && props.details && props.details.SHOTGUN_KILL) ? props.details.SHOTGUN_KILL : 0;\r\n const PISTOL_KILL = (props && props.details && props.details.PISTOL_KILL) ? props.details.PISTOL_KILL : 0;\r\n const KNIFE_KILL = (props && props.details && props.details.KNIFE_KILL) ? props.details.KNIFE_KILL : 0;\r\n const DRAW_KILL = (props && props.details && props.details.DRAW_KILL) ? props.details.DRAW_KILL : 0;\r\n \r\n /*\r\n return {kpwChild} \r\n\r\n return (\r\n \r\n {\r\n (t) =>\r\n \r\n\r\n \r\n }\r\n \r\n );\r\n\r\n /*\r\n return \r\n \r\n */ \r\n }\r\n\r\n function showSkulls(props){\r\n\r\n const headshots = (props && props.details && props.details.HEADSHOT_KILL_CNT) ? props.details.HEADSHOT_KILL_CNT : 0;\r\n const kills = (props && props.details && props.details.ENEMY_KILL_CNT) ? props.details.ENEMY_KILL_CNT : 0; \r\n\r\n var mySkullRate = {mySkullRate} \r\n\r\n return (\r\n \r\n {\r\n (t) =>\r\n \r\n\r\n \r\n }\r\n \r\n );\r\n\r\n /*\r\n return \r\n \r\n */\r\n }\r\n \r\n\r\n function showDesktopView(props){\r\n return(\r\n \r\n\r\n {showWinRate(props)}\r\n {showKDR(props)}\r\n {showSkulls(props)}\r\n {showKPW(props)}\r\n\r\n \r\n\r\n );\r\n }\r\n\r\n function showMobileView(props){\r\n\r\n // react slider\r\n var settings = {\r\n dots: true,\r\n arrows: false,\r\n infinite: true,\r\n centerMode: true,\r\n centerPadding: '12px',\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n //,dotsClass: 'mobileSlickDots'\r\n };\r\n\r\n return (\r\n \r\n
\r\n }\r\n this.changeMode = this.changeMode.bind(this);\r\n }\r\n\r\n componentDidMount(){\r\n\r\n // get user data\r\n this.getUserModeData();\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState){\r\n\r\n if(null !== this.state.modeUniqueList && null !== this.state.userData && null == this.state.userDataStats && !this.state.contentReady){\r\n\r\n // this will also be set to true on error cases in order to show something to the user\r\n this.setState({\r\n contentReady: true\r\n })\r\n //console.log('state', this.state.mode);\r\n }\r\n\r\n if(this.state.mode != prevState.mode && this.state.contentReady){\r\n this.getUserModeData();\r\n //console.log('mode ID changed to: ' + this.state.mode);\r\n }\r\n }\r\n\r\n /**\r\n * Each mode has various skill levels\r\n * Find all skill levels for the mode\r\n * Display buttons for users to get scores for various skill levels\r\n * \r\n * @param {*} id \r\n */\r\n getCurrentModeSkillLevels(id){\r\n\r\n var _this = this;\r\n var myName = this.state.modeList.filter(modes => modes.MODE_ID == id);\r\n\r\n //console.log(this.state.modeList);\r\n //console.log(this.state.modeUniqueList);\r\n //console.log('myName');\r\n //console.log(myName);\r\n\r\n //var modeLevelsList = this.state.modeList.filter(modes => modes.MODE_DISPLAY_NAME == myName[0].MODE_DISPLAY_NAME);\r\n\r\n var modeLevelsList = this.state.modeList.filter(function(modes) {\r\n\r\n if(myName && myName[0] && myName[0].MODE_DISPLAY_NAME){\r\n return modes.MODE_DISPLAY_NAME == myName[0].MODE_DISPLAY_NAME;\r\n }else{\r\n return null;\r\n }\r\n\r\n });\r\n\r\n var modeLevels = \r\n {modeLevelsList.map(\r\n function(mode){\r\n var myStyle = (id == mode.MODE_ID) ? styles.button + ' ' + styles.active : styles.button;\r\n //var active = (id == mode.MODE_ID) ? ' active' : '';\r\n\r\n return \r\n _this.changeMode(mode.MODE_ID)}>\r\n {mode.DIFICULTY_NAME}\r\n \r\n \r\n }\r\n )\r\n }\r\n ;\r\n\r\n //console.log(modeLevels);\r\n //alert(myName[0].MODE_DISPLAY_NAME);\r\n this.setState({\r\n skillLevels: modeLevels\r\n });\r\n //console.log('changing mode to: ' + myName[0].MODE_DISPLAY_NAME)\r\n }\r\n\r\n changeMode(id){\r\n\r\n //console.log('mode ID changed to: ' + id);\r\n this.setState({\r\n mode: id\r\n });\r\n\r\n //console.log(id)\r\n\r\n if(this.state.skillLevelsRequired){\r\n this.getCurrentModeSkillLevels(id);\r\n }\r\n }\r\n\r\n createModesDropDown(){\r\n\r\n return
\r\n );\r\n }\r\n\r\n this.setState({\r\n outputList: string\r\n ,contentReady: true\r\n });\r\n\r\n //return string;\r\n }\r\n\r\n getStageImg(current, max){\r\n var CDN_URI = `${MAIN_CDN_URI}imgs/achievement_system/`;\r\n\r\n var prefix = 'trophy_';\r\n var stage = null;\r\n switch(max){\r\n case 5: stage = 'a'; break;\r\n case 3: stage = 'b'; break;\r\n case 1: stage = 'c'; break;\r\n }\r\n\r\n return (current && max && stage && (current <= max))\r\n ? \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Box from '@material-ui/core/Box';\r\nimport Container from '@material-ui/core/Container';\r\nimport styles from './skullratio.module.css';\r\nimport {numberWithCommas, CDN_URI} from '../common/utilities';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport { createMuiTheme, useTheme } from '@material-ui/core/styles';\r\nimport { ThemeProvider } from '@material-ui/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\n\r\n/*\r\n Display Headshot Kills to plain ol' regular kills\r\n\r\n requires 2 paramaters\r\n headshots (int)\r\n kills (int)\r\n*/\r\n\r\n\r\nexport default function SkullRatio(props){\r\n const { t } = useTranslation();\r\n\r\n var gridImgheight = 276;\r\n\r\n const CDN = `${CDN_URI}imgs/profile/`;\r\n //const CDN = \"https://cdn.z8games.com/cfna/templates/assets/imgs/profile/\";\r\n\r\n const skullfill = CDN + \"graph-headshot-fill.jpg\";\r\n const skullempty = CDN + \"graph-headshot-empty.jpg\";\r\n const totalHeadshotsText = t('Total Headshots');\r\n\r\n var divImgheight = AimForTheHead(props.headshots, props.kills);\r\n \r\n var ratio = (divImgheight) ? ((1 - (divImgheight / gridImgheight)) * 100).toFixed(1) + '%'\r\n : ((0 < props.headshots) && (0 < props.kills) && (props.kills <= props.headshots))\r\n ? (getRatio(props.headshots,props.kills)).toFixed(1) + '%'\r\n : '0.0%';\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {text1}
\r\n{numberWithCommas(props.divisor)}
\r\n\r\n
\r\n {text2}
\r\n{numberWithCommas(props.dividend)}
\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\tfunction getRatio(shots, kills){\r\n\t\t\r\n shots = parseInt(shots, 10) + 0;\r\n kills = parseInt(kills, 10) + 0;\t\t\r\n\t\t\r\n\t\tif(shots >= kills){\r\n\t\t\treturn 100;\r\n\t\t}else{\r\n\t\t\treturn (shots / kills) * 100;\r\n\t\t}\r\n\t}\r\n\r\n\r\n /**\r\n //\r\n //\t- find the ratio of headshots to deaths\r\n //\t- change the height of class 'filler-mask' to display the ratio\r\n //\r\n **/\r\n function AimForTheHead(dividend = 0, divisor = 0) {\r\n\r\n dividend = parseInt(dividend, 10) + 0;\r\n divisor = parseInt(divisor, 10) + 0;\r\n\r\n //console.log('divdend', dividend);\r\n //console.log('divisor', divisor);\r\n\r\n // or we will get the official height from Design Team\r\n var maxHeight = 276;\r\n //console.log('maxHeight', maxHeight);\r\n\r\n var displayHeight = maxHeight;\r\n\r\n if (0 < dividend && 0 < divisor) {\r\n\r\n // we kinda should do a check to verify that there are more kills than headshot kills (but that is just paranoid [Or is it?] - It is not. It is always necessary.)\r\n\r\n var ratio = (dividend / divisor);\r\n\r\n displayHeight = (ratio >= 1) ? 0 : (maxHeight - (ratio * maxHeight));\r\n\r\n //console.log('displayHeight', displayHeight);\r\n //$('.filler-mask').height(displayHeight);\r\n }\r\n //console.log('-------------------------------------------------------------------------');\r\n return displayHeight;\r\n }\r\n","import React from 'react';\r\nimport styles from './killsperweapon.module.css';\r\nimport {numberWithCommas} from '../common/utilities';\r\nimport { Trans } from 'react-i18next';\r\n\r\nexport default class KillsPerWeapon extends React.Component{\r\n\r\n\r\n /* \r\n * sortKPW\r\n RIFLE_KILL - assault rifle\r\n SHOT_KILL - sniper\r\n SMG_KILL - sub machine gun\r\n HEAVY_KILL - machine gun\r\n SHOTGUN_KILL - shotgun\r\n PISTOL_KILL - pistol\r\n KNIFE_KILL - melee\r\n DRAW_KILL - grenades\r\n\r\n * @param {INT} counts of weapon kills [rifle, sniper, smg, mg, shotgun, pistol, melee, grenade]\r\n * @returns {string}\r\n */\r\n sortKPW (rifle, sniper, smg, mg, shotgun, pistol, melee, grenade) {\r\n\r\n var myweapons = [\r\n {\r\n name: 'Assault Rifles'\r\n ,kills: rifle\r\n ,icon: 'icon icon_icon_weapon_assaultrifle'\r\n ,icon2: 'assaultrifle'\r\n },\r\n {\r\n name: 'Sniper Rifles'\r\n ,kills: sniper\r\n ,icon: 'icon icon_icon_weapon_sniper'\r\n ,icon2: 'sniper'\r\n },\r\n {\r\n name: 'Sub Machine Guns'\r\n ,kills: smg\r\n ,icon: 'icon icon_icon_weapon_smg'\r\n ,icon2: 'smg'\r\n },\r\n {\r\n name: 'Machine Guns'\r\n ,kills: mg\r\n ,icon: 'icon icon_icon_weapon_mg'\r\n ,icon2: 'mg'\r\n },\r\n {\r\n name: 'Shotguns'\r\n ,kills: shotgun\r\n ,icon: 'icon icon_icon_weapon_shotgun'\r\n ,icon2: 'shotgun'\r\n },\r\n {\r\n name: 'Pistols'\r\n ,kills: pistol\r\n ,icon: 'icon icon_icon_weapon_pistol'\r\n ,icon2: 'pistol'\r\n },\r\n {\r\n name: 'Melee'\r\n ,kills: melee\r\n ,icon: 'icon icon_icon_weapon_melee'\r\n ,icon2: 'melee'\r\n },\r\n {\r\n name: 'Grenades'\r\n ,kills: grenade\r\n ,icon: 'icon icon_icon_weapon_grenade'\r\n ,icon2: 'grenade'\r\n }\r\n ];\r\n\r\n myweapons.sort(function(a, b) { \r\n return a.kills - b.kills;\r\n })\r\n \r\n myweapons.reverse();\r\n\r\n var string = [];\r\n\r\n for(var i in myweapons){\r\n\r\n var stylename = myweapons[i].icon2;\r\n var myStyle = styles.icon + ' ' + styles[stylename];\r\n //console.log(myStyle);\r\n\r\n string.push(\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n {ratio}\r\n
\r\n \r\n
\r\n \r\n
\r\n {totalHeadshotsText}
\r\n{numberWithCommas(props.headshots)}
\r\n\r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n \r\n return string; \r\n\r\n }\r\n\r\n showInt(count = 0 ){\r\n return (typeof count !== 'undefined') && '' !== count && (parseInt(count, 10) >= 0) ? parseInt(count, 10) : 0;\r\n }\r\n\r\n render (){\r\n\r\n return (\r\n\r\n \r\n \r\n {myweapons[i].name} \r\n
\r\n {numberWithCommas(myweapons[i].kills)}
\r\n\r\n {this.sortKPW(\r\n this.showInt(this.props.rifle)\r\n ,this.showInt(this.props.sniper)\r\n ,this.showInt(this.props.smg)\r\n ,this.showInt(this.props.mg)\r\n ,this.showInt(this.props.shotgun)\r\n ,this.showInt(this.props.pistol)\r\n ,this.showInt(this.props.melee)\r\n ,this.showInt(this.props.grenade)\r\n )}\r\n
\r\n\r\n );\r\n }\r\n}","import React from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport styles from \"./InfoContainer.module.scss\";\r\nimport clsx from \"clsx\";\r\n\r\nexport default function(props) {\r\n const { \r\n headerLeft, \r\n headerRight, \r\n footer, \r\n children, \r\n height = \"auto\", \r\n classes,\r\n mobile\r\n } = props;\r\n\r\n // return (\r\n // \r\n //
\r\n // );\r\n\r\n // return (\r\n // \r\n //
\r\n // {heading}
\r\n // {count}\r\n //\r\n // {children}\r\n //
\r\n // \r\n //
\r\n // {heading}
\r\n // {count}\r\n //\r\n \r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n {footer &&\r\n \r\n {footer}\r\n }\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport Grid from '@material-ui/core/Grid';\r\n\r\nimport styles from './modesview.module.css';\r\n\r\nimport SVGDonutChart from \"./donutchart\";\r\nimport SkullRatio from \"./skullratio\";\r\nimport KillsPerWeapon from \"./killsperweapon\";\r\n\r\nimport Box from '@material-ui/core/Box';\r\nimport InfoContainer from \"./container/InfoContainer\";\r\nimport Container from '@material-ui/core/Container';\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport Slider from \"react-slick\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\n\r\nimport { createMuiTheme, useTheme } from '@material-ui/core/styles';\r\nimport { ThemeProvider } from '@material-ui/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport { Translation } from \"react-i18next\";\r\n\r\nexport default function IndexUserRatiosView(props) {\r\n\r\n const theme = useTheme();\r\n const mobileView = useMediaQuery(theme.breakpoints.down('xs')); \r\n\r\n //console.log(props.details);\r\n\r\n if(mobileView){\r\n return (\r\n \r\n
\r\n \r\n {headerLeft}\r\n
\r\n \r\n {headerRight}\r\n \r\n\r\n\r\n {showMobileView(props)}\r\n\r\n
\r\n );\r\n }else{\r\n return (\r\n \r\n\r\n {showDesktopView(props)}\r\n\r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\n function showWinRate(props){\r\n\r\n // false is win rate\r\n const wins = (props && props.details && props.details.WIN_CNT) ? props.details.WIN_CNT : 0;\r\n const games = (props && props.details && props.details.LOSE_CNT) ? props.details.LOSE_CNT : 0;\r\n\r\n //console.log('games', games);\r\n //console.log('wins', wins);\r\n\r\n var myWinRate = {t('Win Rate')}
\r\n\r\n {myModeChild}\r\n\r\n {t('Kill-Death Ratio')}
\r\n\r\n {myModeChild}\r\n\r\n {t('Kills Per Weapon')}
\r\n\r\n {myModeChild}\r\n\r\n {t('Headshot Rate')}
\r\n\r\n {myModeChild}\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n } \r\n","import React, { useState } from \"react\";\r\nimport styles from \"./Dropdown.module.scss\";\r\n\r\nexport default function Dropdown(props) {\r\n const { onChange, options, selectedValue } = props;\r\n\r\n const [selected, setSelected] = useState(\r\n selectedValue != null ? selectedValue : (\r\n options && options.length > 0 ? options[0].value : \"\"\r\n )\r\n );\r\n\r\n const handleChange = e => {\r\n onChange != null && onChange(e.target.value);\r\n setSelected(e.target.value);\r\n };\r\n\r\n return (\r\n {showWinRate(props)}
\r\n {showKDR(props)}
\r\n {showSkulls(props)}
\r\n {showKPW(props)}
\r\n \r\n \r\n
\r\n );\r\n}\r\n","// this file has too much data.\r\n// we already have the name and display name\r\n// we probably should just get all new images and use the ID as the image name.\r\n\r\n/*\r\nThis data is now located in \r\n\tCDN_URI/assets/js/modes/modes_data.js\r\nso that the file may be edited without compilation\r\n*/\r\n\r\nexport var modeData = window.modeData;\r\n","import React from 'react';\r\nimport styles from './modesview.module.css';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Skeleton from '@material-ui/lab/Skeleton';\r\nimport axios from 'axios';\r\nimport Dropdown from './inputs/Dropdown';\r\nimport {numberWithCommas, profileAPI, CDN_URI as MAIN_CDN_URI } from '../common/utilities';\r\nimport {modeData} from '../common/modes_data';\r\nimport { isNumber } from 'util';\r\nimport ReactImageFallback from \"react-image-fallback\";\r\nimport { Trans } from 'react-i18next';\r\n\r\nexport default class ModesView extends React.Component {\r\n\r\n\tconstructor(props){\r\n super(props);\r\n \r\n\t this.state = {\r\n outputList: []\r\n ,userData: this.props.userData\r\n ,userDataStats: null\r\n ,usn: this.props.usn\r\n ,gid: this.props.gid\r\n ,mode: null\r\n ,skillLevelsRequired: (this.props.gid && 'ZM' == this.props.gid) ? true : false\r\n ,modeList: []\r\n ,modeUniqueList: []\r\n ,skillLevels: []\r\n ,contentReady: false\r\n ,errorData: Error: no data found
{this.state.outputList}
}\r\n />\r\n \r\n
\r\n }\r\n />\r\n \r\n {badgeLevels}\r\n
\r\n \r\n {achievements}\r\n
\r\n \r\n {ribbonsMain}\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport InfoContainer from \"./container/InfoContainer\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport styles from \"./EquippedWeapons.module.scss\";\r\nimport clsx from \"clsx\";\r\nimport notEquippedImg from \"../images/inventory_missing.jpg\";\r\nimport missingPrimaryImg from \"../images/equippedweapons/bag_missing-primary.png\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport missingSecondaryImg from \"../images/equippedweapons/bag_missing-secondary.png\";\r\nimport missingMeleeImg from \"../images/equippedweapons/bag_missing-melee.png\";\r\nimport missingGrenadeImg from \"../images/equippedweapons/bag_missing-grenade.png\";\r\n//https://stackoverflow.com/questions/35250500/correct-way-to-import-lodash\r\nimport { range } from \"lodash\";\r\nimport Slider from \"react-slick\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport inventoryMissingImg from \"../images/inventory_missing.png\";\r\n\r\n\r\nimport {\r\n CDN_URI_BASE,\r\n handleMissingImg,\r\n} from \"../common/utilities\";\r\n\r\nconst slickSliderSettings = {\r\n dots: true,\r\n arrows: false,\r\n infinite: false,\r\n // centerMode: true,\r\n // centerPadding: '12px',\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dotsClass: clsx('slick-dots', styles.slick_dots_custom)\r\n};\r\n\r\nconst BagDisplaySettings = {\r\n bagMaxLength: 7\r\n ,sackSRLStartOne: 0\r\n ,sackSRLStartTwo: 10\r\n ,sackSRLStartThree: 20\r\n};\r\n\r\nfunction WeaponItem(props) {\r\n const { itemData, cols } = props;\r\n return (\r\n \r\n {t('Current Character')}\r\n \r\n {parsedData.charName}\r\n \r\n \r\n {t('{{count}} Kills', {count: numberWithCommas(parsedData.killCount)})}\r\n \r\n
\r\n {/* */}\r\n
*/}\r\n - \r\n
- {t('Bag')} 1 \r\n {arr.map((value, index) => {\r\n return ((value <= (BagDisplaySettings.bagMaxLength)) &&\r\n
- \r\n
- {t('Bag')} 2 \r\n {arr.map((value, index) => {\r\n return ((value >= BagDisplaySettings.sackSRLStartTwo && value < (BagDisplaySettings.sackSRLStartTwo + BagDisplaySettings.bagMaxLength)) &&\r\n
- \r\n
- {t('Bag')} 3 \r\n {arr.map((value, index) => {\r\n return ((value >=BagDisplaySettings.sackSRLStartThree && value <= (BagDisplaySettings.sackSRLStartThree + BagDisplaySettings.bagMaxLength)) &&\r\n
\r\n \r\n \r\n
))\r\n );\r\n\r\n\r\n let content = selectedBagData == null ? null : (\r\n <>\r\n {/* shown only on desktop */}\r\n \r\n
\r\n {t('Kills tracked from {{date}}', { date: window._region == 'BR' ? '4 de Fevereiro, 2020' : (window._region == 'NA' ? 'November 13, 2019' : '') })}
\r\n\r\n \r\n \r\n < {backToText}\r\n \r\n
\r\n \r\n // \r\n // < {backToText}\r\n // \r\n //
\r\n // );\r\n\r\n return (\r\n \r\n //
\r\n // {mobile && (\r\n // \r\n //
\r\n // {`Tier ${nextTier} rewards progress ${ribbonsCollectedForNextTier}/${nextTierEnd} (${nextTierPercent}%)`}
\r\n // {!mobile && (\r\n //\r\n //
\r\n // \r\n \r\n \r\n \r\n
\r\n \r\n {t(\"Tier {{x}} Rewards Progress {{y}}/{{z}} ({{percent}}%)\", {\r\n x: nextTier,\r\n y: ribbonsCollectedForNextTier,\r\n z: nextTierEnd,\r\n percent: nextTierPercent\r\n })}\r\n
\r\n {/*{`Tier ${nextTier} rewards progress ${ribbonsCollectedForNextTier}/${nextTierEnd} (${nextTierPercent}%)`}
*/}\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"Tier {{x}}\", { x: data.ROWPOS })}\r\n
\r\n {data.itemName}\r\n \r\n {stripHTML(data.ribbonDescription)}\r\n \r\n {unlockedMessage}\r\n\r\n {data.isTier == 1 && (\r\n \r\n \r\n \r\n )}\r\n
\r\n {data.ribbonName}
\r\n \r\n {stripHTML(data.ribbonDescription)}\r\n \r\n\r\n \r\n \r\n {numberWithCommas(data.ribbonCount ? data.ribbonCount : 0)}\r\n \r\n
\r\n \r\n \r\n {!showRewards && <>{ribbonsContent}}\r\n {showRewards && (\r\n <>\r\n \r\n {rewardsContent} \r\n \r\n \r\n )}\r\n
\r\n \r\n
Smilegate West reserves the right to modify or remove ribbons at any time without notice.\r\n
\r\n
\r\n );\r\n\r\n const mobileContent = (\r\n \r\n {categories.map(item => (\r\n \r\n {item.label}\r\n \r\n ))}\r\n
\r\n \r\n {`${t('Sort')}: `}\r\n {sortingOrders.map(item => (\r\n \r\n {item.label}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n );\r\n\r\n return mobile ? mobileContent : desktopContent;\r\n}\r\n\r\nfunction InventoryItem({ data }) {\r\n let itemImg = inventoryMissingImg;\r\n let vipIconClass = '';\r\n\r\n vipIconClass = (data.VIP_FLAG) ? ' icon-vip' : '';\r\n\r\n try {\r\n switch (data.ITEM_CATEGORY) {\r\n case 1: //weapon\r\n itemImg = `${CDN_URI_BASE}web/inventory/weapons/300_169/${data.ITEM_CODE}.png`;\r\n break;\r\n case 2: //character\r\n itemImg = `${CDN_URI_BASE}web/inventory/characters/300_169/${data.ITEM_CODE}.png`;\r\n break;\r\n case 3: //name card\r\n itemImg = `${CDN_URI_BASE}web/inventory/namecards/300_169/${data.ITEM_CODE}.png`;\r\n break;\r\n case 4: //spray\r\n itemImg = `${CDN_URI_BASE}web/inventory/sprays/300_169/${data.ITEM_CODE}.png`;\r\n break;\r\n case 5: //costume\r\n itemImg = `${CDN_URI_BASE}web/inventory/costumes/300_169/${data.ITEM_CODE}.png`;\r\n break;\r\n }\r\n } catch {\r\n //do nothing\r\n }\r\n\r\n return (\r\n \r\n
\r\n {data.DISPLAY_NAME}\r\n {statusMsg}
\r\n );\r\n\r\n return (\r\n\r\n \r\n {/* Loading ... */}\r\n
\r\n }\r\n useWindow={true}\r\n threshold={100}\r\n >\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Redirect } from \"react-router-dom\";\r\nimport SubPageTemplate from \"./templates/SubPageTemplate\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport clsx from \"clsx\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport axios from \"axios\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport InfiniteScroll from \"react-infinite-scroller\";\r\nimport Dropdown from \"../components/inputs/Dropdown\";\r\nimport {\r\n profileAPI,\r\n headerAPI,\r\n _link,\r\n numberWithCommas,\r\n CDN_URI,\r\n CDN_URI_BASE,\r\n handleMissingImg,\r\n prefixURI\r\n} from \"../common/utilities\";\r\nimport styles from \"./AchievementsPage.module.scss\";\r\nimport missingAchievementImg from \"../images/achievement-missing.png\";\r\n\r\nconst achievementsPath = `${CDN_URI_BASE}web/achievements/`;\r\n\r\n//keeps track of background-position-x to use for\r\n//a given achievements progress where 'x_y' means\r\n//achieved stage x out of y stages\r\nconst progressBarsImgMapping = {\r\n \"0_1\": \"150px\",\r\n \"1_1\": \"75px\",\r\n \"0_3\": \"450px\",\r\n \"1_3\": \"375px\",\r\n \"2_3\": \"300px\",\r\n \"3_3\": \"225px\",\r\n \"0_5\": \"900px\",\r\n \"1_5\": \"825px\",\r\n \"2_5\": \"750px\",\r\n \"3_5\": \"675px\",\r\n \"4_5\": \"600px\",\r\n \"5_5\": \"525px\"\r\n};\r\n\r\n//quickly done and not robust\r\nconst stripOff = filename => {\r\n let extensionStart = filename.lastIndexOf(\".\");\r\n let extension = filename.substring(extensionStart);\r\n let identifier = filename.substring(0, extensionStart);\r\n let newIdentifier = identifier.substring(0, identifier.indexOf(\"_off\"));\r\n\r\n return newIdentifier + extension;\r\n};\r\n\r\nfunction AchievementItem({ data }) {\r\n let progress =\r\n data.CURRENT_STAGE != 0 ? `(${data.CURRENT_STAGE}/${data.Max})` : \"\";\r\n\r\n let name =\r\n data.CURRENT_STAGE > 0\r\n ? data[`Lvl_${data.CURRENT_STAGE}_Name`]\r\n : data.Display_Name;\r\n\r\n let content = (\r\n \r\n
\r\n \r\n );\r\n\r\n return (\r\n \r\n {name}\r\n
{`${data.Rewards}`}
\r\n\r\n {!pageStatus ? \r\n {content}\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\n\r\nexport function TabPanel(props) {\r\n const { children, value, index, ...other } = props;\r\n \r\n return (\r\n \r\n {t('Data displayed is updated every 24 hours.')}\r\n
\r\n\r\n
\r\n \r\n
\r\n {collectorsText}
\r\n\r\n \r\n
\r\n {rewardsText}
\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
\r\n \r\n : {collectionItemsCache.collectors}
\r\n \r\n
;\r\n\r\n collectionContainer = {collectionItemsCache.collectors}
\r\n \r\n {collectionItemsCache.name}\r\n
\r\n {t(collectorsTitleText)}
\r\n {CollectorCountElement}\r\n {t(rewardTitleText)}
\r\n
\r\n {collectionItemsCache.reward_Desc}
\r\n\r\n
\r\n {collectionItemsCache.nameCardText}
\r\n{content}
\r\n \r\n\r\n
\r\n );\r\n\r\n\r\n } \r\n}\r\n\r\nclass CollectionWeaponImageDetail extends React.Component{\r\n\tconstructor(props){\r\n super(props);\r\n }\r\n\r\n render (){\r\n\r\n var Weapon = this.props.WeaponInfo;\r\n\r\n return(\r\n\r\n \r\n {currentCollectionRowImgInfo.collection_Name}\r\n
\r\n\r\n {currentProgress}\r\n
\r\n\r\n
\r\n\r\n );\r\n\r\n\r\n } \r\n}\r\n\r\n// override style on Tab for CollectionPage\r\n\r\nvar theme = createMuiTheme({\r\n overrides: {\r\n MuiTabs: {\r\n indicator: {\r\n backgroundColor: 'transparent'\r\n },\r\n fixed: {\r\n overflow: 'inherit !important'\r\n },\r\n scroller: {\r\n overflow: 'inherit !important'\r\n }\r\n }\r\n }\r\n });\r\n\r\n// const newtheme = useTheme();\r\n// const mobileView = useMediaQuery(newtheme.breakpoints.down('sm')); \r\n\r\nclass CollectionsPageViewer extends React.Component{\r\n\r\n\tconstructor(props){\r\n super(props);\r\n \r\n\t this.state = {\r\n outputList: []\r\n ,collections: []\r\n ,collectionRows: []\r\n ,collectionGroups: []\r\n ,collectionItemsCache: []\r\n ,counts: []\r\n ,completed_CNT: ''\r\n ,total_CNT: ''\r\n ,tabItemLimit: this.props.tabItemLimit\r\n ,contentReady: false\r\n ,selectedTab: false\r\n ,errorData: \r\n \r\n\r\n
\r\n \r\n
\r\n {Weapon.item_Name}
\r\n\r\n
\r\n ); \r\n }\r\n\r\n\r\n getCollections(){\r\n\r\n //console.log('getting collections')\r\n\r\n var apilink = profileAPI;\r\n\r\n var params = {};\r\n\r\n var tabItemLimit = this.props.tabItemLimit;\r\n\r\n var _this = this;\r\n\r\n params.command = 'weaponcollection';\r\n params.usn = this.props.usn;\r\n params.order = 1; //(default: 1 by group, 2 by most completed)\r\n\r\n axios.get(apilink, {params: params})\r\n .then(function(response){\r\n \r\n if(response.data){\r\n\r\n if(response.data.APIresult && '000' == response.data.APIresult\r\n && response.data.p_o_ErrID && '1' == response.data.p_o_ErrID\r\n && !response.data.p_o_ErrDesc && response.data.dsCollectionResult \r\n && response.data.dsCollectionTotal && response.data.dsCollectionTotal[0]\r\n && response.data.dsWeaponCollectionGroupListResult\r\n && response.data.APImessage && 'OK' == response.data.APImessage){\r\n\r\n //console.log('SUCCESS: retrieved user mode data');\r\n //console.log(response.data.dsCollectionTotal);\r\n //console.log(response.data.dsCollectionResult);\r\n\r\n // separate into groups\r\n //collectionGroups\r\n var myCollectionGroups = [];\r\n\r\n for (var cg=0; cg < response.data.dsWeaponCollectionGroupListResult.length; cg++) {\r\n\r\n // create collection group and map collection items to it\r\n myCollectionGroups.push(response.data.dsWeaponCollectionGroupListResult[cg]);\r\n\r\n if(response.data.dsCollectionResult.length){\r\n myCollectionGroups[cg].members = response.data.dsCollectionResult.filter(function (collection) {\r\n return (collection.collection_Group_ID === myCollectionGroups[cg].collection_Group_ID);\r\n });\r\n }\r\n // split the collections into chunks (rows) for output\r\n\r\n var i,j,temparray, chunk = _this.props.tabItemLimit;\r\n temparray = [];\r\n for (i=0,j=myCollectionGroups[cg].members.length; i\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n {panelTabs}\r\n \r\n {panelTabDetails}\r\n
\r\n );\r\n }\r\n\r\n if(collectionItems.length){\r\n\r\n GroupedItems.push( \r\n
\r\n );\r\n }\r\n\r\n });\r\n\r\n var allCollections = {element.collection_Group_Name}
\r\n\r\n {collectionItems}\r\n
\r\n \r\n {GroupedItems}\r\n {disclaimerText} \r\n
\r\n\r\n var data = (this.state.total_CNT) ? allCollections : this.state.errorData;\r\n\r\n headingRight = (this.state.total_CNT) ? this.state.completed_CNT + '/' + this.state.total_CNT : '';\r\n\r\n\r\n var collectionsChild = \r\n\r\n {data}\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {skeleton} \r\n {skeleton} \r\n {skeleton} \r\n {skeleton} \r\n {skeleton} \r\n {skeleton} \r\n \r\n
\r\n \r\n {collectionsChild}\r\n
\r\n \r\n }\r\n \r\n {!pageStatus ?
\r\n );\r\n\r\n\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Box from '@material-ui/core/Box';\r\nimport Container from \"@material-ui/core/Container\";\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport Skeleton from '@material-ui/lab/Skeleton';\r\nimport {\r\n getUSN, \r\n generatePage_no_USN_URI,\r\n generatePageURI, \r\n headerAPI,\r\n pagePaths,\r\n prefixURI,\r\n weaponsAPI,\r\n profileAPI,\r\n _link,\r\n CDN_URI\r\n} from '../common/utilities';\r\nimport moment from 'moment';\r\nimport styles from './collectionleadersPage.module.css';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport SubPageTemplate from \"./templates/SubPageTemplate\";\r\nimport { pageHeaderData } from \"./sampleData/sampleData\";\r\nimport { MuiThemeProvider, createMuiTheme, useTheme } from \"@material-ui/core/styles\";\r\nimport ReactImageFallback from \"react-image-fallback\";\r\nimport { Translation, Trans } from \"react-i18next\";\r\nimport axios from \"axios\";\r\nimport { ThemeProvider } from '@material-ui/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\n\r\nconst LB_API_RSLT_DATE_FORMAT = \"YYYY/MM/DD HH:mm:ss.SSS\";\r\n\r\nclass CurrentPlayerInfoBox extends React.Component{\r\n\r\n\tconstructor(props){\r\n super(props);\r\n }\r\n\r\n render(){\r\n\r\n if(this.props.signedIn){\r\n\r\n if(this.props.player && this.props.player.last_Item_Date){\r\n\r\n return(\r\n \r\n {message}\r\n
\r\n ); \r\n }\r\n}\r\n\r\nclass RankedPlayer extends React.Component{\r\n\r\n\tconstructor(props){\r\n super(props);\r\n }\r\n\r\n render(){\r\n\r\n var playerUSN = (this.props.player && this.props.player.USN) ? this.props.player.USN : null;\r\n var ROWPOS = (this.props.player && this.props.player.ROWPOS) ? parseInt(this.props.player.ROWPOS,10) : 0;\r\n var nick = (this.props.player && this.props.player.nick) ? this.props.player.nick : null;\r\n var currentUserUSN = (this.props.usn) ? this.props.usn : null;\r\n\r\n const LB_FINAL_DATE_FORMAT = window._region === 'BR' ? \r\n \"DD-MM-YYYY HH:mm:ss\" : \"YYYY-MM-DD HH:mm:ss\";\r\n var myDate = (this.props.player \r\n && this.props.player.last_Item_Date) ? \r\n moment(\r\n this.props.player.last_Item_Date, \r\n LB_API_RSLT_DATE_FORMAT\r\n ).format(LB_FINAL_DATE_FORMAT) :\r\n null;\r\n\r\n var collectionsLink = '/collections/';\r\n var cid = (this.props.cid) ? this.props.cid : null;\r\n\r\n var nameString = (this.props.currentUser) \r\n ? nick\r\n : {nick};\r\n\r\n var rankClassToUse = styles.collectionRankBox;\r\n\r\n switch(ROWPOS){\r\n case 1: {\r\n rankClassToUse += ' ' + styles.collectionRankBox1\r\n }break;\r\n case 2: {\r\n rankClassToUse += ' ' + styles.collectionRankBox2\r\n }break;\r\n case 3: {\r\n rankClassToUse += ' ' + styles.collectionRankBox3\r\n }break;\r\n }\r\n\r\n //if(this.props.currentUser){\r\n // rankClassToUse = styles.collectionRankBoxUser;\r\n //}\r\n\r\n if(playerUSN){\r\n return(\r\n \r\n
\r\n );\r\n }else{\r\n return(null);\r\n }\r\n }\r\n}\r\n\r\n\r\nclass CollectionsLeadersViewer extends React.Component{\r\n\r\n\tconstructor(props){\r\n super(props);\r\n \r\n\t this.state = {\r\n outputList: []\r\n ,usn: this.props.usn\r\n ,collections: []\r\n //not needed anymore, delete when ready\r\n // ,collection: getcollectionID\r\n ,collectionInfo: null\r\n ,top3Leaders: null\r\n ,restOfLeaders: null\r\n ,currentUser: null\r\n ,userSignedIn: false\r\n ,contentReady: false\r\n ,errorData: \r\n
\r\n {ROWPOS}
\r\n \r\n
\r\n \r\n {nameString}\r\n {myDate} \r\n
\r\n \r\n
\r\n }\r\n \r\n \r\n \r\n \r\n\r\n {showSignInBox}\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 {followers && \r\n
\r\n\r\n {this.state.collectionInfo.collection_Name}
\r\n\r\n {this.state.collectionInfo.total_CNT}
\r\n\r\n \r\n \r\n {followers}\r\n \r\n
}\r\n {t(disclaimerText)}
\r\n \r\n {allLeaders}\r\n
;\r\n\r\n }else{\r\n\r\n var collectionsLeadersChild = \r\n
;\r\n\r\n }\r\n\r\n return (\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 \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\r\n \r\n {!pageStatus ?
\r\n );\r\n\r\n\r\n}\r\n","import React, { useRef, useState, useEffect } from \"react\";\r\nimport SubPageTemplate from \"./templates/SubPageTemplate\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogActions from \"@material-ui/core/DialogActions\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport { useTranslation, Trans } from \"react-i18next\";\r\nimport clsx from \"clsx\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport axios from \"axios\";\r\nimport { Container } from \"@material-ui/core\";\r\nimport { useTheme } from \"@material-ui/core/styles\";\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport SvgIcon from \"@material-ui/core/SvgIcon\";\r\nimport CancelIcon from \"@material-ui/icons/Cancel\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n profileAPI,\r\n headerAPI,\r\n _link,\r\n CDN_URI_BASE,\r\n numberWithCommas,\r\n hostingServices,\r\n generatePageURI,\r\n isValidImgURL,\r\n pagePaths\r\n} from \"../common/utilities\";\r\nimport styles from \"./ProfileManagerPage.module.scss\";\r\nimport ActionButton from \"../components/inputs/ActionButton\";\r\nimport { duration } from \"@material-ui/core/styles\";\r\n\r\nconst imgType = {\r\n BANNER: 1,\r\n AVATAR: 2\r\n};\r\n\r\nfunction CancelButton({ onClick }) {\r\n return (\r\n \r\n \r\n {currentURL}\r\n {url &&
\r\n );\r\n}\r\n\r\nfunction PageContent(props) {\r\n const {\r\n mobile,\r\n usn,\r\n initialBannerURL = \"\",\r\n initialAvatarURL = \"\",\r\n data\r\n } = props;\r\n\r\n const { t, i18n } = useTranslation();\r\n\r\n const resultMsgEl = useRef(null);\r\n const bannerURLInputEl = useRef(null);\r\n const avatarURLInputEl = useRef(null);\r\n const hostingServicesEl = useRef(null);\r\n const resultMsgTimeoutDuration = 5000; //in ms\r\n\r\n const [bannerURLInput, setBannerURLInput] = useState(\"\");\r\n const [avatarURLInput, setAvatarURLInput] = useState(\"\");\r\n const [bannerURLInputErrMsg, setBannerURLInputErrMsg] = useState(\"\");\r\n const [avatarURLInputErrMsg, setAvatarURLInputErrMsg] = useState(\"\");\r\n const [bannerURLInputSuccess, setBannerURLInputSuccess] = useState(false);\r\n const [avatarURLInputSuccess, setAvatarURLInputSuccess] = useState(false);\r\n const [bannerURL, setBannerURL] = useState();\r\n const [avatarURL, setAvatarURL] = useState();\r\n const [resultMsg, setResultMsg] = useState();\r\n const [formDisabled, setFormDisabled] = useState(false);\r\n\r\n const [dialogOpen, setDialogOpen] = useState(false);\r\n const [dialogRemoveImgType, setDialogRemoveImgType] = useState();\r\n const [resultMsgTimeoutID, setResultMsgTimeoutID] = useState();\r\n\r\n useEffect(() => {\r\n setBannerURL(data.URL1_TEXT != null ? data.URL1_TEXT : \"\");\r\n setAvatarURL(data.URL2_TEXT != null ? data.URL2_TEXT : \"\");\r\n }, []);\r\n\r\n const handleOpenRemoveBannerDialog = e => {\r\n e.preventDefault();\r\n if (!formDisabled) {\r\n setDialogRemoveImgType(imgType.BANNER);\r\n setDialogOpen(true);\r\n }\r\n };\r\n\r\n const handleOpenRemoveAvatarDialog = e => {\r\n e.preventDefault();\r\n if (!formDisabled) {\r\n setDialogRemoveImgType(imgType.AVATAR);\r\n setDialogOpen(true);\r\n }\r\n };\r\n\r\n const handleCloseDialog = () => {\r\n setDialogOpen(false);\r\n setDialogRemoveImgType(null);\r\n };\r\n\r\n const handleRemoveImgTypeURL = () => {\r\n switch (dialogRemoveImgType) {\r\n case imgType.BANNER:\r\n //do ajax call submit\r\n submitURLs(null, \"\", null, () => {\r\n //on fail\r\n setBannerURLInputErrMsg(\"An error occured.\");\r\n scrollToRef(bannerURLInputEl);\r\n });\r\n break;\r\n case imgType.AVATAR:\r\n submitURLs(\"\", null, null, () => {\r\n //on fail\r\n setAvatarURLInputErrMsg(t(\"An error occured.\"));\r\n scrollToRef(avatarURLInputEl);\r\n });\r\n break;\r\n }\r\n setDialogRemoveImgType(null);\r\n setDialogOpen(false);\r\n };\r\n\r\n const handleBannerURLInputChange = e => {\r\n setBannerURLInput(e.target.value);\r\n setBannerURLInputErrMsg(null);\r\n setBannerURLInputSuccess(false);\r\n };\r\n\r\n const handleAvatarURLInputChange = e => {\r\n setAvatarURLInput(e.target.value);\r\n setAvatarURLInputErrMsg(null);\r\n setAvatarURLInputSuccess(false);\r\n };\r\n\r\n //paramters:\r\n //null - make input explicitly set to ''\r\n //'' - make input set to whatever currrentvalue is\r\n //\r\n
\r\n \r\n );\r\n}\r\n","import React, { Suspense, useEffect } from \"react\";\nimport {\n BrowserRouter as Router,\n Route,\n Link,\n Redirect,\n Switch,\n useHistory\n} from \"react-router-dom\";\nimport axios from \"axios\";\nimport ErrorPage from \"./pages/ErrorPage\";\nimport MainPage from \"./pages/MainPage\";\nimport SubPageTemplate from \"./pages/templates/SubPageTemplate\";\nimport RibbonsPage from \"./pages/RibbonsPage\";\nimport InventoryPage from \"./pages/InventoryPage\";\nimport AchievementsPage from \"./pages/AchievementsPage\";\nimport CollectionsPage from \"./pages/CollectionsPage\";\nimport CollectionsLeaderPage from \"./pages/CollectionLeadersPage\";\nimport ProfileManagerPage from \"./pages/ProfileManagerPage\";\nimport RankedStatsPage from \"./pages/RankedStatsPage\";\nimport { pageHeaderData } from \"./pages/sampleData/sampleData\";\n\nimport { pagePaths, prefixURI, error404url, hideFooter, _link } from \"./common/utilities\";\n\n//we are assuming page will be just one directory deep\n//from hostname (e.g. /\r\n \r\n
\r\n \r\n \r\n );\r\n}","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import i18n from 'i18next';\r\nimport Backend from 'i18next-xhr-backend';\r\nimport LanguageDetector from 'i18next-browser-languagedetector';\r\nimport { initReactI18next } from 'react-i18next';\r\nimport { _link } from \"./common/utilities\";\r\n\r\nconst fallbackLng = ['en'];\r\nconst availableLanguages = ['en'];\r\n\r\n//force br use temporiarly -- good for translation dev on storybook\r\n//comment out when building react app\r\n// window._region = 'BR';\r\n\r\ni18n\r\n .use(Backend) // load translation using xhr -> see /public/locales. We will add locales in the next step\r\n\r\n .use(LanguageDetector) // detect user language\r\n\r\n .use(initReactI18next) // pass the i18n instance to react-i18next.\r\n\r\n .init({\r\n fallbackLng: fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier\r\n debug: false,\r\n whitelist: availableLanguages,\r\n keySeparator: false, //allows use of '.' in translations\r\n nsSeparator: false, //allows use of ':' in translations\r\n\r\n interpolation: {\r\n escapeValue: false\r\n },\r\n\r\n backend: {\r\n // path where resources get loaded from, or a function\r\n // returning a path:\r\n // function(lngs, namespaces) { return customPath; }\r\n // the returned path will interpolate lng, ns if provided like giving a static path\r\n //loadPath: _link[\"url_crossfire_na\"] + '/locales/translation.json',\r\n // loadPath: 'https://crossfire.z8games.com/locales/translation.json',\r\n loadPath: window._region === 'BR' ? '//br.crossfire.z8games.com/locales/translation.json' : '//crossfire.z8games.com/locales/translation.json',\r\n //loadPath: '/locales/en/translation.json',\r\n\r\n // path to post missing resources\r\n //addPath: 'locales/add/{{lng}}/{{ns}}',\r\n\r\n // your backend server supports multiloading\r\n // /locales/resources.json?lng=de+en&ns=ns1+ns2\r\n // Adapter is needed to enable MultiLoading https://github.com/i18next/i18next-multiload-backend-adapter\r\n // Returned JSON structure in this case is\r\n // {\r\n // lang : {\r\n // namespaceA: {},\r\n // namespaceB: {},\r\n // ...etc\r\n // }\r\n // }\r\n allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading\r\n\r\n // parse data after it has been fetched\r\n // in example use https://www.npmjs.com/package/json5\r\n // here it removes the letter a from the json (bad idea)\r\n // parse: function(data) { return data.replace(/a/g, ''); },\r\n\r\n // allow cross domain requests\r\n crossDomain: true,\r\n\r\n // allow credentials on cross domain requests\r\n withCredentials: false,\r\n\r\n // overrideMimeType sets request.overrideMimeType(\"application/json\")\r\n overrideMimeType: false,\r\n\r\n /*\r\n // custom request headers sets request.setRequestHeader(key, value)\r\n customHeaders: {\r\n authorization: 'foo',\r\n // ...\r\n },\r\n */\r\n\r\n /*\r\n // define a custom xhr function\r\n // can be used to support XDomainRequest in IE 8 and 9\r\n //\r\n // 'url' will be passed the value of 'loadPath'\r\n // 'options' will be this entire options object\r\n // 'callback' is a function that takes two parameters, 'data' and 'xhr'.\r\n // 'data' should be the key:value translation pairs for the\r\n // requested language and namespace, or null in case of an error.\r\n // 'xhr' should be a status object, e.g. { status: 200 }\r\n // 'data' will be a key:value object used when saving missing translations\r\n ajax: function (url, options, callback, data) {},\r\n */\r\n\r\n // adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5'\r\n queryStringParams: { v: '1.0.0' }\r\n }\r\n });\r\n\r\nexport default i18n;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\nimport './i18n';\n\nReactDOM.render({seasonNav}
\r\n \r\n \r\n {seasonOutput}\r\n \r\n
\r\n {seasonNav}
\r\n