-
-
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/temp4.astro b/src/pages/tracing/temp4.astro
new file mode 100644
index 0000000..641b404
--- /dev/null
+++ b/src/pages/tracing/temp4.astro
@@ -0,0 +1,158 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/test.astro b/src/pages/tracing/test.astro
new file mode 100644
index 0000000..cf55596
--- /dev/null
+++ b/src/pages/tracing/test.astro
@@ -0,0 +1,184 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/tracing-importeat.astro b/src/pages/tracing/tracing-importeat.astro
new file mode 100644
index 0000000..a83d56d
--- /dev/null
+++ b/src/pages/tracing/tracing-importeat.astro
@@ -0,0 +1,49 @@
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/tracing3.astro b/src/pages/tracing/tracing3.astro
index f1c5806..cf55596 100644
--- a/src/pages/tracing/tracing3.astro
+++ b/src/pages/tracing/tracing3.astro
@@ -38,101 +38,147 @@ import Layout from "../../layouts/Layout.astro";
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
+ let isDrawing = false;
+
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.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
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');
+ this.load.image('topLogo', '/assets/top_logo.png');
+ this.load.svg('succesImage', '/assets/svg/tick.svg');
}
+
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');
+ 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);
this.time.delayedCall(2000, () => {
- firstScreen.setVisible(false);
- showLayers.call(this);
+ 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 showLayers() {
- let textX, textY;
-
- firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
- textX = isMobile ? customWidth / 3 : customWidth * 0.75;
- textY = isMobile ? customHeight / 5 : customHeight / 2;
- const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
- const slantLeftAudio = this.sound.add('slantLeft');
- slantLeftAudio.play();
- firstLayer.setDepth(1);
- firstLayer.setAlpha(0.5);
- firstLayer.setInteractive({ draggable: true });
-
- secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
- textX = isMobile ? customWidth / 3 : customWidth * 0.75;
- const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
- const slantRightAudio = this.sound.add('slantRight');
- secondTextLayer.setVisible(false);
- secondLayer.setDepth(1);
- secondLayer.setAlpha(0.5);
- secondLayer.setInteractive({ draggable: true });
- secondLayer.setVisible(false);
-
- thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
- textX = isMobile ? customWidth / 3 : customWidth * 0.75;
- const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
- const slideAudio = this.sound.add('slide');
- thirdTextLayer.setVisible(false);
- thirdLayer.setDepth(1.1);
- thirdLayer.setScale(1.15);
- thirdLayer.setAlpha(0.5);
- thirdLayer.setInteractive({ draggable: true });
- thirdLayer.setVisible(false);
-
- firstLayer.on('drag', (pointer) => {
- if (pointer.isDown) {
- firstTextLayer.setVisible(false);
- secondTextLayer.setVisible(true);
- slantRightAudio.play();
- secondLayer.setVisible(true);
- firstLayer.setAlpha(1);
- secondLayer.setAlpha(0.5);
- thirdLayer.setAlpha(0.5);
- } else {
- firstLayer.setAlpha(0.5);
- }
+ 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;
- secondLayer.on('drag', (pointer) => {
- if (pointer.isDown) {
- graphics = this.add.graphics();
- graphics.lineStyle(50, 0x5e17eb);
- secondTextLayer.setVisible(false);
- thirdTextLayer.setVisible(true);
- slideAudio.play();
- thirdLayer.setVisible(true);
- secondLayer.setAlpha(1);
- thirdLayer.setAlpha(0.5);
- } else {
- secondLayer.setAlpha(0.5);
- }
- });
+ firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+ textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+ textY = isMobile ? customHeight / 5 : customHeight / 2;
+ const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
+ const slantLeftAudio = this.sound.add('slantLeft');
+ slantLeftAudio.play();
+ firstLayer.setDepth(1);
+ firstLayer.setAlpha(0.5);
+ firstLayer.setInteractive({ draggable: true });
- thirdLayer.on('drag', (pointer) => {
- if (pointer.isDown) {
- thirdLayer.setAlpha(1);
- } else {
- thirdLayer.setAlpha(0.5);
- }
- });
+ secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+ textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+ const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
+ const slantRightAudio = this.sound.add('slantRight');
+ secondTextLayer.setVisible(false);
+ secondLayer.setDepth(1);
+ secondLayer.setAlpha(0.5);
+ secondLayer.setInteractive({ draggable: true });
+ secondLayer.setVisible(false);
+
+ thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
+ textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+ const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+ const slideAudio = this.sound.add('slide');
+ thirdTextLayer.setVisible(false);
+ thirdLayer.setDepth(1.1);
+ // thirdLayer.setScale(1.15);
+ thirdLayer.setAlpha(0.5);
+ thirdLayer.setInteractive({ draggable: true });
+ thirdLayer.setVisible(false);
+
+ firstLayer.on('drag', (pointer) => {
+ if (pointer.isDown) {
+ firstTextLayer.setVisible(false);
+ secondTextLayer.setVisible(true);
+ slantRightAudio.play();
+ secondLayer.setVisible(true);
+ firstLayer.setAlpha(1);
+ secondLayer.setAlpha(0.5);
+ thirdLayer.setAlpha(0.5);
+ } else {
+ firstLayer.setAlpha(0.5);
+ }
+ });
+
+ secondLayer.on('drag', (pointer) => {
+ if (pointer.isDown) {
+ secondTextLayer.setVisible(false);
+ thirdTextLayer.setVisible(true);
+ slideAudio.play();
+ thirdLayer.setVisible(true);
+ secondLayer.setAlpha(1);
+ thirdLayer.setAlpha(0.5);
+ } else {
+ secondLayer.setAlpha(0.5);
+ }
+ });
+
+ thirdLayer.on('drag', (pointer) => {
+ if (pointer.isDown) {
+ thirdLayer.setAlpha(1);
+ thirdTextLayer.setVisible(false);
+ // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
+ // succesImage.setAlpha(0.2);
+ // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+ } else {
+ 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', function (pointer) {
+ isDrawing = true;
+ graphics.moveTo(pointer.x, pointer.y);
+ });
+
+ this.input.on('pointerup', function () {
+ isDrawing = false;
+ });
+
+ this.input.on('pointermove', function (pointer) {
+ if (!isDrawing) return;
+
+ graphics.lineTo(pointer.x, pointer.y);
+ graphics.strokePath();
+ });
}
function update() {
// Update any game logic if needed
}
-
\ No newline at end of file
- This is the div to hide.
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+
+
-
-
+
+
+
\ No newline at end of file
diff --git a/src/pages/tracing/temp2.astro b/src/pages/tracing/temp2.astro
new file mode 100644
index 0000000..45821ba
--- /dev/null
+++ b/src/pages/tracing/temp2.astro
@@ -0,0 +1,196 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+
+
+
+
+
+
+
+
+