diff --git a/public/assets/svg/hand.svg b/public/assets/svg/hand.svg
new file mode 100644
index 0000000..65eba75
--- /dev/null
+++ b/public/assets/svg/hand.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/pages/tracing/test.astro b/src/pages/tracing/test.astro
index cf55596..6ffd548 100644
--- a/src/pages/tracing/test.astro
+++ b/src/pages/tracing/test.astro
@@ -39,13 +39,13 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
-
+ // let hideButton;
function preload() {
- this.load.svg('letterA', '/assets/letter/a.svg');
- this.load.svg('layer1', '/assets/letter/a_l1.svg');
- this.load.svg('layer2', '/assets/letter/a_l2.svg');
- this.load.svg('layer3', '/assets/letter/a_l3.svg');
+ this.load.svg('letterA', '/assets/capital-letter/a.svg');
+ this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
+ this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
+ this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
this.load.audio('slide', '/assets/audio/slide.mp3');
@@ -57,37 +57,32 @@ import Layout from "../../layouts/Layout.astro";
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
+
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+ firstScreen.setVisible(false);
+
+ let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Hide", { font: '24px quicksand', fill: '#05b3a4' });
+ hideButton.setInteractive().on('pointerdown', () => {
+ isDemoButtonClicked = false;
+ firstScreen.setVisible(false);
+ hideButton.setVisible(false); // Hide the "Hide" button
+ demoButton.setVisible(true); // Show the "Demo" button
+ });
+ hideButton.setVisible(false);
+ let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Demo", { font: '24px quicksand', fill: '#05b3a4' });
+ demoButton.setInteractive().on('pointerdown', () => {
+ firstScreen.setVisible(true);
+ demoButton.setVisible(false); // Hide the "Demo" button
+ hideButton.setVisible(true); // Show the "Hide" button
+ });
+
+
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
- const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+ const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
- this.time.delayedCall(2000, () => {
- this.tweens.add({
- targets: firstScreen,
- alpha: 0,
- scaleX: 0.5,
- scaleY: 0.5,
- duration: 1000,
- onComplete: () => {
- firstScreen.setVisible(false);
- firstScreen.setScale(1);
- showLayersWithFadeIn.call(this);
- }
- });
- }, [], this);
- }
- function showLayersWithFadeIn() {
- this.tweens.add({
- targets: [firstLayer, secondLayer, thirdLayer],
- alpha: 1,
- duration: 1000, // Duration of the tween in milliseconds
- delay: 500, // Delay before the fade-in starts
- ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
- });
-
- let textX, textY;
+ let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
@@ -176,7 +171,11 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
+
}
+ // function showLayersWithFadeIn() {
+
+ // }
function update() {
// Update any game logic if needed
diff --git a/src/pages/tracing/test2.astro b/src/pages/tracing/test2.astro
new file mode 100644
index 0000000..b23e051
--- /dev/null
+++ b/src/pages/tracing/test2.astro
@@ -0,0 +1,112 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/test3.astro b/src/pages/tracing/test3.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/tracing/tracing-importeat.astro b/src/pages/tracing/tracing-importeat.astro
index a83d56d..0e2c7ed 100644
--- a/src/pages/tracing/tracing-importeat.astro
+++ b/src/pages/tracing/tracing-importeat.astro
@@ -1,49 +1,193 @@
-
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/tracing3.astro b/src/pages/tracing/tracing3.astro
index cf55596..0e2c7ed 100644
--- a/src/pages/tracing/tracing3.astro
+++ b/src/pages/tracing/tracing3.astro
@@ -37,9 +37,9 @@ import Layout from "../../layouts/Layout.astro";
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
- let graphics;
- let isDrawing = false;
-
+ let isDragging = false;
+ let lineStartPosition = {x:0 , y:0};
+ let draggingLine;
function preload() {
this.load.svg('letterA', '/assets/letter/a.svg');
@@ -77,6 +77,9 @@ import Layout from "../../layouts/Layout.astro";
}
});
}, [], this);
+
+ draggingLine = this.add.graphics();
+ draggingLine.lineStyle(10, 0x05b3a4).setDepth(1.5); //o\\ 5 is the line width, 0xff0000 is the color (red)
}
function showLayersWithFadeIn() {
this.tweens.add({
@@ -86,8 +89,7 @@ import Layout from "../../layouts/Layout.astro";
delay: 500, // Delay before the fade-in starts
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
});
-
- let textX, textY;
+ let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
@@ -158,24 +160,31 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setAlpha(0.5);
}
});
- graphics = this.add.graphics();
- graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+ this.input.on('pointerdown', dragStart);
+ this.input.on('pointerup', dragEnd);
+ this.input.on('pointermove', drag);
+ }
- this.input.on('pointerdown', function (pointer) {
- isDrawing = true;
- graphics.moveTo(pointer.x, pointer.y);
- });
+ function dragStart(pointer) {
+ if (pointer.isDown) {
+ isDragging = true;
+ lineStartPosition.x = pointer.x;
+ lineStartPosition.y = pointer.y;
+ }
+ }
- this.input.on('pointerup', function () {
- isDrawing = false;
- });
+ function drag(pointer) {
+ if (isDragging) {
+ // draggingLine.clear();
+ draggingLine.beginPath();
+ draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
+ draggingLine.lineTo(pointer.x, pointer.y);
+ draggingLine.strokePath();
+ }
+ }
- this.input.on('pointermove', function (pointer) {
- if (!isDrawing) return;
-
- graphics.lineTo(pointer.x, pointer.y);
- graphics.strokePath();
- });
+ function dragEnd() {
+ isDragging = false;
}
function update() {