@mblinkov/whats-missing 20.0.6 β 20.0.7
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 +37 -20
- package/package.json +1 -1
- package/src/Game.styles.ts +1 -1
- package/src/Game.tsx +14 -4
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ae,document.head.appendChild(r)}const le={animation:"spin 1.4s linear infinite"},s={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",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:"100vh",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:"
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ae,document.head.appendChild(r)}const le={animation:"spin 1.4s linear infinite"},s={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",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:"100vh",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",...le}},de=()=>{const r=document.createElement("style");r.textContent=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * {
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
#whats-missing-root {
|
|
13
|
-
background-color: #fff;
|
|
14
13
|
color: #1f2937;
|
|
15
14
|
text-align: center;
|
|
15
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
#whats-missing-root img {
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
from { transform: rotate(0deg); }
|
|
27
27
|
to { transform: rotate(360deg); }
|
|
28
28
|
}
|
|
29
|
-
`,document.head.appendChild(r)},
|
|
29
|
+
`,document.head.appendChild(r)},ce=(r,c)=>{const a=Array.from({length:r.length+1},()=>Array(c.length+1).fill(0));for(let o=0;o<=r.length;o++)a[o][0]=o;for(let o=0;o<=c.length;o++)a[0][o]=o;for(let o=1;o<=r.length;o++)for(let l=1;l<=c.length;l++)a[o][l]=r[o-1]===c[l-1]?a[o-1][l-1]:Math.min(a[o-1][l-1],a[o][l-1],a[o-1][l])+1;return a[r.length][c.length]};function me(){n.useEffect(()=>{de()},[]);const[r,c]=n.useState(null),[a,o]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[f,W]=n.useState(1),[u,$]=n.useState(null),[m,y]=n.useState("ready"),[E,G]=n.useState(3),[k,C]=n.useState(7),[T,F]=n.useState(20),[K,v]=n.useState(0),[b,z]=n.useState(!1),[w,D]=n.useState(""),[p,R]=n.useState(!1),[I,q]=n.useState(!1),[P,x]=n.useState(null),[Z,A]=n.useState([]),[J,U]=n.useState([]),[j,Q]=n.useState(!1);n.useEffect(()=>{const t=()=>Q(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const Y=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!r)return;const t=Y(B[r]);o(t),L(!0),z(!1),W(1),v(0),A([]),U([]),O(t,[],!0)},O=(t=a,i=J,g=!1)=>{const d=Y(t.length?t:B[r]);let S=Math.floor(Math.random()*d.length),H=d[S].name,V=0;for(;i.includes(H)&&V<20;)S=Math.floor(Math.random()*d.length),H=d[S].name,V++;o(d),$(S),U([...i,H]),R(!1),D(""),F(20),x(null),g?(y("ready"),G(3),C(7)):(y("memorize"),C(7))};n.useEffect(()=>{if(!(!h||b||p)){if(m==="ready")if(E<=0)y("memorize");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(k<=0)y("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(T<=0){R(!0),x("wrong");const i=a[u].name;A(g=>[...g,{round:f,answer:w,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,E,k,T,h,b,p,a,u,f,w]);const X=()=>{if(u===null||I)return;const t=a[u].name,i=w.toLowerCase().trim();let g="wrong";i===t?(v(d=>d+1),x("correct"),g="correct"):ce(i,t)===1?(v(d=>d+.5),x("almost"),g="almost"):(x("wrong"),g="wrong"),A(d=>[...d,{round:f,answer:i,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),R(!0)},600)},ee=()=>f<l?(W(t=>t+1),O()):z(!0),te=()=>{L(!1),z(!1),c(null)},se=n.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,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:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsxs("div",{id:"whats-missing-root",children:[!j&&se,!r&&!h&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>c(t),children:t==="animals"?"πΆ Animals":t==="food"?"π Food":"π§Έ Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.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:{...s.gmButton,...l===t?s.gmButtonActive:{}},onClick:()=>_(t),children:t},t))})]})]}),r&&!h&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",r]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",l]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"βΆ Start game"})]}),b&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",K," / ",l]}),e.jsxs("table",{style:s.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:Z.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"β"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"β Correct":t.result==="almost"?"β Almost (0.5)":"β Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:N,children:"π Play again"}),e.jsx("button",{style:s.gmButton,onClick:te,children:"β¬
οΈ Choose theme"})]})]}),h&&!b&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[m==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"β³"})]}),m==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",k,")"]}),m==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["β³ Time left: ",T,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:j?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:j?"150px":"210px",gap:j?"12px":"20px",justifyItems:"center",...window.innerWidth>2e3?{gridTemplateColumns:"repeat(3, 260px)",gridAutoRows:"260px",gap:"28px"}:{},...window.innerWidth>2560?{gridTemplateColumns:"repeat(3, 300px)",gridAutoRows:"300px",gap:"32px"}:{}},children:a.map((t,i)=>{const g=u===i&&m==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...P==="correct"&&u===i?s.gmCorrect:{},...P==="wrong"&&u===i?s.gmWrong:{}},children:!g&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[m==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:w,onChange:t=>D(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:X,disabled:I,children:I?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ee,children:"Next round"})]})]})]})}exports.Game=me;exports.themes=B;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -226,7 +226,7 @@ const ge = {
|
|
|
226
226
|
width: "auto",
|
|
227
227
|
background: "transparent",
|
|
228
228
|
objectFit: "contain",
|
|
229
|
-
imageRendering: "
|
|
229
|
+
imageRendering: "auto",
|
|
230
230
|
transform: "translateZ(0)",
|
|
231
231
|
backfaceVisibility: "hidden",
|
|
232
232
|
WebkitFontSmoothing: "antialiased"
|
|
@@ -235,7 +235,7 @@ const ge = {
|
|
|
235
235
|
fontSize: "42px",
|
|
236
236
|
...ge
|
|
237
237
|
}
|
|
238
|
-
}, pe =
|
|
238
|
+
}, pe = () => {
|
|
239
239
|
const r = document.createElement("style");
|
|
240
240
|
r.textContent = `
|
|
241
241
|
#whats-missing-root, #whats-missing-root * {
|
|
@@ -244,9 +244,9 @@ const ge = {
|
|
|
244
244
|
}
|
|
245
245
|
|
|
246
246
|
#whats-missing-root {
|
|
247
|
-
background-color: #fff;
|
|
248
247
|
color: #1f2937;
|
|
249
248
|
text-align: center;
|
|
249
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
250
250
|
}
|
|
251
251
|
|
|
252
252
|
#whats-missing-root img {
|
|
@@ -270,11 +270,11 @@ const ge = {
|
|
|
270
270
|
a[n][d] = r[n - 1] === m[d - 1] ? a[n - 1][d - 1] : Math.min(a[n - 1][d - 1], a[n][d - 1], a[n - 1][d]) + 1;
|
|
271
271
|
return a[r.length][m.length];
|
|
272
272
|
};
|
|
273
|
-
function
|
|
273
|
+
function ye() {
|
|
274
274
|
L(() => {
|
|
275
|
-
|
|
275
|
+
pe();
|
|
276
276
|
}, []);
|
|
277
|
-
const [r, m] = l(null), [a, n] = l([]), [d, O] = l(4), [f, j] = l(!1), [x, E] = l(1), [
|
|
277
|
+
const [r, m] = l(null), [a, n] = l([]), [d, O] = l(4), [f, j] = l(!1), [x, E] = l(1), [u, Z] = l(null), [g, b] = l("ready"), [G, F] = l(3), [v, S] = l(7), [z, D] = l(20), [J, R] = l(0), [w, I] = l(!1), [k, U] = l(""), [h, A] = l(!1), [H, Y] = l(!1), [N, y] = l(null), [Q, M] = l([]), [X, P] = l([]), [C, ee] = l(!1);
|
|
278
278
|
L(() => {
|
|
279
279
|
const e = () => ee(window.innerWidth < 768);
|
|
280
280
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
@@ -291,7 +291,7 @@ function xe() {
|
|
|
291
291
|
n(c), Z(T), P([...i, B]), A(!1), U(""), D(20), y(null), p ? (b("ready"), F(3), S(7)) : (b("memorize"), S(7));
|
|
292
292
|
};
|
|
293
293
|
L(() => {
|
|
294
|
-
if (!(!f || w ||
|
|
294
|
+
if (!(!f || w || h)) {
|
|
295
295
|
if (g === "ready")
|
|
296
296
|
if (G <= 0)
|
|
297
297
|
b("memorize");
|
|
@@ -309,7 +309,7 @@ function xe() {
|
|
|
309
309
|
if (g === "guess") {
|
|
310
310
|
if (z <= 0) {
|
|
311
311
|
A(!0), y("wrong");
|
|
312
|
-
const i = a[
|
|
312
|
+
const i = a[u].name;
|
|
313
313
|
M((p) => [
|
|
314
314
|
...p,
|
|
315
315
|
{ round: x, answer: k, correct: i, result: "wrong" }
|
|
@@ -327,15 +327,15 @@ function xe() {
|
|
|
327
327
|
z,
|
|
328
328
|
f,
|
|
329
329
|
w,
|
|
330
|
-
u,
|
|
331
|
-
a,
|
|
332
330
|
h,
|
|
331
|
+
a,
|
|
332
|
+
u,
|
|
333
333
|
x,
|
|
334
334
|
k
|
|
335
335
|
]);
|
|
336
336
|
const te = () => {
|
|
337
|
-
if (
|
|
338
|
-
const e = a[
|
|
337
|
+
if (u === null || H) return;
|
|
338
|
+
const e = a[u].name, i = k.toLowerCase().trim();
|
|
339
339
|
let p = "wrong";
|
|
340
340
|
i === e ? (R((c) => c + 1), y("correct"), p = "correct") : ue(i, e) === 1 ? (R((c) => c + 0.5), y("almost"), p = "almost") : (y("wrong"), p = "wrong"), M((c) => [
|
|
341
341
|
...c,
|
|
@@ -346,7 +346,24 @@ function xe() {
|
|
|
346
346
|
}, oe = () => x < d ? (E((e) => e + 1), $()) : I(!0), ne = () => {
|
|
347
347
|
j(!1), I(!1), m(null);
|
|
348
348
|
}, re = se(
|
|
349
|
-
() => /* @__PURE__ */ o("div", { style: t.gmLogoFixed, children: /* @__PURE__ */
|
|
349
|
+
() => /* @__PURE__ */ o("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ s("picture", { children: [
|
|
350
|
+
/* @__PURE__ */ o(
|
|
351
|
+
"source",
|
|
352
|
+
{
|
|
353
|
+
srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
|
|
354
|
+
type: "image/svg+xml"
|
|
355
|
+
}
|
|
356
|
+
),
|
|
357
|
+
/* @__PURE__ */ o(
|
|
358
|
+
"img",
|
|
359
|
+
{
|
|
360
|
+
src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
|
|
361
|
+
alt: "SPEAKID Logo",
|
|
362
|
+
style: t.gmLogoImg,
|
|
363
|
+
loading: "lazy"
|
|
364
|
+
}
|
|
365
|
+
)
|
|
366
|
+
] }) }),
|
|
350
367
|
[]
|
|
351
368
|
);
|
|
352
369
|
return /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
@@ -430,7 +447,7 @@ function xe() {
|
|
|
430
447
|
v,
|
|
431
448
|
")"
|
|
432
449
|
] }),
|
|
433
|
-
g === "guess" && !
|
|
450
|
+
g === "guess" && !h && /* @__PURE__ */ s("p", { style: t.gmBodyM, children: [
|
|
434
451
|
"β³ Time left: ",
|
|
435
452
|
z,
|
|
436
453
|
"s"
|
|
@@ -459,14 +476,14 @@ function xe() {
|
|
|
459
476
|
} : {}
|
|
460
477
|
},
|
|
461
478
|
children: a.map((e, i) => {
|
|
462
|
-
const p =
|
|
479
|
+
const p = u === i && g === "guess" && !h;
|
|
463
480
|
return /* @__PURE__ */ o(
|
|
464
481
|
"div",
|
|
465
482
|
{
|
|
466
483
|
style: {
|
|
467
484
|
...t.gmCard,
|
|
468
|
-
...N === "correct" &&
|
|
469
|
-
...N === "wrong" &&
|
|
485
|
+
...N === "correct" && u === i ? t.gmCorrect : {},
|
|
486
|
+
...N === "wrong" && u === i ? t.gmWrong : {}
|
|
470
487
|
},
|
|
471
488
|
children: !p && /* @__PURE__ */ o(
|
|
472
489
|
"img",
|
|
@@ -487,7 +504,7 @@ function xe() {
|
|
|
487
504
|
}
|
|
488
505
|
),
|
|
489
506
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
490
|
-
g === "guess" && !
|
|
507
|
+
g === "guess" && !h && /* @__PURE__ */ s("div", { children: [
|
|
491
508
|
/* @__PURE__ */ o(
|
|
492
509
|
"input",
|
|
493
510
|
{
|
|
@@ -508,12 +525,12 @@ function xe() {
|
|
|
508
525
|
}
|
|
509
526
|
)
|
|
510
527
|
] }),
|
|
511
|
-
|
|
528
|
+
h && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: oe, children: "Next round" })
|
|
512
529
|
] })
|
|
513
530
|
] })
|
|
514
531
|
] });
|
|
515
532
|
}
|
|
516
533
|
export {
|
|
517
|
-
|
|
534
|
+
ye as Game,
|
|
518
535
|
K as themes
|
|
519
536
|
};
|
package/package.json
CHANGED
package/src/Game.styles.ts
CHANGED
|
@@ -192,7 +192,7 @@ export const styles: Record<string, CSSProperties> = {
|
|
|
192
192
|
width: "auto",
|
|
193
193
|
background: "transparent",
|
|
194
194
|
objectFit: "contain",
|
|
195
|
-
imageRendering: "
|
|
195
|
+
imageRendering: "auto",
|
|
196
196
|
transform: "translateZ(0)",
|
|
197
197
|
backfaceVisibility: "hidden",
|
|
198
198
|
WebkitFontSmoothing: "antialiased",
|
package/src/Game.tsx
CHANGED
|
@@ -3,8 +3,6 @@ import { themes } from "./themes";
|
|
|
3
3
|
import { styles } from "./Game.styles";
|
|
4
4
|
import type { Theme } from "./themes";
|
|
5
5
|
|
|
6
|
-
const logo = window.origin + "/cloud/speakid/games/whatsmissing/logo.png";
|
|
7
|
-
|
|
8
6
|
type ImageItem = { src: string; name: string };
|
|
9
7
|
type RoundResult = {
|
|
10
8
|
round: number;
|
|
@@ -23,9 +21,9 @@ const globalReset = () => {
|
|
|
23
21
|
}
|
|
24
22
|
|
|
25
23
|
#whats-missing-root {
|
|
26
|
-
background-color: #fff;
|
|
27
24
|
color: #1f2937;
|
|
28
25
|
text-align: center;
|
|
26
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
29
27
|
}
|
|
30
28
|
|
|
31
29
|
#whats-missing-root img {
|
|
@@ -218,10 +216,22 @@ export default function Game() {
|
|
|
218
216
|
setTheme(null);
|
|
219
217
|
};
|
|
220
218
|
|
|
219
|
+
// β
Π»ΠΎΠ³ΠΎΡΠΈΠΏ Ρ fallback SVG β PNG
|
|
221
220
|
const MemoizedLogo = useMemo(
|
|
222
221
|
() => (
|
|
223
222
|
<div style={styles.gmLogoFixed}>
|
|
224
|
-
<
|
|
223
|
+
<picture>
|
|
224
|
+
<source
|
|
225
|
+
srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
|
|
226
|
+
type="image/svg+xml"
|
|
227
|
+
/>
|
|
228
|
+
<img
|
|
229
|
+
src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
|
|
230
|
+
alt="SPEAKID Logo"
|
|
231
|
+
style={styles.gmLogoImg}
|
|
232
|
+
loading="lazy"
|
|
233
|
+
/>
|
|
234
|
+
</picture>
|
|
225
235
|
</div>
|
|
226
236
|
),
|
|
227
237
|
[]
|