diff --git a/jigsaw-puzzle/assets/index-q-Rfl8R2.js b/jigsaw-puzzle/assets/index-ByrRYHEw.js similarity index 99% rename from jigsaw-puzzle/assets/index-q-Rfl8R2.js rename to jigsaw-puzzle/assets/index-ByrRYHEw.js index 8eeac73..1184249 100644 --- a/jigsaw-puzzle/assets/index-q-Rfl8R2.js +++ b/jigsaw-puzzle/assets/index-ByrRYHEw.js @@ -152,4 +152,4 @@ Error generating stack: `+i.message+` animation: ${0} 1.4s linear infinite; `),cw)),mw=ye("svg",{name:"MuiCircularProgress",slot:"Svg",overridesResolver:(e,t)=>t.svg})({display:"block"}),hw=ye("circle",{name:"MuiCircularProgress",slot:"Circle",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.circle,t[`circle${B(n.variant)}`],n.disableShrink&&t.circleDisableShrink]}})(({ownerState:e,theme:t})=>R({stroke:"currentColor"},e.variant==="determinate"&&{transition:t.transitions.create("stroke-dashoffset")},e.variant==="indeterminate"&&{strokeDasharray:"80px, 200px",strokeDashoffset:0}),({ownerState:e})=>e.variant==="indeterminate"&&!e.disableShrink&&El(Kf||(Kf=Hl` animation: ${0} 1.4s ease-in-out infinite; - `),fw)),gw=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiCircularProgress"}),{className:o,color:i="primary",disableShrink:l=!1,size:s=40,style:a,thickness:u=3.6,value:p=0,variant:m="indeterminate"}=r,f=ae(r,uw),v=R({},r,{color:i,disableShrink:l,size:s,thickness:u,value:p,variant:m}),y=dw(v),g={},_={},d={};if(m==="determinate"){const c=2*Math.PI*((qt-u)/2);g.strokeDasharray=c.toFixed(3),d["aria-valuenow"]=Math.round(p),g.strokeDashoffset=`${((100-p)/100*c).toFixed(3)}px`,_.transform="rotate(-90deg)"}return O.jsx(pw,R({className:ue(y.root,o),style:R({width:s,height:s},_,a),ownerState:v,ref:n,role:"progressbar"},d,f,{children:O.jsx(mw,{className:y.svg,ownerState:v,viewBox:`${qt/2} ${qt/2} ${qt} ${qt}`,children:O.jsx(hw,{className:y.circle,style:g,ownerState:v,cx:qt,cy:qt,r:(qt-u)/2,fill:"none",strokeWidth:u})})}))}),xi=rx({createStyledComponent:ye("div",{name:"MuiContainer",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[`maxWidth${B(String(n.maxWidth))}`],n.fixed&&t.fixed,n.disableGutters&&t.disableGutters]}}),useThemeProps:e=>kt({props:e,name:"MuiContainer"})}),Dt=fx({createStyledComponent:ye("div",{name:"MuiStack",slot:"Root",overridesResolver:(e,t)=>t.root}),useThemeProps:e=>kt({props:e,name:"MuiStack"})});function yw(e){return wt("MuiImageList",e)}Qt("MuiImageList",["root","masonry","quilted","standard","woven"]);const uh=C.createContext({}),vw=["children","className","cols","component","rowHeight","gap","style","variant"],xw=e=>{const{classes:t,variant:n}=e;return It({root:["root",n]},yw,t)},Sw=ye("ul",{name:"MuiImageList",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[n.variant]]}})(({ownerState:e})=>R({display:"grid",overflowY:"auto",listStyle:"none",padding:0,WebkitOverflowScrolling:"touch"},e.variant==="masonry"&&{display:"block"})),ww=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiImageList"}),{children:o,className:i,cols:l=2,component:s="ul",rowHeight:a="auto",gap:u=4,style:p,variant:m="standard"}=r,f=ae(r,vw),v=C.useMemo(()=>({rowHeight:a,gap:u,variant:m}),[a,u,m]);C.useEffect(()=>{},[]);const y=R(m==="masonry"?{columnCount:l,columnGap:u}:{gridTemplateColumns:`repeat(${l}, 1fr)`,gap:u},p),g=R({},r,{component:s,gap:u,rowHeight:a,variant:m}),_=xw(g);return O.jsx(Sw,R({as:s,className:ue(_.root,_[m],i),ref:n,style:y,ownerState:g},f,{children:O.jsx(uh.Provider,{value:v,children:o})}))});function kw(e){return wt("MuiImageListItem",e)}const Gf=Qt("MuiImageListItem",["root","img","standard","woven","masonry","quilted"]),Cw=["children","className","cols","component","rows","style"],_w=e=>{const{classes:t,variant:n}=e;return It({root:["root",n],img:["img"]},kw,t)},Ew=ye("li",{name:"MuiImageListItem",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[{[`& .${Gf.img}`]:t.img},t.root,t[n.variant]]}})(({ownerState:e})=>R({display:"block",position:"relative"},e.variant==="standard"&&{display:"flex",flexDirection:"column"},e.variant==="woven"&&{height:"100%",alignSelf:"center","&:nth-of-type(even)":{height:"70%"}},{[`& .${Gf.img}`]:R({objectFit:"cover",width:"100%",height:"100%",display:"block"},e.variant==="standard"&&{height:"auto",flexGrow:1})})),Pw=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiImageListItem"}),{children:o,className:i,cols:l=1,component:s="li",rows:a=1,style:u}=r,p=ae(r,Cw),{rowHeight:m="auto",gap:f,variant:v}=C.useContext(uh);let y="auto";v==="woven"?y=void 0:m!=="auto"&&(y=m*a+f*(a-1));const g=R({},r,{cols:l,component:s,gap:f,rowHeight:m,rows:a,variant:v}),_=_w(g);return O.jsx(Ew,R({as:s,className:ue(_.root,_[v],i),ref:n,style:R({height:y,gridColumnEnd:v!=="masonry"?`span ${l}`:void 0,gridRowEnd:v!=="masonry"?`span ${a}`:void 0,marginBottom:v==="masonry"?f:void 0,breakInside:v==="masonry"?"avoid":void 0},u),ownerState:g},p,{children:C.Children.map(o,d=>C.isValidElement(d)?d.type==="img"||Qm(d,["Image"])?C.cloneElement(d,{className:ue(_.img,d.props.className)}):d:null)}))});function $w(e){return wt("MuiImageListItemBar",e)}Qt("MuiImageListItemBar",["root","positionBottom","positionTop","positionBelow","titleWrap","titleWrapBottom","titleWrapTop","titleWrapBelow","titleWrapActionPosLeft","titleWrapActionPosRight","title","subtitle","actionIcon","actionIconActionPosLeft","actionIconActionPosRight"]);const Rw=["actionIcon","actionPosition","className","subtitle","title","position"],Tw=e=>{const{classes:t,position:n,actionIcon:r,actionPosition:o}=e,i={root:["root",`position${B(n)}`],titleWrap:["titleWrap",`titleWrap${B(n)}`,r&&`titleWrapActionPos${B(o)}`],title:["title"],subtitle:["subtitle"],actionIcon:["actionIcon",`actionIconActionPos${B(o)}`]};return It(i,$w,t)},Ow=ye("div",{name:"MuiImageListItemBar",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[`position${B(n.position)}`]]}})(({theme:e,ownerState:t})=>R({position:"absolute",left:0,right:0,background:"rgba(0, 0, 0, 0.5)",display:"flex",alignItems:"center",fontFamily:e.typography.fontFamily},t.position==="bottom"&&{bottom:0},t.position==="top"&&{top:0},t.position==="below"&&{position:"relative",background:"transparent",alignItems:"normal"})),zw=ye("div",{name:"MuiImageListItemBar",slot:"TitleWrap",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.titleWrap,t[`titleWrap${B(n.position)}`],n.actionIcon&&t[`titleWrapActionPos${B(n.actionPosition)}`]]}})(({theme:e,ownerState:t})=>R({flexGrow:1,padding:"12px 16px",color:(e.vars||e).palette.common.white,overflow:"hidden"},t.position==="below"&&{padding:"6px 0 12px",color:"inherit"},t.actionIcon&&t.actionPosition==="left"&&{paddingLeft:0},t.actionIcon&&t.actionPosition==="right"&&{paddingRight:0})),Iw=ye("div",{name:"MuiImageListItemBar",slot:"Title",overridesResolver:(e,t)=>t.title})(({theme:e})=>({fontSize:e.typography.pxToRem(16),lineHeight:"24px",textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"})),Mw=ye("div",{name:"MuiImageListItemBar",slot:"Subtitle",overridesResolver:(e,t)=>t.subtitle})(({theme:e})=>({fontSize:e.typography.pxToRem(12),lineHeight:1,textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"})),Nw=ye("div",{name:"MuiImageListItemBar",slot:"ActionIcon",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.actionIcon,t[`actionIconActionPos${B(n.actionPosition)}`]]}})(({ownerState:e})=>R({},e.actionPosition==="left"&&{order:-1})),jw=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiImageListItemBar"}),{actionIcon:o,actionPosition:i="right",className:l,subtitle:s,title:a,position:u="bottom"}=r,p=ae(r,Rw),m=R({},r,{position:u,actionPosition:i}),f=Tw(m);return O.jsxs(Ow,R({ownerState:m,className:ue(f.root,l),ref:n},p,{children:[O.jsxs(zw,{ownerState:m,className:f.titleWrap,children:[O.jsx(Iw,{className:f.title,children:a}),s?O.jsx(Mw,{className:f.subtitle,children:s}):null]}),o?O.jsx(Nw,{ownerState:m,className:f.actionIcon,children:o}):null]}))}),Lw=({images:e,onImageClick:t})=>O.jsx(ww,{sx:{width:500,height:450},children:e.map(n=>O.jsxs(Pw,{children:[O.jsx("img",{srcSet:`${n}?w=248&fit=crop&auto=format&dpr=2 2x`,src:`${n}?w=248&fit=crop&auto=format`,alt:"s",loading:"lazy"}),O.jsx(jw,{sx:{height:"100%",cursor:"pointer","&:hover":{backgroundColor:"rgba(0, 0, 0, 0.7)"}},onClick:()=>t==null?void 0:t(e.indexOf(n))})]},n))}),Qf=[{img:"https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",title:"Breakfast",author:"@bkristastucchio",rows:2,cols:2,featured:!0},{img:"https://images.unsplash.com/photo-1551782450-a2132b4ba21d",title:"Burger",author:"@rollelflex_graphy726"},{img:"https://images.unsplash.com/photo-1522770179533-24471fcdba45",title:"Camera",author:"@helloimnik"},{img:"https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",title:"Coffee",author:"@nolanissac",cols:2},{img:"https://images.unsplash.com/photo-1533827432537-70133748f5c8",title:"Hats",author:"@hjrc33",cols:2},{img:"https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",title:"Honey",author:"@arwinneil",rows:2,cols:2,featured:!0},{img:"https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",title:"Basketball",author:"@tjdragotta"},{img:"https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",title:"Fern",author:"@katie_wasserman"},{img:"https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",title:"Mushrooms",author:"@silverdalex",rows:2,cols:2},{img:"https://images.unsplash.com/photo-1567306301408-9b74779a11af",title:"Tomato basil",author:"@shelleypauls"},{img:"https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",title:"Sea star",author:"@peterlaster"},{img:"https://images.unsplash.com/photo-1589118949245-7d38baf380d6",title:"Bike",author:"@southside_customs",cols:2}],bw={easy:{rows:2,columns:2,time:60},medium:{rows:6,columns:6,time:120},hard:{rows:10,columns:10,time:180}},Aw=({onStartGame:e})=>O.jsxs(xi,{children:[O.jsx(Ft,{variant:"h4",children:"Welcome to Jigsaw Puzzle"}),O.jsx(Ft,{variant:"body1",children:"Click on the button below to start the game"}),O.jsx(qr,{variant:"contained",onClick:e,children:"Start Game"})]}),Fw=({onLevelChange:e})=>O.jsxs(Dt,{alignItems:"center",children:[O.jsx(Ft,{variant:"h6",sx:{marginBottom:2,filter:"invert(1)"},children:"Select the level of difficulty"}),O.jsxs(Dt,{direction:"row",spacing:2,children:[O.jsx(qr,{variant:"contained",onClick:()=>e("easy"),children:"Easy"}),O.jsx(qr,{variant:"contained",onClick:()=>e("medium"),children:"Medium"}),O.jsx(qr,{variant:"contained",onClick:()=>e("hard"),children:"Hard"})]})]});var Yu={},$s={};const Dw=Kt(ES);var Yf;function Bw(){return Yf||(Yf=1,function(e){"use client";Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return t.createSvgIcon}});var t=Dw}($s)),$s}var Ww=Uu;Object.defineProperty(Yu,"__esModule",{value:!0});var ch=Yu.default=void 0,Uw=Ww(Bw()),Vw=O;ch=Yu.default=(0,Uw.default)((0,Vw.jsx)("path",{d:"M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2M5 8V7h2v3.82C5.84 10.4 5 9.3 5 8m14 0c0 1.3-.84 2.4-2 2.82V7h2z"}),"EmojiEvents");const Rs=({players:e})=>O.jsxs(Dt,{spacing:1,alignItems:"center",sx:{width:"100%",bgcolor:"background.paper",boxShadow:1,borderRadius:1,border:1,borderColor:"grey.500",borderStyle:"solid",padding:1,"&:hover":{borderColor:"grey.700",boxShadow:2},"&:active":{boxShadow:0,borderColor:"grey.500"},"&:focus":{borderColor:"grey.700",boxShadow:2}},children:[O.jsx(Ft,{variant:"h6",children:"List of Players"}),e.map((t,n)=>O.jsx(Dt,{gap:2,flexDirection:"row",children:O.jsxs(Dt,{flexDirection:"row",gap:1,children:[t.isWinner&&O.jsx(ch,{}),O.jsx(Ft,{variant:"body1",children:t.name})]})},t.name))]}),fh=()=>C.useCallback(e=>{window.parent.postMessage(e,"*")},[]),Hw=e=>{const t=fh(),n=C.useRef(!1);C.useEffect(()=>{const r=o=>{e(o)};return window.addEventListener("message",r),n.current||(t({type:"ovice_get_participants"}),n.current=!0),()=>{window.removeEventListener("message",r)}},[e,t])};function Kw(){const[e,t]=C.useState(!1),[n,r]=C.useState(null),[o,i]=C.useState(void 0),[l,s]=C.useState([]),[a,u]=C.useState(void 0),[p,m]=C.useState(!1),[f,v]=C.useState(!1),[y,g]=C.useState(),_=fh();Hw(P=>{var z;const M=P.data;if(M.type==="ovice_participants"){const N=M.payload,L=N.map($=>({id:$.id,name:$.name,time:0,isWinner:!1}));s(L),u(N.some($=>$.isHost&&$.isSelf)||!1),i((z=N.find($=>$.isSelf))==null?void 0:z.id)}else if(M.type==="ovice_participant_joined"){const N=M.payload;if(l.find(L=>L.id===N.id))return;s(L=>[...L,{id:N.id,name:N.name,time:0,isWinner:!1}])}else if(M.type==="ovice_participant_unsubscribed"||M.type==="ovice_participant_left"){const N=M.payload;s(L=>L.filter($=>$.id!==N.id))}else if(M.type==="ovice_message"){const N=M.payload;N.event==="started"?(t(!0),r(N.message.img),g(N.message.config),s(L=>L.map($=>({...$,isWinner:!1}))),m(!1)):N.event==="solved"&&(c(N.message.winnerId),m(!0),d())}});const d=()=>{t(!1),r(null),g(void 0),v(!1)},c=P=>{const M=l.findIndex(z=>z.id===P);if(M!==-1){const z=[...l];z[M].isWinner=!0,s(z)}},h=()=>{t(!0),m(!1)},x=()=>{o&&(_({type:"ovice_broadcast_message",payload:{event:"solved",message:{winnerId:o}}}),c(o),d(),m(!0))},S=P=>{v(!0),r(Qf[P].img)},w=()=>{s(P=>P.map(M=>({...M,isWinner:!1}))),m(!1)},k=P=>{const M=bw[P];_({type:"ovice_broadcast_message",payload:{event:"started",message:{config:M,img:n}}}),g(M)};return a===void 0?O.jsx(xi,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",backgroundColor:"#f0f0f0",position:"relative",backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundRepeat:"no-repeat"},children:O.jsxs(Dt,{alignItems:"center",spacing:1,children:[O.jsx(gw,{color:"secondary",size:"50%"}),O.jsx(Ft,{variant:"h4",children:"Loading..."})]})}):a===!1&&!e?O.jsx(xi,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",backgroundColor:"#f0f0f0",position:"relative",backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundRepeat:"no-repeat"},children:O.jsxs(Dt,{alignItems:"center",spacing:1,children:[!p&&O.jsx(Ft,{variant:"h4",children:"Waiting for host to start the game"}),p&&O.jsx(Ft,{variant:"h4",children:"Game Over"}),O.jsx(Rs,{players:l})]})}):O.jsxs(xi,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",backgroundColor:"#f0f0f0",position:"relative",backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundRepeat:"no-repeat"},children:[n&&y&&!p&&O.jsx(um.JigsawPuzzle,{imageSrc:n,rows:y.rows,columns:y.columns,onSolved:x}),a&&p&&O.jsxs(Dt,{alignItems:"center",spacing:1,children:[O.jsx(Ft,{variant:"h4",children:"Game Over"}),O.jsx(Rs,{players:l}),O.jsx(qr,{variant:"contained",onClick:w,children:"Restart"})]}),a&&!e&&!p&&O.jsxs(Dt,{flexDirection:"row",children:[O.jsx(Aw,{onStartGame:h}),O.jsx(Rs,{players:l})]}),a&&e&&n===null&&!p&&O.jsx(Lw,{images:Qf.map(P=>P.img),onImageClick:P=>{S(P)}}),a&&f&&!p&&!y&&O.jsx(Fw,{onLevelChange:k})]})}const Gw=am(document.getElementById("root"));Gw.render(O.jsx(C.StrictMode,{children:O.jsx(Kw,{})})); + `),fw)),gw=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiCircularProgress"}),{className:o,color:i="primary",disableShrink:l=!1,size:s=40,style:a,thickness:u=3.6,value:p=0,variant:m="indeterminate"}=r,f=ae(r,uw),v=R({},r,{color:i,disableShrink:l,size:s,thickness:u,value:p,variant:m}),y=dw(v),g={},_={},d={};if(m==="determinate"){const c=2*Math.PI*((qt-u)/2);g.strokeDasharray=c.toFixed(3),d["aria-valuenow"]=Math.round(p),g.strokeDashoffset=`${((100-p)/100*c).toFixed(3)}px`,_.transform="rotate(-90deg)"}return O.jsx(pw,R({className:ue(y.root,o),style:R({width:s,height:s},_,a),ownerState:v,ref:n,role:"progressbar"},d,f,{children:O.jsx(mw,{className:y.svg,ownerState:v,viewBox:`${qt/2} ${qt/2} ${qt} ${qt}`,children:O.jsx(hw,{className:y.circle,style:g,ownerState:v,cx:qt,cy:qt,r:(qt-u)/2,fill:"none",strokeWidth:u})})}))}),xi=rx({createStyledComponent:ye("div",{name:"MuiContainer",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[`maxWidth${B(String(n.maxWidth))}`],n.fixed&&t.fixed,n.disableGutters&&t.disableGutters]}}),useThemeProps:e=>kt({props:e,name:"MuiContainer"})}),Dt=fx({createStyledComponent:ye("div",{name:"MuiStack",slot:"Root",overridesResolver:(e,t)=>t.root}),useThemeProps:e=>kt({props:e,name:"MuiStack"})});function yw(e){return wt("MuiImageList",e)}Qt("MuiImageList",["root","masonry","quilted","standard","woven"]);const uh=C.createContext({}),vw=["children","className","cols","component","rowHeight","gap","style","variant"],xw=e=>{const{classes:t,variant:n}=e;return It({root:["root",n]},yw,t)},Sw=ye("ul",{name:"MuiImageList",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[n.variant]]}})(({ownerState:e})=>R({display:"grid",overflowY:"auto",listStyle:"none",padding:0,WebkitOverflowScrolling:"touch"},e.variant==="masonry"&&{display:"block"})),ww=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiImageList"}),{children:o,className:i,cols:l=2,component:s="ul",rowHeight:a="auto",gap:u=4,style:p,variant:m="standard"}=r,f=ae(r,vw),v=C.useMemo(()=>({rowHeight:a,gap:u,variant:m}),[a,u,m]);C.useEffect(()=>{},[]);const y=R(m==="masonry"?{columnCount:l,columnGap:u}:{gridTemplateColumns:`repeat(${l}, 1fr)`,gap:u},p),g=R({},r,{component:s,gap:u,rowHeight:a,variant:m}),_=xw(g);return O.jsx(Sw,R({as:s,className:ue(_.root,_[m],i),ref:n,style:y,ownerState:g},f,{children:O.jsx(uh.Provider,{value:v,children:o})}))});function kw(e){return wt("MuiImageListItem",e)}const Gf=Qt("MuiImageListItem",["root","img","standard","woven","masonry","quilted"]),Cw=["children","className","cols","component","rows","style"],_w=e=>{const{classes:t,variant:n}=e;return It({root:["root",n],img:["img"]},kw,t)},Ew=ye("li",{name:"MuiImageListItem",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[{[`& .${Gf.img}`]:t.img},t.root,t[n.variant]]}})(({ownerState:e})=>R({display:"block",position:"relative"},e.variant==="standard"&&{display:"flex",flexDirection:"column"},e.variant==="woven"&&{height:"100%",alignSelf:"center","&:nth-of-type(even)":{height:"70%"}},{[`& .${Gf.img}`]:R({objectFit:"cover",width:"100%",height:"100%",display:"block"},e.variant==="standard"&&{height:"auto",flexGrow:1})})),Pw=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiImageListItem"}),{children:o,className:i,cols:l=1,component:s="li",rows:a=1,style:u}=r,p=ae(r,Cw),{rowHeight:m="auto",gap:f,variant:v}=C.useContext(uh);let y="auto";v==="woven"?y=void 0:m!=="auto"&&(y=m*a+f*(a-1));const g=R({},r,{cols:l,component:s,gap:f,rowHeight:m,rows:a,variant:v}),_=_w(g);return O.jsx(Ew,R({as:s,className:ue(_.root,_[v],i),ref:n,style:R({height:y,gridColumnEnd:v!=="masonry"?`span ${l}`:void 0,gridRowEnd:v!=="masonry"?`span ${a}`:void 0,marginBottom:v==="masonry"?f:void 0,breakInside:v==="masonry"?"avoid":void 0},u),ownerState:g},p,{children:C.Children.map(o,d=>C.isValidElement(d)?d.type==="img"||Qm(d,["Image"])?C.cloneElement(d,{className:ue(_.img,d.props.className)}):d:null)}))});function $w(e){return wt("MuiImageListItemBar",e)}Qt("MuiImageListItemBar",["root","positionBottom","positionTop","positionBelow","titleWrap","titleWrapBottom","titleWrapTop","titleWrapBelow","titleWrapActionPosLeft","titleWrapActionPosRight","title","subtitle","actionIcon","actionIconActionPosLeft","actionIconActionPosRight"]);const Rw=["actionIcon","actionPosition","className","subtitle","title","position"],Tw=e=>{const{classes:t,position:n,actionIcon:r,actionPosition:o}=e,i={root:["root",`position${B(n)}`],titleWrap:["titleWrap",`titleWrap${B(n)}`,r&&`titleWrapActionPos${B(o)}`],title:["title"],subtitle:["subtitle"],actionIcon:["actionIcon",`actionIconActionPos${B(o)}`]};return It(i,$w,t)},Ow=ye("div",{name:"MuiImageListItemBar",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[`position${B(n.position)}`]]}})(({theme:e,ownerState:t})=>R({position:"absolute",left:0,right:0,background:"rgba(0, 0, 0, 0.5)",display:"flex",alignItems:"center",fontFamily:e.typography.fontFamily},t.position==="bottom"&&{bottom:0},t.position==="top"&&{top:0},t.position==="below"&&{position:"relative",background:"transparent",alignItems:"normal"})),zw=ye("div",{name:"MuiImageListItemBar",slot:"TitleWrap",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.titleWrap,t[`titleWrap${B(n.position)}`],n.actionIcon&&t[`titleWrapActionPos${B(n.actionPosition)}`]]}})(({theme:e,ownerState:t})=>R({flexGrow:1,padding:"12px 16px",color:(e.vars||e).palette.common.white,overflow:"hidden"},t.position==="below"&&{padding:"6px 0 12px",color:"inherit"},t.actionIcon&&t.actionPosition==="left"&&{paddingLeft:0},t.actionIcon&&t.actionPosition==="right"&&{paddingRight:0})),Iw=ye("div",{name:"MuiImageListItemBar",slot:"Title",overridesResolver:(e,t)=>t.title})(({theme:e})=>({fontSize:e.typography.pxToRem(16),lineHeight:"24px",textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"})),Mw=ye("div",{name:"MuiImageListItemBar",slot:"Subtitle",overridesResolver:(e,t)=>t.subtitle})(({theme:e})=>({fontSize:e.typography.pxToRem(12),lineHeight:1,textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"})),Nw=ye("div",{name:"MuiImageListItemBar",slot:"ActionIcon",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.actionIcon,t[`actionIconActionPos${B(n.actionPosition)}`]]}})(({ownerState:e})=>R({},e.actionPosition==="left"&&{order:-1})),jw=C.forwardRef(function(t,n){const r=kt({props:t,name:"MuiImageListItemBar"}),{actionIcon:o,actionPosition:i="right",className:l,subtitle:s,title:a,position:u="bottom"}=r,p=ae(r,Rw),m=R({},r,{position:u,actionPosition:i}),f=Tw(m);return O.jsxs(Ow,R({ownerState:m,className:ue(f.root,l),ref:n},p,{children:[O.jsxs(zw,{ownerState:m,className:f.titleWrap,children:[O.jsx(Iw,{className:f.title,children:a}),s?O.jsx(Mw,{className:f.subtitle,children:s}):null]}),o?O.jsx(Nw,{ownerState:m,className:f.actionIcon,children:o}):null]}))}),Lw=({images:e,onImageClick:t})=>O.jsx(ww,{sx:{width:500,height:450},children:e.map(n=>O.jsxs(Pw,{children:[O.jsx("img",{srcSet:`${n}?w=248&fit=crop&auto=format&dpr=2 2x`,src:`${n}?w=248&fit=crop&auto=format`,alt:"s",loading:"lazy"}),O.jsx(jw,{sx:{height:"100%",cursor:"pointer","&:hover":{backgroundColor:"rgba(0, 0, 0, 0.7)"}},onClick:()=>t==null?void 0:t(e.indexOf(n))})]},n))}),Qf=[{img:"https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",title:"Breakfast",author:"@bkristastucchio",rows:2,cols:2,featured:!0},{img:"https://images.unsplash.com/photo-1551782450-a2132b4ba21d",title:"Burger",author:"@rollelflex_graphy726"},{img:"https://images.unsplash.com/photo-1522770179533-24471fcdba45",title:"Camera",author:"@helloimnik"},{img:"https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",title:"Coffee",author:"@nolanissac",cols:2},{img:"https://images.unsplash.com/photo-1533827432537-70133748f5c8",title:"Hats",author:"@hjrc33",cols:2},{img:"https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",title:"Honey",author:"@arwinneil",rows:2,cols:2,featured:!0},{img:"https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",title:"Basketball",author:"@tjdragotta"},{img:"https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",title:"Fern",author:"@katie_wasserman"},{img:"https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",title:"Mushrooms",author:"@silverdalex",rows:2,cols:2},{img:"https://images.unsplash.com/photo-1567306301408-9b74779a11af",title:"Tomato basil",author:"@shelleypauls"},{img:"https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",title:"Sea star",author:"@peterlaster"},{img:"https://images.unsplash.com/photo-1589118949245-7d38baf380d6",title:"Bike",author:"@southside_customs",cols:2}],bw={easy:{rows:4,columns:4,time:60},medium:{rows:6,columns:6,time:120},hard:{rows:10,columns:10,time:180}},Aw=({onStartGame:e})=>O.jsxs(xi,{children:[O.jsx(Ft,{variant:"h4",children:"Welcome to Jigsaw Puzzle"}),O.jsx(Ft,{variant:"body1",children:"Click on the button below to start the game"}),O.jsx(qr,{variant:"contained",onClick:e,children:"Start Game"})]}),Fw=({onLevelChange:e})=>O.jsxs(Dt,{alignItems:"center",children:[O.jsx(Ft,{variant:"h6",sx:{marginBottom:2,filter:"invert(1)"},children:"Select the level of difficulty"}),O.jsxs(Dt,{direction:"row",spacing:2,children:[O.jsx(qr,{variant:"contained",onClick:()=>e("easy"),children:"Easy"}),O.jsx(qr,{variant:"contained",onClick:()=>e("medium"),children:"Medium"}),O.jsx(qr,{variant:"contained",onClick:()=>e("hard"),children:"Hard"})]})]});var Yu={},$s={};const Dw=Kt(ES);var Yf;function Bw(){return Yf||(Yf=1,function(e){"use client";Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return t.createSvgIcon}});var t=Dw}($s)),$s}var Ww=Uu;Object.defineProperty(Yu,"__esModule",{value:!0});var ch=Yu.default=void 0,Uw=Ww(Bw()),Vw=O;ch=Yu.default=(0,Uw.default)((0,Vw.jsx)("path",{d:"M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2M5 8V7h2v3.82C5.84 10.4 5 9.3 5 8m14 0c0 1.3-.84 2.4-2 2.82V7h2z"}),"EmojiEvents");const Rs=({players:e})=>O.jsxs(Dt,{spacing:1,alignItems:"center",sx:{width:"100%",bgcolor:"background.paper",boxShadow:1,borderRadius:1,border:1,borderColor:"grey.500",borderStyle:"solid",padding:1,"&:hover":{borderColor:"grey.700",boxShadow:2},"&:active":{boxShadow:0,borderColor:"grey.500"},"&:focus":{borderColor:"grey.700",boxShadow:2}},children:[O.jsx(Ft,{variant:"h6",children:"List of Players"}),e.map((t,n)=>O.jsx(Dt,{gap:2,flexDirection:"row",children:O.jsxs(Dt,{flexDirection:"row",gap:1,children:[t.isWinner&&O.jsx(ch,{}),O.jsx(Ft,{variant:"body1",children:t.name})]})},t.name))]}),fh=()=>C.useCallback(e=>{window.parent.postMessage(e,"*")},[]),Hw=e=>{const t=fh(),n=C.useRef(!1);C.useEffect(()=>{const r=o=>{e(o)};return window.addEventListener("message",r),n.current||(t({type:"ovice_get_participants"}),n.current=!0),()=>{window.removeEventListener("message",r)}},[e,t])};function Kw(){const[e,t]=C.useState(!1),[n,r]=C.useState(null),[o,i]=C.useState(void 0),[l,s]=C.useState([]),[a,u]=C.useState(void 0),[p,m]=C.useState(!1),[f,v]=C.useState(!1),[y,g]=C.useState(),_=fh();Hw(P=>{var z;const M=P.data;if(M.type==="ovice_participants"){const N=M.payload,L=N.map($=>({id:$.id,name:$.name,time:0,isWinner:!1}));s(L),u(N.some($=>$.isHost&&$.isSelf)||!1),i((z=N.find($=>$.isSelf))==null?void 0:z.id)}else if(M.type==="ovice_participant_joined"){const N=M.payload;if(l.find(L=>L.id===N.id))return;s(L=>[...L,{id:N.id,name:N.name,time:0,isWinner:!1}])}else if(M.type==="ovice_participant_unsubscribed"||M.type==="ovice_participant_left"){const N=M.payload;s(L=>L.filter($=>$.id!==N.id))}else if(M.type==="ovice_message"){const N=M.payload;N.event==="started"?(t(!0),r(N.message.img),g(N.message.config),s(L=>L.map($=>({...$,isWinner:!1}))),m(!1)):N.event==="solved"&&(c(N.message.winnerId),m(!0),d())}});const d=()=>{t(!1),r(null),g(void 0),v(!1)},c=P=>{const M=l.findIndex(z=>z.id===P);if(M!==-1){const z=[...l];z[M].isWinner=!0,s(z)}},h=()=>{t(!0),m(!1)},x=()=>{o&&(_({type:"ovice_broadcast_message",payload:{event:"solved",message:{winnerId:o}}}),c(o),d(),m(!0))},S=P=>{v(!0),r(Qf[P].img)},w=()=>{s(P=>P.map(M=>({...M,isWinner:!1}))),m(!1)},k=P=>{const M=bw[P];_({type:"ovice_broadcast_message",payload:{event:"started",message:{config:M,img:n}}}),g(M)};return a===void 0?O.jsx(xi,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",backgroundColor:"#f0f0f0",position:"relative",backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundRepeat:"no-repeat"},children:O.jsxs(Dt,{alignItems:"center",spacing:1,children:[O.jsx(gw,{color:"secondary",size:"50%"}),O.jsx(Ft,{variant:"h4",children:"Loading..."})]})}):a===!1&&!e?O.jsx(xi,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",backgroundColor:"#f0f0f0",position:"relative",backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundRepeat:"no-repeat"},children:O.jsxs(Dt,{alignItems:"center",spacing:1,children:[!p&&O.jsx(Ft,{variant:"h4",children:"Waiting for host to start the game"}),p&&O.jsx(Ft,{variant:"h4",children:"Game Over"}),O.jsx(Rs,{players:l})]})}):O.jsxs(xi,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",backgroundColor:"#f0f0f0",position:"relative",backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundRepeat:"no-repeat"},children:[n&&y&&!p&&O.jsx(um.JigsawPuzzle,{imageSrc:n,rows:y.rows,columns:y.columns,onSolved:x}),a&&p&&O.jsxs(Dt,{alignItems:"center",spacing:1,children:[O.jsx(Ft,{variant:"h4",children:"Game Over"}),O.jsx(Rs,{players:l}),O.jsx(qr,{variant:"contained",onClick:w,children:"Restart"})]}),a&&!e&&!p&&O.jsxs(Dt,{flexDirection:"row",children:[O.jsx(Aw,{onStartGame:h}),O.jsx(Rs,{players:l})]}),a&&e&&n===null&&!p&&O.jsx(Lw,{images:Qf.map(P=>P.img),onImageClick:P=>{S(P)}}),a&&f&&!p&&!y&&O.jsx(Fw,{onLevelChange:k})]})}const Gw=am(document.getElementById("root"));Gw.render(O.jsx(C.StrictMode,{children:O.jsx(Kw,{})})); diff --git a/jigsaw-puzzle/index.html b/jigsaw-puzzle/index.html index 448260c..df54a1b 100644 --- a/jigsaw-puzzle/index.html +++ b/jigsaw-puzzle/index.html @@ -7,7 +7,7 @@ - +