From ebd61445de0bc0d60b6b0ea6ea9199db7e2abb36 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Tue, 5 Nov 2024 18:22:34 +0530 Subject: [PATCH] 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;