https://ecomitram.org/_next/static/chunks/2108.9769ce0c5507990f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2108],{42108:(e,t,a)=>{a.r(t),a.d(t,{FeedCard:()=>i,GamePage:()=>c});var r=a(84157),n=a(41865);let o=JSON.parse('[{"name":{"en":"Banana peel","hi":"केले का छिलका"},"category":"wet","emoji":"\uD83C\uDF4C"},{"name":{"en":"Tea leaves","hi":"चाय पत्ती"},"category":"wet","emoji":"\uD83C\uDF75"},{"name":{"en":"Leftover rice","hi":"बचा हुआ चावल"},"category":"wet","emoji":"\uD83C\uDF5A"},{"name":{"en":"Egg shells","hi":"अंडे के छिलके"},"category":"wet","emoji":"\uD83E\uDD5A"},{"name":{"en":"Vegetable scraps","hi":"सब्जी के छिलके"},"category":"wet","emoji":"\uD83E\uDD55"},{"name":{"en":"Flower petals","hi":"फूल की पंखुड़ियाँ"},"category":"wet","emoji":"\uD83C\uDF38"},{"name":{"en":"Cooked food waste","hi":"पका हुआ खाना"},"category":"wet","emoji":"\uD83C\uDF5B"},{"name":{"en":"Fruit peels","hi":"फलों के छिलके"},"category":"wet","emoji":"\uD83C\uDF4E"},{"name":{"en":"Newspaper","hi":"अखबार"},"category":"dry","emoji":"\uD83D\uDCF0"},{"name":{"en":"Cardboard box","hi":"गत्ते का डिब्बा"},"category":"dry","emoji":"\uD83D\uDCE6"},{"name":{"en":"Plastic wrapper","hi":"प्लास्टिक रैपर"},"category":"dry","emoji":"\uD83D\uDECD️"},{"name":{"en":"Cloth rags","hi":"कपड़े के टुकड़े"},"category":"dry","emoji":"\uD83D\uDC55"},{"name":{"en":"Thermocol/Styrofoam","hi":"थर्मोकोल"},"category":"dry","emoji":"\uD83D\uDCCB"},{"name":{"en":"Rubber band","hi":"रबर बैंड"},"category":"dry","emoji":"⭕"},{"name":{"en":"Broken toy","hi":"टूटा खिलौना"},"category":"dry","emoji":"\uD83E\uDDF8"},{"name":{"en":"Used battery","hi":"इस्तेमाल की बैटरी"},"category":"hazardous","emoji":"\uD83D\uDD0B"},{"name":{"en":"Expired medicine","hi":"एक्सपायर दवाई"},"category":"hazardous","emoji":"\uD83D\uDC8A"},{"name":{"en":"Broken CFL bulb","hi":"टूटा CFL बल्ब"},"category":"hazardous","emoji":"\uD83D\uDCA1"},{"name":{"en":"Paint can","hi":"पेंट का डिब्बा"},"category":"hazardous","emoji":"\uD83C\uDFA8"},{"name":{"en":"Nail polish remover","hi":"नेल पॉलिश रिमूवर"},"category":"hazardous","emoji":"\uD83D\uDC85"},{"name":{"en":"Pesticide bottle","hi":"कीटनाशक की बोतल"},"category":"hazardous","emoji":"☠️"},{"name":{"en":"E-waste (phone charger)","hi":"ई-कचरा (चार्जर)"},"category":"hazardous","emoji":"\uD83D\uDD0C"},{"name":{"en":"Glass bottle","hi":"काँच की बोतल"},"category":"recyclable","emoji":"\uD83C\uDF7E"},{"name":{"en":"Aluminum can","hi":"एल्यूमिनियम कैन"},"category":"recyclable","emoji":"\uD83E\uDD6B"},{"name":{"en":"Plastic bottle (PET)","hi":"प्लास्टिक बोतल (PET)"},"category":"recyclable","emoji":"\uD83E\uDDF4"},{"name":{"en":"Metal spoon","hi":"धातु का चम्मच"},"category":"recyclable","emoji":"\uD83E\uDD44"},{"name":{"en":"Tin container","hi":"टिन का डिब्बा"},"category":"recyclable","emoji":"\uD83E\uDD6B"},{"name":{"en":"Old magazine","hi":"पुरानी पत्रिका"},"category":"recyclable","emoji":"\uD83D\uDCD6"},{"name":{"en":"Paper bag","hi":"कागज़ का थैला"},"category":"recyclable","emoji":"\uD83D\uDED2"},{"name":{"en":"Milk packet (tetra pak)","hi":"दूध का पैकेट (टेट्रा पैक)"},"category":"recyclable","emoji":"\uD83E\uDD5B"}]'),s=[{category:"wet",label:"Wet",emoji:"\uD83E\uDD6C",color:"bg-green-100 border-green-400 text-green-800",activeColor:"bg-green-200"},{category:"dry",label:"Dry",emoji:"\uD83D\uDCE6",color:"bg-yellow-100 border-yellow-400 text-yellow-800",activeColor:"bg-yellow-200"},{category:"hazardous",label:"Hazardous",emoji:"☠️",color:"bg-red-100 border-red-400 text-red-800",activeColor:"bg-red-200"},{category:"recyclable",label:"Recyclable",emoji:"♻️",color:"bg-blue-100 border-blue-400 text-blue-800",activeColor:"bg-blue-200"}];function c(e){let{slug:t,participationId:a,onSubmit:c}=e,i=(0,n.useMemo)(()=>(function(e){let t=[...e];for(let e=t.length-1;e>0;e--){let a=Math.floor(Math.random()*(e+1));[t[e],t[a]]=[t[a],t[e]]}return t}

1)(o),[]),[l,m]=(0,n.useState)({currentIndex:0,correctCount:0,wrongCount:0,timeLeft:60,finished:!1,results:[]}),[d,x]=(0,n.useState)(null),[g,h]=(0,n.useState)(!1),[b,u]=(0,n.useState)(!1),y=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(g&&!l.finished)return y.current=setInterval(()=>{m(e=>e.timeLeft<=1?{...e,timeLeft:0,finished:!0}:{...e,timeLeft:e.timeLeft-1})},1e3),()=>{y.current&&clearInterval(y.current)}},[g,l.finished]),(0,n.useEffect)(()=>{g&&l.currentIndex>=i.length&&!l.finished&&m(e=>({...e,finished:!0}))},[g,l.currentIndex,i.length,l.finished]);let j=l.currentIndex<i.length?i[l.currentIndex]:null,f=(0,n.useCallback)(e=>{if(l.finished||!j)return;let t=j.category===e;x(t?"correct":"wrong"),setTimeout(()=>x(null),400),m(a=>({...a,currentIndex:a.currentIndex+1,correctCount:a.correctCount+ +!!t,wrongCount:a.wrongCount+ +!t,results:[...a.results,{item:j,chosen:e,correct:t}]}))},[l.finished,j]),p=(0,n.useCallback)(()=>{h(!0)},[]),w=(0,n.useCallback)(async()=>{u(!0);try{let e=l.correctCount+l.wrongCount;await c({correctCount:l.correctCount,totalAttempted:e,timeLeft:l.timeLeft})}catch(e){u(!1)}},[l,c]),N=l.correctCount+l.wrongCount,v=N>0?Math.round(l.correctCount/N*100):0;return g?l.finished?(0,r.jsxs)("div",{className:"mx-auto max-w-lg px-4 py-6 text-center",children:[(0,r.jsxs)("h1",{className:"text-xl font-bold mb-2",children:["♻️"," Game Over!"]}),(0,r.jsxs)("div",{className:"text-4xl font-bold text-green-700 mb-2","data-testid":"final-score",children:[l.correctCount,"/",N]}),(0,r.jsxs)("p",{className:"text-sm text-gray-600 mb-1",children:[v,"% accuracy"]}),(0,r.jsxs)("p",{className:"text-xs text-gray-400 mb-4",children:["Time remaining: ",l.timeLeft,"s"]}),l.results.length>0&&(0,r.jsxs)("div",{className:"mb-4 max-h-48 overflow-y-auto text-left",children:[(0,r.jsx)("h2",{className:"font-semibold text-sm mb-2",children:"Review:"}),l.results.map((e,t)=>(0,r.jsxs)("div",{className:"flex items-center justify-between text-xs py-1 px-2 rounded ".concat(e.correct?"bg-green-50":"bg-red-50"),children:[(0,r.jsxs)("span",{children:[e.item.emoji," ",e.item.name.en]}),(0,r.jsx)("span",{className:e.correct?"text-green-600":"text-red-600",children:e.correct?"Correct":"Wrong (".concat(e.item.category,")")})]},t))]}),(0,r.jsx)("button",{onClick:w,disabled:b,className:"w-full min-h-[48px] rounded-md bg-green-600 px-4 py-3 text-white font-semibold hover:bg-green-700 disabled:opacity-50","data-testid":"submit-score-btn",children:b?"Submitting...":"Submit Score & Get Certificate"})]}):(0,r.jsxs)("div",{className:"mx-auto max-w-lg px-4 py-6",children:[(0,r.jsxs)("div",{className:"flex justify-between items-center mb-4",children:[(0,r.jsxs)("span",{className:"text-sm font-semibold text-gray-700",children:["♻️"," Sort the Waste"]}),(0,r.jsxs)("div",{className:"flex gap-4 text-sm",children:[(0,r.jsxs)("span",{className:"text-green-600 font-bold","data-testid":"correct-count",children:["✓"," ",l.correctCount]}),(0,r.jsxs)("span",{className:"text-red-500 font-bold","data-testid":"wrong-count",children:["✗"," ",l.wrongCount]})]})]}),(0,r.jsx)("div",{className:"relative h-2 bg-gray-200 rounded-full mb-4",children:(0,r.jsx)("div",{className:"h-2 rounded-full transition-all duration-1000 ".concat(l.timeLeft<=10?"bg-red-500":"bg-green-500"),style:{width:"".concat(l.timeLeft/60*100,"%")},"data-testid":"timer-bar"})}),(0,r.jsxs)("div",{className:"text-center text-xs text-gray-500 mb-4","data-testid":"timer-text",children:[l.timeLeft,"s remaining"]}),j&&(0,r.jsxs)("div",{className:"\n            text-center p-6 rounded-xl border-2 mb-6 transition-colors duration-200\n            ".concat("correct"===d?"bg-green-100 border-green-400":"","\n            ").concat("wrong"===d?"bg-red-100 border-red-400":"","\n            ").concat(d?"":"bg-white border-gray-200","\n          "),"data-testid":"current-item",children:[(0,r.jsx)("span",{className:"text-5xl block mb-3",children:j.emoji}),(0,r.jsx)("p",{className:"text-lg font-bold",children:j.name.en}),(0,r.jsx)("p",{className:"text-sm text-gray-500",children:j.name.hi})]}),(0,r.jsx)("div",{className:"grid grid-cols-2 gap-3","data-testid":"bin-zones",children:s.map(e=>(0,r.jsxs)("button",{onClick:()=>f(e.category),className:"\n              min-h-[72px] rounded-xl border-2 flex flex-col items-center justify-center gap-1\n              font-semibold transition-transform active:scale-95\n              ".concat(e.color,"\n            "),"data-testid":"bin-".concat(e.category),children:[(0,r.jsx)("span",{className:"text-2xl",children:e.emoji}),(0,r.jsx)("span",{className:"text-sm",children:e.label})]},e.category))})]}):(0,r.jsxs)("div",{className:"mx-auto max-w-lg px-4 py-6 text-center",children:[(0,r.jsxs)("h1",{className:"text-xl font-bold mb-4",children:["♻️"," Garbage Sorting Game"]}),(0,r.jsxs)("p",{className:"text-sm text-gray-600 mb-4",children:["Sort waste items into the correct bin — Wet, Dry, Hazardous, or Recyclable.",(0,r.jsx)("br",{}),"You have ",60," seconds. How many can you get right?"]}),(0,r.jsx)("div",{className:"flex justify-center gap-3 mb-6",children:s.map(e=>(0,r.jsxs)("div",{className:"rounded-lg border-2 px-3 py-2 text-xs font-semibold ".concat(e.color),children:[e.emoji," ",e.label]},e.category))}),(0,r.jsx)("button",{onClick:p,className:"w-full min-h-[48px] rounded-md bg-green-600 px-4 py-3 text-white font-semibold hover:bg-green-700","data-testid":"start-game-btn",children:"Start Game"})]})}function i(e){let{slug:t,title:a,description:n,participantCount:o,ecoPoints:s}=e;return(0,r.jsxs)("a",{href:"/campaigns/".concat(t),className:"block rounded-xl border border-gray-200 p-4 hover:shadow-md transition-shadow","data-testid":"garbage-sorting-feed-card",children:[(0,r.jsxs)("div",{className:"flex items-center gap-3 mb-2",children:[(0,r.jsx)("span",{className:"text-3xl",children:"♻️\uD83D\uDDD1️"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h3",{className:"font-bold text-base",children:a}),(0,r.jsxs)("p",{className:"text-xs text-gray-500",children:[o," players • ",s," eco points"]})]})]}),(0,r.jsx)("p",{className:"text-sm text-gray-600 mb-3",children:n}),(0,r.jsxs)("div",{className:"text-center py-2 rounded-md bg-green-50 text-green-700 font-semibold text-sm",children:["Sort Now ","♻️"]})]})}}}]);