https://c-lol-web.op.gg/app-router/releases/production-298-1-d4609…/static/chunks/9469.1a3c7a0f379ce536.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9469],{89469:(e,l,r)=>{r.r(l),r.d(l,{SkillOrderEditor:()=>m,SkillOrderPreview:()=>h});var t=r(95155),i=r(12115),a=r(45191),n=r(97360),s=r(80160),o=r(64269);let d={Q:5,W:5,E:5,R:3},c={Q:"text-blue-600",W:"text-teal-600",E:"text-orange-600",R:"text-main-500"};function u(e){let{championAsset:l,labels:r,order:i,priority:u,readOnly:p,dragSource:f,dropTarget:g,canAssign:x,onAddSkill:v,onAssignSkill:m,onMoveLevel:h,onRemoveLevel:b,onPriorityDragStart:y,onPriorityDragOver:k,onPriorityDrop:j,onPriorityDragEnd:N}=e,w=e=>{var r;return null==l||null==(r=l.spells)?void 0:r.find(l=>l.key===e)};return(0,t.jsxs)("section",{className:"h-[238px] w-[516px] overflow-hidden rounded bg-gray-0 p-3 ring-1 ring-inset ring-gray-250","data-skill-order-card":!0,children:[(0,t.jsxs)("header",{className:"flex h-5 w-[492px] items-center justify-between","data-skill-order-header":!0,children:[(0,t.jsx)("h3",{className:"min-w-0 truncate text-sm font-bold leading-5 text-gray-500",children:(0,n.p9)(r,"skillOrderTitle","Skill Order")}),(0,t.jsxs)("span",{className:"flex h-4 min-w-10 items-center justify-center rounded bg-main-200 px-1 py-0.5 text-2xs font-normal leading-[14px] text-main-800","data-skill-order-level-count":i.length,children:[(0,t.jsxs)("span",{className:"sr-only",children:[(0,n.p9)(r,"skillOrder","Skill order")," "]}),"Lv. ",i.length]})]}),(0,t.jsx)("div",{className:"mt-3 flex h-[68px] w-[248px] items-start",children:u.map((e,l)=>{let a=w(e),c=(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:"m-1 flex size-9 items-center justify-center overflow-hidden rounded bg-gray-100",children:(null==a?void 0:a.imageUrl)?(0,t.jsx)("img",{src:a.imageUrl,alt:"",className:"size-9 object-cover",draggable:!1}):(0,t.jsx)("span",{className:"text-xs font-bold text-gray-500",children:e})}),(0,t.jsxs)("span",{className:"h-4 text-center text-xs font-normal leading-4 text-gray-500",children:[i.filter(l=>l===e).length,"/",d[e]]})]});return(0,t.jsxs)("span",{className:"contents",children:[p?(0,t.jsx)("span",{className:"flex h-[68px] w-11 shrink-0 flex-col","data-skill-order-priority-skill":e,children:c}):(0,t.jsx)("button",{type:"button",draggable:!0,"aria-label":(0,n.wR)(r,"skillOrderPrioritySkill","Skill priority {skill}",{skill:e}),"data-testid":"skill-priority-".concat(e),"data-skill-order-priority-skill":e,onClick:()=>v(e),onDragStart:l=>y(l,e),onDragOver:l=>k(l,e),onDrop:l=>j(l,e),onDragEnd:N,className:(0,o.cn)("flex h-[68px] w-11 shrink-0 flex-col rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-main-800",f===e&&"opacity-50",g===e&&"ring-1 ring-main-800"),children:c}),l<u.length-1?(0,t.jsx)("span",{className:"mt-[18px] flex h-8 w-6 shrink-0 items-center justify-center text-gray-500","data-skill-order-priority-arrow":!0,"aria-hidden":"true",children:(0,t.jsx)(s.hI,{className:"size-6"})}):null]},e)})}),(0,t.jsx)("div",{className:"mt-3 flex h-[102px] w-[492px] flex-col gap-0.5",children:a.Lo.map(e=>{let l=w(e),a=x(e,i.length);return(0,t.jsxs)("div",{className:(0,o.cn)("flex h-6 w-[492px] items-center gap-0.5 rounded transition-colors",!p&&a&&"cursor-pointer focus-within:bg-main-100 hover:bg-main-100"),"data-skill-order-row":e,onClick:p?void 0:l=>{!l.target.closest("button")&&a&&v(e)},children:[(0,t.jsx)("span",{className:"flex size-6 shrink-0 items-center justify-center overflow-hidden rounded bg-gray-100",children:(null==l?void 0:l.imageUrl)?(0,t.jsx)("img",{src:l.imageUrl,alt:"",className:"size-6 object-cover",draggable:!1}):(0,t.jsx)("span",{className:"text-2xs font-bold text-gray-500",children:e})}),Array.from({length:18},(l,a)=>{let d=i[a]===e,u=a+1,f=d?u:null,g=a===i.length&&x(e,a),v=d||x(e,a),y=(0,o.cn)("group relative flex size-6 shrink-0 items-center justify-center rounded text-xs font-bold leading-4",d?c[e]:"bg-gray-100 text-gray-500",d&&"before:absolute before:inset-0 before:rounded before:bg-current before:opacity-20");return p?(0,t.jsx)("span",{className:y,"data-skill-order-cell":"".concat(e,"-").concat(u),"data-selected":d,children:(0,t.jsx)("span",{className:"relative",children:f})},u):(0,t.jsxs)("button",{type:"button",draggable:d,"aria-disabled":!v||void 0,"aria-label":(0,n.wR)(r,"skillOrderLevel","Level {level}: {skill}",{level:u,skill:e}),"aria-keyshortcuts":d?"Delete Backspace":void 0,"data-testid":d?"skill-order-".concat(a):void 0,"data-skill-order-cell":"".concat(e,"-").concat(u),"data-selected":d,onClick:()=>{v&&m(e,a)},onKeyDown:e=>

1{d&&("Delete"===e.key||"Backspace"===e.key)&&(e.preventDefault(),b(a))},onContextMenu:e=>{d&&(e.preventDefault(),b(a))},onDragStart:e=>{e.dataTransfer.setData("text/plain",String(a)),e.dataTransfer.effectAllowed="move"},onDragOver:e=>{e.dataTransfer.types.includes("text/plain")&&(e.preventDefault(),e.dataTransfer.dropEffect="move")},onDrop:e=>{e.preventDefault();let l=Number(e.dataTransfer.getData("text/plain"));Number.isInteger(l)&&h(l,a)},className:(0,o.cn)(y,"focus-visible:outline focus-visible:outline-2 focus-visible:outline-main-800",v?"cursor-pointer":"cursor-default"),children:[(0,t.jsx)("span",{className:"relative",children:f}),g?(0,t.jsx)(s.uI,{className:"relative size-4 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100","aria-hidden":"true"}):null]},u)})]},e)})})]})}let p={Q:5,W:5,E:5,R:3},f=[6,11,16],g="application/x-opgg-skill-priority",x=e=>!(e.length>18||a.Lo.some(l=>e.filter(e=>e===l).length>p[l]))&&e.flatMap((e,l)=>"R"===e?[l+1]:[]).every((e,l)=>e>=f[l]),v=(e,l,r)=>{if(r>e.length||r>=18)return null;let t=[...e];return r===e.length?t.push(l):t[r]=l,x(t)?t:null};function m(e){let{championAsset:l,labels:r,priority:s,order:o,readOnly:d=!1,onPriorityChange:c,onChange:p}=e,f=(0,a.lM)(s),m=(0,i.useRef)(f),b=(0,i.useRef)(null),[y,k]=(0,i.useState)(null),[j,N]=(0,i.useState)(null);m.current=f;let w=()=>{b.current=null,k(null),N(null)};return d?(0,t.jsx)(h,{championAsset:l,labels:r,priority:f,order:o}):(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsx)("div",{role:"region","aria-label":(0,n.p9)(r,"skillOrder","Skill order"),tabIndex:0,"data-testid":"builder-skill-level-region",className:"max-w-full overflow-x-auto overscroll-x-contain pb-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-main-500",onKeyDown:e=>{let l=e.target;if(e.metaKey||e.ctrlKey||e.altKey||e.repeat||l instanceof HTMLElement&&l.closest('input, textarea, select, [contenteditable="true"]'))return;let r=e.key.toUpperCase();if(!a.Lo.includes(r))return;let t=v(o,r,o.length);t&&(e.preventDefault(),p(t))},children:(0,t.jsx)(u,{championAsset:l,labels:r,order:o,priority:f,readOnly:!1,dragSource:y,dropTarget:j,canAssign:(e,l)=>null!==v(o,e,l),onAddSkill:e=>{let l=v(o,e,o.length);l&&p(l)},onAssignSkill:(e,l)=>{if(o[l]===e){let r=a.Lo.indexOf(e);for(let e=1;e<a.Lo.length;e+=1){let t=v(o,a.Lo[(r+e)%a.Lo.length],l);if(t)return void p(t)}return}let r=v(o,e,l);r&&p(r)},onMoveLevel:(e,l)=>{if(e===l||e<0||l<0||e>=o.length||l>=o.length)return;let r=[...o],[t]=r.splice(e,1);r.splice(l,0,t),x(r)&&p(r)},onRemoveLevel:e=>p(o.filter((l,r)=>r!==e)),onPriorityDragStart:(e,l)=>{e.stopPropagation(),b.current=l,k(l),e.dataTransfer.effectAllowed="move",e.dataTransfer.setData(g,l)},onPriorityDragOver:(e,l)=>{e.dataTransfer.types.includes(g)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="move",N(l))},onPriorityDrop:(e,l)=>{e.preventDefault(),e.stopPropagation(),(e=>{let l=b.current;if(!l)return;let r=m.current.indexOf(l),t=m.current.indexOf(e);r!==t&&c((0,a.xG)(m.current,r,t))})(l),w()},onPriorityDragEnd:w})}),(0,t.jsx)("button",{type:"button","data-testid":"skill-order-reset",onClick:()=>p([]),className:"min-h-11 rounded border border-gray-250 bg-gray-0 px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-main-500",children:(0,n.p9)(r,"reset","Reset")})]})}function h(e){let{championAsset:l,labels:r,priority:i,order:a}=e;return(0,t.jsx)("div",{role:"region","aria-label":(0,n.p9)(r,"skillOrder","Skill order"),tabIndex:0,"data-testid":"builder-skill-level-region",className:"max-w-full overflow-x-auto overscroll-x-contain focus-visible:outline focus-visible:outline-2 focus-visible:outline-main-500",children:(0,t.jsx)(u,{championAsset:l,labels:r,order:a,priority:i,readOnly:!0,dragSource:null,dropTarget:null,canAssign:()=>!1,onAddSkill:()=>void 0,onAssignSkill:()=>void 0,onMoveLevel:()=>void 0,onRemoveLevel:()=>void 0,onPriorityDragStart:()=>void 0,onPriorityDragOver:()=>void 0,onPriorityDrop:()=>void 0,onPriorityDragEnd:()=>void 0})})}}}]);