From 41ae75207b1639c2a05a4cb8915483571b2faec4 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Sat, 26 Oct 2024 18:57:45 +0530 Subject: [PATCH 01/12] newb --- public/saveGameAI.js | 19 +- src/pages/guided-tracing/0.astro | 295 ++++++++++++++++--------- src/pages/guided-tracing/1.astro | 355 ++++++++++++++++++------------- src/pages/guided-tracing/2.astro | 308 +++++++++++++-------------- 4 files changed, 560 insertions(+), 417 deletions(-) diff --git a/public/saveGameAI.js b/public/saveGameAI.js index da2a630..a3f0bec 100644 --- a/public/saveGameAI.js +++ b/public/saveGameAI.js @@ -50,11 +50,14 @@ function submitUserData(drawingZone) { submitButton.setVisible(false); - snapshotButton.setVisible(false); - customCursor.setVisible(false); + if(!gameType[0] === 'guided-tracing'){ + snapshotButton.setVisible(false); + customCursor.setVisible(false); + galleryButton.setVisible(false); + } muteIcon.setVisible(false); retryButton.setVisible(false); - galleryButton.setVisible(false); + const endTime = Date.now(); const timeDifference = endTime - startTime; const timeDifferenceInSeconds = timeDifference / 1000; @@ -64,11 +67,15 @@ function submitUserData(drawingZone) { // console.log('This is from main point', scoreTotal); drawingZone.renderer.snapshot((image) => { submitButton.setVisible(true); - snapshotButton.setVisible(true); - customCursor.setVisible(true); + if(!gameType[0] == "guided-tracing"){ + snapshotButton.setVisible(true); + customCursor.setVisible(true); + galleryButton.setVisible(true); + } + muteIcon.setVisible(true); retryButton.setVisible(true); - galleryButton.setVisible(true); + if(gameType[0] == 'drawing'){ // submitButton.setVisible(true); // snapshotButton.setVisible(true); diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index da99dc2..f5e2b0d 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -3,14 +3,75 @@ import Layout from "../../layouts/Layout.astro"; ---
-
+
+
+ +
+
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro index 1344a0c..7b54255 100644 --- a/src/pages/guided-tracing/1.astro +++ b/src/pages/guided-tracing/1.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + - +
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro index e64553f..eea568c 100644 --- a/src/pages/guided-tracing/2.astro +++ b/src/pages/guided-tracing/2.astro @@ -368,4 +368,41 @@ function update() { } - \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro index d2fc72d..5289fc2 100644 --- a/src/pages/guided-tracing/3.astro +++ b/src/pages/guided-tracing/3.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 38e9f7e..97eb9c9 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 63bf4e2..1e43d76 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro index 6720ca9..a06cc78 100644 --- a/src/pages/guided-tracing/6.astro +++ b/src/pages/guided-tracing/6.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro index 3135099..a5877a1 100644 --- a/src/pages/guided-tracing/7.astro +++ b/src/pages/guided-tracing/7.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro index 8ac5685..20dc093 100644 --- a/src/pages/guided-tracing/8.astro +++ b/src/pages/guided-tracing/8.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro index 2d63879..d300d38 100644 --- a/src/pages/guided-tracing/9.astro +++ b/src/pages/guided-tracing/9.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index b74fddb..4b50a3a 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file -- 2.34.1 From 195756b89220f5d60320c8d70ec5e45b12839c33 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Tue, 29 Oct 2024 18:45:48 +0530 Subject: [PATCH 03/12] CI --- src/pages/guided-tracing/0.astro | 14 +- src/pages/guided-tracing/4.astro | 9 - src/pages/guided-tracing/5.astro | 2 +- src/pages/guided-tracing/A.astro | 332 ++++++++++++++++------------- src/pages/guided-tracing/B.astro | 338 ++++++++++++++++-------------- src/pages/guided-tracing/C.astro | 329 ++++++++++++++++------------- src/pages/guided-tracing/D.astro | 346 +++++++++++++++++-------------- src/pages/guided-tracing/E.astro | 323 ++++++++++++++++------------- src/pages/guided-tracing/F.astro | 340 ++++++++++++++++-------------- src/pages/guided-tracing/G.astro | 336 +++++++++++++++++------------- src/pages/guided-tracing/H.astro | 340 ++++++++++++++++-------------- src/pages/guided-tracing/I.astro | 328 ++++++++++++++++------------- src/pages/guided-tracing/b.astro | 324 ++++++++++++++++------------- src/pages/guided-tracing/c.astro | 332 +++++++++++++++-------------- src/pages/guided-tracing/d.astro | 330 ++++++++++++++++------------- src/pages/guided-tracing/e.astro | 340 ++++++++++++++++-------------- src/pages/guided-tracing/f.astro | 334 +++++++++++++++-------------- src/pages/guided-tracing/g.astro | 332 +++++++++++++++-------------- src/pages/guided-tracing/h.astro | 332 +++++++++++++++-------------- src/pages/guided-tracing/i.astro | 339 ++++++++++++++++-------------- 20 files changed, 3124 insertions(+), 2576 deletions(-) diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index f5e2b0d..e21431f 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -116,7 +116,7 @@ import Layout from "../../layouts/Layout.astro"; var assetsList = {} var snapshotButton; let submitButton; - let demoButtonButton; + let demoButton; let shortUniqueID; let noticeWidth; let noticeHeight; @@ -158,12 +158,12 @@ import Layout from "../../layouts/Layout.astro"; noticeWidth = window.innerWidth * 0.5 - 100; noticeHeight = window.innerHeight * 0.38; }else if(isTab){ - // topLogoWidth = 4.5; - // muteIconWidth = 1.6; - // resetIconWidth = 1.43; - // tickIconWidth = 1.29; - // cancelIconWidth = 1.18; - // galleryIconWidth = 1.81; + topLogoWidth = 4.5; + muteIconWidth = 1.6; + resetIconWidth = 1.43; + tickIconWidth = 1.29; + cancelIconWidth = 1.18; + galleryIconWidth = 1.81; }else{ topLogoWidth = 6; muteIconWidth = 1.3; diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 97eb9c9..90d303b 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.astro @@ -201,14 +201,6 @@ import Layout from "../../layouts/Layout.astro"; this.load.svg('succesImage', '/assets/svg/tick.svg'); this.load.svg('hintImage', '/assets/svg/hint.svg'); this.load.svg('handPointer', '/assets/svg/hand.svg'); - this.load.image('backgroundImage', '/assets/bg6.png'); - this.load.image('cloud', '/assets/cloud.png'); - this.load.image('canvas', '/assets/canvas4.png'); - - - this.load.image('sun', '/assets/sun.png'); - this.load.image('bgMobile', '/assets/bgMobile.png'); - this.load.image('canvasStand', '/assets/stand2.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("muteIcon", '/assets/svg/mute.svg'); @@ -268,7 +260,6 @@ import Layout from "../../layouts/Layout.astro"; } }); - let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 4', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 4', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 1e43d76..79aba00 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.astro @@ -210,7 +210,7 @@ import Layout from "../../layouts/Layout.astro"; } function create() { - this.add.image(customWidth / topLogoWidth, 30, "topLogo"); + this.add.image(customWidth / topLogoWidth, 30, "topLogo"); muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index 079e0c7..fbb55a9 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -2,27 +2,90 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index 852f2b0..1e0bc37 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index 6fca3e8..3356859 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro index abf253c..0a28fe4 100644 --- a/src/pages/guided-tracing/D.astro +++ b/src/pages/guided-tracing/D.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro index 8c37969..6de9e27 100644 --- a/src/pages/guided-tracing/E.astro +++ b/src/pages/guided-tracing/E.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro index 31da6d9..f383e8a 100644 --- a/src/pages/guided-tracing/F.astro +++ b/src/pages/guided-tracing/F.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro index 1631fa6..fbc5137 100644 --- a/src/pages/guided-tracing/G.astro +++ b/src/pages/guided-tracing/G.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro index e65da05..eedef3d 100644 --- a/src/pages/guided-tracing/H.astro +++ b/src/pages/guided-tracing/H.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index a8f024c..1c16ce3 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index 23c2c88..c88e7eb 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 647147a..3e287fc 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index fcacc70..9c74f65 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index b4c3eb0..708b327 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro index a572811..bc09bc0 100644 --- a/src/pages/guided-tracing/f.astro +++ b/src/pages/guided-tracing/f.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro index 17beacd..1b2c4d3 100644 --- a/src/pages/guided-tracing/g.astro +++ b/src/pages/guided-tracing/g.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro index 574b945..e7e3a9f 100644 --- a/src/pages/guided-tracing/h.astro +++ b/src/pages/guided-tracing/h.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro index fe48e47..d4bee33 100644 --- a/src/pages/guided-tracing/i.astro +++ b/src/pages/guided-tracing/i.astro @@ -2,15 +2,77 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
- - +
+
+
+ +
+
+ + +
+ \ No newline at end of file + + \ No newline at end of file -- 2.34.1 From 3392dea28674ddb3e37aedfcc79c4677ced25a4b Mon Sep 17 00:00:00 2001 From: Suvodip Date: Wed, 30 Oct 2024 16:46:38 +0530 Subject: [PATCH 04/12] CS --- src/pages/guided-tracing/I.astro | 6 - src/pages/guided-tracing/J.astro | 320 ++++++++++++++++------------- src/pages/guided-tracing/K.astro | 320 ++++++++++++++++------------- src/pages/guided-tracing/L.astro | 334 +++++++++++++++++-------------- src/pages/guided-tracing/M.astro | 326 ++++++++++++++++-------------- src/pages/guided-tracing/N.astro | 319 ++++++++++++++++------------- src/pages/guided-tracing/O.astro | 321 ++++++++++++++++------------- src/pages/guided-tracing/P.astro | 315 ++++++++++++++++------------- src/pages/guided-tracing/Q.astro | 326 ++++++++++++++++-------------- src/pages/guided-tracing/R.astro | 302 ++++++++++++++++------------ src/pages/guided-tracing/S.astro | 322 +++++++++++++++-------------- src/pages/guided-tracing/j.astro | 327 ++++++++++++++++-------------- src/pages/guided-tracing/k.astro | 321 ++++++++++++++++------------- src/pages/guided-tracing/l.astro | 324 ++++++++++++++++-------------- src/pages/guided-tracing/m.astro | 329 ++++++++++++++++-------------- src/pages/guided-tracing/n.astro | 330 ++++++++++++++++-------------- src/pages/guided-tracing/o.astro | 325 ++++++++++++++++-------------- src/pages/guided-tracing/p.astro | 322 +++++++++++++++-------------- src/pages/guided-tracing/q.astro | 319 ++++++++++++++++------------- src/pages/guided-tracing/r.astro | 332 ++++++++++++++++-------------- src/pages/guided-tracing/s.astro | 330 ++++++++++++++++-------------- 21 files changed, 3571 insertions(+), 2899 deletions(-) diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index 1c16ce3..91a7a0a 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.astro @@ -198,12 +198,6 @@ import Layout from "../../layouts/Layout.astro"; this.load.svg('succesImage', '/assets/svg/tick.svg'); this.load.svg('hintImage', '/assets/svg/hint.svg'); this.load.svg('handPointer', '/assets/svg/hand.svg'); - this.load.image('backgroundImage', '/assets/bg6.png'); - this.load.image('cloud', '/assets/cloud.png'); - this.load.image('canvas', '/assets/canvas4.png'); - this.load.image('sun', '/assets/sun.png'); - this.load.image('bgMobile', '/assets/bgMobile.png'); - this.load.image('canvasStand', '/assets/stand2.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("muteIcon", '/assets/svg/mute.svg'); diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro index fa5ca8c..d2910bd 100644 --- a/src/pages/guided-tracing/J.astro +++ b/src/pages/guided-tracing/J.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro index 4492882..dc0fe1e 100644 --- a/src/pages/guided-tracing/K.astro +++ b/src/pages/guided-tracing/K.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro index 21b5c01..a239691 100644 --- a/src/pages/guided-tracing/L.astro +++ b/src/pages/guided-tracing/L.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro index 99dbcf7..ce22a92 100644 --- a/src/pages/guided-tracing/M.astro +++ b/src/pages/guided-tracing/M.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro index c31b600..ed43583 100644 --- a/src/pages/guided-tracing/N.astro +++ b/src/pages/guided-tracing/N.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro index c5cccbd..b46c0db 100644 --- a/src/pages/guided-tracing/O.astro +++ b/src/pages/guided-tracing/O.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + + \ No newline at end of file diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro index db21bb2..1054cd7 100644 --- a/src/pages/guided-tracing/P.astro +++ b/src/pages/guided-tracing/P.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro index 0354bea..d11da59 100644 --- a/src/pages/guided-tracing/Q.astro +++ b/src/pages/guided-tracing/Q.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + + \ No newline at end of file diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro index 183c946..f8fa6d9 100644 --- a/src/pages/guided-tracing/R.astro +++ b/src/pages/guided-tracing/R.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro index ae7bd55..6308dd0 100644 --- a/src/pages/guided-tracing/S.astro +++ b/src/pages/guided-tracing/S.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + + \ No newline at end of file diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro index be4f258..2364093 100644 --- a/src/pages/guided-tracing/j.astro +++ b/src/pages/guided-tracing/j.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro index d0a3aed..9114e5f 100644 --- a/src/pages/guided-tracing/k.astro +++ b/src/pages/guided-tracing/k.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro index 0b20285..4131d71 100644 --- a/src/pages/guided-tracing/l.astro +++ b/src/pages/guided-tracing/l.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro index f5b9b62..b8cf7a9 100644 --- a/src/pages/guided-tracing/m.astro +++ b/src/pages/guided-tracing/m.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro index 9a88d92..fdd8fdc 100644 --- a/src/pages/guided-tracing/n.astro +++ b/src/pages/guided-tracing/n.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro index 518fea4..904ef39 100644 --- a/src/pages/guided-tracing/o.astro +++ b/src/pages/guided-tracing/o.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro index 22b99e8..74ef9d9 100644 --- a/src/pages/guided-tracing/p.astro +++ b/src/pages/guided-tracing/p.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro index 5678643..5e52979 100644 --- a/src/pages/guided-tracing/q.astro +++ b/src/pages/guided-tracing/q.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + + \ No newline at end of file diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro index 2a1fdaf..7d07c85 100644 --- a/src/pages/guided-tracing/r.astro +++ b/src/pages/guided-tracing/r.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro index 0401418..7b37bac 100644 --- a/src/pages/guided-tracing/s.astro +++ b/src/pages/guided-tracing/s.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file -- 2.34.1 From eab9dd370f3f62ab2d6c713513c4d31154b22f95 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Tue, 5 Nov 2024 16:46:43 +0530 Subject: [PATCH 05/12] Change All Guided Tracing Desgine --- src/pages/guided-tracing/T.astro | 331 ++++++++++++++++-------------- src/pages/guided-tracing/U.astro | 329 ++++++++++++++++-------------- src/pages/guided-tracing/V.astro | 338 ++++++++++++++++-------------- src/pages/guided-tracing/W.astro | 340 +++++++++++++++++-------------- src/pages/guided-tracing/X.astro | 332 ++++++++++++++++-------------- src/pages/guided-tracing/Y.astro | 333 ++++++++++++++++-------------- src/pages/guided-tracing/Z.astro | 335 ++++++++++++++++-------------- src/pages/guided-tracing/t.astro | 338 ++++++++++++++++-------------- src/pages/guided-tracing/u.astro | 334 ++++++++++++++++-------------- src/pages/guided-tracing/v.astro | 332 ++++++++++++++++-------------- src/pages/guided-tracing/w.astro | 340 +++++++++++++++++-------------- src/pages/guided-tracing/x.astro | 337 ++++++++++++++++-------------- src/pages/guided-tracing/y.astro | 334 ++++++++++++++++-------------- src/pages/guided-tracing/z.astro | 330 ++++++++++++++++-------------- 14 files changed, 2553 insertions(+), 2130 deletions(-) diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro index af9c054..f8fa09b 100644 --- a/src/pages/guided-tracing/T.astro +++ b/src/pages/guided-tracing/T.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro index c044f0c..3794b40 100644 --- a/src/pages/guided-tracing/U.astro +++ b/src/pages/guided-tracing/U.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro index 3cb4e9c..62941f6 100644 --- a/src/pages/guided-tracing/V.astro +++ b/src/pages/guided-tracing/V.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro index c425d16..3d56ae8 100644 --- a/src/pages/guided-tracing/W.astro +++ b/src/pages/guided-tracing/W.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro index afdaf32..5683c98 100644 --- a/src/pages/guided-tracing/X.astro +++ b/src/pages/guided-tracing/X.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro index 49754ca..cce5b85 100644 --- a/src/pages/guided-tracing/Y.astro +++ b/src/pages/guided-tracing/Y.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro index ca071f0..0721246 100644 --- a/src/pages/guided-tracing/Z.astro +++ b/src/pages/guided-tracing/Z.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro index f37cd00..9d1b22b 100644 --- a/src/pages/guided-tracing/t.astro +++ b/src/pages/guided-tracing/t.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro index 5435c08..9cee3dd 100644 --- a/src/pages/guided-tracing/u.astro +++ b/src/pages/guided-tracing/u.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro index 5ba94ee..d239a9b 100644 --- a/src/pages/guided-tracing/v.astro +++ b/src/pages/guided-tracing/v.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro index eb0894c..8d31c02 100644 --- a/src/pages/guided-tracing/w.astro +++ b/src/pages/guided-tracing/w.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro index 145477b..9471a03 100644 --- a/src/pages/guided-tracing/x.astro +++ b/src/pages/guided-tracing/x.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro index c36d731..3e7f7ce 100644 --- a/src/pages/guided-tracing/y.astro +++ b/src/pages/guided-tracing/y.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + \ No newline at end of file + + \ No newline at end of file diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro index c1fa45c..1a7ea5c 100644 --- a/src/pages/guided-tracing/z.astro +++ b/src/pages/guided-tracing/z.astro @@ -2,15 +2,78 @@ import Layout from "../../layouts/Layout.astro"; --- -
-
-
- -
+
+
+
+ +
+
+ + +
- + + \ No newline at end of file -- 2.34.1 From ebd61445de0bc0d60b6b0ea6ea9199db7e2abb36 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Tue, 5 Nov 2024 18:22:34 +0530 Subject: [PATCH 06/12] fix color issue over the button --- src/pages/drawing/drawing_phonics.astro | 115 ++++++- src/pages/drawing/drawing_writo.astro | 118 ++++++- src/pages/drawing/index.astro | 12 +- src/pages/drawing/v2.astro | 112 +++++-- src/pages/drawing/v3.astro | 136 +++++++- src/pages/guided-tracing/0.astro | 6 +- src/pages/guided-tracing/1.astro | 4 + src/pages/guided-tracing/2.astro | 4 + src/pages/guided-tracing/3.astro | 4 + src/pages/guided-tracing/4.astro | 4 + src/pages/guided-tracing/5.astro | 4 + src/pages/guided-tracing/6.astro | 4 + src/pages/guided-tracing/7.astro | 4 + src/pages/guided-tracing/8.astro | 4 + src/pages/guided-tracing/9.astro | 4 + src/pages/guided-tracing/A.astro | 4 + src/pages/guided-tracing/B.astro | 4 + src/pages/guided-tracing/C.astro | 4 + src/pages/guided-tracing/D.astro | 4 + src/pages/guided-tracing/E.astro | 4 + src/pages/guided-tracing/F.astro | 4 + src/pages/guided-tracing/G.astro | 4 + src/pages/guided-tracing/H.astro | 4 + src/pages/guided-tracing/I.astro | 4 + src/pages/guided-tracing/J.astro | 4 + src/pages/guided-tracing/K.astro | 4 + src/pages/guided-tracing/L.astro | 4 + src/pages/guided-tracing/M.astro | 4 + src/pages/guided-tracing/N.astro | 4 + src/pages/guided-tracing/O.astro | 4 + src/pages/guided-tracing/P.astro | 4 + src/pages/guided-tracing/Q.astro | 4 + src/pages/guided-tracing/R.astro | 4 + src/pages/guided-tracing/S.astro | 4 + src/pages/guided-tracing/T.astro | 4 + src/pages/guided-tracing/U.astro | 4 + src/pages/guided-tracing/V.astro | 4 + src/pages/guided-tracing/W.astro | 4 + src/pages/guided-tracing/X.astro | 4 + src/pages/guided-tracing/Y.astro | 4 + src/pages/guided-tracing/Z.astro | 6 +- src/pages/guided-tracing/a.astro | 4 + src/pages/guided-tracing/b.astro | 4 + src/pages/guided-tracing/c.astro | 4 + src/pages/guided-tracing/d.astro | 4 + src/pages/guided-tracing/e.astro | 4 + src/pages/guided-tracing/f.astro | 4 + src/pages/guided-tracing/g.astro | 4 + src/pages/guided-tracing/h.astro | 4 + src/pages/guided-tracing/i.astro | 4 + src/pages/guided-tracing/j.astro | 4 + src/pages/guided-tracing/k.astro | 4 + src/pages/guided-tracing/l.astro | 4 + src/pages/guided-tracing/m.astro | 4 + src/pages/guided-tracing/n.astro | 4 + src/pages/guided-tracing/o.astro | 4 + src/pages/guided-tracing/p.astro | 4 + src/pages/guided-tracing/q.astro | 4 + src/pages/guided-tracing/r.astro | 4 + src/pages/guided-tracing/s.astro | 4 + src/pages/guided-tracing/t.astro | 4 + src/pages/guided-tracing/u.astro | 4 + src/pages/guided-tracing/v.astro | 4 + src/pages/guided-tracing/w.astro | 4 + src/pages/guided-tracing/x.astro | 4 + src/pages/guided-tracing/y.astro | 4 + src/pages/guided-tracing/z-test.astro | 413 ++++++++++++++++++++++++ src/pages/guided-tracing/z.astro | 4 + 68 files changed, 1088 insertions(+), 70 deletions(-) create mode 100644 src/pages/guided-tracing/z-test.astro diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index 899a16f..e4af2b3 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -3,14 +3,71 @@ import Layout from '../../layouts/Layout.astro'; ---
-
+ - -
+ + - + - + + - + - \ No newline at end of file + 100% { + opacity: 1; + transform: translateY(0); /* End at its original position */ + } + } + + .clip-art-container { + overflow: hidden; /* Prevents overflow during the animation */ + } + + .clip-art { + transform: translateX(100%); /* Initially off-screen to the right */ + opacity: 0; /* Initially hidden */ + transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */ + } + + .clip-art.show { + transform: translateX(0); /* Move the image into view */ + opacity: 1; /* Fade in */ + } + \ No newline at end of file diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index e5127dd..bad587e 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -344,8 +344,15 @@ import Layout from '../../layouts/Layout.astro'; outlineImage.setDepth(1).setScale(0.40); } else{ outlineImage.setDepth(1).setScale(0.65); - } + } + + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); + + graphics = this.add.graphics(); + graphics.setMask(mask); const colorContainer = document.createElement('div'); colorContainer.style.zIndex = '1'; colorContainer.style.position = 'absolute'; @@ -1029,5 +1036,4 @@ import Layout from '../../layouts/Layout.astro'; .active{ display: block; } - - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index a53a687..114c6cd 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -3,34 +3,66 @@ import Layout from '../../layouts/Layout.astro'; ---
-
- - +
- + - + + - + - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index e21431f..40c66ff 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -298,7 +298,10 @@ import Layout from "../../layouts/Layout.astro"; // const baseFontSize = 16; // const responsiveFontSize = (window.innerWidth / 550) * baseFontSize; - let responsiveFontSize = isMobile ? 16 : 32; + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); + let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -356,6 +359,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); // graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro index 55c8569..b13381f 100644 --- a/src/pages/guided-tracing/1.astro +++ b/src/pages/guided-tracing/1.astro @@ -281,6 +281,9 @@ import Layout from "../../layouts/Layout.astro"; }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 1', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro index eea568c..aba2197 100644 --- a/src/pages/guided-tracing/2.astro +++ b/src/pages/guided-tracing/2.astro @@ -246,6 +246,9 @@ import Layout from "../../layouts/Layout.astro"; }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 2', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -333,6 +336,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro index 5289fc2..f0e3114 100644 --- a/src/pages/guided-tracing/3.astro +++ b/src/pages/guided-tracing/3.astro @@ -255,6 +255,9 @@ import Layout from "../../layouts/Layout.astro"; }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 3', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 3', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -343,6 +346,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 90d303b..a0435a7 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.astro @@ -260,6 +260,9 @@ import Layout from "../../layouts/Layout.astro"; } }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 4', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 4', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -379,6 +382,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 79aba00..e878d39 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.astro @@ -258,6 +258,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 5', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 5', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -375,6 +378,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro index a06cc78..316481b 100644 --- a/src/pages/guided-tracing/6.astro +++ b/src/pages/guided-tracing/6.astro @@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 6', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 6', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -341,6 +344,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro index a5877a1..29b53fb 100644 --- a/src/pages/guided-tracing/7.astro +++ b/src/pages/guided-tracing/7.astro @@ -259,6 +259,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 7', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 7', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -344,6 +347,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro index 20dc093..509c504 100644 --- a/src/pages/guided-tracing/8.astro +++ b/src/pages/guided-tracing/8.astro @@ -257,6 +257,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 8', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 8', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -345,6 +348,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro index d300d38..f2d4a9f 100644 --- a/src/pages/guided-tracing/9.astro +++ b/src/pages/guided-tracing/9.astro @@ -257,6 +257,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Number: 9', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 9', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -346,6 +349,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index fbb55a9..4f00502 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: A', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : A', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -367,6 +370,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index 1e0bc37..1d0c8f5 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.astro @@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: B', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : B', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -373,6 +376,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index 3356859..e5d8d66 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: C', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : C', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -303,6 +306,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro index 0a28fe4..7661a53 100644 --- a/src/pages/guided-tracing/D.astro +++ b/src/pages/guided-tracing/D.astro @@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: D', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : D', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro index 6de9e27..a3bf100 100644 --- a/src/pages/guided-tracing/E.astro +++ b/src/pages/guided-tracing/E.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: E', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : E', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -403,6 +406,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro index f383e8a..51b1649 100644 --- a/src/pages/guided-tracing/F.astro +++ b/src/pages/guided-tracing/F.astro @@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: F', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : F', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -363,6 +366,7 @@ import Layout from "../../layouts/Layout.astro"; }); graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro index fbc5137..e1722ce 100644 --- a/src/pages/guided-tracing/G.astro +++ b/src/pages/guided-tracing/G.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: G', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : G', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -334,6 +337,7 @@ import Layout from "../../layouts/Layout.astro"; }); graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro index eedef3d..a3168df 100644 --- a/src/pages/guided-tracing/H.astro +++ b/src/pages/guided-tracing/H.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: H', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : H', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -366,6 +369,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index 91a7a0a..3790b42 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.astro @@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: I', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : I', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -368,6 +371,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro index d2910bd..44957c4 100644 --- a/src/pages/guided-tracing/J.astro +++ b/src/pages/guided-tracing/J.astro @@ -248,6 +248,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: J', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : J', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -297,6 +300,7 @@ import Layout from "../../layouts/Layout.astro"; }); graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro index dc0fe1e..57be245 100644 --- a/src/pages/guided-tracing/K.astro +++ b/src/pages/guided-tracing/K.astro @@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: K', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : K', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -369,6 +372,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro index a239691..3f70cea 100644 --- a/src/pages/guided-tracing/L.astro +++ b/src/pages/guided-tracing/L.astro @@ -255,6 +255,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: L', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : L', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -341,6 +344,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro index ce22a92..40f25b9 100644 --- a/src/pages/guided-tracing/M.astro +++ b/src/pages/guided-tracing/M.astro @@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: M', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : M', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -404,6 +407,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro index ed43583..1988b74 100644 --- a/src/pages/guided-tracing/N.astro +++ b/src/pages/guided-tracing/N.astro @@ -261,6 +261,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: N', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : N', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -375,6 +378,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro index b46c0db..26d6885 100644 --- a/src/pages/guided-tracing/O.astro +++ b/src/pages/guided-tracing/O.astro @@ -255,6 +255,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: O', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : O', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -311,6 +314,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro index 1054cd7..49e47c7 100644 --- a/src/pages/guided-tracing/P.astro +++ b/src/pages/guided-tracing/P.astro @@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: P', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : P', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -343,6 +346,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro index d11da59..a988d5c 100644 --- a/src/pages/guided-tracing/Q.astro +++ b/src/pages/guided-tracing/Q.astro @@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: Q', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Q', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro index f8fa6d9..2983ce1 100644 --- a/src/pages/guided-tracing/R.astro +++ b/src/pages/guided-tracing/R.astro @@ -262,6 +262,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: R', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : R', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -376,6 +379,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro index 6308dd0..28b5b3d 100644 --- a/src/pages/guided-tracing/S.astro +++ b/src/pages/guided-tracing/S.astro @@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: S', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : S', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -303,6 +306,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro index f8fa09b..74f9ba4 100644 --- a/src/pages/guided-tracing/T.astro +++ b/src/pages/guided-tracing/T.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: T', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : T', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro index 3794b40..ca520dc 100644 --- a/src/pages/guided-tracing/U.astro +++ b/src/pages/guided-tracing/U.astro @@ -248,6 +248,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: U', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : U', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -304,6 +307,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro index 62941f6..729aeb5 100644 --- a/src/pages/guided-tracing/V.astro +++ b/src/pages/guided-tracing/V.astro @@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: V', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : V', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro index 3d56ae8..8140898 100644 --- a/src/pages/guided-tracing/W.astro +++ b/src/pages/guided-tracing/W.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: W', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : W', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -402,6 +405,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro index 5683c98..c078686 100644 --- a/src/pages/guided-tracing/X.astro +++ b/src/pages/guided-tracing/X.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: X', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : X', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro index cce5b85..77426df 100644 --- a/src/pages/guided-tracing/Y.astro +++ b/src/pages/guided-tracing/Y.astro @@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: Y', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Y', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -367,6 +370,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro index 0721246..4ac4e3e 100644 --- a/src/pages/guided-tracing/Z.astro +++ b/src/pages/guided-tracing/Z.astro @@ -236,6 +236,9 @@ import Layout from "../../layouts/Layout.astro"; const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setDepth(2).setScale(letterScale); // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedZ').setDepth(2); canvasStand firstScreen.setVisible(false); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); demoButton.setInteractive().on('pointerdown', () => { animatedLetter.setCurrentTime(0); @@ -253,7 +256,6 @@ import Layout from "../../layouts/Layout.astro"; } }) - let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: Z', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Z', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -368,6 +370,8 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); + graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index 4b50a3a..de9eb0b 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: a', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : a', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -339,6 +342,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index c88e7eb..45d7efb 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: b', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : b', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 3e287fc..f700df0 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: c', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : c', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -307,6 +310,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index 9c74f65..215f07d 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -262,6 +262,9 @@ import Layout from "../../layouts/Layout.astro"; // animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: d', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : d', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -346,6 +349,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index 708b327..9dedaf7 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.astro @@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro"; }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: e', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : e', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -342,6 +345,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro index bc09bc0..0535f3b 100644 --- a/src/pages/guided-tracing/f.astro +++ b/src/pages/guided-tracing/f.astro @@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: f', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : f', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro index 1b2c4d3..22af2bb 100644 --- a/src/pages/guided-tracing/g.astro +++ b/src/pages/guided-tracing/g.astro @@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: g', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : g', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -338,6 +341,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro index e7e3a9f..156c89a 100644 --- a/src/pages/guided-tracing/h.astro +++ b/src/pages/guided-tracing/h.astro @@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro"; } }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: h', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : h', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -339,6 +342,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro index d4bee33..7363dda 100644 --- a/src/pages/guided-tracing/i.astro +++ b/src/pages/guided-tracing/i.astro @@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: i', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : i', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro index 2364093..fc0b716 100644 --- a/src/pages/guided-tracing/j.astro +++ b/src/pages/guided-tracing/j.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: j', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : j', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro index 9114e5f..6654905 100644 --- a/src/pages/guided-tracing/k.astro +++ b/src/pages/guided-tracing/k.astro @@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: k', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : k', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -370,6 +373,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro index 4131d71..ade03fe 100644 --- a/src/pages/guided-tracing/l.astro +++ b/src/pages/guided-tracing/l.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: l', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : l', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -304,6 +307,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro index b8cf7a9..e70935c 100644 --- a/src/pages/guided-tracing/m.astro +++ b/src/pages/guided-tracing/m.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: m', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : m', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -369,6 +372,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro index fdd8fdc..45657cd 100644 --- a/src/pages/guided-tracing/n.astro +++ b/src/pages/guided-tracing/n.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: n', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : n', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro index 904ef39..c02d9fb 100644 --- a/src/pages/guided-tracing/o.astro +++ b/src/pages/guided-tracing/o.astro @@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: o', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : o', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -303,6 +306,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro index 74ef9d9..db4d614 100644 --- a/src/pages/guided-tracing/p.astro +++ b/src/pages/guided-tracing/p.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: p', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : p', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -334,6 +337,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro index 5e52979..04f3e2a 100644 --- a/src/pages/guided-tracing/q.astro +++ b/src/pages/guided-tracing/q.astro @@ -257,6 +257,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: q', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : q', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -340,6 +343,7 @@ import Layout from "../../layouts/Layout.astro"; }); graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro index 7d07c85..b75072a 100644 --- a/src/pages/guided-tracing/r.astro +++ b/src/pages/guided-tracing/r.astro @@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: r', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : r', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro index 7b37bac..869efe7 100644 --- a/src/pages/guided-tracing/s.astro +++ b/src/pages/guided-tracing/s.astro @@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: s', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : s', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -308,6 +311,7 @@ import Layout from "../../layouts/Layout.astro"; }); graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro index 9d1b22b..e3864d4 100644 --- a/src/pages/guided-tracing/t.astro +++ b/src/pages/guided-tracing/t.astro @@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro"; } }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: t', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : t', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro index 9cee3dd..9b0753f 100644 --- a/src/pages/guided-tracing/u.astro +++ b/src/pages/guided-tracing/u.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: u', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : u', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro index d239a9b..402104f 100644 --- a/src/pages/guided-tracing/v.astro +++ b/src/pages/guided-tracing/v.astro @@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro"; } }); + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: v', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : v', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro index 8d31c02..b943186 100644 --- a/src/pages/guided-tracing/w.astro +++ b/src/pages/guided-tracing/w.astro @@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: w', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : w', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -401,6 +404,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro index 9471a03..44597ee 100644 --- a/src/pages/guided-tracing/x.astro +++ b/src/pages/guided-tracing/x.astro @@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: x', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : x', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro index 3e7f7ce..8889741 100644 --- a/src/pages/guided-tracing/y.astro +++ b/src/pages/guided-tracing/y.astro @@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: y', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : y', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -338,6 +341,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; diff --git a/src/pages/guided-tracing/z-test.astro b/src/pages/guided-tracing/z-test.astro new file mode 100644 index 0000000..0888a70 --- /dev/null +++ b/src/pages/guided-tracing/z-test.astro @@ -0,0 +1,413 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro index 1a7ea5c..cd8fe24 100644 --- a/src/pages/guided-tracing/z.astro +++ b/src/pages/guided-tracing/z.astro @@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro"; } }) + const maskGraphics = this.make.graphics(); + maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight); + const mask = maskGraphics.createGeometryMask(); let responsiveFontSize = isMobile ? 16 : 32; this.add.text(window.innerWidth / 2, 80, 'Letter: z', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : z', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); @@ -370,6 +373,7 @@ import Layout from "../../layouts/Layout.astro"; graphics = this.add.graphics(); +graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; -- 2.34.1 From 1bd86ba8cce511678ecaf6e98d72d85a2c2056d0 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Wed, 6 Nov 2024 19:05:11 +0530 Subject: [PATCH 07/12] s1 --- public/assets/svg/tracing-done.svg | 25 +++++ public/saveGameAI.js | 1 - public/saveTracingGameData.js | 134 +++++++++++++++++++++++ src/pages/drag/index.astro | 38 +++---- src/pages/drawing/drawing_phonics.astro | 2 +- src/pages/drawing/drawing_writo.astro | 2 +- src/pages/drawing/index.astro | 6 +- src/pages/drawing/v2.astro | 2 +- src/pages/drawing/v3.astro | 2 +- src/pages/guided-tracing/A.astro | 135 ++++++++---------------- 10 files changed, 231 insertions(+), 116 deletions(-) create mode 100644 public/assets/svg/tracing-done.svg create mode 100644 public/saveTracingGameData.js diff --git a/public/assets/svg/tracing-done.svg b/public/assets/svg/tracing-done.svg new file mode 100644 index 0000000..43c58d6 --- /dev/null +++ b/public/assets/svg/tracing-done.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/saveGameAI.js b/public/saveGameAI.js index a3f0bec..6e01465 100644 --- a/public/saveGameAI.js +++ b/public/saveGameAI.js @@ -1,7 +1,6 @@ function retryGame(){ window.location.reload(); } - const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const userId = urlParams.get('userId'); diff --git a/public/saveTracingGameData.js b/public/saveTracingGameData.js new file mode 100644 index 0000000..4da6785 --- /dev/null +++ b/public/saveTracingGameData.js @@ -0,0 +1,134 @@ +function retryGame(){ + window.location.reload(); +} + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const userId = urlParams.get('userId'); +const gameVersion = urlParams.get('gameName'); +let gameId; +let submitNotic; + +console.log(userId); +let startTime = Date.now(); + + +const url = window.location.href; +const gameName = url.split('/'); +const gameType = gameName[3].split('?id='); +// let gameVersion; + +// console.log("Here is game name ", gameType[0]) + +// if(gameType[0] == "guided-tracing"){ +// gameVersion = gameType[0].split('?')[0]; +// gameId = gameName[4]; +// console.log('Type - 1'); + +// } else if(gameName.length == 4){ +// gameVersion = gameName[3].split('?')[0]; +// gameId = urlParams.get('id'); +// } +// else if(gameName.length == 5){ +// gameVersion = gameName[3] + '-' + gameName[4].split('?')[0]; +// gameId = urlParams.get('id'); +// console.log('Type - 2'); +// }else if(gameName.length == 6){ +// gameVersion = gameType[0] + '-' + gameName[4]; +// gameId = urlParams.get('id'); +// console.log('Type - 3'); +// } + +console.log(gameVersion) + +function submitUserData(drawingZone) { + const endTime = Date.now(); + const timeDifference = endTime - startTime; + const timeDifferenceInSeconds = timeDifference / 1000; + // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`); + + let imageCode; + let gameScore; + + if(scoreTotal){ + gameScore = scoreTotal; + }else{ + gameScore = 0; + } + // console.log('This is from main point', scoreTotal); + drawingZone.renderer.snapshot((image) => { + if(gameType[0] == 'drawing'){ + submitButton.setVisible(true); + snapshotButton.setVisible(true); + customCursor.setVisible(true); + image.style.width = '160px'; + image.style.height = '120px'; + image.style.paddingLeft = '2px'; + document.body.appendChild(image); + // Download the snapshot as an image + // const link = document.createElement('a'); + // link.href = image.src; + // link.download = 'my_drawing.png'; + // link.click(); + document.body.removeChild(image); + imageCode = image.src; + }else if( gameType[0] == "guided-tracing"){ + // submitButton.setVisible(true); + // snapshotButton.setVisible(true); + // customCursor.setVisible(true); + image.style.width = '160px'; + image.style.height = '120px'; + image.style.paddingLeft = '2px'; + document.body.appendChild(image); + // Download the snapshot as an image + // const link = document.createElement('a'); + // link.href = image.src; + // link.download = `guided-tracing-${gameId}.png`; + // link.click(); + document.body.removeChild(image); + imageCode = image.src; + } + let starValue; + if(scoreTotal === maxScore){ + starValue = 5; + } else if(scoreTotal === maxScore - 1){ + starValue = 4; + } else{ + starValue = 3; + } + let userData = { + 'gameName': gameVersion, + 'gameID': gameId, + 'screenShot': imageCode, + 'userId' : userId, + 'gameTime' : timeDifferenceInSeconds, + 'score' : scoreTotal, + 'gameStar' : starValue + }; + // console.log(userData); + fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + setTimeout(() => { + if (response.ok) { + if (response.status == 200) { + document.getElementById('wsSavedImg').classList.remove('-z-10'); + } + } else { + console.log('Something went wrong', response); + } + }, 100); + }) + .catch(error => { + console.error('An error occurred', error); + }); + + // Clear the drawing + // graphics.clear(); + }); +}; \ No newline at end of file diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index d771211..cfd45df 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -61,24 +61,24 @@ const numberOfTimes = starNumberOfTime; let cancelIconWidth; if(isMobile){ - topLogoWidth = 4.5; - muteIconWidth = 1.8; - resetIconWidth = 1.47; - tickIconWidth = 1.24; - cancelIconWidth = 1.08; - }else if(isTab){ - topLogoWidth = 4.5; - muteIconWidth = 1.6; - resetIconWidth = 1.43; - tickIconWidth = 1.29; - cancelIconWidth = 1.18; - }else{ - topLogoWidth = 6; - muteIconWidth = 1.3; - resetIconWidth = 1.26; - tickIconWidth = 1.222; - cancelIconWidth = 1.185; - } + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.47; + tickIconWidth = 1.24; + cancelIconWidth = 1.08; + }else if(isTab){ + topLogoWidth = 4.5; + muteIconWidth = 1.6; + resetIconWidth = 1.43; + tickIconWidth = 1.29; + cancelIconWidth = 1.18; + }else{ + topLogoWidth = 6; + muteIconWidth = 1.3; + resetIconWidth = 1.26; + tickIconWidth = 1.222; + cancelIconWidth = 1.185; + } if(isMobile){ noticeWidth = 100; noticeHeight = 0; @@ -465,7 +465,7 @@ const numberOfTimes = starNumberOfTime; counter++; return 'borderCorrect'; } else { - console.log(`Score Total: ${scoreTotal}`); + // console.log(`Score Total: ${scoreTotal}`); return 'borderWrong'; } }; diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index e4af2b3..a4c279a 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
- +
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro index 0693aaf..b867681 100644 --- a/src/pages/drawing/drawing_writo.astro +++ b/src/pages/drawing/drawing_writo.astro @@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
- +
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index bad587e..08366cb 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
- +
@@ -709,12 +709,14 @@ import Layout from '../../layouts/Layout.astro'; eraserButton.addEventListener('click', () => { isErasing = !isErasing; if (isErasing) { - eraserButton.style.border = '2px solid #0348A8'; + eraserButton.style.border = '3px solid #0348A8'; + eraserButton.style.backgroundColor = '#0348A820'; } else { // Return to drawing mode // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color eraserButton.style.color = 'blue'; eraserButton.style.border = 'none'; + eraserButton.style.backgroundColor = 'transparent'; } }); // Add the Clear and Eraser buttons to the container diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 114c6cd..b2ae208 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
- +
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index 8000070..d306e8d 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
- +
diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index 4f00502..ac7de23 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -8,69 +8,20 @@ import Layout from "../../layouts/Layout.astro"; -