https://karpeles.com/assets/MemoryMatchPage-D7luwsRK.js

1import{j as e}from"./index-xbUMZdnk.js";import{a}from"./redux-vendor-BfV9BRyV.js";import{a as Y}from"./games-D1gtBdpl.js";import{u as z}from"./react-vendor-ChC4-WML.js";const K="_memoryGameContainer_1xrag_1",q="_gameBackBtn_1xrag_7",J="_memoryHeader_1xrag_24",Q="_memoryStats_1xrag_41",W="_memoryStat_1xrag_41",X="_statLabel_1xrag_54",Z="_statValue_1xrag_59",ee="_difficultySelector_1xrag_65",te="_difficultyButtons_1xrag_76",se="_difficultyBtn_1xrag_83",ae="_difficultyActive_1xrag_99",re="_memoryGameScreen_1xrag_106",ce="_memoryCardsGrid_1xrag_110",me="_memoryCard_1xrag_110",ie="_flipped_1xrag_129",ne="_matched_1xrag_133",le="_memoryCardFace_1xrag_138",oe="_memoryCardBack_1xrag_150",de="_memoryCardFront_1xrag_156",ue="_memoryCardImage_1xrag_163",ye="_memoryResultsScreen_1xrag_170",fe="_memoryResultsContent_1xrag_183",_e="_memoryResultStats_1xrag_199",t={memoryGameContainer:K,gameBackBtn:q,memoryHeader:J,memoryStats:Q,memoryStat:W,statLabel:X,statValue:Z,difficultySelector:ee,difficultyButtons:te,difficultyBtn:se,difficultyActive:ae,memoryGameScreen:re,memoryCardsGrid:ce,memoryCard:me,flipped:ie,matched:ne,memoryCardFace:le,memoryCardBack:oe,memoryCardFront:de,memoryCardImage:ue,memoryResultsScreen:ye,memoryResultsContent:fe,memoryResultStats:_e},pe=[{pairs:6,label:"Easy (6 pairs)"},{pairs:8,label:"Medium (8 pairs)"},{pairs:10,label:"Hard (10 pairs)"}],T=_=>{const r=Math.floor(_/60),p=_%60;return`${r}:${p<10?"0":""}${p}`};function Se(){const _=z(),[r,p]=a.useState(6),[l,d]=a.useState([]),[E,h]=a.useState([]),[b,M]=a.useState(0),[B,k]=a.useState(0),[g,F]=a.useState(!1),[U,j]=a.useState(!1),[G,R]=a.use

1State(!1),[H,x]=a.useState(!1),o=a.useRef(null),C=a.useRef(null),S=a.useMemo(()=>Math.floor(l.filter(s=>s.isMatched).length/2),[l]),P=a.useMemo(()=>`${S}/${r}`,[S,r]);a.useEffect(()=>()=>{o.current&&window.clearInterval(o.current),C.current&&window.clearTimeout(C.current)},[]);const v=()=>{o.current&&(window.clearInterval(o.current),o.current=null)},V=()=>{v(),o.current=window.setInterval(()=>{k(s=>s+1)},1e3)},I=()=>{v(),d([]),h([]),M(0),k(0),x(!1)},A=async()=>{R(!0),j(!1),I(),F(!0);try{const n=(await Y(r)).flatMap((c,m)=>[{id:m,pairId:m,title:c.title,imageUrl:c.imageUrl,isFlipped:!1,isMatched:!1},{id:m+r,pairId:m,title:c.title,imageUrl:c.imageUrl,isFlipped:!1,isMatched:!1}]).sort(()=>Math.random()-.5);d(n),V()}finally{R(!1)}},w=s=>{if(H||E.length>=2)return;const i=l[s];!i||i.isFlipped||i.isMatched||(d(n=>n.map((c,m)=>m===s?{...c,isFlipped:!0}:c)),h(n=>{const c=[...n,s];if(c.length===2){M(u=>u+1),x(!0);const[m,N]=c,$=l[m],L=l[N];$&&L&&$.pairId===L.pairId?C.current=window.setTimeout(()=>{d(u=>u.map((y,f)=>f===m||f===N?{...y,isMatched:!0}:y)),h([]),x(!1)},600):C.current=window.setTimeout(()=>{d(u=>u.map((y,f)=>f===m||f===N?{...y,isFlipped:!1}:y)),h([]),x(!1)},1e3)}return c}))};a.useEffect(()=>{S===r&&r>0&&g&&(v(),j(!0))},[S,r,g]);const D=()=>{j(!1),F(!1),I()},O=r===6?"Easy":r===8?"Medium":"Hard";return e.jsxs("section",{className:t.memoryGameContainer,children:[e.jsx("button",{type:"button",className:t.gameBackBtn,onClick:()=>_("/games"),children:"← Back to Games"}),e.jsxs("div",{className:t.memoryHeader,children:[e.jsx("h1",{children:"Memory Match"}),e.jsx("p",{children:"Flip cards to match pairs of manuscript images"}),e.jsxs("div",{className:t.memoryStats,children:[e.jsxs("div",{className:t.memoryStat,children:[e.jsx("span",{className:t.statLabel,children:"Moves:"}),e.jsx("span",{className:t.statValue,children:b})]}),e.jsxs("div",{className:t.memoryStat,children:[e.jsx("span",{className:t.statLabel,children:"Matches:"}),e.jsx("span",{className:t.statValue,children:P})]}),e.jsxs("div",{className:t.memoryStat,children:[e.jsx("span",{className:t.statLabel,children:"Time:"}),e.jsx("span",{className:t.statValue,children:T(B)})]})]})]}),!g&&e.jsxs("div",{className:t.difficultySelector,children:[e.jsx("h3",{children:"Select Difficulty"}),e.jsx("div",{className:t.difficultyButtons,children:pe.map(s=>e.jsx("button",{type:"button",className:`${t.difficultyBtn} ${r===s.pairs?t.difficultyActive:""}`,onClick:()=>p(s.pairs),children:s.label},s.pairs))}),e.jsx("button",{type:"button",className:"btn-primary",style:{marginTop:20},onClick:A,disabled:G,children:G?"Loading...":"Start Game"})]}),g&&e.jsx("div",{className:t.memoryGameScreen,children:e.jsx("div",{className:t.memoryCardsGrid,children:l.map((s,i)=>e.jsxs("div",{className:[t.memoryCard,s.isFlipped?t.flipped:"",s.isMatched?t.matched:""].filter(Boolean).join(" "),onClick:()=>w(i),role:"button",tabIndex:0,onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&w(i)},children:[e.jsx("div",{className:`${t.memoryCardFace} ${t.memoryCardBack}`,children:"🎴"}),e.jsx("div",{className:`${t.memoryCardFace} ${t.memoryCardFront}`,children:s.imageUrl?e.jsx("img",{loading:"lazy",decoding:"async",src:s.imageUrl,alt:s.title||"Manuscript",className:t.memoryCardImage}):null})]},`${s.id}-${i}`))})}),U&&e.jsx("div",{className:t.memoryResultsScreen,children:e.jsxs("div",{className:t.memoryResultsContent,children:[e.jsx("h2",{children:"🎉 Congratulations!"}),e.jsxs("p",{children:["You matched all ",r," pairs!"]}),e.jsxs("div",{className:t.memoryResultStats,children:[e.jsxs("div",{children:[e.jsx("strong",{children:"Time:"})," ",T(B)]}),e.jsxs("div",{children:[e.jsx("strong",{children:"Moves:"})," ",b]}),e.jsxs("div",{children:[e.jsx("strong",{children:"Difficulty:"})," ",O]})]}),e.jsx("button",{type:"button",className:"btn-primary",onClick:D,children:"Play Again"})]})})]})}export{Se as MemoryMatchPage};