kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

pull/14/head
Suvodip 2024-06-12 22:03:40 +05:30
parent 495079802c
commit 1be005a089
12 changed files with 381 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/animated-letter/small_d.mp4
View File

Binary file not shown.

54
public/assets/small-letter/ds.svg
View File

@ -196,39 +196,15 @@
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g9"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855382,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /><g
id="g8"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-16.146593,18.410029)"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@ -245,4 +221,28 @@
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g></g></svg>
transform="rotate(-178.67073)" /></g></g><g
id="g7"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

55
public/assets/small-letter/ds_l1.svg
View File

@ -196,39 +196,15 @@
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g9"><path
style="display:none;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855382,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /><g
id="g8"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-16.146593,18.410029)"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@ -245,4 +221,29 @@
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g></g></svg>
transform="rotate(-178.67073)" /></g></g><g
id="g7"
style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

56
public/assets/small-letter/ds_l2.svg
View File

@ -196,41 +196,16 @@
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g9"
style="display:inline"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855382,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /><g
id="g8"
style="display:none"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-16.146593,18.410029)"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@ -247,4 +222,29 @@
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g></g></svg>
transform="rotate(-178.67073)" /></g></g><g
id="g7"
style="display:inline"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

3
public/assets/svg/border.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="119" height="119" rx="7.5" fill="#E6FDFE" stroke="#60C6CB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 197 B

4
public/assets/svg/cancel.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.5" fill="white" stroke="#BB4D6A"/>
<path d="M26.3002 13.71C26.1134 13.5227 25.8597 13.4175 25.5952 13.4175C25.3307 13.4175 25.077 13.5227 24.8902 13.71L20.0002 18.59L15.1102 13.7C14.9234 13.5127 14.6697 13.4075 14.4052 13.4075C14.1407 13.4075 13.887 13.5127 13.7002 13.7C13.3102 14.09 13.3102 14.72 13.7002 15.11L18.5902 20L13.7002 24.89C13.3102 25.28 13.3102 25.91 13.7002 26.3C14.0902 26.69 14.7202 26.69 15.1102 26.3L20.0002 21.41L24.8902 26.3C25.2802 26.69 25.9102 26.69 26.3002 26.3C26.6902 25.91 26.6902 25.28 26.3002 24.89L21.4102 20L26.3002 15.11C26.6802 14.73 26.6802 14.09 26.3002 13.71Z" fill="#BB4D6A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

5
public/assets/svg/mute.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#49B76E"/>
<path d="M23.5669 27.4035C26.3366 26.1887 28.2778 23.5486 28.2778 20.3361C28.2778 17.1235 26.3366 14.4834 23.5669 13.2686V14.8391C25.4414 15.9275 26.7072 18.0171 26.7072 20.3361C26.7072 22.655 25.4414 24.7446 23.5669 25.833V27.4035Z" fill="white"/>
<path d="M23.5671 16.4096V24.2624C24.5291 23.3986 25.1377 21.7268 25.1377 20.336C25.1377 18.9453 24.5291 17.2734 23.5671 16.4096ZM14.1438 24.2624H16.2617L21.9966 28.0851V12.5869L16.2617 16.4096H14.1438C13.2776 16.4096 12.5732 17.114 12.5732 17.9802V22.6919C12.5732 23.558 13.2776 24.2624 14.1438 24.2624Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 721 B

4
public/assets/svg/reset.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.5" fill="#F59D17" stroke="#F59D17"/>
<path d="M19.9619 13.6426V10.8526C19.9619 10.4026 19.4219 10.1826 19.1119 10.5026L15.3119 14.2926C15.1119 14.4926 15.1119 14.8026 15.3119 15.0026L19.1019 18.7926C19.4219 19.1026 19.9619 18.8826 19.9619 18.4326V15.6426C23.6919 15.6426 26.6419 19.0626 25.8219 22.9326C25.3519 25.2026 23.5119 27.0326 21.2519 27.5026C17.6819 28.2526 14.5019 25.8026 14.0219 22.4926C13.9519 22.0126 13.5319 21.6426 13.0419 21.6426C12.4419 21.6426 11.9619 22.1726 12.0419 22.7726C12.6619 27.1626 16.8419 30.4126 21.5719 29.4926C24.6919 28.8826 27.2019 26.3726 27.8119 23.2526C28.8019 18.1226 24.9019 13.6426 19.9619 13.6426Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B

4
public/assets/svg/tick2.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#004AAD"/>
<path d="M16.7999 23.9049L13.2999 20.4049C13.1151 20.2177 12.863 20.1124 12.5999 20.1124C12.3369 20.1124 12.0848 20.2177 11.8999 20.4049C11.5099 20.7949 11.5099 21.4149 11.8999 21.8049L16.0899 25.9949C16.4799 26.3849 17.1099 26.3849 17.4999 25.9949L28.0999 15.4049C28.4899 15.0149 28.4899 14.3949 28.0999 14.0049C27.9151 13.8177 27.663 13.7124 27.3999 13.7124C27.1369 13.7124 26.8848 13.8177 26.6999 14.0049L16.7999 23.9049Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 592 B

141
src/pages/drag/index.astro
View File

@ -57,7 +57,23 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2,
};
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
@ -65,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
@ -72,11 +93,7 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
gameResult = [];
window.onload = function() {
// Get the current date and time
@ -248,13 +265,11 @@ import Layout from '../../layouts/Layout.astro';
}
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/border.svg');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@ -301,10 +316,7 @@ import Layout from '../../layouts/Layout.astro';
const baseFontSize = 30;
// Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5);
blockMatches = [
{
blockName: "blocks1",
@ -370,37 +382,41 @@ import Layout from '../../layouts/Layout.astro';
};
// window.load
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
})
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9-32, 170, "target1"),
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 510, "target3");
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
const blocks = [
{
x: displayW / 15 - 15,
@ -427,11 +443,20 @@ import Layout from '../../layouts/Layout.astro';
id: "block4",
},
];
// submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
});
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.5).setScale(1);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@ -498,12 +523,12 @@ import Layout from '../../layouts/Layout.astro';
}
});
});
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
@ -530,7 +555,23 @@ import Layout from '../../layouts/Layout.astro';
resultView.setVisible(true);
}
};
const footerBorder = this.add.graphics();
const footerX = 0; const footerY = window.innerHeight / 1.07;
const footerLineWidth = window.innerWidth;
footerBorder.lineStyle(1, 0x0348A8);
footerBorder.setAlpha(0.2);
footerBorder.beginPath();
footerBorder.moveTo(footerX, footerY);
footerBorder.lineTo(footerX + footerLineWidth, footerY);
footerBorder.strokePath();
let textSize;
if(isMobile){
textSize = 10;
}else{
textSize = 20;
}
this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
}
}
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {

25
src/pages/tick/v1.astro
View File

@ -5,16 +5,24 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
@ -71,7 +79,6 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div>
</form>
</div>

139
src/pages/tick/v12.astro Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body {
font-family: Quicksand;
}
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
accent-color: red; /* Change the accent color to red */
}
.greenBorder {
border: 4px solid #008000;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
.redBorder {
border: 4px solid red;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
#image1, #image2, #image3, #image4, #image5, #image6 {
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6 {
text-align: center;
font-weight: bold;
color: #17A1A7;
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy {
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
width: 150px; /* Adjust to the width of your images */
text-align: center;
}
.round-checkbox-label::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5); /* Red background with 0.5 opacity */
position: absolute;
top: 0;
left: 0;
border-radius: 30%;
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
input.round-checkbox-input:checked + .round-checkbox-label::before {
opacity: 1;
}
</style>
</head>
<body>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</div>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</div>
</label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</div>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</div>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</div>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</div>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
</div>
</form>
</body>
</html>