(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7357],{2770:function(e,t,o){"use strict";o.r(t),o.d(t,{__N_SSP:function(){return Ce},default:function(){return ye}});var r=o(95235),n=o(2784),l=o(7307),a=o(5632),c=o.n(a),i=o(97729),s=o.n(i),d=o(34693),u=o(77216),p=o(20669),h=o(51014),m=o(56007),g=o(51505),f=o(14625),C=o(86409),y=o(29019),j=o(11413),x=o(15820),w=o(87136);function v(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}function b(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?v(Object(o),!0).forEach((function(t){(0,r.Z)(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):v(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}const k="set_active_panel",_="set_active_panel_color",P="set_jcl_color",S="set_jcr_color",$="set_scl_color",L="set_scr_color",O="jcl",I="jcr",R="strapl",T="strapr",D=(e,t)=>b(b({},e),((e,t)=>{let{type:o,payload:r}=t;switch(o){case k:switch(r.activePanel){case O:return{activePanel:r.activePanel,selectedActiveColor:e.selectedJoyConLeftColor,activePanelColors:r.joyConColors.joycon.left};case I:return{activePanel:r.activePanel,selectedActiveColor:e.selectedJoyConRightColor,activePanelColors:r.joyConColors.joycon.right};case R:return{activePanel:r.activePanel,selectedActiveColor:e.selectedStrapLeftColor,activePanelColors:r.joyConColors.straps.left};default:return{activePanel:r.activePanel,selectedActiveColor:e.selectedStrapRightColor,activePanelColors:r.joyConColors.straps.right}}case _:switch(e.activePanel){case O:return{selectedActiveColor:r.colorCode,selectedJoyConLeftColor:r.colorCode};case I:return{selectedActiveColor:r.colorCode,selectedJoyConRightColor:r.colorCode};case R:return{selectedActiveColor:r.colorCode,selectedStrapLeftColor:r.colorCode};default:return{selectedActiveColor:r.colorCode,selectedStrapRightColor:r.colorCode}}case P:return{selectedJoyConLeftColor:r.colorCode};case S:return{selectedJoyConRightColor:r.colorCode};case $:return{selectedStrapLeftColor:r.colorCode};case L:return{selectedStrapRightColor:r.colorCode}}})(e,t)),E=e=>"string"===typeof e&&e.replace("#",""),J=(e,t)=>{const o=((e,t)=>t?.find((t=>{let{colorCode:o}=t;return`#${e}`.toLowerCase()===o.toLowerCase()||`${e}`.toLowerCase()===o.toLowerCase()})))(e,t);return o?o.colorCode:t?.[0]?.colorCode},N=(e,t)=>{const o=((e,t)=>t?.filter((t=>{let{colorCode:o}=t;return`#${e}`.toLowerCase()===o.toLowerCase()||`${e}`.toLowerCase()===o.toLowerCase()})))(e,t);return o.map((e=>{let{sku:t}=e;return t}))};var Z=o(16577),Q=o(43499),A=o(51855),K=o(35246),U=o(6836);const G="#e60012",M=(0,l.default)(C.He).withConfig({componentId:"sc-n2k109-0"})(["max-width:73.75rem;"]),W=l.default.div.withConfig({componentId:"sc-n2k109-1"})(["display:flex;flex-direction:column;","{display:grid;grid-template-columns:80% 20%;}"],(e=>{let{theme:t}=e;return t.mediaQuery.desktop})),z=l.default.div.withConfig({componentId:"sc-n2k109-2"})(["width:100%;position:relative;aspect-ratio:920 / 412;","{max-height:",";}"],(e=>{let{theme:t}=e;return t.mediaQuery.desktop}),(e=>{let{theme:t}=e;return t.pxToRem(412)})),q=l.default.div.withConfig({componentId:"sc-n2k109-3"})(["position:absolute;right:0;z-index:100;","{right:inherit;left:0;}"],(e=>{let{theme:t}=e;return t.mediaQuery.desktop})),H=l.default.div.withConfig({componentId:"sc-n2k109-4"})(["display:flex;flex-direction:row;gap:",";width:100%;margin-bottom:",";","{max-width:",";gap:",";margin-left:auto;margin-right:auto;}","{flex-direction:column;gap:",";margin:0;}"],(e=>{let{theme:t}=e;return t.pxToRem(6)}),(e=>{let{theme:t}=e;return t.spacing[24]}),(e=>{let{theme:t}=e;return t.mediaQuery.tablet}),(e=>{let{theme:t}=e;return t.pxToRem(560)}),(e=>{let{theme:t}=e;return t.spacing[8]}),(e=>{let{theme:t}=e;return t.mediaQuery.desktop}),(e=>{let{theme:t}=e;return t.spacing[4]})),V=(0,l.default)(g.D).withConfig({componentId:"sc-n2k109-5"})(["width:100%;","{display:flex;justify-items:flex-start;}"],(e=>{let{theme:t}=e;return t.mediaQuery.desktop})),B=l.default.div.withConfig({componentId:"sc-n2k109-6"})(["display:flex;justify-content:center;width:100%;min-height:",";padding:",";margin-bottom:",";background-color:",";","{max-width:",";margin-left:auto;margin-right:auto;margin-bottom:",";}"],(e=>{let{theme:t}=e;return t.pxToRem(84)}),(e=>{let{theme:t}=e;return`${t.pxToRem(24)} ${t.pxToRem(36)}`}),(e=>{let{theme:t}=e;return t.pxToRem(6)}),(e=>{let{theme:t}=e;return t.color.lightGray4}),(e=>{let{theme:t}=e;return t.mediaQuery.tablet}),(e=>{let{theme:t}=e;return t.pxToRem(560)}),(e=>{let{theme:t}=e;return t.spacing[8]})),F=l.default.div.withConfig({componentId:"sc-n2k109-7"})(["display:flex;justify-content:center;align-items:center;width:100%;height:",";background-color:",";border-top:4px solid ",";","{display:grid;grid-template-columns:25% 75%;justify-items:center;border-top:none;border-left:4px solid ",";}"],(e=>{let{theme:t}=e;return t.pxToRem(100)}),(e=>{let{theme:t,selected:o}=e;return o?"#eeeeee":t.color.lightGray4}),(e=>{let{theme:t,selected:o}=e;return o?G:`${t.color.lightGray4}`}),(e=>{let{theme:t}=e;return t.mediaQuery.desktop}),(e=>{let{theme:t,selected:o}=e;return o?G:`${t.color.lightGray4}`})),X=(0,l.default)(C.c4).withConfig({componentId:"sc-n2k109-8"})(["","{justify-content:flex-start;padding-right:",";}"],(e=>{let{theme:t}=e;return t.mediaQuery.desktop}),(e=>{let{theme:t}=e;return t.spacing[8]})),Y=(0,l.default)(u.H).attrs({variant:"h1",large:!0}).withConfig({componentId:"sc-n2k109-9"})(["display:block;margin-bottom:",";","{margin-bottom:0;}"],(e=>{let{theme:t}=e;return t.spacing[20]}),(e=>{let{theme:t}=e;return t.mediaQuery.desktop})),ee=(0,l.default)(K.D).withConfig({componentId:"sc-n2k109-10"})(["margin-bottom:",";"],(e=>{let{theme:t}=e;return t.spacing[32]})),te=(0,l.default)(C.rj).withConfig({componentId:"sc-n2k109-11"})(["margin-top:",";","{column-gap:",";}"],(e=>{let{theme:t}=e;return t.spacing[32]}),(e=>{let{theme:t}=e;return t.mediaQuery.desktop}),(e=>{let{gap:t,gapDesktop:o}=e;return o||t||"1em"})),oe=l.default.div.withConfig({componentId:"sc-n2k109-12"})(["display:inline-flex;justify-content:center;"]),re=l.default.div.withConfig({componentId:"sc-n2k109-13"})(["display:flex;justify-content:center;align-items:center;margin-bottom:",";"],(e=>{let{theme:t}=e;return t.spacing[32]})),ne=l.default.button.withConfig({componentId:"sc-n2k109-14"})(["height:",";border:none;background-color:transparent;padding:0;cursor:pointer;svg{color:",";height:",";}&:hover{svg{color:",";}}"],(e=>{let{theme:t}=e;return t.pxToRem(25)}),(e=>{let{theme:t}=e;return t.color.darkGray3}),(e=>{let{theme:t}=e;return t.pxToRem(25)}),(e=>{let{theme:t}=e;return t.color.black})),le=l.default.div.withConfig({componentId:"sc-n2k109-15"})(["display:flex;"]),ae=l.default.button.withConfig({componentId:"sc-n2k109-16"})(["background-color:",";margin-left:",";width:",";height:",";border-radius:",";border:none;padding:0;cursor:",";&:last-child{margin-right:",";}&:hover{background-color:",";}"],(e=>{let{theme:t,selected:o}=e;return o?t.color.black:t.color.darkGray3}),(e=>{let{theme:t}=e;return t.spacing[16]}),(e=>{let{theme:t}=e;return t.spacing[8]}),(e=>{let{theme:t}=e;return t.spacing[8]}),(e=>{let{theme:t}=e;return t.spacing[8]}),(e=>{let{selected:t}=e;return t?"default":"pointer"}),(e=>{let{theme:t}=e;return t.spacing[16]}),(e=>{let{theme:t}=e;return t.color.black})),ce=(0,l.default)(U.I).withConfig({componentId:"sc-n2k109-17"})(["width:22px;height:64px;z-index:10;"]);var ie=o(52322);const se={[`${Z.W$}:next`]:Z.Uq,[`${Z.Uq}:next`]:Z.Z5,[`${Z.Z5}:next`]:Z.W$,[`${Z.W$}:prev`]:Z.Z5,[`${Z.Uq}:prev`]:Z.W$,[`${Z.Z5}:prev`]:Z.Uq};var de=e=>{const{view:t,onViewChange:o}=e,{text:r}=(0,d.useLocalizer)(),l=(0,n.useCallback)((e=>{const r=e.currentTarget.dataset.direction,n=r?se[`${t}:${r}`]:e.currentTarget.dataset.view;o&&o(n||Z.W$)}),[t,o]);return(0,ie.jsxs)(re,{children:[(0,ie.jsx)(ne,{onClick:l,"data-direction":"prev",children:(0,ie.jsx)(Q.Z,{})}),(0,ie.jsxs)(le,{children:[(0,ie.jsx)(ae,{selected:t===Z.W$,title:r("Handheld View"),"data-view":Z.W$,onClick:l}),(0,ie.jsx)(ae,{selected:t===Z.Uq,title:r("All View"),"data-view":Z.Uq,onClick:l}),(0,ie.jsx)(ae,{selected:t===Z.Z5,title:r("Joy-Con View"),"data-view":Z.Z5,onClick:l})]}),(0,ie.jsx)(ne,{onClick:l,"data-direction":"next",children:(0,ie.jsx)(A.Z,{})})]})},ue=o(30464),pe=o(12192);const he=(0,l.default)(pe.D).withConfig({componentId:"sc-1c0d4ao-0"})(["padding:0;margin-bottom:",";pointer-events:",";cursor:",";"],(e=>{let{theme:t}=e;return t.spacing[24]}),(e=>{let{urlCopied:t}=e;return t?"none":"auto"}),(e=>{let{urlCopied:t}=e;return t?"text":"pointer"})),me=e=>{const{sharedMessageText:t,copiedToClipboardLabel:o,linkLabel:r,onShareClick:l}=e,a=(0,n.useRef)(null),{0:c,1:i}=(0,n.useState)(!1),s=(0,n.useCallback)((async e=>{e.preventDefault();const o={title:document.title,text:t,url:document.location.href};l&&l(),navigator?.share&&navigator?.canShare(o)?navigator.share(o).catch((()=>{})):navigator?.clipboard&&navigator.clipboard.writeText(document.location.href).then((()=>{i(!0)}))}),[t,l]);return(0,n.useEffect)((()=>{c&&(a.current=window.setTimeout((()=>{i(!1)}),3e3))}),[c]),(0,n.useEffect)((()=>()=>window.clearTimeout(a.current)),[]),(0,ie.jsx)(he,{href:"#",icon:ue.Z,urlCopied:c,onClick:s,children:c?o:r})};me.defaultProps={copiedToClipboardLabel:"Link copied"};var ge=me;function fe(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}var Ce=!0,ye=function(e){const{joyConColors:t,page:o,locale:a,preview:i}=e,{modules:v}=o.content,{text:b}=(0,d.useLocalizer)(),{trackJoyConShareClick:Q}=(0,d.useAnalytics)(),A=(0,d.useHashParams)(),{0:K,1:U}=(0,n.useState)(Z.nj.has(A.view)?A.view:Z.W$),{0:G,1:re}=(0,n.useState)("2D"===A.mode),{0:ne,1:le}=(0,n.useState)(K!==Z.W$),{0:ae,1:se}=(0,n.useState)(),ue=(0,l.useTheme)(),{0:{activePanel:pe,selectedActiveColor:he,activePanelColors:me,selectedJoyConLeftColor:Ce,selectedJoyConRightColor:ye,selectedStrapLeftColor:je,selectedStrapRightColor:xe},1:we}=(0,n.useReducer)(D,{activePanel:O,selectedActiveColor:J(A.jcl,t.joycon.left),activePanelColors:t.joycon.left,selectedJoyConLeftColor:J(A.jcl,t.joycon.left),selectedJoyConRightColor:J(A.jcr,t.joycon.right),selectedStrapLeftColor:J(A.stpl,t.straps.left),selectedStrapRightColor:J(A.stpr,t.straps.right)}),ve=(0,n.useMemo)((()=>Array.from(new Set([...N(Ce,t.joycon.left),...N(ye,t.joycon.right),...N(je,t.straps.left),...N(xe,t.straps.right)].filter(Boolean)))),[t,Ce,ye,je,xe]),be=`${Z.GP}/joycon_${w.K2.get(Ce)}_left`,ke=`${Z.GP}/joycon_${w.K2.get(ye)}_right`,_e=`${Z.GP}/strap_${w.K2.get(je)}_left`,Pe=`${Z.GP}/strap_${w.K2.get(xe)}_right`,{data:Se,previousData:$e}=(0,x.aM)(x.o$.gg,{where:{sku:{in:ve}},locale:a}),Le=(0,n.useMemo)((()=>(Se?.products||$e?.products||[]).map(j.Z)),[Se,$e]),Oe=(0,n.useMemo)((()=>{return e=ke,t=_e,o=Pe,`https://assets.nintendo.com/image/upload/l_${(be||"").replace(/\//g,":")}/fl_layer_apply,x_-1000/l_${(t||"").replace(/\//g,":")}/fl_layer_apply,w_935,x_-555,y_330/l_${(o||"").replace(/\//g,":")}/fl_layer_apply,w_935,x_690,y_15/ar_14:9,c_lpad,w_600,bo_10px_solid_white,b_white/${e}`;var e,t,o}),[be,ke,_e,Pe]),Ie=(0,n.useCallback)((()=>{Q(w.K2.get(Ce),w.K2.get(ye),w.K2.get(je),w.K2.get(xe))}),[Q,Ce,ye,je,xe]),Re=(0,n.useCallback)((e=>{re(e)}),[]),Te=(0,n.useCallback)((e=>{const o=e.currentTarget.dataset.panel;o!==R&&o!==T||ne||U(Z.Uq),we({type:k,payload:{activePanel:o,joyConColors:t}})}),[ne,t]),De=(0,n.useCallback)((e=>{13!==e.which&&32!==e.which||Te(e)}),[Te]);(0,n.useEffect)((()=>{c().replace(c().pathname,(0,d.serializeHash)({mode:G?"2D":"3D",view:K,jcl:E(Ce),jcr:E(ye),stpl:E(je),stpr:E(xe)}),{shallow:!0})}),[Ce,ye,je,xe,K,G]),(0,n.useEffect)((()=>{ne||K===Z.W$||le(!0)}),[ne,K]);const Ee=(0,n.useMemo)((()=>{const{selectedBundleCount:e,selectedSingleCount:o}=((e,t)=>{const o=new Set,r=new Set;e.joycon.left.forEach((e=>{let{sku:t,isJoyConBundle:n}=e;n?o.add(t):r.add(t)})),e.joycon.right.forEach((e=>{let{sku:t,isJoyConBundle:n}=e;n?o.add(t):r.add(t)}));let n=0,l=0;return t.forEach((e=>{let{sku:t}=e;o.has(t)?n++:r.has(t)&&l++})),{selectedBundleCount:n,selectedSingleCount:l}})(t,Le);return n=o,(r=e)>1||n>0&&r>0;var r,n}),[t,Le]);return(0,n.useEffect)((()=>{se(!0)}),[]),(0,ie.jsxs)(ie.Fragment,{children:[(0,ie.jsx)(s(),{children:(0,ie.jsx)("meta",{property:"og:image",content:Oe},"og:image")}),(0,ie.jsxs)(y.Kq,{preview:i,children:[(0,ie.jsx)("header",{children:(0,ie.jsxs)(C.mr,{as:M,column:!0,children:[(0,ie.jsx)(Y,{children:v[0].heading}),(0,ie.jsx)(C.Ho,{data:v[0].body})]})}),(0,ie.jsxs)(M,{children:[(0,ie.jsxs)(W,{children:[(0,ie.jsxs)(z,{children:[(0,ie.jsx)(q,{children:ae&&(0,ie.jsx)(C.Zh,{label:b("View in"),enabled:G,onToggleChange:Re})}),G?(0,ie.jsx)(C.k,{joyConLeftImage:be,joyConRightImage:ke,strapLeftImage:_e,strapRightImage:Pe,view:K}):(0,ie.jsx)(C.Du,{joyConLeftColor:Ce,joyConRightColor:ye,wristStrapLeftColor:je,wristStrapRightColor:xe,view:K})]}),(0,ie.jsxs)(g.M,{children:[(0,ie.jsx)(de,{view:K,onViewChange:U}),(0,ie.jsx)(B,{"data-testid":"active-panel",children:(0,ie.jsx)(C.c4,{groupName:"activePanel",selectedColor:he,colors:me,onColorSelected:e=>we({type:_,payload:{colorCode:e}})})})]}),(0,ie.jsxs)(H,{children:[(0,ie.jsxs)(F,{tabIndex:0,selected:pe===O,onClick:Te,onKeyUp:De,"data-panel":O,"data-testid":O,children:[(0,ie.jsx)(ce,{lazyLoad:!1,showPlaceholder:!1,assetPath:be}),(0,ie.jsx)(V,{children:(0,ie.jsx)(X,{groupName:"joyConLeft",selectedColor:Ce,colors:t.joycon.left,onColorSelected:e=>we({type:P,payload:{colorCode:e}})})})]}),(0,ie.jsxs)(F,{tabIndex:0,groupName:"RightConLeft",selected:pe===I,onClick:Te,onKeyUp:De,"data-panel":I,"data-testid":I,children:[(0,ie.jsx)(ce,{lazyLoad:!1,showPlaceholder:!1,assetPath:ke}),(0,ie.jsx)(V,{children:(0,ie.jsx)(X,{groupName:"joyConRight",selectedColor:ye,colors:t.joycon.right,onColorSelected:e=>we({type:S,payload:{colorCode:e}})})})]}),(0,ie.jsxs)(F,{tabIndex:0,selected:pe===R,onClick:Te,onKeyUp:De,"data-panel":R,"data-testid":R,children:[(0,ie.jsx)(ce,{lazyLoad:!1,showPlaceholder:!1,assetPath:_e}),(0,ie.jsx)(V,{children:(0,ie.jsx)(X,{groupName:"strapLeft",selectedColor:je,colors:t.straps.left,onColorSelected:e=>we({type:$,payload:{colorCode:e}})})})]}),(0,ie.jsxs)(F,{tabIndex:0,selected:pe===T,onClick:Te,onKeyUp:De,"data-panel":T,"data-testid":T,children:[(0,ie.jsx)(ce,{lazyLoad:!1,showPlaceholder:!1,assetPath:Pe}),(0,ie.jsx)(V,{children:(0,ie.jsx)(X,{groupName:"strapRight",selectedColor:xe,colors:t.straps.right,onColorSelected:e=>we({type:L,payload:{colorCode:e}})})})]})]}),(0,ie.jsx)(g.D,{children:(0,ie.jsx)(de,{view:K,onViewChange:U})}),(0,ie.jsx)("div",{}),(0,ie.jsx)(oe,{children:(0,ie.jsx)(ge,{copiedToClipboardLabel:b("Link copied"),sharedMessageText:b("Check out my Joy-Con combo at the My Nintendo Store:"),linkLabel:b("Share a link to your combo"),onShareClick:Ie})})]}),(0,ie.jsx)(ee,{color:ue.color.black}),(0,ie.jsx)(u.H,{children:b("Shop your combo:")}),Ee&&(0,ie.jsxs)(ie.Fragment,{children:[(0,ie.jsx)(p.S,{size:24}),(0,ie.jsxs)(h.N,{Icon:m.Z,type:"maintenance",children:[(0,ie.jsx)("b",{children:b("Note:")})," ",b("Some of the items in your color combo come in a set.")]})]}),Le.length>0&&(0,ie.jsx)(te,{columnsMobile:2,gapDesktop:ue.spacing[44],children:Le.map((e=>(0,ie.jsx)(f.I8,function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?fe(Object(o),!0).forEach((function(t){(0,r.Z)(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):fe(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}({},e),e.sku)))})]})]})]})}},16577:function(e,t,o){"use strict";o.d(t,{GP:function(){return d},Uq:function(){return c},W$:function(){return l},Z5:function(){return a},nj:function(){return s}});var r=o(13980),n=o.n(r);const l="handheld",a="joycon",c="all",i=[l,a,c],s=new Set(i),d=(n().oneOf(i),"ncom/icons/JoyCon-Straps-Switch")},29173:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/switch/choose-your-joy-con-color",function(){return o(2770)}])},51505:function(e,t,o){"use strict";o.d(t,{D:function(){return l},M:function(){return n},S:function(){return a}});var r=o(7307);const n=r.default.div.withConfig({componentId:"sc-5immi9-0"})(["","{display:none;}"],(({theme:e})=>e.mediaQuery.desktop)),l=r.default.div.withConfig({componentId:"sc-5immi9-1"})(["display:none;","{display:block;}"],(({theme:e})=>e.mediaQuery.desktop)),a=r.default.div.withConfig({componentId:"sc-5immi9-2"})(["display:grid;grid-template-columns:1fr auto;column-gap:",";align-items:flex-end;","{display:flex;justify-content:space-between;justify-content:flex-end;}"],(({theme:e})=>e.spacing[8]),(({theme:e})=>e.mediaQuery.desktop))}},function(e){e.O(0,[1850,5208,8286,4511,929,6409,9019,9774,2888,179],(function(){return t=29173,e(e.s=t);var t}));var t=e.O();_N_E=t}]);