From 2e1fef63901d1040a9aea072c61a47dc462fa97f Mon Sep 17 00:00:00 2001 From: suvodip Date: Thu, 5 Oct 2023 21:32:32 +0530 Subject: [PATCH] pending to make layer4 in letter E --- public/assets/canvas4.png | Bin 47320 -> 11722 bytes public/assets/stand2.png | Bin 0 -> 26596 bytes src/pages/guided-tracing/a.astro | 134 +++--------- src/pages/guided-tracing/b.astro | 348 +++++++++++++++++++++--------- src/pages/guided-tracing/c.astro | 259 +++++++++++++++++----- src/pages/guided-tracing/d.astro | 291 +++++++++++++++++++------ src/pages/guided-tracing/e.astro | 355 +++++++++++++++++++++++++++++++ 7 files changed, 1063 insertions(+), 324 deletions(-) create mode 100644 public/assets/stand2.png create mode 100644 src/pages/guided-tracing/e.astro diff --git a/public/assets/canvas4.png b/public/assets/canvas4.png index 86c49677702be046615cc106472d1fddc7ccc541..2a1c2639f18c34fb3568a3ca6ad1b90334fc1900 100644 GIT binary patch literal 11722 zcmeAS@N?(olHy`uVBq!ia0y~y;NHQ&z!Ag23>5kG&CLl&F%}28J2BoosZ$T+a29w( z7BevL9RXp+soH$fK*72IpAc6dZ2$&3Iy&0g+FD2e&ehe`jq%fQwgJh0*`?oKq-$bg zsjqJo8(CakIv*$)9FS60FvHh7*268VFlU0jtw&CJXL?f8iWc47dv+BS7kRpcy?Ohp zySpnmAobP?{e#o=Aci|WofimnfmTV7UoeA!g2RIU4fj73Bs>WC|Np>$FxUX0kjVY@ z?8PRU3=BH!JzX3_D(1Yo79A8E$lwwvv_sG_8B@6ez7qyY&f4aOV0Q57A6LUV>^{^i?6=S$-p3y zTfg0Y+FJ&O4+3vaf7|@|;(MU3>`k%^3`}LIzbE(R><60WR` z1pIINy)8%l9WWZMr0vk(mbSZqouOgjvxoa4=H{I(d&tMY;Cz?wd*n9%_j#!hxqofH zZEoMMk67Po&A?zIP=DxePW(2o!LQWroIm#+YDC_lzkP6n^Up(!I(zu<VcfK zB63Ily{T_O?rodZ`uklT*cFpN_A`L&WdzAEwE!();Q%_DLjdSV0R^B=1qYzZ9U6wS z!nW4mS6LYtWVWrYe)Bx>;lFALV9vSzbno}gAYWIjqlQ8QGuL;0VBmcDx+`se?Y);5 z4*dm%+TR`PZq6_N0@ku{WQOCYuSZUv8I9}FxE|iM!e|N~P2r;{d;~WOM+<<_0${WN z7%c!sSZ{c=*c&bOMvJ}CVsEtA8v#R~qlNuwVLw{fj~4bru&_V8zU*zn@|7A~3tk9U z^g2y(@iocnuyXkOUtUDinft9a^Vzq0*}eXG=L()bVH$z6TBAk#Xwg1ew2v0;L$GKc z?h6h^i{{ayd9-LAEt*G*=FuURk-qqj-gRMvy7;^Kz-5guPQRb^w`%L4<}H%% zKL1H{-vwTr`oipv{&U-x;H9SvZWqiyr$6m7cnPdS{o&eps2aUH)1iW|AKLlq&%3|$ z_wMhYT7mCK+7AEoVdXFXrPGSf5SkFZau6I|5dxIfBh1~er}*u%d;Uan{%|Fe!@F_MurB# zINkQ&(^dnmGC1M1!~gQnqc6S!7XinM9gf`vG$Zkb@Vm<;+y3)1Fg&ooE&Xo!>Z?a> z>f;$17#_dj{cbOxR%eq1v{&L)$`|0u;txyyvSg~nMlsuevH>kb_H^}gS?83{1OVE_ B<#PZ4 literal 47320 zcmeI*dr(uy8UXO{P!SPD@dXMIZPB(s!XuDKct}9BMHE4?wJm`}2n|Vq0O6v7Xcg;i zr3Iz+RbRBd(u$5%q@0l~FnLE8RUuG2deBbUl z=eJ*0|8Qs5&6_)GxTT#XgTWX+J5&(CU<_01e_0GBt|X87J(Kt`R1vy3mBFw+r~hTL z@l|Vk;-arII9eGbPf8NYlnhl0Ps9@hhGZ;A3VJ;wF@wiuzm~{z=d!ro9xM;GH=Dy@ zbGTf0@7I((cMmp;<;nJ3pZwt{2E+UpNo2G#I_wQzoIJ@@D3ZsDT~$d6;s(SmR6OF3 zNn)jtsY;T{Qh6%Ab8iNZ__O}9o3o!Kv+v`ZB3jCe5QOxl5-q-Sf>NpAxw&OzWVmK{ zxXM%F-Pl|%*Nx@w=I-u7WVobe%9KKti!5~tF%mwMK%5$vB2g$Mav4)Uv@lklrsO+2 z4`e-mBvIVJZ4_xK(%zeh;@reiu^uMXjqS?Do>COYQ%aOl@e2=z~L?Jr`A#Ho^a8PkQy_I1-gpj3j4(0c_R)a^gqx;G7ZQ9b^t<_>MHELlBU;lB_`HQDAH4~FpB5Bc!8o+NWn6pQ@aS?(S#Y?cel)7R~V(7+`6_634f%Gn~nSdO;<^aqxIQkPJ{)$O(2Eu4AzC^x*7GiZ8Yv`}7|6@r%bnvzjKcQj zdik&h`t%0>)Fo1$7MGxZEkE~xOv5!p`hS^boU8v;aaJQuv;z57>1Vn3>#Cn$B0$Wq z2R6UNHC|wvGC`i=7pP1S%fx9(%y_9hRw(t==l926c)!11jl`OPmEyods)UL^6(Nz# z>n#|0N~Bya^$QZp(uKZmFJ2~l$bl887nxXskm7Y4Si=0O@24(iFb+n{76eABwstlI znlM;atM`{=*A%cF)|r|s%z78S-rsU^o=h^d7>q5ak!Fs?su@Ud=->>bHOfkhw5E=4 zGBGqmS!(1S`7w$ih8Xj7v$dfWkc-{W{BLzb2jV$!2i+Dp(v`#efg|ogy#;dAt;jOLkxYkr z3>>Ljk!6A-nGW?BI8wJF%LGR<9qKV~q;5r)365ks)MMaC-HI#|9LaRZVjxGRLp=tL z)UC)e!I4addJG(?TajggBbg5M7&ub5BFh9vG9BtMaHMWUmI;nzI@Dv&9h=y)nwW_f zZj|kfj(oepjLF(nP_QF>%nXI8I*>b4HqYar=-y;r)SU@F!AE2pqj}5bPTb@)IVzw~ zePCGS!TL>4PY&t&-W2_B=z{~%ofsOX1-gY}y!lFW@5d@8x`!iXq&d3z!zx#U?ivXk ziSGVjS!69A(Y3Ac^8D-i-F*F@x^45Xn?=mI8GB&b6sM5g)oB7jjc3}WZqGl2`fV3| zpXRdatbli-q9)nI>xyb^=0E$jtNf$3{wVRYs^Di+9WnN$%&|5H^L#qrLw1@l&Q`tN z?B}o{zU1m&Ya#kJx^z4BqNv}wPIvNDN6S-@oh#!{Z8O)NNk{JR?AClU-EHM#$%v-RCW z$tw;mQ)FMcIobd0qr*wH){P^qty{I)tRfFXB14tS8`|VOv~hi`|Id+*E$1K3Ub1Ax z-B|rb$^K7x-NKbwbN*Gqt!zB}RIQy6e8BNy>D-pIZq5fS^_+{y?wk7~>Zd8fr*90a zxx#I$NxN=y7!5l66C>*PxUlD#1={A^Si7hCjQOsGb~f|B+rf&N^1=H@_E*@Xm~Y6p zS5?+um}{XH9#nS(oGRU>Ta%HKU8;Gz4%y73na3NX<+d%Z@wCUdgX$-!+qT9R7p6@Y zPqL|Tb+l|m$lF_MH7CRC9Bh)a9@>^4UxandYP4*6vgYpk^0m=Fm!11Qxou3p0P(Z# z*U{=P3l|m_hFPEkb`2>gy!?uj-;|bP9iQw+E3=HVF0XXoS!{mSxZif4Dn-gBCSit| z?qRo+LrvBj;cgd>A)y?zt9I%#e)hTgKN2h6LY~AYW>(UO7PM?GT(LvH1)5K>Z%ici z)e9K&KMCF-zJIWt$uMiATb9U{=e`9waQK;dw!x=I<>#7xviGZ|z3rxhI_oE!j5PV) zUlMP-#H5XnEullP#dj1oHxyey^RcCuiB}H3^5Sdu-|L1;LPj+E|8$rCO=J9T zR)$IN*(3G~EAQ;-DmB;6c(5$2=IH|mKC(ht-%jUm*uH<*Tx2C>gm(4)+hV5;F$IEZ zf2&spo45y<+3Z=c!;%;3J9yTdU5xz6*+VXUTzSH!*%JMWEf43!0WCTj%)0iK|Gp%P zxIzD?V(It`?$)i1PwUceR;90(s{Li_|LC4&s&lN>ec3R&KaIhN;nbu)R>?Pq)hFqO zl?r7g4akcycGzO&Fc~WV0XF3$@kz#~)#mTqarHQY0~Q%WP5i}02KJuzQGz3F0kXf! zsK@$NT-Xc!ydY`M1~^i$IXn~Oa1XjIaHK1T_X9`VgKi5P>B`~#z!CSL+X6?ra(F** z#69S?z>%&T-VYpc54tUI1Ub3_#_0zY2#&@PFwQ7YkKkw=0ppAU^$3o}5irguP>Q-c#;7F!JJqC`{t;jOLkxYkr3>>Ljk!6A-nGW?BI8wJF%LGR< z9qKV~q;5r)365ksWHFE<)1e*%N9tB&nczsKLp=tL)UC)e!I4addJG(?TajggBbg5M z7&ub5BFh9vG99uQ$dTz#kAWj~E3!;*B-5cD14rssWSQVdrb9gjj?}HlGQp8dhk6Vg zsaug{f+Lv@^%yu(x56_)4)>tj0!O-Xct3E&J?OT;k**xx4;*n1x-D>|D~I<3N8E#M z3moan;r+l7_n_MXN06f{V4QwXf#7Hy0ppAU^$3o}5irguP>B`~#`W*FVWR483eyPAxAy{CN`*QoB zc3Xkncli@WGFb_Bng?g!ZJv1a&Sz_f-Alp!wE% zZQR|VhEovdRdlChW@h_plTU8*JF(`nxz=BHKN zb0&r`iZ%lNT!XNaKd0k|z1|?4;KWSBoc!gJ^@ax!g9SbbKQqzxQB_1jLfDRt;Z0%p z%}$&~&w@5zg`NmLbTE1{`Y0>(c=M^_(eq76^n~_Z`oJZH{>-Q`J(mo(^>2l zsj;3l$V1=1{#9||(kU$x!Lp9DqX!QOccXJ$v}>%*#}SFeg)axSBd3-J1ShU_T#Zh6 zWO4ds;e=!Hiyyt_^p8y);`V3V9gXejJyy#@4Q0yMS2o&A7jgXBJ73p!6xbXXxqP+u z^HV3*UtNSf`=xso8orZL<-^aX7k94+(#dp3s?ah_?UI!7sI zOF>pv);D>d-fnx=)g|cEKI1*O_T;>M&{pI~=A4okiP(SB!e&I z5N&ZF_D1{4J|3hk4%y8fXY{-49lOltcSapUicb+OUYR9HOxzn~d%j?A z8*-B!Z^lK9$QLgznfAett1ce(scYXZuJ712?WdB>!whLT)q9r_uk>L^oU7BVDJ{Ws zBs&`TB)l%PKcJN%mzL_z({|0l; B(=7l1 diff --git a/public/assets/stand2.png b/public/assets/stand2.png new file mode 100644 index 0000000000000000000000000000000000000000..d009ddf8f8c7705643f0456066ce21884b30f577 GIT binary patch literal 26596 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 literal 0 HcmV?d00001 diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index 36f29bc..7c7acc6 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -44,8 +44,9 @@ import Layout from "../../layouts/Layout.astro"; cloudeSize = 200; cloudHeight = 340; canvasScale = 0.14 - canvasHeight = - 28; + canvasHeight = 35; letterHeight = 70; + letterScale = 1; backgroundScale = 0.8; sunScale = 0.1; sunScalePlus = 0.15; @@ -60,8 +61,9 @@ import Layout from "../../layouts/Layout.astro"; cloudeSize = 500; cloudHeight = 250; canvasScale = 0.195; - canvasHeight = - 60; + canvasHeight = 20; letterHeight = 50; + letterScale = 1; backgroundScale = 1; sunScale = 0.2; sunScalePlus = 0.25; @@ -73,31 +75,28 @@ import Layout from "../../layouts/Layout.astro"; parrotHeight = 245; animatedAHeight = 20; } - // let hideButton; - function preload() { this.load.video('animatedA', '/assets/animated-letter/a.mp4'); 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'); + this.load.audio('audioOne', '/assets/audio/slant-left.mp3'); + this.load.audio('audioTwo', '/assets/audio/slant-right.mp3'); + this.load.audio('audioThree', '/assets/audio/slide.mp3'); this.load.image('topLogo', '/assets/top_logo.png'); 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/backgroundImage2.png'); this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('cloud', '/assets/cloud.png'); this.load.image('canvas', '/assets/canvas4.png'); this.load.image('parrot', '/assets/parrot.png'); this.load.image('sun', '/assets/sun.png'); this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } -// bgMobile.png 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', }); @@ -143,12 +142,18 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); - this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2); - // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); - this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale); + const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale); + // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand firstScreen.setVisible(false); - + // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + // Set up a mask for the drawing area based on the canvas dimensions + const maskGraphics = this.make.graphics() + maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); + const mask = maskGraphics.createGeometryMask(); + + let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { font: '900 24px quicksand', @@ -170,9 +175,6 @@ import Layout from "../../layouts/Layout.astro"; hideButton.setVisible(false); // Hide the "Hide" button demoButton.setVisible(true); // Show the "Demo" button graphics.setVisible(true); - handPointerLeft.setVisible(false); - handPointerRight.setVisible(false); - handPointeSlide.setVisible(false); animatedLetter.setVisible(false); }); hideButton.setVisible(false); @@ -196,9 +198,6 @@ import Layout from "../../layouts/Layout.astro"; firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button hideButton.setVisible(true); // Show the "Hide" button - handPointerLeft.setVisible(false); - handPointerRight.setVisible(false); - handPointeSlide.setVisible(false); animatedLetter.setVisible(true); }); @@ -223,30 +222,30 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; - firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1'); + firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); textX = isMobile ? customWidth / 4 : 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(); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2'); + secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); textX = isMobile ? customWidth / 4 : 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'); + const audioTwoAudio = this.sound.add('audioTwo'); 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 + letterHeight, 'layer3'); + thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); 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'); + const audioThreeAudio = this.sound.add('audioThree'); thirdTextLayer.setVisible(false); thirdLayer.setDepth(1.1); // thirdLayer.setScale(1.15); @@ -271,9 +270,10 @@ import Layout from "../../layouts/Layout.astro"; const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); if (distance >= 100) { + firstTextLayer.setVisible(false); secondTextLayer.setVisible(true); - slantRightAudio.play(); + audioTwoAudio.play(); secondLayer.setVisible(true); firstLayer.setAlpha(1); secondLayer.setAlpha(0.5); @@ -297,7 +297,7 @@ import Layout from "../../layouts/Layout.astro"; if (distance >= 100) { secondTextLayer.setVisible(false); thirdTextLayer.setVisible(true); - slideAudio.play(); + audioThreeAudio.play(); thirdLayer.setVisible(true); secondLayer.setAlpha(1); thirdLayer.setAlpha(0.5); @@ -325,8 +325,8 @@ 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; graphics.moveTo(pointer.x, pointer.y); @@ -343,80 +343,6 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); - - const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightLeft = customHeight /2 - 100; // Starting y position - const endHeightLeft = customHeight / 2 + 170; // Ending y position - const startWidthLeft = customWidth / 2 + 22; - const endWidthLeft = customWidth / 2 - 70; - // handPointer.setOrigin(0.5, 0.5); - handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed - // Define the bounce animation - this.tweens.add({ - targets: handPointerLeft, - x: { - getStart: () => startWidthLeft, - getEnd: () => endWidthLeft, - }, // End x position - y: { - getStart: () => startHeightLeft, - getEnd: () => endHeightLeft, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightRight = customHeight /2 - 100; // Starting y position - const endHeightRight = customHeight / 2 + 170; // Ending y position - const startWidthRight = customWidth / 2 + 20; - const endWidthRight = customWidth / 2 + 107; - // handPointer.setOrigin(0.5, 0.5); - handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed - // Define the bounce animation - this.tweens.add({ - targets: handPointerRight, - x: { - getStart: () => startWidthRight, - getEnd: () => endWidthRight, - }, // End x position - y: { - getStart: () => startHeightRight, - getEnd: () => endHeightRight, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightSlide = customHeight / 2 + 70; // Starting y position - const endHeightSlide = customHeight / 2 + 70; // Ending y position - - const startWidthSlide = customWidth / 2 - 60; - const endWidthSlide = customWidth / 2 + 55; - // handPointer.setOrigin(0.5, 0.5); - handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed - // Define the bounce animation - this.tweens.add({ - targets: handPointeSlide, - x: { - getStart: () => startWidthSlide, - getEnd: () => endWidthSlide, - }, // End x position - y: { - getStart: () => startHeightSlide, - getEnd: () => endHeightSlide, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - handPointerLeft.setVisible(false); - handPointerRight.setVisible(false); - handPointeSlide.setVisible(false); // Start Position 626 317 diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index b4eed9e..f4ef21b 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -32,67 +32,221 @@ import Layout from "../../layouts/Layout.astro"; update: update } }; + // backgroundImage.png const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + + if(isMobile){ + cloudeSize = 200; + cloudHeight = 340; + canvasScale = 0.14 + canvasHeight = 35; + letterHeight = 58; + letterScale = 0.85; + backgroundScale = 0.8; + sunScale = 0.1; + sunScalePlus = 0.15; + sunWidth = 70; + sunHeight = 70; + parrotScale = 0.35; + parrotScalePlus = 0.38; + parrotWidth = 135; + parrotHeight = 170; + animatedAHeight = 32; + } else{ + cloudeSize = 500; + cloudHeight = 250; + canvasScale = 0.195; + canvasHeight = 20; + letterHeight = 50; + letterScale = 1; + backgroundScale = 1; + sunScale = 0.2; + sunScalePlus = 0.25; + sunWidth = 200; + sunHeight = 100; + parrotScale = 0.4; + parrotScalePlus = 0.44; + parrotWidth = 200; + parrotHeight = 245; + animatedAHeight = 20; + } // let hideButton; function preload() { + this.load.video('animatedA', '/assets/animated-letter/a.mp4'); this.load.svg('letterB', '/assets/capital-letter/b.svg'); this.load.svg('layer1', '/assets/capital-letter/b_l1.svg'); this.load.svg('layer2', '/assets/capital-letter/b_l2.svg'); this.load.svg('layer3', '/assets/capital-letter/b_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'); + this.load.audio('audioOne', '/assets/audio/tall-down.mp3'); + this.load.audio('audioTwo', '/assets/audio/slide-around.mp3'); this.load.image('topLogo', '/assets/top_logo.png'); 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('parrot', '/assets/parrot.png'); + this.load.image('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } 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', }); + this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', }); + // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); + + const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); + cloud.setDepth(-1.8); + const scrollSpeed = 0.5; + this.time.addEvent({ + loop: true, + callback: () => { + cloud.tilePositionX += scrollSpeed; + }, + delay: 16, // Adjust the delay for the desired scrolling speed + }); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterB'); + const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); + const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9); + + + const scaleFactor = sunScalePlus; // Scale factor (2 means double the size) + const duration = 3000; // Duration of the animation in milliseconds + + // Create a scaling tween + this.tweens.add({ + targets: sun, + scaleX: scaleFactor, + scaleY: scaleFactor, + duration: duration, + ease: 'Linear', + yoyo: true, // Makes the animation play in reverse + repeat: -1 // Repeat indefinitely + }); + const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size) + const parrotduration = 2500; + this.tweens.add({ + targets: parrot, + scaleX: parrotscaleFactor + 0.004, + scaleY: parrotscaleFactor, + duration: parrotduration, + ease: 'Redial', + yoyo: true, // Makes the animation play in reverse + repeat: -1 // Repeat indefinitely + }); + const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); + this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale); + const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale); + // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand firstScreen.setVisible(false); + // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + // Set up a mask for the drawing area based on the canvas dimensions + const maskGraphics = this.make.graphics() + maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); + const mask = maskGraphics.createGeometryMask(); + + + let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); + hideButton.setInteractive().on('pointerdown', () => { + isDemoButtonClicked = false; + firstScreen.setVisible(false); + hideButton.setVisible(false); // Hide the "Hide" button + demoButton.setVisible(true); // Show the "Demo" button + graphics.setVisible(true); + animatedLetter.setVisible(false); + }); + hideButton.setVisible(false); + let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); + + demoButton.setInteractive().on('pointerdown', () => { + graphics.setVisible(false); + firstScreen.setVisible(true); + demoButton.setVisible(false); // Hide the "Demo" button + hideButton.setVisible(true); // Show the "Hide" button + animatedLetter.setVisible(true); + }); 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 how 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 : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); + + // Play the video + animatedLetter.play(); + animatedLetter.setVisible(false); + + // You can set additional properties for the video, such as loop and mute: + animatedLetter.setLoop(true); // Loop the video + animatedLetter.setMute(false); // Unmute the video + animatedLetter.on('complete', function () { + // Video playback is complete + // You can add your code here for what to do when the video finishes. + }); let textX, textY; - firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; + firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); + textX = isMobile ? customWidth / 4 : 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(); + const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.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', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantRightAudio = this.sound.add('slantRight'); + secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); + textX = isMobile ? customWidth / 4 : customWidth * 0.75; + const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioTwoAudio = this.sound.add('audioTwo'); 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'); + thirdLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); 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'); + const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'}); + const audioTHreeAudio = this.sound.add('audioTwo'); thirdTextLayer.setVisible(false); thirdLayer.setDepth(1.1); // thirdLayer.setScale(1.15); @@ -100,47 +254,80 @@ import Layout from "../../layouts/Layout.astro"; 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); - } - }); + // Add these variables to keep track of start points + let firstDragStartPoint = { x: 0, y: 0 }; + let secondDragStartPoint = { x: 0, y: 0 }; + let thirdDragStartPoint = { x: 0, y: 0 }; - 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); + // Add this code for firstLayer + firstLayer.on('dragstart', (pointer) => { + firstDragStartPoint.x = pointer.x; + firstDragStartPoint.y = pointer.y; + }); + + firstLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + + firstTextLayer.setVisible(false); + secondTextLayer.setVisible(true); + audioTwoAudio.play(); + secondLayer.setVisible(true); + firstLayer.setAlpha(1); + secondLayer.setAlpha(0.5); + thirdLayer.setAlpha(0.5); } else { - thirdLayer.setAlpha(0.5); + firstLayer.setAlpha(0.5); } - }); + }); + + // Repeat the above code for secondLayer and thirdLayer + + // Add this code for secondLayer + secondLayer.on('dragstart', (pointer) => { + secondDragStartPoint.x = pointer.x; + secondDragStartPoint.y = pointer.y; + }); + + secondLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + secondTextLayer.setVisible(false); + thirdTextLayer.setVisible(true); + audioTHreeAudio.play(); + thirdLayer.setVisible(true); + secondLayer.setAlpha(1); + thirdLayer.setAlpha(0.5); + } else { + secondLayer.setAlpha(0.5); + } + }); + + // Add this code for thirdLayer + thirdLayer.on('dragstart', (pointer) => { + thirdDragStartPoint.x = pointer.x; + thirdDragStartPoint.y = pointer.y; + }); + + thirdLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + thirdLayer.setAlpha(1); + thirdTextLayer.setVisible(false); + } else { + thirdLayer.setAlpha(0.5); + } + }); + + graphics = this.add.graphics(); - graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha) - + graphics.setMask(mask); + graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); @@ -157,58 +344,13 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); - const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer'); - const startHeightLeft = customHeight /2 - 140; - const endHeightLeft = customHeight / 2 + 140; - const startWidthLeft = customWidth / 2 + 10; - const endWidthLeft = customWidth / 2 + 10; - handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed - this.tweens.add({ - targets: handPointerLeft, - x: { - getStart: () => startWidthLeft, - getEnd: () => endWidthLeft, - }, // End x position - y: { - getStart: () => startHeightLeft, - getEnd: () => endHeightLeft, - }, - duration: 3000, // Duration of each bounce - ease: 'Sine.easeInOut', - yoyo: false, - repeat: -1 // -1 means it will repeat indefinitely - }); - - handPointerLeft.setVisible(false); - // Start Position 626 317 - let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { 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 - graphics.setVisible(true); - handPointerLeft.setVisible(false); - }); - hideButton.setVisible(false); - - let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' }); - demoButton.setInteractive().on('pointerdown', () => { - graphics.setVisible(false); - firstScreen.setVisible(true); - demoButton.setVisible(false); // Hide the "Demo" button - hideButton.setVisible(true); // Show the "Hide" button - handPointerLeft.setVisible(true); - }); } - // function showLayersWithFadeIn() { - - // } - function update() { - // Update any game logic if needed - } +function update() { + +} + \ No newline at end of file diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 42312b1..6a8547a 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -32,82 +32,234 @@ import Layout from "../../layouts/Layout.astro"; update: update } }; - + // backgroundImage.png const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; - + + if(isMobile){ + cloudeSize = 200; + cloudHeight = 340; + canvasScale = 0.14 + canvasHeight = 35; + letterHeight = 90; + letterScale = 1; + backgroundScale = 0.8; + sunScale = 0.1; + sunScalePlus = 0.15; + sunWidth = 70; + sunHeight = 70; + parrotScale = 0.35; + parrotScalePlus = 0.38; + parrotWidth = 135; + parrotHeight = 170; + animatedAHeight = 32; + } else{ + cloudeSize = 500; + cloudHeight = 250; + canvasScale = 0.195; + canvasHeight = 20; + letterHeight = 50; + letterScale = 1; + backgroundScale = 1; + sunScale = 0.2; + sunScalePlus = 0.25; + sunWidth = 200; + sunHeight = 100; + parrotScale = 0.4; + parrotScalePlus = 0.44; + parrotWidth = 200; + parrotHeight = 245; + animatedAHeight = 20; + } + // let hideButton; function preload() { - this.load.svg('letterC', '/assets/capital-letter/c_l1.svg'); - this.load.svg('layer1', '/assets/capital-letter/c_l1.svg'); - - this.load.audio('hookAround', '/assets/audio/hook-around.mp3'); + this.load.video('animatedA', '/assets/animated-letter/a.mp4'); + this.load.svg('letterC', '/assets/capital-letter/c.svg'); + this.load.svg('layer1', '/assets/capital-letter/c.svg'); + this.load.audio('audioOne', '/assets/audio/hook-around.mp3'); this.load.image('topLogo', '/assets/top_logo.png'); 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('parrot', '/assets/parrot.png'); + this.load.image('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } - function create() { this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', }); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterC'); - 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 how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); + // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); + + const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); + cloud.setDepth(-1.8); + const scrollSpeed = 0.5; + this.time.addEvent({ + loop: true, + callback: () => { + cloud.tilePositionX += scrollSpeed; + }, + delay: 16, // Adjust the delay for the desired scrolling speed + }); - 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); + const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); + const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9); + + + const scaleFactor = sunScalePlus; // Scale factor (2 means double the size) + const duration = 3000; // Duration of the animation in milliseconds + + // Create a scaling tween + this.tweens.add({ + targets: sun, + scaleX: scaleFactor, + scaleY: scaleFactor, + duration: duration, + ease: 'Linear', + yoyo: true, // Makes the animation play in reverse + repeat: -1 // Repeat indefinitely + }); + const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size) + const parrotduration = 2500; + this.tweens.add({ + targets: parrot, + scaleX: parrotscaleFactor + 0.004, + scaleY: parrotscaleFactor, + duration: parrotduration, + ease: 'Redial', + yoyo: true, // Makes the animation play in reverse + repeat: -1 // Repeat indefinitely + }); + const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); + this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale); + const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale); + // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand + firstScreen.setVisible(false); + // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + // Set up a mask for the drawing area based on the canvas dimensions + const maskGraphics = this.make.graphics() + maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); + const mask = maskGraphics.createGeometryMask(); + + + + let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) } }); - }, [], 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.) + hideButton.setInteractive().on('pointerdown', () => { + isDemoButtonClicked = false; + firstScreen.setVisible(false); + hideButton.setVisible(false); // Hide the "Hide" button + demoButton.setVisible(true); // Show the "Demo" button + graphics.setVisible(true); + animatedLetter.setVisible(false); }); - - let textX, textY; + hideButton.setVisible(false); + let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); - firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; + demoButton.setInteractive().on('pointerdown', () => { + graphics.setVisible(false); + firstScreen.setVisible(true); + demoButton.setVisible(false); // Hide the "Demo" button + hideButton.setVisible(true); // Show the "Hide" button + animatedLetter.setVisible(true); + }); + + + 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 how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); + + // Play the video + animatedLetter.play(); + animatedLetter.setVisible(false); + + // You can set additional properties for the video, such as loop and mute: + animatedLetter.setLoop(true); // Loop the video + animatedLetter.setMute(false); // Unmute the video + animatedLetter.on('complete', function () { + // Video playback is complete + // You can add your code here for what to do when the video finishes. + }); + + let textX, textY; + + firstLayer = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); + textX = isMobile ? customWidth / 4 : customWidth * 0.75; textY = isMobile ? customHeight / 5 : customHeight / 2; - const firstTextLayer = this.add.text(textX, textY, '1. Hook Around', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantLeftAudio = this.sound.add('hookAround'); - slantLeftAudio.play(); + const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - firstLayer.on('drag', (pointer) => { - if (pointer.isDown) { - firstTextLayer.setVisible(false); - firstLayer.setAlpha(1); - } else { - firstLayer.setAlpha(0.5); - } - }); - graphics = this.add.graphics(); - graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha) + // Add these variables to keep track of start points + let firstDragStartPoint = { x: 0, y: 0 }; + + // ... + + // Add this code for firstLayer + firstLayer.on('dragstart', (pointer) => { + firstDragStartPoint.x = pointer.x; + firstDragStartPoint.y = pointer.y; + }); + + firstLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 50) { + + firstTextLayer.setVisible(false); + firstLayer.setAlpha(1); + } else { + firstLayer.setAlpha(0.5); + } + }); + + + + 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; graphics.moveTo(pointer.x, pointer.y); @@ -123,9 +275,12 @@ import Layout from "../../layouts/Layout.astro"; graphics.lineTo(pointer.x, pointer.y); graphics.strokePath(); }); + + } - function update() { - // Update any game logic if needed - } +function update() { + +} + \ No newline at end of file diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index e7168d8..95e6290 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -32,76 +32,210 @@ import Layout from "../../layouts/Layout.astro"; update: update } }; - + // backgroundImage.png const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer, thirdLayer; + let firstLayer, secondLayer; let graphics; let isDrawing = false; - + + if(isMobile){ + cloudeSize = 200; + cloudHeight = 340; + canvasScale = 0.14 + canvasHeight = 35; + letterHeight = 58; + letterScale = 0.85; + backgroundScale = 0.8; + sunScale = 0.1; + sunScalePlus = 0.15; + sunWidth = 70; + sunHeight = 70; + parrotScale = 0.35; + parrotScalePlus = 0.38; + parrotWidth = 135; + parrotHeight = 170; + animatedAHeight = 32; + } else{ + cloudeSize = 500; + cloudHeight = 250; + canvasScale = 0.195; + canvasHeight = 20; + letterHeight = 50; + letterScale = 1; + backgroundScale = 1; + sunScale = 0.2; + sunScalePlus = 0.25; + sunWidth = 200; + sunHeight = 100; + parrotScale = 0.4; + parrotScalePlus = 0.44; + parrotWidth = 200; + parrotHeight = 245; + animatedAHeight = 20; + } + // let hideButton; function preload() { - this.load.svg('letterD', '/assets/capital-letter/d.svg'); + this.load.video('animatedA', '/assets/animated-letter/a.mp4'); + this.load.svg('letterB', '/assets/capital-letter/d.svg'); this.load.svg('layer1', '/assets/capital-letter/d_l1.svg'); this.load.svg('layer2', '/assets/capital-letter/d_l2.svg'); - - this.load.audio('tallDown', '/assets/audio/tall-down.mp3'); - this.load.audio('slideAround', '/assets/audio/slide-around.mp3'); + this.load.audio('audioOne', '/assets/audio/tall-down.mp3'); + this.load.audio('audioTwo', '/assets/audio/slide-around.mp3'); this.load.image('topLogo', '/assets/top_logo.png'); 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('parrot', '/assets/parrot.png'); + this.load.image('sun', '/assets/sun.png'); + this.load.image('bgMobile', '/assets/bgMobile.png'); + this.load.image('canvasStand', '/assets/stand2.png'); } - function create() { this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', }); - const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterD'); + // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); + + const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); + cloud.setDepth(-1.8); + const scrollSpeed = 0.5; + this.time.addEvent({ + loop: true, + callback: () => { + cloud.tilePositionX += scrollSpeed; + }, + delay: 16, // Adjust the delay for the desired scrolling speed + }); + + const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9); + const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9); + + + const scaleFactor = sunScalePlus; // Scale factor (2 means double the size) + const duration = 3000; // Duration of the animation in milliseconds + + // Create a scaling tween + this.tweens.add({ + targets: sun, + scaleX: scaleFactor, + scaleY: scaleFactor, + duration: duration, + ease: 'Linear', + yoyo: true, // Makes the animation play in reverse + repeat: -1 // Repeat indefinitely + }); + const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size) + const parrotduration = 2500; + this.tweens.add({ + targets: parrot, + scaleX: parrotscaleFactor + 0.004, + scaleY: parrotscaleFactor, + duration: parrotduration, + ease: 'Redial', + yoyo: true, // Makes the animation play in reverse + repeat: -1 // Repeat indefinitely + }); + const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale); + this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale); + const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale); + // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand + firstScreen.setVisible(false); + // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); + // Set up a mask for the drawing area based on the canvas dimensions + const maskGraphics = this.make.graphics() + maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); + const mask = maskGraphics.createGeometryMask(); + + + + let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); + hideButton.setInteractive().on('pointerdown', () => { + isDemoButtonClicked = false; + firstScreen.setVisible(false); + hideButton.setVisible(false); // Hide the "Hide" button + demoButton.setVisible(true); // Show the "Demo" button + graphics.setVisible(true); + animatedLetter.setVisible(false); + }); + hideButton.setVisible(false); + let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { + font: '900 24px quicksand', + fill: '#05b3a4', + backgroundColor: '#7c4c23', + padding: { x: 20, y: 10 }, + borderRadius: '15px', // Border radius + shadow: { + offsetX: 2, // X offset for the shadow + offsetY: 2, // Y offset for the shadow + color: '#000', // Shadow color + blur: 5, // Shadow blur + fill: true // Apply shadow to fill (background color) + } + }); + + demoButton.setInteractive().on('pointerdown', () => { + graphics.setVisible(false); + firstScreen.setVisible(true); + demoButton.setVisible(false); // Hide the "Demo" button + hideButton.setVisible(true); // Show the "Hide" button + animatedLetter.setVisible(true); + }); + + 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 how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); + const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73); - 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.) + // Play the video + animatedLetter.play(); + animatedLetter.setVisible(false); + + // You can set additional properties for the video, such as loop and mute: + animatedLetter.setLoop(true); // Loop the video + animatedLetter.setMute(false); // Unmute the video + animatedLetter.on('complete', function () { + // Video playback is complete + // You can add your code here for what to do when the video finishes. }); - - let textX, textY; - firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1'); - textX = isMobile ? customWidth / 3 : customWidth * 0.75; + let textX, textY; + + firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); + textX = isMobile ? customWidth / 4 : customWidth * 0.75; textY = isMobile ? customHeight / 5 : customHeight / 2; - const firstTextLayer = this.add.text(textX, textY, '1. Tall Down', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantLeftAudio = this.sound.add('tallDown'); - slantLeftAudio.play(); + const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioOneAudio = this.sound.add('audioOne'); + audioOneAudio.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. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'}); - const slantRightAudio = this.sound.add('slideAround'); + secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); + textX = isMobile ? customWidth / 4 : customWidth * 0.75; + const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); + const audioTwoAudio = this.sound.add('audioTwo'); secondTextLayer.setVisible(false); secondLayer.setDepth(1); secondLayer.setAlpha(0.5); @@ -109,35 +243,61 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.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); - } else { - firstLayer.setAlpha(0.5); - } - }); + // Add these variables to keep track of start points + let firstDragStartPoint = { x: 0, y: 0 }; + let secondDragStartPoint = { x: 0, y: 0 }; - secondLayer.on('drag', (pointer) => { - if (pointer.isDown) { - secondTextLayer.setVisible(false); - secondLayer.setAlpha(1); + // ... + + // Add this code for firstLayer + firstLayer.on('dragstart', (pointer) => { + firstDragStartPoint.x = pointer.x; + firstDragStartPoint.y = pointer.y; + }); + + firstLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); + + if (distance >= 100) { + + firstTextLayer.setVisible(false); + secondTextLayer.setVisible(true); + audioTwoAudio.play(); + secondLayer.setVisible(true); + firstLayer.setAlpha(1); + secondLayer.setAlpha(0.5); } else { - secondLayer.setAlpha(0.5); + firstLayer.setAlpha(0.5); } - }); + }); +`` + // Repeat the above code for secondLayer and thirdLayer + + // Add this code for secondLayer + secondLayer.on('dragstart', (pointer) => { + secondDragStartPoint.x = pointer.x; + secondDragStartPoint.y = pointer.y; + }); + + secondLayer.on('drag', (pointer) => { + const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y); + + if (distance >=100) { + secondTextLayer.setVisible(false); + secondLayer.setAlpha(1); + } else { + secondLayer.setAlpha(0.5); + } + }); graphics = this.add.graphics(); - graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha) - + graphics.setMask(mask); + graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) this.input.on('pointerdown', function (pointer) { isDrawing = true; graphics.moveTo(pointer.x, pointer.y); + console.log("Start Position", pointer.x, pointer.y) }); this.input.on('pointerup', function () { @@ -152,7 +312,8 @@ import Layout from "../../layouts/Layout.astro"; }); } - function update() { - // Update any game logic if needed - } +function update() { + +} + \ No newline at end of file diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro new file mode 100644 index 0000000..c701b05 --- /dev/null +++ b/src/pages/guided-tracing/e.astro @@ -0,0 +1,355 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+ +
+ + \ No newline at end of file