https://khawlaartandculture.com/assets/index-DzilwLF4.js

1import{r as v,j as t}from"./react-Bn9KuX-L.js";import{B as Y,C as D,E as A,D as k,d as se,r as z,j as T,n as te,M as C,l as W,a as K,F as Z,ae as oe,k as B}from"./index-C_5JZHn3.js";import{a as J,C as ne}from"./index.esm-BQgUqjeI.js";import{C as ie}from"./index-zItCqmzK.js";import{M as re,a as le}from"./MatSelect-RByI55OI.js";import{c as Q}from"./query-BLZ7jo_n.js";import{u as ae}from"./useRequireAuth-DdIlAqAH.js";import"./router-Bgi5W-cI.js";const P=se.ENGLISH,I={users:()=>k(A.PRIDE_WALL_USERS,{language:P}),countries:()=>k(A.AROUND_COUNTRIES,{language:P}),add:e=>Y(A.PRIDE_WALL_SUBMIT,D({action:"addArticle",...e})),editMessage:(e,o)=>Y(A.PRIDE_WALL_SUBMIT,D({action:"editArticle",message:o,prideId:e}))},X="/assets/images/PrideWall.jpg",S=360,ce=800,L="16px Arial",H="bold 34px Arial",de="bold 33px Arial",U="#777",R="#000",ue=800,me=45,he=(e,o,i,s,a,h)=>{const c=o.split(" ");let g="",r=s;for(let n=0;n<c.length;n++){const f=`${g}${c[n]} `;e.measureText(f).width>a&&n>0?(e.fillText(g,i,r),g=`${c[n]} `,r+=h):g=f}e.fillText(g,i,r)},fe=(e,o,i)=>{e.drawImage(o,0,0);let s=ce;e.fillStyle=U,e.font=L,e.fillText("NAME",S,s),s+=40,e.fillStyle=R,e.font=H,e.fillText(i.name,S,s),s+=80,e.fillStyle=U,e.font=L,e.fillText("NATIONALITY",S,s),s+=40,e.fillStyle=R,e.font=H,e.fillText(i.countryName,S,s),s+=80,e.fillStyle=U,e.font=L,e.fillText("MESSAGE",S,s),s+=50,e.fillStyle=R,e.font=de,he(e,i.message||"No message",S,s,ue,me)},ge=e=>new Promise((o,i)=>{const s=document.createElement("canvas"),a=new Image;a.src=X,a.onload=()=>{s.width=a.width,s.height=a.height;const h=s.getContext("2d");if(!h){i(new Error("No 2d context"));return}fe(h,a,e),s.toBlob(c=>c?o(c):i(new Error("toBlob failed")),"image/png")},a.onerror=()=>i(new Error(`Could not load ${X}`))}),xe=e=>{const o=URL.createObjectURL(e),i=document.createElement("a");i.href=o,i.download="pride-wall.png",i.click(),URL.revokeObjectURL(o)},pe=`The Pride Wall - Paint Our Pride 
2 A Collaborative Celebration of UAE'S National Unity, Strong Values and Cohesion`,we=({data:e,dialogRef:o})=>{const{currentUser:i}=z(),[s,a]=v.useState(!1),[h,c]=v.useState({}),{register:g,handleSubmit:r,reset:n,setValue:f,formState:{errors:N,isValid:w}}=J({mode:"onChange",defaultValues:{message:""}}),x=l=>h[String(l.prideId)]??l.message,y=l=>{a(!0),f("message",x(l)||"",{shouldValidate:!0})},j=()=>{a(!1),n({message:""})},d=(l,m)=>{c(E=>({...E,[String(l.prideId)]:m})),I.editMessage(l.prideId,m).catch(W.error),a(!1)},u=async()=>{const l=e.users[0];if(!l)return;const m=await ge(l),E=new File([m],"pride-wall.png",{type:"image/png"}),b={title:pe,text:`${l.message}
3
4${l.name} 
5 ${l.countryName}
6
7`,url:window.location.href,files:[E]};if(navigator.share)try{await navigator.share(b)}catch(M){W.error("Share failed:",M)}else xe(e.canvasBlob)},p=()=>{o.close(),o.afterClosed().then(()=>{window.setTimeout(()=>{document.getElementById("submit-section")?.scrollIntoView({behavior:"smooth"})},100)})};return t.jsx("div",{className:"kc-flag-user-modal",children:t.jsxs("div",{className:"modal-container",children:[t.jsxs("div",{className:"modal-header",children:[t.jsx("h2",{children:"Contributors"}),t.jsx("button",{className:"share-action",onClick:()=>void u(),children:"Share"})]}),t.jsxs("div",{className:"modal-body",children:[e.users.length===0&&t.jsxs("div",{className:"empty",children:[t.jsxs("span",{children:["No contributors yet. ",t.jsx("br",{}),"Be the first to add your tile and message to the Pride Wall !"]}),t.jsx("a",{onClick:p,style:{fontWeight:600,textDecoration:"underline"},children:"Submit your Tile"})]}),e.users.map(l=>t.jsxs("div",{className:"user-card",children:[t.jsxs("div",{className:"usr_second_card",children:[t.jsx("div",{className:"avatar",children:l.picture&&t.jsx("img",{src:l.picture,alt:l.name})}),t.jsxs("div",{className:"info",children:[t.jsx("div",{className:"name",children:l.name}),t.jsx("div",{className:"nationality",children:l.countryName}),!s&&t.jsx("div",{className:"message",children:x(l)||"No message"}),s&&t.jsxs("div",{className:"edit-box",children:[t.jsx(T,{appearance:"outline",className:"full-width",error:N.message?.type==="required"?"Message is required":N.message?.type==="maxLength"?"Max 200 characters allowed":void 0,children:t.jsx(te,{rows:3,placeholder:"Update your message",className:"full-width",...g("message",{required:!0,maxLength:100})})}),t.jsxs("div",{className:"edit-actions",children:[t.jsx(C,{color:"primary",disabled:!w,onClick:r(m=>d(l,m.message)),children:"Save"}),t.jsx(C,{onClick:j,children:"Cancel"})]})]})]})]}),i&&Number(i.userid)===Number(l.userId)&&t.jsx("button",{className:"edit-action",onClick:()=>y(l),children:"Edit"})]},String(l.prideId)))]}),t.jsxs("div",{className:"modal-footer",children:[t.jsxs("span",{children:[e.length," Contributor(s)"]}),t.jsx("button",{className:"close-action",onClick:()=>o.close(),children:"Close"})]})]})})},ye=()=>({ctx:null,cols:0,rows:0,tileW:0,tileH:0,tiles:[],scale:1,offsetX:0,offsetY:0,isDragging:!1,startX:0,startY:0,imageCache:{}}),Ne="#ff0000",ve="#00732f",ee="#ffffff",je="#000000",O=(e,o)=>{const i=Math.max(o,1);let a=Math.round(Math.sqrt(i/2));a%3!==0&&(a+=3-a%3),e.rows=Math.max(6,a),e.cols=e.rows*2},Ee=(e,o)=>{const i=o.getBoundingClientRect();o.width=i.width,o.height=i.width/2,e.ctx=o.getContext("2d"),e.ctx&&(e.ctx.imageSmoothingEnabled=!1),e.tileW=o.width/e.cols,e.tileH=o.height/e.rows},be=(e,o)=>{const i=o.getBoundingClientRect();o.width=i.width,o.height=i.width/2,e.tileW=o.width/e.cols,e.tileH=o.height/e.rows},Se=(e,o)=>{const i=o%e.cols,s=Math.floor(o/e.cols),a=Math.floor(e.cols*.25);if(i<a)return Ne;const h=e.rows/3;return s<h?ve:s<h*2?ee:je},G=e=>{e.tiles=[];for(let o=0;o<e.cols*e.rows;o++)e.tiles.push({color:Se(e,o),users:[]})},q=(e,o)=>

7{e.tiles.forEach(i=>{i.users=[]}),o.forEach((i,s)=>{e.tiles[s%e.tiles.length].users.push(i)})},Ce=(e,o,i)=>{if(e.imageCache[o])return;const s=new Image;s.crossOrigin="anonymous",s.src=o,s.onload=()=>{e.imageCache[o]=s,i()}},F=(e,o,i)=>{let s=o;for(;e.measureText(s).width>i&&s.length>0;)s=s.slice(0,-1);return s.length<o.length?`${s}…`:s},_=(e,o,i)=>{const s=e.ctx;if(!s)return;s.clearRect(0,0,o.width,o.height),e.tiles.forEach((c,g)=>{const r=g%e.cols,n=Math.floor(g/e.cols),f=Math.round(r*e.tileW*e.scale+e.offsetX),N=Math.round(n*e.tileH*e.scale+e.offsetY),w=Math.ceil(e.tileW*e.scale),x=Math.ceil(e.tileH*e.scale);if(s.fillStyle=c.color,s.fillRect(f,N,w,x),c.users.length>0&&(s.strokeStyle="yellow",s.lineWidth=.1,s.strokeRect(f+.5,N+.5,w,x)),c.users.length>0){const y=c.users[0],j=Math.min(w,x);if(j>25){const d=Math.max(6,Math.min(j/5,11));s.textAlign="center",s.textBaseline="middle";const u=f+w/2,p=Math.min(w,x)*.35,l=N+x*.25;if(y.picture){e.imageCache[y.picture]||Ce(e,y.picture,i);const M=e.imageCache[y.picture];M&&(s.save(),s.beginPath(),s.arc(u,l,p/2,0,Math.PI*2),s.closePath(),s.clip(),s.drawImage(M,u-p/2,l-p/2,p,p),s.restore())}s.fillStyle=c.color===ee?"#000":"rgba(255,255,255,0.85)",s.font=`${d}px Arial`;const m=F(s,y.name,w-4),E=F(s,y.countryName,w-4),b=N+x*.65;s.fillText(m,u,b),s.fillText(E,u,b+d)}}}),s.strokeStyle="rgba(0,0,0,0.2)",s.lineWidth=.5;const a=e.cols*e.tileW*e.scale,h=e.rows*e.tileH*e.scale;for(let c=0;c<=e.cols;c++){const g=Math.round(c*e.tileW*e.scale+e.offsetX)+.5;s.beginPath(),s.moveTo(g,0),s.lineTo(g,h),s.stroke()}for(let c=0;c<=e.rows;c++){const g=Math.round(c*e.tileH*e.scale+e.offsetY)+.5;s.beginPath(),s.moveTo(0,g),s.lineTo(a,g),s.stroke()}},V=(e,o)=>{const i=e.cols*e.tileW*e.scale,s=e.rows*e.tileH*e.scale,a=o.width-i,h=o.height-s;e.offsetX=Math.min(0,Math.max(a,e.offsetX)),e.offsetY=Math.min(0,Math.max(h,e.offsetY))},$=(e,o,i)=>{const s=Math.floor(o/e.tileW);return Math.floor(i/e.tileH)*e.cols+s},Me=(e,o)=>{e.scale=1;const i=e.cols*e.tileW,s=e.rows*e.tileH;e.offsetX=(o.width-i)/2,e.offsetY=(o.height-s)/2,o.style.cursor="crosshair"},Ae=e=>new Promise((o,i)=>{e.toBlob(s=>s?o(s):i(new Error("toBlob failed")),"image/png")}),Te=.5,Ie=3,Le=({users:e})=>{const o=K(),i=v.useRef(null),s=v.useRef(ye()),a=v.useRef(e);a.current=e;const[h,c]=v.useState({visible:!1,x:0,y:0,data:[]});v.useEffect(()=>{const r=i.current;if(!r)return;const n=s.current,f=()=>_(n,r,f);O(n,a.current.length),Ee(n,r),G(n),q(n,a.current),f();const N=d=>{n.scale<=1||(n.isDragging=!0,n.startX=d.clientX-n.offsetX,n.startY=d.clientY-n.offsetY,r.style.cursor="grabbing")},w=d=>{const u=r.getBoundingClientRect();if(n.isDragging){n.offsetX=d.clientX-n.startX,n.offsetY=d.clientY-n.startY,V(n,r),f();return}const p=(d.clientX-u.left-n.offsetX)/n.scale,l=(d.clientY-u.top-n.offsetY)/n.scale,m=n.tiles[$(n,p,l)];m&&c({visible:!0,x:d.clientX-u.left+10,y:d.clientY-u.top+10,data:m.users})},x=()=>{n.isDragging=!1,r.style.cursor=n.scale>1?"grab":"default"},y=d=>{const u=r.getBoundingClientRect(),p=(d.clientX-u.left-n.offsetX)/n.scale,l=(d.clientY-u.top-n.offsetY)/n.scale,m=n.tiles[$(n,p,l)]?.users??[];Ae(r).then(E=>{o.open(we,{width:"500px",data:{users:m,canvasBlob:E}})})},j=d=>{d.preventDefault();const u=r.getBoundingClientRect(),p=d.clientX-u.left,l=d.clientY-u.top,m=d.deltaY>0?.95:1.05,E=n.scale;n.scale=Math.max(Te,Math.min(Ie,n.scale*m));const b=n.scale/E;n.offsetX=p-(p-n.offsetX)*b,n.offsetY=l-(l-n.offsetY)*b,V(n,r),f()};return r.addEventListener("mousedown",N),r.addEventListener("mousemove",w),r.addEventListener("mouseup",x),r.addEventListener("mouseleave",x),r.addEventListener("click",y),r.addEventListener("wheel",j,{passive:!1}),()=>{r.removeEventListener("mousedown",N),r.removeEventListener("mousemove",w),r.removeEventListener("mouseup",x),r.removeEventListener("mouseleave",x),r.removeEventListener("click",y),r.removeEventListener("wheel",j)}},[o]),v.useEffect(()=>{const r=i.current,n=s.current;if(!r||!n.ctx)return;O(n,e.length),G(n),q(n,e),be(n,r);const f=()=>_(n,r,f);f()},[e]);const g=()=>{const r=i.current;if(!r)return;const n=s.current;Me(n,r);const f=()=>_(n,r,f);f()};return t.jsx("div",{className:"kc-canvas-mosaic",children:t.jsxs("div",{className:"wrapper",children:[t.jsx("canvas",{ref:i}),t.jsx("div",{className:"d-flex justify-content-end",children:t.jsx("button",{onClick:g,className:"reset-btn",t

7itle:"Reset View",children:t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",width:"20px",height:"20px",children:t.jsx("path",{d:"M12,2A10,10,0,1,0,22,12,10.01142,10.01142,0,0,0,12,2Zm1.41,14.59L12,13.41l-1.41,1.18a1,1,0,0,1-1.18-1.66l3-2.5a1,1,0,0,1,1.18,0l3,2.5A1,1,0,0,1,13.41,16.59Z"})})})}),h.visible&&t.jsxs("div",{className:"tooltip",style:{left:`${h.x}px`,top:`${h.y}px`},children:[h.data.length===0&&t.jsx("div",{children:"Empty"}),h.data.map(r=>t.jsxs("div",{children:[r.name," (",r.countryName,")"]},String(r.prideId)))]})]})})},Ue=()=>Q({queryKey:["pride-wall-users"],queryFn:async()=>{const e=await I.users();return oe(e)?e.entities??[]:[]},staleTime:Z.CONTENT}),Re=()=>Q({queryKey:["pride-wall-countries"],queryFn:async()=>await I.countries()??[],staleTime:Z.STATIC}),_e=({onAdd:e})=>{const{currentUser:o}=z(),i=ae(),s=K(),{data:a=[]}=Re(),[h,c]=v.useState(!1),[g,r]=v.useState(!1),{control:n,register:f,handleSubmit:N,reset:w,formState:{errors:x,isValid:y}}=J({mode:"onChange",defaultValues:{name:"",nationality:"",proudness:""}}),j=N(({name:d,nationality:u,proudness:p})=>{c(!0),I.add({name:d,countryId:u,message:p,countryName:a.find(l=>String(l.countryId)===u)?.title??""}).then(l=>{const m=Number(l.statusCode)===200?l.entities?.[0]:void 0;m&&(e?.({name:d,countryId:m.countryId,countryName:m.countryName,createDate:m.createDate,message:m.message,prideId:m.prideId,picture:m.picture,userId:m.userId}),w({name:"",nationality:"",proudness:""}),s.open(ie,{data:m.errormessage||"Successfully added!"})),c(!1)}).catch(l=>{W.error(l),c(!1)})});return!o&&!g?t.jsx("div",{className:"kc-contribution-form",children:t.jsxs("div",{className:"login-container",children:[t.jsx("h3",{children:"Join the Pride Wall UAE"}),t.jsx("p",{className:"subtitle",children:"Be part of the UAE National Day celebration by adding your tile to the flag."}),t.jsxs("div",{className:"d-flex justify-content-center",style:{gap:"10px"},children:[t.jsx(C,{variant:"raised",color:"accent",onClick:()=>i(),children:"Login to Participate"}),t.jsx(C,{variant:"raised",onClick:()=>r(!0),children:"Login as Guest"})]}),t.jsx("p",{className:"small-text",children:"You need to be logged in to contribute your name to the mural."})]})}):t.jsx("div",{className:"kc-contribution-form",children:t.jsxs("form",{className:"form-container",children:[t.jsx(T,{className:"full-width",label:"Name",error:x.name&&"Name is required",children:t.jsx(B,{...f("name",{required:!0})})}),t.jsx(T,{className:"full-width",label:"Nationality",error:x.nationality&&"Nationality is required",children:t.jsx(ne,{control:n,name:"nationality",rules:{required:!0},render:({field:d})=>t.jsx(re,{value:d.value,onChange:u=>d.onChange(String(u??"")),children:a.map(u=>t.jsx(le,{value:String(u.countryId),children:u.title},String(u.countryId)))})})}),t.jsx(T,{className:"full-width",label:"How proud are you to be part of the UAE?",error:x.proudness&&"This is required",children:t.jsx(B,{...f("proudness",{required:!0})})}),t.jsx(C,{variant:"raised",color:"primary",onClick:()=>void j(),disabled:!y||h,children:h?"Submitting...":"Add to Pride Wall"})]})})},We=2e3,Ye=()=>{document.getElementById("submit-section")?.scrollIntoView({behavior:"smooth"})},qe=()=>{const{data:e}=Ue(),[o,i]=v.useState([]),s=v.useMemo(()=>[...e??[],...o],[e,o]),a=Math.min(s.length/We*100,100);return t.jsx("div",{className:"kc-pride-wall __fixed",style:{paddingTop:"110px"},children:t.jsx("div",{className:"container-fluid",children:t.jsx("div",{className:"row justify-content-center align-items-center",children:t.jsxs("div",{className:"col-md-10 mt-5 mb-2",children:[t.jsxs("div",{className:"__align",style:{marginBottom:"40px"},children:[t.jsx("h1",{className:"_page_title secondary_color",children:"The Pride Wall - Paint our pride"}),t.jsx("h3",{children:"A Collaborative Celebration of UAE'S National Unity, Strong Values and Cohesion"}),t.jsx("img",{src:"/assets/images/dumm.png",alt:"",style:{width:"40px"}})]}),t.jsxs("div",{className:"d-flex justify-content-between mb-4 align-items-center",style:{textAlign:"right"},children:[t.jsx("button",{className:"__submit_your_tile",onClick:Ye,children:"Submit your Tile"}),t.jsxs("div",{className:"progress-container",children:[t.jsxs("div",{className:"top-line",children:[t.jsx("span",{className:"label",children:"TILES ADDED:"}

7),t.jsx("span",{className:"count",children:s.length.toLocaleString("en-US")})]}),t.jsx("div",{className:"progress-track",children:t.jsx("div",{className:"progress-fill",style:{width:`${a}%`}})}),t.jsx("div",{className:"subtitle",children:"BUILDING THE FLAG FOR THE PROUD UAE"})]})]}),t.jsx(Le,{users:s}),t.jsx("h3",{children:"SUBMIT YOUR TILE"}),t.jsx("p",{children:"Help us create a vibrant representation of the UAE's Unity in Diversity!"}),t.jsx("div",{id:"submit-section"}),t.jsx(_e,{onAdd:h=>i(c=>[...c,h])})]})})})})};export{qe as default};