@mblinkov/whats-missing 20.0.26 → 20.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/whats-missing.cjs.js +3 -3
- package/dist/whats-missing.es.js +136 -88
- package/package.json +1 -1
- package/src/Game.tsx +75 -25
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),ce=window.origin+"/cloud/speakid/games/whatsmissing/",Y=(i,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),ce=window.origin+"/cloud/speakid/games/whatsmissing/",Y=(i,m)=>i.map(([l,s])=>({src:`${ce}${m}/${s.replace(/\s/g,"%20")}.png`,name:s})),me=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],ue=[["bear","bear"],["cat","cat"],["crocodile","crocodile"],["dolphin","dolphin"],["elephant","elephant"],["fox","fox"],["giraffe","giraffe"],["horse","horse"],["kangaroo","kangaroo"],["lion","lion"],["monkey","monkey"],["owl","owl"],["panda","panda"],["penguin","penguin"],["squirrel","squirrel"],["tiger","tiger"],["tortoise","tortoise"],["wolf","wolf"],["zebra","zebra"]],ge=[["ball","ball"],["balloon","balloon"],["blocks","blocks"],["car","car"],["doll","doll"],["drum","drum"],["guitar","guitar"],["jump_rope","jump rope"],["kite","kite"],["paints","paints"],["plane","plane"],["puzzle","puzzle"],["rocket","rocket"],["scooter","scooter"],["skateboard","skateboard"],["slide","slide"],["teddy_bear","teddy bear"],["yo-yo","yo-yo"],["crayons","crayons"]],P={food:Y(me,"food"),animals:Y(ue,"animals"),toys:Y(ge,"toys")},he=`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const i=document.createElement("style");i.id="spin-keyframes",i.innerHTML=he,document.head.appendChild(i)}const
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const i=document.createElement("style");i.id="spin-keyframes",i.innerHTML=he,document.head.appendChild(i)}const fe={animation:"spin 1.4s linear infinite"},n={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...fe}},pe=()=>{const i=document.createElement("style");i.textContent=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
8
8
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
9
|
-
`,document.head.appendChild(i)},xe=(i,
|
|
9
|
+
`,document.head.appendChild(i)},xe=(i,m)=>{const l=Array.from({length:i.length+1},()=>Array(m.length+1).fill(0));for(let s=0;s<=i.length;s++)l[s][0]=s;for(let s=0;s<=m.length;s++)l[0][s]=s;for(let s=1;s<=i.length;s++)for(let u=1;u<=m.length;u++)l[s][u]=i[s-1]===m[u-1]?l[s-1][u-1]:Math.min(l[s-1][u-1],l[s][u-1],l[s-1][u])+1;return l[i.length][m.length]};function ye(i,m={minDesktopWidth:1200,forceResize:!1}){const l=o.useRef(null),s=m.minDesktopWidth??1200,u=!!m.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!i||!i.current)return;const d=i.current,I=()=>{try{const a=document.body,g=getComputedStyle(a),C=parseFloat(a.style&&a.style.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const w=parseFloat(g.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const h=document.createElement("div");h.style.position="absolute",h.style.left="0",h.style.top="0",h.style.width="100px",h.style.height="1px",h.style.visibility="hidden",h.style.pointerEvents="none",document.documentElement.appendChild(h);const x=h.getBoundingClientRect();if(document.documentElement.removeChild(h),x&&x.width>0){const B=x.width/100;if(!isNaN(B)&&B>0)return B}}catch{}return 1},S=()=>{if(s&&window.innerWidth<s){R();return}const a=I();if(!a||a===1){R();return}l.current||(l.current={transform:d.style.transform||null,transformOrigin:d.style.transformOrigin||null,width:d.style.width||null,height:d.style.height||null,willChange:d.style.willChange||null});const g=1/a;u&&(d.style.width=`${a*100}%`,d.style.height=`${a*100}%`),d.style.transformOrigin="50% 50%",d.style.transform=`scale(${g})`,d.style.willChange="transform"},R=()=>{if(!l.current)return;const a=l.current;d.style.transform=a.transform??"",d.style.transformOrigin=a.transformOrigin??"",d.style.width=a.width??"",d.style.height=a.height??"",d.style.willChange=a.willChange??"",l.current=null};let b=0;const v=()=>{cancelAnimationFrame(b),b=requestAnimationFrame(S)},k=new MutationObserver(a=>{for(const g of a)if(g.type==="attributes"&&(g.attributeName==="style"||g.attributeName==="class")){v();break}});return k.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",v),v(),()=>{cancelAnimationFrame(b),k.disconnect(),window.removeEventListener("resize",v),R()}},[i,s,u])}function be({gameCubeSize:i,screenHeight:m,screenWidth:l}){const s=o.useRef(null),u=o.useRef(null),[d,I]=o.useState(null);ye(s,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(pe(),()=>{document.body.style.overflow=""}),[]);const[S,R]=o.useState(null),[b,v]=o.useState([]),[k,a]=o.useState(4),[g,C]=o.useState(!1),[w,h]=o.useState(1),[x,B]=o.useState(null),[y,H]=o.useState("ready"),[U,V]=o.useState(3),[W,F]=o.useState(10),[$,Z]=o.useState(20),[ne,G]=o.useState(0),[E,N]=o.useState(!1),[L,_]=o.useState(""),[T,O]=o.useState(!1),[D,K]=o.useState(!1),[J,A]=o.useState(null),[se,q]=o.useState([]),[oe,Q]=o.useState([]),[j,we]=o.useState(!1);o.useLayoutEffect(()=>{const t=u.current;if(!t||typeof window>"u")return;let r=null;try{r=new ResizeObserver(f=>{for(const c of f){const p=c.contentRect;I(Math.round(Math.min(p.width,p.height)))}}),r.observe(t),I(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{I(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>r?.disconnect()},[j]);const X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!S)return;const t=X(P[S]);v(t),C(!0),N(!1),h(1),G(0),q([]),Q([]),te(t,[],!0)},te=(t=b,r=oe,f=!1)=>{const c=X(t.length?t:P[S]);let p=Math.floor(Math.random()*c.length),M=c[p].name,z=0;for(;r.includes(M)&&z<20;)p=Math.floor(Math.random()*c.length),M=c[p].name,z++;v(c),B(p),Q([...r,M]),O(!1),_(""),Z(20),A(null),f?(H("ready"),V(3),F(10)):(H("memorize"),F(10))};o.useEffect(()=>{if(!(!g||E||T)){if(y==="ready")if(U<=0)H("memorize");else{const t=setTimeout(()=>V(r=>r-1),1e3);return()=>clearTimeout(t)}if(y==="memorize")if(W<=0)H("guess");else{const t=setTimeout(()=>F(r=>r-1),1e3);return()=>clearTimeout(t)}if(y==="guess"){if($<=0){O(!0),A("wrong");const r=b[x].name;q(f=>[...f,{round:w,answer:L,correct:r,result:"wrong"}]);return}const t=setTimeout(()=>Z(r=>r-1),1e3);return()=>clearTimeout(t)}}},[y,U,W,$,g,E,T,b,x,w,L]);const ie=()=>{if(x===null||D)return;const t=b[x].name,r=L.toLowerCase().trim();let f="wrong";r===t?(G(c=>c+1),A("correct"),f="correct"):xe(r,t)===1?(G(c=>c+.5),A("almost"),f="almost"):(A("wrong"),f="wrong"),q(c=>[...c,{round:w,answer:r,correct:t,result:f}]),K(!0),setTimeout(()=>{K(!1),O(!0)},600)},re=()=>w<k?(h(t=>t+1),te()):N(!0),le=()=>{C(!1),N(!1),R(null)},ae=o.useMemo(()=>e.jsx("div",{style:{...n.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:s,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",zIndex:1,pointerEvents:"auto"},children:e.jsx("div",{ref:u,style:{width:j?"100%":`${Math.min(i??1e3,l??1e3,m??1e3)}px`,height:j?"100%":`${Math.min(i??1e3,l??1e3,m??1e3)}px`,maxWidth:"calc(100vw - 24px)",maxHeight:"calc(100vh - 20px)",display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:j?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:j?"none":"0 0 40px rgba(0,0,0,0.08)",position:"relative"},children:e.jsx("div",{style:{transform:"none",transformOrigin:"50% 50%",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!j&&ae,!S&&!g&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:n.gmButton,onClick:()=>R(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:n.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...n.gmButton,...k===t?n.gmButtonActive:{}},onClick:()=>a(t),children:t},t))})]})]}),S&&!g&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",S]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",k]}),e.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),E&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",ne," / ",k]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:n.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:se.map((t,r)=>e.jsxs("tr",{children:[e.jsx("td",{style:n.gmTableCell,children:t.round}),e.jsx("td",{style:n.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:n.gmTableCell,children:t.correct}),e.jsx("td",{style:n.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},r))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:ee,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:le,children:"⬅️ Choose theme"})]})]}),g&&!E&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[y==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),y==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",W,")"]}),y==="guess"&&!T&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",$,"s"]})]}),y!=="ready"&&(()=>{const t=j?12:20,r=32,f=Math.min(i??1e3,d??1e3,m??1e3,l??1e3),c=j?2:3,p=Math.max(90,Math.floor((f-r-t*(c-1))/c));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${c}, ${p}px)`,gridAutoRows:`${p}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:b.map((M,z)=>{const de=x===z&&y==="guess"&&!T;return e.jsx("div",{style:{...n.gmCard,width:`${p}px`,height:`${p}px`,padding:j?8:10,boxSizing:"border-box",...J==="correct"&&x===z?n.gmCorrect:{},...J==="wrong"&&x===z?n.gmWrong:{}},children:!de&&e.jsx("img",{src:M.src,alt:M.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},z)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[y==="guess"&&!T&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:t=>_(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:ie,disabled:D,children:D?"...":"Check"})]}),T&&e.jsx("button",{type:"button",style:n.gmButton,onClick:re,children:"Next round"})]})]})]})})})})}exports.Game=be;exports.themes=P;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as t, jsxs as s, Fragment as he } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as U, useState as l, useEffect as oe, useLayoutEffect as re, useMemo as pe } from "react";
|
|
3
|
-
const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i,
|
|
4
|
-
src: `${fe}${
|
|
3
|
+
const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, g) => i.map(([a, o]) => ({
|
|
4
|
+
src: `${fe}${g}/${o.replace(/\s/g, "%20")}.png`,
|
|
5
5
|
name: o
|
|
6
6
|
})), ye = [
|
|
7
7
|
["apple", "apple"],
|
|
@@ -29,7 +29,7 @@ const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, p) => i
|
|
|
29
29
|
["strawberry", "strawberry"],
|
|
30
30
|
["tomato", "tomato"],
|
|
31
31
|
["watermelon", "watermelon"]
|
|
32
|
-
],
|
|
32
|
+
], be = [
|
|
33
33
|
["bear", "bear"],
|
|
34
34
|
["cat", "cat"],
|
|
35
35
|
["crocodile", "crocodile"],
|
|
@@ -49,7 +49,7 @@ const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, p) => i
|
|
|
49
49
|
["tortoise", "tortoise"],
|
|
50
50
|
["wolf", "wolf"],
|
|
51
51
|
["zebra", "zebra"]
|
|
52
|
-
],
|
|
52
|
+
], xe = [
|
|
53
53
|
["ball", "ball"],
|
|
54
54
|
["balloon", "balloon"],
|
|
55
55
|
["blocks", "blocks"],
|
|
@@ -71,8 +71,8 @@ const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, p) => i
|
|
|
71
71
|
["crayons", "crayons"]
|
|
72
72
|
], ie = {
|
|
73
73
|
food: P(ye, "food"),
|
|
74
|
-
animals: P(
|
|
75
|
-
toys: P(
|
|
74
|
+
animals: P(be, "animals"),
|
|
75
|
+
toys: P(xe, "toys")
|
|
76
76
|
}, we = `
|
|
77
77
|
@keyframes spin {
|
|
78
78
|
from { transform: rotate(0deg); }
|
|
@@ -244,31 +244,31 @@ const ve = {
|
|
|
244
244
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
245
245
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
246
246
|
`, document.head.appendChild(i);
|
|
247
|
-
}, Ce = (i,
|
|
248
|
-
const
|
|
249
|
-
for (let o = 0; o <= i.length; o++)
|
|
250
|
-
for (let o = 0; o <=
|
|
247
|
+
}, Ce = (i, g) => {
|
|
248
|
+
const a = Array.from({ length: i.length + 1 }, () => Array(g.length + 1).fill(0));
|
|
249
|
+
for (let o = 0; o <= i.length; o++) a[o][0] = o;
|
|
250
|
+
for (let o = 0; o <= g.length; o++) a[0][o] = o;
|
|
251
251
|
for (let o = 1; o <= i.length; o++)
|
|
252
|
-
for (let
|
|
253
|
-
|
|
254
|
-
return
|
|
252
|
+
for (let u = 1; u <= g.length; u++)
|
|
253
|
+
a[o][u] = i[o - 1] === g[u - 1] ? a[o - 1][u - 1] : Math.min(a[o - 1][u - 1], a[o][u - 1], a[o - 1][u]) + 1;
|
|
254
|
+
return a[i.length][g.length];
|
|
255
255
|
};
|
|
256
|
-
function ze(i,
|
|
257
|
-
const
|
|
256
|
+
function ze(i, g = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
257
|
+
const a = U(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
|
|
258
258
|
re(() => {
|
|
259
259
|
if (typeof window > "u" || !i || !i.current) return;
|
|
260
|
-
const c = i.current,
|
|
260
|
+
const c = i.current, A = () => {
|
|
261
261
|
try {
|
|
262
|
-
const
|
|
262
|
+
const d = document.body, h = getComputedStyle(d), T = parseFloat(d.style && d.style.zoom || "");
|
|
263
263
|
if (T && !isNaN(T) && T > 0) return T;
|
|
264
|
-
const v = parseFloat(
|
|
264
|
+
const v = parseFloat(h.zoom || "");
|
|
265
265
|
if (v && !isNaN(v) && v > 0) return v;
|
|
266
|
-
const
|
|
267
|
-
|
|
268
|
-
const
|
|
269
|
-
if (document.documentElement.removeChild(
|
|
270
|
-
const
|
|
271
|
-
if (!isNaN(
|
|
266
|
+
const p = document.createElement("div");
|
|
267
|
+
p.style.position = "absolute", p.style.left = "0", p.style.top = "0", p.style.width = "100px", p.style.height = "1px", p.style.visibility = "hidden", p.style.pointerEvents = "none", document.documentElement.appendChild(p);
|
|
268
|
+
const b = p.getBoundingClientRect();
|
|
269
|
+
if (document.documentElement.removeChild(p), b && b.width > 0) {
|
|
270
|
+
const H = b.width / 100;
|
|
271
|
+
if (!isNaN(H) && H > 0) return H;
|
|
272
272
|
}
|
|
273
273
|
} catch {
|
|
274
274
|
}
|
|
@@ -278,31 +278,31 @@ function ze(i, p = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
278
278
|
M();
|
|
279
279
|
return;
|
|
280
280
|
}
|
|
281
|
-
const
|
|
282
|
-
if (!
|
|
281
|
+
const d = A();
|
|
282
|
+
if (!d || d === 1) {
|
|
283
283
|
M();
|
|
284
284
|
return;
|
|
285
285
|
}
|
|
286
|
-
|
|
286
|
+
a.current || (a.current = {
|
|
287
287
|
transform: c.style.transform || null,
|
|
288
288
|
transformOrigin: c.style.transformOrigin || null,
|
|
289
289
|
width: c.style.width || null,
|
|
290
290
|
height: c.style.height || null,
|
|
291
291
|
willChange: c.style.willChange || null
|
|
292
292
|
});
|
|
293
|
-
const
|
|
294
|
-
|
|
293
|
+
const h = 1 / d;
|
|
294
|
+
u && (c.style.width = `${d * 100}%`, c.style.height = `${d * 100}%`), c.style.transformOrigin = "50% 50%", c.style.transform = `scale(${h})`, c.style.willChange = "transform";
|
|
295
295
|
}, M = () => {
|
|
296
|
-
if (!
|
|
297
|
-
const
|
|
298
|
-
c.style.transform =
|
|
296
|
+
if (!a.current) return;
|
|
297
|
+
const d = a.current;
|
|
298
|
+
c.style.transform = d.transform ?? "", c.style.transformOrigin = d.transformOrigin ?? "", c.style.width = d.width ?? "", c.style.height = d.height ?? "", c.style.willChange = d.willChange ?? "", a.current = null;
|
|
299
299
|
};
|
|
300
300
|
let w = 0;
|
|
301
301
|
const z = () => {
|
|
302
302
|
cancelAnimationFrame(w), w = requestAnimationFrame(C);
|
|
303
|
-
}, S = new MutationObserver((
|
|
304
|
-
for (const
|
|
305
|
-
if (
|
|
303
|
+
}, S = new MutationObserver((d) => {
|
|
304
|
+
for (const h of d)
|
|
305
|
+
if (h.type === "attributes" && (h.attributeName === "style" || h.attributeName === "class")) {
|
|
306
306
|
z();
|
|
307
307
|
break;
|
|
308
308
|
}
|
|
@@ -310,63 +310,63 @@ function ze(i, p = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
310
310
|
return S.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", z), z(), () => {
|
|
311
311
|
cancelAnimationFrame(w), S.disconnect(), window.removeEventListener("resize", z), M();
|
|
312
312
|
};
|
|
313
|
-
}, [i, o,
|
|
313
|
+
}, [i, o, u]);
|
|
314
314
|
}
|
|
315
315
|
function Me({
|
|
316
316
|
gameCubeSize: i,
|
|
317
|
-
screenHeight:
|
|
318
|
-
screenWidth:
|
|
317
|
+
screenHeight: g,
|
|
318
|
+
screenWidth: a
|
|
319
319
|
}) {
|
|
320
|
-
const o = U(null),
|
|
320
|
+
const o = U(null), u = U(null), [c, A] = l(null);
|
|
321
321
|
ze(o, { minDesktopWidth: 1200, forceResize: !1 }), oe(() => (ke(), () => {
|
|
322
322
|
document.body.style.overflow = "";
|
|
323
323
|
}), []);
|
|
324
|
-
const [C, M] = l(null), [w, z] = l([]), [S,
|
|
324
|
+
const [C, M] = l(null), [w, z] = l([]), [S, d] = l(4), [h, T] = l(!1), [v, p] = l(1), [b, H] = l(null), [x, W] = l("ready"), [V, Z] = l(3), [F, $] = l(10), [G, _] = l(20), [se, N] = l(0), [j, O] = l(!1), [E, K] = l(""), [I, D] = l(!1), [q, J] = l(!1), [Q, L] = l(null), [le, Y] = l([]), [ae, X] = l([]), [k, Se] = l(!1);
|
|
325
325
|
re(() => {
|
|
326
|
-
const e =
|
|
326
|
+
const e = u.current;
|
|
327
327
|
if (!e || typeof window > "u") return;
|
|
328
328
|
let r = null;
|
|
329
329
|
try {
|
|
330
330
|
r = new ResizeObserver((f) => {
|
|
331
331
|
for (const m of f) {
|
|
332
332
|
const y = m.contentRect;
|
|
333
|
-
|
|
333
|
+
A(Math.round(Math.min(y.width, y.height)));
|
|
334
334
|
}
|
|
335
|
-
}), r.observe(e),
|
|
335
|
+
}), r.observe(e), A(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
336
336
|
} catch {
|
|
337
|
-
|
|
337
|
+
A(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
338
338
|
}
|
|
339
339
|
return () => r?.disconnect();
|
|
340
340
|
}, [k]);
|
|
341
341
|
const ee = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), te = () => {
|
|
342
342
|
if (!C) return;
|
|
343
343
|
const e = ee(ie[C]);
|
|
344
|
-
z(e), T(!0), O(!1),
|
|
344
|
+
z(e), T(!0), O(!1), p(1), N(0), Y([]), X([]), ne(e, [], !0);
|
|
345
345
|
}, ne = (e = w, r = ae, f = !1) => {
|
|
346
346
|
const m = ee(e.length ? e : ie[C]);
|
|
347
|
-
let y = Math.floor(Math.random() * m.length),
|
|
348
|
-
for (; r.includes(
|
|
349
|
-
y = Math.floor(Math.random() * m.length),
|
|
350
|
-
z(m),
|
|
347
|
+
let y = Math.floor(Math.random() * m.length), B = m[y].name, R = 0;
|
|
348
|
+
for (; r.includes(B) && R < 20; )
|
|
349
|
+
y = Math.floor(Math.random() * m.length), B = m[y].name, R++;
|
|
350
|
+
z(m), H(y), X([...r, B]), D(!1), K(""), _(20), L(null), f ? (W("ready"), Z(3), $(10)) : (W("memorize"), $(10));
|
|
351
351
|
};
|
|
352
352
|
oe(() => {
|
|
353
|
-
if (!(!
|
|
354
|
-
if (
|
|
355
|
-
if (V <= 0)
|
|
353
|
+
if (!(!h || j || I)) {
|
|
354
|
+
if (x === "ready")
|
|
355
|
+
if (V <= 0) W("memorize");
|
|
356
356
|
else {
|
|
357
357
|
const e = setTimeout(() => Z((r) => r - 1), 1e3);
|
|
358
358
|
return () => clearTimeout(e);
|
|
359
359
|
}
|
|
360
|
-
if (
|
|
361
|
-
if (F <= 0)
|
|
360
|
+
if (x === "memorize")
|
|
361
|
+
if (F <= 0) W("guess");
|
|
362
362
|
else {
|
|
363
363
|
const e = setTimeout(() => $((r) => r - 1), 1e3);
|
|
364
364
|
return () => clearTimeout(e);
|
|
365
365
|
}
|
|
366
|
-
if (
|
|
366
|
+
if (x === "guess") {
|
|
367
367
|
if (G <= 0) {
|
|
368
|
-
D(!0),
|
|
369
|
-
const r = w[
|
|
368
|
+
D(!0), L("wrong");
|
|
369
|
+
const r = w[b].name;
|
|
370
370
|
Y((f) => [...f, { round: v, answer: E, correct: r, result: "wrong" }]);
|
|
371
371
|
return;
|
|
372
372
|
}
|
|
@@ -374,20 +374,34 @@ function Me({
|
|
|
374
374
|
return () => clearTimeout(e);
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
|
-
}, [
|
|
377
|
+
}, [x, V, F, G, h, j, I, w, b, v, E]);
|
|
378
378
|
const de = () => {
|
|
379
|
-
if (
|
|
380
|
-
const e = w[
|
|
379
|
+
if (b === null || q) return;
|
|
380
|
+
const e = w[b].name, r = E.toLowerCase().trim();
|
|
381
381
|
let f = "wrong";
|
|
382
|
-
r === e ? (N((m) => m + 1),
|
|
382
|
+
r === e ? (N((m) => m + 1), L("correct"), f = "correct") : Ce(r, e) === 1 ? (N((m) => m + 0.5), L("almost"), f = "almost") : (L("wrong"), f = "wrong"), Y((m) => [...m, { round: v, answer: r, correct: e, result: f }]), J(!0), setTimeout(() => {
|
|
383
383
|
J(!1), D(!0);
|
|
384
384
|
}, 600);
|
|
385
|
-
}, ce = () => v < S ? (
|
|
385
|
+
}, ce = () => v < S ? (p((e) => e + 1), ne()) : O(!0), me = () => {
|
|
386
386
|
T(!1), O(!1), M(null);
|
|
387
387
|
}, ge = pe(
|
|
388
388
|
() => /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
|
|
389
|
-
/* @__PURE__ */ t(
|
|
390
|
-
|
|
389
|
+
/* @__PURE__ */ t(
|
|
390
|
+
"source",
|
|
391
|
+
{
|
|
392
|
+
srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
|
|
393
|
+
type: "image/svg+xml"
|
|
394
|
+
}
|
|
395
|
+
),
|
|
396
|
+
/* @__PURE__ */ t(
|
|
397
|
+
"img",
|
|
398
|
+
{
|
|
399
|
+
src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
|
|
400
|
+
alt: "SPEAKID Logo",
|
|
401
|
+
style: n.gmLogoImg,
|
|
402
|
+
loading: "lazy"
|
|
403
|
+
}
|
|
404
|
+
)
|
|
391
405
|
] }) }),
|
|
392
406
|
[]
|
|
393
407
|
);
|
|
@@ -410,10 +424,10 @@ function Me({
|
|
|
410
424
|
children: /* @__PURE__ */ t(
|
|
411
425
|
"div",
|
|
412
426
|
{
|
|
413
|
-
ref:
|
|
427
|
+
ref: u,
|
|
414
428
|
style: {
|
|
415
|
-
width:
|
|
416
|
-
height:
|
|
429
|
+
width: k ? "100%" : `${Math.min(i ?? 1e3, a ?? 1e3, g ?? 1e3)}px`,
|
|
430
|
+
height: k ? "100%" : `${Math.min(i ?? 1e3, a ?? 1e3, g ?? 1e3)}px`,
|
|
417
431
|
maxWidth: "calc(100vw - 24px)",
|
|
418
432
|
maxHeight: "calc(100vh - 20px)",
|
|
419
433
|
display: "flex",
|
|
@@ -439,10 +453,18 @@ function Me({
|
|
|
439
453
|
},
|
|
440
454
|
children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
441
455
|
!k && ge,
|
|
442
|
-
!C && !
|
|
456
|
+
!C && !h && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
|
|
443
457
|
/* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
444
458
|
/* @__PURE__ */ t("p", { style: n.gmBodyM, children: "Select a theme:" }),
|
|
445
|
-
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t(
|
|
459
|
+
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t(
|
|
460
|
+
"button",
|
|
461
|
+
{
|
|
462
|
+
style: n.gmButton,
|
|
463
|
+
onClick: () => M(e),
|
|
464
|
+
children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys"
|
|
465
|
+
},
|
|
466
|
+
e
|
|
467
|
+
)) }),
|
|
446
468
|
/* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
|
|
447
469
|
/* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
|
|
448
470
|
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
|
|
@@ -452,14 +474,14 @@ function Me({
|
|
|
452
474
|
...n.gmButton,
|
|
453
475
|
...S === e ? n.gmButtonActive : {}
|
|
454
476
|
},
|
|
455
|
-
onClick: () =>
|
|
477
|
+
onClick: () => d(e),
|
|
456
478
|
children: e
|
|
457
479
|
},
|
|
458
480
|
e
|
|
459
481
|
)) })
|
|
460
482
|
] })
|
|
461
483
|
] }),
|
|
462
|
-
C && !
|
|
484
|
+
C && !h && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
|
|
463
485
|
/* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
|
|
464
486
|
"Theme selected: ",
|
|
465
487
|
C
|
|
@@ -498,7 +520,7 @@ function Me({
|
|
|
498
520
|
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: me, children: "⬅️ Choose theme" })
|
|
499
521
|
] })
|
|
500
522
|
] }),
|
|
501
|
-
|
|
523
|
+
h && !j && /* @__PURE__ */ s("div", { style: n.gmGameLayout, children: [
|
|
502
524
|
/* @__PURE__ */ s(
|
|
503
525
|
"div",
|
|
504
526
|
{
|
|
@@ -510,16 +532,22 @@ function Me({
|
|
|
510
532
|
alignItems: "center"
|
|
511
533
|
},
|
|
512
534
|
children: [
|
|
513
|
-
|
|
514
|
-
/* @__PURE__ */ t(
|
|
535
|
+
x === "ready" && /* @__PURE__ */ s(he, { children: [
|
|
536
|
+
/* @__PURE__ */ t(
|
|
537
|
+
"h1",
|
|
538
|
+
{
|
|
539
|
+
style: { ...n.gmHeadline1, color: "#ec4c44" },
|
|
540
|
+
children: "GET READY"
|
|
541
|
+
}
|
|
542
|
+
),
|
|
515
543
|
/* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
|
|
516
544
|
] }),
|
|
517
|
-
|
|
545
|
+
x === "memorize" && /* @__PURE__ */ s("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
|
|
518
546
|
"MEMORIZE (",
|
|
519
547
|
F,
|
|
520
548
|
")"
|
|
521
549
|
] }),
|
|
522
|
-
|
|
550
|
+
x === "guess" && !I && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
|
|
523
551
|
"⏳ Time left: ",
|
|
524
552
|
G,
|
|
525
553
|
"s"
|
|
@@ -527,10 +555,17 @@ function Me({
|
|
|
527
555
|
]
|
|
528
556
|
}
|
|
529
557
|
),
|
|
530
|
-
|
|
531
|
-
const e = k ? 12 : 20, r = 32, f = Math.min(
|
|
558
|
+
x !== "ready" && (() => {
|
|
559
|
+
const e = k ? 12 : 20, r = 32, f = Math.min(
|
|
560
|
+
i ?? 1e3,
|
|
561
|
+
c ?? 1e3,
|
|
562
|
+
g ?? 1e3,
|
|
563
|
+
a ?? 1e3
|
|
564
|
+
), m = k ? 2 : 3, y = Math.max(
|
|
532
565
|
90,
|
|
533
|
-
Math.floor(
|
|
566
|
+
Math.floor(
|
|
567
|
+
(f - r - e * (m - 1)) / m
|
|
568
|
+
)
|
|
534
569
|
);
|
|
535
570
|
return /* @__PURE__ */ t(
|
|
536
571
|
"div",
|
|
@@ -545,8 +580,8 @@ function Me({
|
|
|
545
580
|
padding: 8,
|
|
546
581
|
boxSizing: "border-box"
|
|
547
582
|
},
|
|
548
|
-
children: w.map((
|
|
549
|
-
const ue =
|
|
583
|
+
children: w.map((B, R) => {
|
|
584
|
+
const ue = b === R && x === "guess" && !I;
|
|
550
585
|
return /* @__PURE__ */ t(
|
|
551
586
|
"div",
|
|
552
587
|
{
|
|
@@ -556,15 +591,20 @@ function Me({
|
|
|
556
591
|
height: `${y}px`,
|
|
557
592
|
padding: k ? 8 : 10,
|
|
558
593
|
boxSizing: "border-box",
|
|
559
|
-
...Q === "correct" &&
|
|
560
|
-
...Q === "wrong" &&
|
|
594
|
+
...Q === "correct" && b === R ? n.gmCorrect : {},
|
|
595
|
+
...Q === "wrong" && b === R ? n.gmWrong : {}
|
|
561
596
|
},
|
|
562
597
|
children: !ue && /* @__PURE__ */ t(
|
|
563
598
|
"img",
|
|
564
599
|
{
|
|
565
|
-
src:
|
|
566
|
-
alt:
|
|
567
|
-
style: {
|
|
600
|
+
src: B.src,
|
|
601
|
+
alt: B.name,
|
|
602
|
+
style: {
|
|
603
|
+
width: "100%",
|
|
604
|
+
height: "100%",
|
|
605
|
+
objectFit: "cover",
|
|
606
|
+
display: "block"
|
|
607
|
+
}
|
|
568
608
|
}
|
|
569
609
|
)
|
|
570
610
|
},
|
|
@@ -575,7 +615,7 @@ function Me({
|
|
|
575
615
|
);
|
|
576
616
|
})(),
|
|
577
617
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
578
|
-
|
|
618
|
+
x === "guess" && !I && /* @__PURE__ */ s("div", { children: [
|
|
579
619
|
/* @__PURE__ */ t(
|
|
580
620
|
"input",
|
|
581
621
|
{
|
|
@@ -596,7 +636,15 @@ function Me({
|
|
|
596
636
|
}
|
|
597
637
|
)
|
|
598
638
|
] }),
|
|
599
|
-
I && /* @__PURE__ */ t(
|
|
639
|
+
I && /* @__PURE__ */ t(
|
|
640
|
+
"button",
|
|
641
|
+
{
|
|
642
|
+
type: "button",
|
|
643
|
+
style: n.gmButton,
|
|
644
|
+
onClick: ce,
|
|
645
|
+
children: "Next round"
|
|
646
|
+
}
|
|
647
|
+
)
|
|
600
648
|
] })
|
|
601
649
|
] })
|
|
602
650
|
] })
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -303,7 +303,8 @@ export default function Game({
|
|
|
303
303
|
}, 600);
|
|
304
304
|
};
|
|
305
305
|
|
|
306
|
-
const nextRound = () =>
|
|
306
|
+
const nextRound = () =>
|
|
307
|
+
currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
|
|
307
308
|
|
|
308
309
|
const exitGame = () => {
|
|
309
310
|
setStarted(false);
|
|
@@ -315,8 +316,16 @@ export default function Game({
|
|
|
315
316
|
() => (
|
|
316
317
|
<div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
|
|
317
318
|
<picture>
|
|
318
|
-
<source
|
|
319
|
-
|
|
319
|
+
<source
|
|
320
|
+
srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
|
|
321
|
+
type="image/svg+xml"
|
|
322
|
+
/>
|
|
323
|
+
<img
|
|
324
|
+
src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
|
|
325
|
+
alt="SPEAKID Logo"
|
|
326
|
+
style={styles.gmLogoImg}
|
|
327
|
+
loading="lazy"
|
|
328
|
+
/>
|
|
320
329
|
</picture>
|
|
321
330
|
</div>
|
|
322
331
|
),
|
|
@@ -342,8 +351,12 @@ export default function Game({
|
|
|
342
351
|
<div
|
|
343
352
|
ref={squareRef}
|
|
344
353
|
style={{
|
|
345
|
-
width:
|
|
346
|
-
|
|
354
|
+
width: isMobile
|
|
355
|
+
? "100%"
|
|
356
|
+
: `${Math.min(gameCubeSize ?? 1000, screenWidth ?? 1000, screenHeight ?? 1000)}px`,
|
|
357
|
+
height: isMobile
|
|
358
|
+
? "100%"
|
|
359
|
+
: `${Math.min(gameCubeSize ?? 1000, screenWidth ?? 1000, screenHeight ?? 1000)}px`,
|
|
347
360
|
maxWidth: "calc(100vw - 24px)",
|
|
348
361
|
maxHeight: "calc(100vh - 20px)",
|
|
349
362
|
display: "flex",
|
|
@@ -369,7 +382,6 @@ export default function Game({
|
|
|
369
382
|
>
|
|
370
383
|
<div id="whats-missing-root">
|
|
371
384
|
{!isMobile && MemoizedLogo}
|
|
372
|
-
|
|
373
385
|
{/* ====== ЛОББИ ====== */}
|
|
374
386
|
{!theme && !started && (
|
|
375
387
|
<div style={styles.gmCenterScreen}>
|
|
@@ -377,8 +389,16 @@ export default function Game({
|
|
|
377
389
|
<p style={styles.gmBodyM}>Select a theme:</p>
|
|
378
390
|
<div style={{ display: "flex", gap: 16 }}>
|
|
379
391
|
{["animals", "food", "toys"].map((t) => (
|
|
380
|
-
<button
|
|
381
|
-
{t
|
|
392
|
+
<button
|
|
393
|
+
key={t}
|
|
394
|
+
style={styles.gmButton}
|
|
395
|
+
onClick={() => setTheme(t as Theme)}
|
|
396
|
+
>
|
|
397
|
+
{t === "animals"
|
|
398
|
+
? "🐶 Animals"
|
|
399
|
+
: t === "food"
|
|
400
|
+
? "🍎 Food"
|
|
401
|
+
: "🧸 Toys"}
|
|
382
402
|
</button>
|
|
383
403
|
))}
|
|
384
404
|
</div>
|
|
@@ -401,7 +421,6 @@ export default function Game({
|
|
|
401
421
|
</div>
|
|
402
422
|
</div>
|
|
403
423
|
)}
|
|
404
|
-
|
|
405
424
|
{/* ====== ПОДТВЕРЖДЕНИЕ ====== */}
|
|
406
425
|
{theme && !started && (
|
|
407
426
|
<div style={styles.gmCenterScreen}>
|
|
@@ -412,7 +431,6 @@ export default function Game({
|
|
|
412
431
|
</button>
|
|
413
432
|
</div>
|
|
414
433
|
)}
|
|
415
|
-
|
|
416
434
|
{/* ====== РЕЗУЛЬТАТЫ ====== */}
|
|
417
435
|
{finished && (
|
|
418
436
|
<div style={styles.gmCenterScreen}>
|
|
@@ -420,7 +438,9 @@ export default function Game({
|
|
|
420
438
|
<h2 style={styles.gmHeadline3}>
|
|
421
439
|
Your score: {score} / {rounds}
|
|
422
440
|
</h2>
|
|
423
|
-
<p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>
|
|
441
|
+
<p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>
|
|
442
|
+
Yahoo! You did it! 🍬✨
|
|
443
|
+
</p>
|
|
424
444
|
<table style={styles.gmTable}>
|
|
425
445
|
<thead>
|
|
426
446
|
<tr>
|
|
@@ -434,7 +454,9 @@ export default function Game({
|
|
|
434
454
|
{resultsTable.map((r, i) => (
|
|
435
455
|
<tr key={i}>
|
|
436
456
|
<td style={styles.gmTableCell}>{r.round}</td>
|
|
437
|
-
<td style={styles.gmTableCell}>
|
|
457
|
+
<td style={styles.gmTableCell}>
|
|
458
|
+
{r.answer || "—"}
|
|
459
|
+
</td>
|
|
438
460
|
<td style={styles.gmTableCell}>{r.correct}</td>
|
|
439
461
|
<td style={styles.gmTableCell}>
|
|
440
462
|
{r.result === "correct"
|
|
@@ -457,7 +479,6 @@ export default function Game({
|
|
|
457
479
|
</div>
|
|
458
480
|
</div>
|
|
459
481
|
)}
|
|
460
|
-
|
|
461
482
|
{/* ====== ИГРОВОЙ ЭКРАН ====== */}
|
|
462
483
|
{started && !finished && (
|
|
463
484
|
<div style={styles.gmGameLayout}>
|
|
@@ -472,7 +493,11 @@ export default function Game({
|
|
|
472
493
|
>
|
|
473
494
|
{phase === "ready" && (
|
|
474
495
|
<>
|
|
475
|
-
<h1
|
|
496
|
+
<h1
|
|
497
|
+
style={{ ...styles.gmHeadline1, color: "#ec4c44" }}
|
|
498
|
+
>
|
|
499
|
+
GET READY
|
|
500
|
+
</h1>
|
|
476
501
|
<div style={styles.gmHourglass}>⏳</div>
|
|
477
502
|
</>
|
|
478
503
|
)}
|
|
@@ -482,21 +507,29 @@ export default function Game({
|
|
|
482
507
|
</p>
|
|
483
508
|
)}
|
|
484
509
|
{phase === "guess" && !answered && (
|
|
485
|
-
<p style={styles.gmBodyM}
|
|
510
|
+
<p style={styles.gmBodyM}>
|
|
511
|
+
⏳ Time left: {timeLeft}s
|
|
512
|
+
</p>
|
|
486
513
|
)}
|
|
487
514
|
</div>
|
|
488
|
-
|
|
489
515
|
{/* Сетка карточек */}
|
|
490
516
|
{phase !== "ready" && (() => {
|
|
491
517
|
const gap = isMobile ? 12 : 20;
|
|
492
518
|
const innerGutters = 32;
|
|
493
|
-
const effective = Math.min(
|
|
519
|
+
const effective = Math.min(
|
|
520
|
+
gameCubeSize ?? 1000,
|
|
521
|
+
squareSize ?? 1000,
|
|
522
|
+
screenHeight ?? 1000,
|
|
523
|
+
screenWidth ?? 1000
|
|
524
|
+
);
|
|
494
525
|
const columns = isMobile ? 2 : 3;
|
|
495
526
|
const cardSize = Math.max(
|
|
496
527
|
90,
|
|
497
|
-
Math.floor(
|
|
528
|
+
Math.floor(
|
|
529
|
+
(effective - innerGutters - gap * (columns - 1)) /
|
|
530
|
+
columns
|
|
531
|
+
)
|
|
498
532
|
);
|
|
499
|
-
|
|
500
533
|
return (
|
|
501
534
|
<div
|
|
502
535
|
style={{
|
|
@@ -511,7 +544,10 @@ export default function Game({
|
|
|
511
544
|
}}
|
|
512
545
|
>
|
|
513
546
|
{files.map((file, i) => {
|
|
514
|
-
const isHidden =
|
|
547
|
+
const isHidden =
|
|
548
|
+
hiddenIndex === i &&
|
|
549
|
+
phase === "guess" &&
|
|
550
|
+
!answered;
|
|
515
551
|
return (
|
|
516
552
|
<div
|
|
517
553
|
key={i}
|
|
@@ -521,15 +557,26 @@ export default function Game({
|
|
|
521
557
|
height: `${cardSize}px`,
|
|
522
558
|
padding: isMobile ? 8 : 10,
|
|
523
559
|
boxSizing: "border-box",
|
|
524
|
-
...(result === "correct" &&
|
|
525
|
-
|
|
560
|
+
...(result === "correct" &&
|
|
561
|
+
hiddenIndex === i
|
|
562
|
+
? styles.gmCorrect
|
|
563
|
+
: {}),
|
|
564
|
+
...(result === "wrong" &&
|
|
565
|
+
hiddenIndex === i
|
|
566
|
+
? styles.gmWrong
|
|
567
|
+
: {}),
|
|
526
568
|
}}
|
|
527
569
|
>
|
|
528
570
|
{!isHidden && (
|
|
529
571
|
<img
|
|
530
572
|
src={file.src}
|
|
531
573
|
alt={file.name}
|
|
532
|
-
style={{
|
|
574
|
+
style={{
|
|
575
|
+
width: "100%",
|
|
576
|
+
height: "100%",
|
|
577
|
+
objectFit: "cover",
|
|
578
|
+
display: "block",
|
|
579
|
+
}}
|
|
533
580
|
/>
|
|
534
581
|
)}
|
|
535
582
|
</div>
|
|
@@ -538,7 +585,6 @@ export default function Game({
|
|
|
538
585
|
</div>
|
|
539
586
|
);
|
|
540
587
|
})()}
|
|
541
|
-
|
|
542
588
|
{/* Инпут и кнопки */}
|
|
543
589
|
<div style={{ marginTop: 16, height: 80 }}>
|
|
544
590
|
{phase === "guess" && !answered && (
|
|
@@ -560,7 +606,11 @@ export default function Game({
|
|
|
560
606
|
</div>
|
|
561
607
|
)}
|
|
562
608
|
{answered && (
|
|
563
|
-
<button
|
|
609
|
+
<button
|
|
610
|
+
type="button"
|
|
611
|
+
style={styles.gmButton}
|
|
612
|
+
onClick={nextRound}
|
|
613
|
+
>
|
|
564
614
|
Next round
|
|
565
615
|
</button>
|
|
566
616
|
)}
|