"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[685,913],{5913:function(c,b,a){a.r(b);var d=a(5893),e=a(7294),f=a(8299);b.default=function(a){var b=a.className,c=a.style,g=a.layout,h=a.format,i=a.client,j=void 0===i?f.m0:i,k=a.slot,l=a.responsive,m=a.layoutKey,n=a.auto;return(0,e.useEffect)(function(){try{(window.adsbygoogle||[]).push({})}catch(a){console.error(a)}},[]),n?(0,d.jsx)("div",{className:"".concat(b," relative z-0 mx-auto mb-2 flex justify-center overflow-hidden bg-black/10 after:absolute after:bottom-0.5 after:left-1/2 after:-z-10 after:-translate-x-1/2 after:text-xs after:text-white/20 after:content-['ADVERTISEMENT']"),children:(0,d.jsx)("ins",{className:"adsbygoogle",style:c,"data-ad-layout":g,"data-ad-format":h,"data-ad-client":j,"data-ad-slot":k,"data-ad-layout-key":m,"data-full-width-responsive":l})}):(0,d.jsx)("div",{className:"".concat(b," AdContainer relative z-0 mx-auto mb-2 flex justify-center overflow-hidden bg-black/10 after:absolute after:bottom-0.5 after:left-1/2 after:-z-10 after:-translate-x-1/2 after:text-xs after:text-white/20 after:content-['ADVERTISEMENT']"),children:(0,d.jsx)("ins",{className:"adsbygoogle AdContainer",style:c,"data-ad-layout":g,"data-ad-format":h,"data-ad-client":j,"data-ad-slot":k,"data-ad-layout-key":m,"data-full-width-responsive":l})})}},7685:function(f,b,a){a.r(b),a.d(b,{"default":function(){return t}});var g=a(5893),c=a(7294),d=a(1664),h=a.n(d),i=a(7661),j=function(a,b){return(j=Object.setPrototypeOf||({__proto__:[]})instanceof Array&&function(a,b){a.__proto__=b}||function(c,a){for(var b in a)a.hasOwnProperty(b)&&(c[b]=a[b])})(a,b)},k=function(){return(k=Object.assign||function(d){for(var a,b=1,e=arguments.length;b<e;b++)for(var c in a=arguments[b])Object.prototype.hasOwnProperty.call(a,c)&&(d[c]=a[c]);return d}).apply(this,arguments)},e={Pixel:"Pixel",Percent:"Percent"},l={unit:e.Percent,value:.8};function m(a){return"number"==typeof a?{unit:e.Percent,value:100*a}:"string"==typeof a?a.match(/^(\d*(\.\d+)?)px$/)?{unit:e.Pixel,value:parseFloat(a)}:a.match(/^(\d*(\.\d+)?)%$/)?{unit:e.Percent,value:parseFloat(a)}:(console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...'),l):(console.warn("scrollThreshold should be string or number"),l)}var n=function(b){function a(c){var a=b.call(this,c)||this;return a.lastScrollTop=0,a.actionTriggered=!1,a.startY=0,a.currentY=0,a.dragging=!1,a.maxPullDownDistance=0,a.getScrollableTarget=function(){return a.props.scrollableTarget instanceof HTMLElement?a.props.scrollableTarget:"string"==typeof a.props.scrollableTarget?document.getElementById(a.props.scrollableTarget):(null===a.props.scrollableTarget&&console.warn("You are trying to pass scrollableTarget but it is null. This might\n        happen because the element may not have been added to DOM yet.\n        See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.\n      "),null)},a.onStart=function(b){!a.lastScrollTop&&(a.dragging=!0,b instanceof MouseEvent?a.startY=b.pageY:b instanceof TouchEvent&&(a.startY=b.touches[0].pageY),a.currentY=a.startY,a._infScroll&&(a._infScroll.style.willChange="transform",a._infScroll.style.transition="transform 0.2s cubic-bezier(0,0,0.31,1)"))},a.onMove=function(b){a.dragging&&(b instanceof MouseEvent?a.currentY=b.pageY:b instanceof TouchEvent&&(a.currentY=b.touches[0].pageY),a.currentY<a.startY||(a.currentY-a.startY>=Number(a.props.pullDownToRefreshThreshold)&&a.setState({pullToRefreshThresholdBreached:!0}),a.currentY-a.startY>1.5*a.maxPullDownDistance||a._infScroll&&(a._infScroll.style.overflow="visible",a._infScroll.style.transform="translate3d(0px, "+(a.currentY-a.startY)+"px, 0px)")))},a.onEnd=function(){a.startY=0,a.currentY=0,a.dragging=!1,a.state.pullToRefreshThresholdBreached&&(a.props.refreshFunction&&a.props.refreshFunction(),a.setState({pullToRefreshThresholdBreached:!1})),requestAnimationFrame(function(){a._infScroll&&(a._infScroll.style.overflow="auto",a._infScroll.style.transform="none",a._infScroll.style.willChange="unset")})},a.onScrollListener=function(c){"function"==typeof a.props.onScroll&&setTimeout(function(){return a.props.onScroll&&a.props.onScroll(c)},0);var b=a.props.height||a._scrollableNode?c.target:document.documentElement.scrollTop?document.documentElement:document.body;a.actionTriggered||((a.props.inverse?a.isElementAtTop(b,a.props.scrollThreshold):a.isElementAtBottom(b,a.props.scrollThreshold))&&a.props.hasMore&&(a.actionTriggered=!0,a.setState({showLoader:!0}),a.props.next&&a.props.next()),a.lastScrollTop=b.scrollTop)},a.state={showLoader:!1,pullToRefreshThresholdBreached:!1,prevDataLength:c.dataLength},a.throttledOnScrollListener=(function(e,a,b,d){var f,g=!1,h=0;function i(){f&&clearTimeout(f)}function c(){var k=this,j=Date.now()-h,l=arguments;function c(){h=Date.now(),b.apply(k,l)}g||(d&&!f&&c(),i(),void 0===d&&j>e?c():!0!==a&&(f=setTimeout(d?function(){f=void 0}:c,void 0===d?e-j:e)))}return"boolean"!=typeof a&&(d=b,b=a,a=void 0),c.cancel=function(){i(),g=!0},c})(150,a.onScrollListener).bind(a),a.onStart=a.onStart.bind(a),a.onMove=a.onMove.bind(a),a.onEnd=a.onEnd.bind(a),a}return!function(b,a){function c(){this.constructor=b}j(b,a),b.prototype=null===a?Object.create(a):(c.prototype=a.prototype,new c)}(a,b),a.prototype.componentDidMount=function(){if(void 0===this.props.dataLength)throw new Error('mandatory prop "dataLength" is missing. The prop is needed when loading more content. Check README.md for usage');if(this._scrollableNode=this.getScrollableTarget(),this.el=this.props.height?this._infScroll:this._scrollableNode||window,this.el&&this.el.addEventListener("scroll",this.throttledOnScrollListener),"number"==typeof this.props.initialScrollY&&this.el&&this.el instanceof HTMLElement&&this.el.scrollHeight>this.props.initialScrollY&&this.el.scrollTo(0,this.props.initialScrollY),this.props.pullDownToRefresh&&this.el&&(this.el.addEventListener("touchstart",this.onStart),this.el.addEventListener("touchmove",this.onMove),this.el.addEventListener("touchend",this.onEnd),this.el.addEventListener("mousedown",this.onStart),this.el.addEventListener("mousemove",this.onMove),this.el.addEventListener("mouseup",this.onEnd),this.maxPullDownDistance=this._pullDown&&this._pullDown.firstChild&&this._pullDown.firstChild.getBoundingClientRect().height||0,this.forceUpdate(),"function"!=typeof this.props.refreshFunction))throw new Error('Mandatory prop "refreshFunction" missing.\n          Pull Down To Refresh functionality will not work\n          as expected. Check README.md for usage\'')},a.prototype.componentWillUnmount=function(){this.el&&(this.el.removeEventListener("scroll",this.throttledOnScrollListener),this.props.pullDownToRefresh&&(this.el.removeEventListener("touchstart",this.onStart),this.el.removeEventListener("touchmove",this.onMove),this.el.removeEventListener("touchend",this.onEnd),this.el.removeEventListener("mousedown",this.onStart),this.el.removeEventListener("mousemove",this.onMove),this.el.removeEventListener("mouseup",this.onEnd)))},a.prototype.componentDidUpdate=function(a){this.props.dataLength!==a.dataLength&&(this.actionTriggered=!1,this.setState({showLoader:!1}))},a.getDerivedStateFromProps=function(a,b){return a.dataLength!==b.prevDataLength?k(k({},b),{prevDataLength:a.dataLength}):null},a.prototype.isElementAtTop=function(a,b){void 0===b&&(b=.8);var d=a===document.body||a===document.documentElement?window.screen.availHeight:a.clientHeight,c=m(b);return c.unit===e.Pixel?a.scrollTop<=c.value+d-a.scrollHeight+1:a.scrollTop<=c.value/100+d-a.scrollHeight+1},a.prototype.isElementAtBottom=function(a,b){void 0===b&&(b=.8);var d=a===document.body||a===document.documentElement?window.screen.availHeight:a.clientHeight,c=m(b);return c.unit===e.Pixel?a.scrollTop+d>=a.scrollHeight-c.value:a.scrollTop+d>=c.value/100*a.scrollHeight},a.prototype.render=function(){var e=this,a=k({height:this.props.height||"auto",overflow:"auto",WebkitOverflowScrolling:"touch"},this.props.style),b=this.props.hasChildren||!!(this.props.children&&this.props.children instanceof Array&&this.props.children.length),d=this.props.pullDownToRefresh&&this.props.height?{overflow:"auto"}:{};return c.createElement("div",{style:d,className:"infinite-scroll-component__outerdiv"},c.createElement("div",{className:"infinite-scroll-component "+(this.props.className||""),ref:function(a){return e._infScroll=a},style:a},this.props.pullDownToRefresh&&c.createElement("div",{style:{position:"relative"},ref:function(a){return e._pullDown=a}},c.createElement("div",{style:{position:"absolute",left:0,right:0,top:-1*this.maxPullDownDistance}},this.state.pullToRefreshThresholdBreached?this.props.releaseToRefreshContent:this.props.pullDownToRefreshContent)),this.props.children,!this.state.showLoader&&!b&&this.props.hasMore&&this.props.loader,this.state.showLoader&&this.props.hasMore&&this.props.loader,!this.props.hasMore&&this.props.endMessage))},a}(c.Component),o=a(5913),p=a(8299);function q(c,a){(null==a||a>c.length)&&(a=c.length);for(var b=0,d=new Array(a);b<a;b++)d[b]=c[b];return d}function r(a){return function(a){if(Array.isArray(a))return q(a)}(a)||function(a){if("undefined"!=typeof Symbol&&null!=a[Symbol.iterator]||null!=a["@@iterator"])return Array.from(a)}(a)||s(a)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(a,c){if(a){if("string"==typeof a)return q(a,c);var b=Object.prototype.toString.call(a).slice(8,-1);if("Object"===b&&a.constructor&&(b=a.constructor.name),"Map"===b||"Set"===b)return Array.from(b);if("Arguments"===b||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(b))return q(a,c)}}function t(b){var m=b.games,e=b.init,f=b.step,u=void 0===f?5:f,a=b.group,j=m.slice(),q=JSON.parse(localStorage.getItem("scrollGames".concat(a)))||j.slice(0,void 0===e?8:e),s=j.length,k=(0,c.useState)(q),d=k[0],v=k[1],l=(0,c.useState)(!0),t=l[0],w=l[1];return(0,c.useEffect)(function(){localStorage.removeItem("scrollGames".concat(a)),localStorage.setItem("scrollGames".concat(a),JSON.stringify(d))},[d,a]),(0,g.jsx)(g.Fragment,{children:(0,g.jsxs)(n,{style:{overflow:"visible"},dataLength:d.length,next:function(){var a=j.slice(d.length,d.length+u);v(function(b){return r(b).concat(r(a))}),d.length>=s&&w(!t)},hasMore:t,loader:(0,g.jsx)("div",{className:"my-2 text-center",children:"Loading..."}),children:[(0,g.jsx)("ul",{className:"grid grid-cols-4 gap-3 py-3 px-4 md:grid-cols-6 md:gap-6 md:px-12 lg:grid-cols-8 2xl:grid-cols-12",children:d.map(function(a,b){return(b-8)%11==0?(0,g.jsx)("li",{className:"col-span-2 row-span-2 md:col-auto md:row-auto",children:(0,g.jsx)(h(),{href:"/game/".concat(a.slug),children:(0,g.jsxs)("a",{className:"md:delay-50 duration-400 group relative block aspect-square overflow-hidden rounded-2xl shadow-md shadow-black/30 transition ease-in-out hover:shadow-lg hover:shadow-black/40 md:hover:origin-bottom md:hover:scale-110",children:[(0,g.jsx)(i.Z,{src:a.icon,alt:a.title,width:200,height:200,layout:"responsive",className:"w-full bg-loading bg-center bg-no-repeat"}),(0,g.jsx)("div",{className:"absolute -bottom-[150%] hidden h-full w-full items-end justify-center text-center text-xs font-semibold group-hover:bg-gradient-to-t group-hover:from-black group-hover:to-black/0 sm:flex md:group-hover:bottom-0",children:(0,g.jsxs)("div",{className:"h-auto w-full text-ellipsis p-2 text-center",children:[(0,g.jsx)("h3",{className:"leading-4",children:a.title}),(0,g.jsxs)("p",{className:"flex flex-row items-center justify-center text-xl font-bold text-orange-500",children:[(0,g.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"-ml-1 h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:(0,g.jsx)("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"})}),a.stars]})]})})]})})},a.id):(0,g.jsx)("li",{children:(0,g.jsx)(h(),{href:"/game/".concat(a.slug),children:(0,g.jsxs)("a",{className:"md:delay-50 duration-400 group relative block aspect-square overflow-hidden rounded-2xl shadow-md shadow-black/30 transition ease-in-out hover:shadow-lg hover:shadow-black/40 md:hover:origin-bottom md:hover:scale-110",children:[(0,g.jsx)(i.Z,{src:a.icon,alt:a.title,width:200,height:200,layout:"responsive",className:"w-full bg-loading bg-center bg-no-repeat"}),(0,g.jsx)("div",{className:"absolute -bottom-[150%] hidden h-full w-full items-end justify-center text-center text-xs font-semibold group-hover:bg-gradient-to-t group-hover:from-black group-hover:to-black/0 sm:flex md:group-hover:bottom-0",children:(0,g.jsxs)("div",{className:"h-auto w-full text-ellipsis p-2 text-center",children:[(0,g.jsx)("h3",{className:"leading-4",children:a.title}),(0,g.jsxs)("p",{className:"flex flex-row items-center justify-center text-xl font-bold text-orange-500",children:[(0,g.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"-ml-1 h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:(0,g.jsx)("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"})}),a.stars]})]})})]})})},a.id)})}),d.length>=s&&a%2==1&&a<5?1==a?(0,g.jsx)(o.default,{className:"banner",style:{display:"block"},slot:p.oY.home,responsive:"false"}):(0,g.jsx)(o.default,{style:{display:"block"},slot:p.oY.home,responsive:"true",auto:!0}):null]})})}}}])