From 6bd0c1c23b4366efa65c21c2d590b90d62b1d1c3 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Wed, 19 Jun 2024 13:56:55 +0530 Subject: [PATCH 01/12] drawing currect version --- public/assets/color_button.png | Bin 0 -> 4492 bytes src/pages/drag/dragdrop_phonics.astro | 94 +++++++++++++++--------- src/pages/drag/index.astro | 2 +- src/pages/drag/match_phonics.astro | 2 +- src/pages/drag/v2.astro | 2 +- src/pages/drag/v3.astro | 2 +- src/pages/drag/v4.astro | 2 +- src/pages/drawing/drawing_phonics.astro | 12 +-- src/pages/drawing/drawing_writo.astro | 12 +-- src/pages/drawing/index.astro | 12 +-- src/pages/drawing/v2.astro | 18 ++--- src/pages/drawing/v3.astro | 16 ++-- src/pages/guided-tracing/0.astro | 2 +- src/pages/guided-tracing/1.astro | 2 +- src/pages/guided-tracing/2.astro | 2 +- src/pages/guided-tracing/3.astro | 2 +- src/pages/guided-tracing/4.astro | 2 +- src/pages/guided-tracing/5.astro | 2 +- src/pages/guided-tracing/6.astro | 2 +- src/pages/guided-tracing/7.astro | 2 +- src/pages/guided-tracing/8.astro | 2 +- src/pages/guided-tracing/9.astro | 2 +- src/pages/guided-tracing/A.astro | 2 +- src/pages/guided-tracing/B.astro | 2 +- src/pages/guided-tracing/C.astro | 2 +- src/pages/guided-tracing/D.astro | 2 +- src/pages/guided-tracing/E.astro | 2 +- src/pages/guided-tracing/F.astro | 2 +- src/pages/guided-tracing/G.astro | 2 +- src/pages/guided-tracing/H.astro | 2 +- src/pages/guided-tracing/I.astro | 2 +- src/pages/guided-tracing/J.astro | 2 +- src/pages/guided-tracing/K.astro | 2 +- src/pages/guided-tracing/L.astro | 2 +- src/pages/guided-tracing/M.astro | 2 +- src/pages/guided-tracing/N.astro | 2 +- src/pages/guided-tracing/O.astro | 2 +- src/pages/guided-tracing/P.astro | 2 +- src/pages/guided-tracing/Q.astro | 2 +- src/pages/guided-tracing/R.astro | 2 +- src/pages/guided-tracing/S.astro | 2 +- src/pages/guided-tracing/T.astro | 2 +- src/pages/guided-tracing/U.astro | 2 +- src/pages/guided-tracing/V.astro | 2 +- src/pages/guided-tracing/W.astro | 2 +- src/pages/guided-tracing/X.astro | 2 +- src/pages/guided-tracing/Y.astro | 2 +- src/pages/guided-tracing/Z.astro | 2 +- src/pages/guided-tracing/a.astro | 2 +- src/pages/guided-tracing/b.astro | 2 +- src/pages/guided-tracing/c.astro | 2 +- src/pages/guided-tracing/d.astro | 2 +- src/pages/guided-tracing/e.astro | 2 +- src/pages/guided-tracing/f.astro | 2 +- src/pages/guided-tracing/g.astro | 2 +- src/pages/guided-tracing/h.astro | 2 +- src/pages/guided-tracing/i.astro | 2 +- src/pages/guided-tracing/j.astro | 2 +- src/pages/guided-tracing/k.astro | 2 +- src/pages/guided-tracing/l.astro | 2 +- src/pages/guided-tracing/m.astro | 2 +- src/pages/guided-tracing/n.astro | 2 +- src/pages/guided-tracing/o.astro | 2 +- src/pages/guided-tracing/p.astro | 2 +- src/pages/guided-tracing/q.astro | 2 +- src/pages/guided-tracing/r.astro | 2 +- src/pages/guided-tracing/s.astro | 2 +- src/pages/guided-tracing/t.astro | 2 +- src/pages/guided-tracing/u.astro | 2 +- src/pages/guided-tracing/v.astro | 2 +- src/pages/guided-tracing/w.astro | 2 +- src/pages/guided-tracing/x.astro | 2 +- src/pages/guided-tracing/y.astro | 2 +- src/pages/guided-tracing/z.astro | 2 +- src/pages/tracing/index.astro | 2 +- 75 files changed, 161 insertions(+), 139 deletions(-) create mode 100644 public/assets/color_button.png diff --git a/public/assets/color_button.png b/public/assets/color_button.png new file mode 100644 index 0000000000000000000000000000000000000000..6d11e5cc4aac84712498fafe9585d1dd686aa3cd GIT binary patch literal 4492 zcmV;75p(W|P)c&y`CIje!BUl< z>Ay-=6k@4T6L9*nTPJP=gPX>+8yLpKU;`fW$ar8L_ujd$^W1y)Tj$<848v={gTqK! znmgyU&pG>B@3r<3bO)(4Jlti+wAD(Js?1$Kbe(uB0-N%19s+C{fXnAnig=GFZ6!SB)?phW}DfYT&j)MUOfSE7qR zX9bDx`lMfl7M!I;qD2AT7#?}iklC}yfaen!VD@GP7e@m=6L3g*jZ5NRu)CE$KVk+v zmHCX)mvo!dI5PZ=6p3N_d_gmxJiMDe1Kk#IZ+PS-lHyx;Sha6NT>!t2=V6Sw zEv>!fo06Bop6My0jJLQp)`=v4eKzF~i=a6}9a%}9|9sT|O z(9qCzM_m^<$45Or{vz_^FVoVZbV^V-V_AncZQ4Wte@#z+J(Uo9_wE${{Z(3mB!&2^ zix)52ynnp}=b9&ZaQ*1WZYk+Iv_vV=>i2&1@yCZwoH!A`^wLXaevH4C#KnOF2c(os zQ`&8Eg!Q-id|vF_xf2R-wS2Fs>c75vbr*X`TEYYc-||3L*Ye59Nr@0A=d1ixzgoZ@|yk4)z4?g&yV2o`iXU`p2c=lP*8OL_kPOm|;a3N1_;!dT= zUALBWtwPg(^A%E;#*)*?W$XyiOns9Vc6Q^RO|fvux_E(7{cFft^#zjME6D0yMT<$6 z5Sy#js@>n;Z>3VHxTWq_0T&Y!6EfY^WeZ8GjA&1N4qf9EAKNQ>Nm-J@AHGVCnj&Yp zdwG0oN8-B3qEWSSElnT!2#jcus8q;5^C8LXPsr};r__Dx$zHuNVSv@SoIWc-x}Co7 z+nmDA%*?R5>-M#|L0&vmtI2Xtj{^yH%$xZv$ZJw2LqQNw^j`-^8kGz*%8-s{-$Q)X z-S`kW9g^)Hr<-fd89P_pSyLHh`h`k<^Atb@XM)y}yh6T1b%>ff-e5d@xM4kt1YvbyI3!4Y{i~z?8N?lLknnv$Rlx z#5)2hZNF5q?!|Ec@7}g^yEVWZ+O><~4I8X#cei!of8U$ES=DN=-CFxeEnuc8eEds2 z{S3KZ`zjesR)%WUm+{85OoKO0XBTC)qDIvt6NOZzIwgq({w&*~bk-p^o1#p?rNZ(| z@_fG*kazAl&3rga=IuA332P{`aT}%Ye~|3%K9V>zS4K z$crQm{N>B!F2CoxsPXQqZ;a)}vGiS6OpcCCU^PGZ?I>R7#+e*De9qbJKVlxjXU5v77{YJlrp+vP(^e32MMS;D zGF34q0S16lm=*)LuxK#?=OmX$5qy9jC0db;!9UBwFKtmn2J}Ct%e4N@|DfObldoMD zxH4wk)>>M=FGMCIoO9;{=k37T1kMLsyB3Q@nNFu=qtQ5JjP6f>8=ZtAgOFwV`)RaV zp#c>qV0bc7xkRR3gX-E;jOM6%D{vTUSw|F5A0+B2=Ba4{6)o^B4UlX?3=~XFz~g*f zX{yDFN>NPX(5Op(jAM;sLr?$O6LcdoTGegamQff=Xq-5SbM26p0Du1Z=jC(HJtr_o z!2Qd5t#(N%mB=dr-TIY_(=-4^)DzTAQ8teLAIbVxDCp^<2}rYf56#+k8$8n|kwrED z=!9tuxFy{d;26)Y#?9Xhz)pjal}J+q;Oo#pC!43$8@@=-Joyy;?lZqn`9k4_z#Ga8 z$Edb!s7ei6*tmdjFRMC0(>w3HLmLMM47o0qr>B2fDHZ>?3Am}!zxV*QH8DXx9Mkw^ zB_;{`Ht&y6cHMd^S}r_u<8tycm-{#fFHO<9bS}BZwjU*v15m{hRoH6s0MJ7yB z^{!Y!zwzWQdSd5Ow0^@EZVL7a;9>MJmznM3C+@k&oI7_e*-x|#z~!dyZWnPTpVGR= zSHT0P4<7oy);gJ`SD7IvjHpY;Eii3ZP5aB;zm6XGvp=V^2Y*DP2j8OEAw*XsJ-q36 zvamh4TS(LgQ+h4W7bN)>Zb&ZOYz z&X&vm?%lgXXqRS*8x$ty-p3y|y&E^0(DyOdxE2?uK8XT)91)9rMkd+QD=zkL|Vi9b7Xekojv8zi-rNE99y>TPHnfNlfON47tL?IW}pGm)pG17mdI3Q`-0ke@NTE{2Wc6 zJaNN@eFofkaKlDgw{=BXW^8*0EfKm@um9tu@0~VEdB(EpsQnuN6O?T`u2d@V=FOWE$+snLID13UZcw-C zoKi8oAyN$rk4;=W5Gr+?mH_#2{Nc&s^bk6WY{#Lc6mJ!ztEQ)?+tR)Qc#=6CK75!~ zty-mg&(jPX>VmX_!c(Qs_4LV7@!N=CG0&NSE6g9Am#9&#>K!|FX!O`; z?R*wEXK5(Z4cmdr=VN|=2*cz70S<$>1s*CKi{4&^ zMucXqZjYZWOIuAiedy33F)%Qo&YwRYxwsK(6L597$tNN2Vse zSM>dVrn`uyJ@1WUlb8MtyKqG+;JLyqeblr86c$k|iV?pJN3FTbNONtRGdym*(}fEc zG`e&#JbcIx;0Hy<__)&>o|@cW^8A0LyMQJe-hUpQoOm4?8NxPwl$Rb(HxPj`@q+@k>+^FTt8F)nLbb$6v1J15t@xuZB*wn;<@ml>mVBasr z;Xy#&xysBdBh!=r4v!u14;@lywenoo^>97#>u8H0j-NVpN@2Npwk^=6>n#&&mO6XH zIzJ$eeVl6`A*jQKJeK@N#i@hGE=|15-jqH^YQ*uGk*UdVo}QUGibanQr-Ec|sKy+w zaxuS7n5W&<#i}2(5aHDH{O4Tr!vJ1PhnfgpSf|NJg3bsq0ZXr1;t2v_ju|F>75k%= znZvHMiy6nd&l2*^EQwH4$`cLm^`n=@|EUp0RU{}JZhd(1hK`~->h2nxSWU!nqsBIl zo)0q77-gus)@rG^!HbgRV%Uf?Ha3>R7R8$?;Fq_w&O>hsu#FssX0e~@cHI>N`NG!j zwEJ6*w0dX}0T%;*=%cBrA(XK-oPd()P_h$)=0O8%$j~Yb+==5FIyFf#f)*P0In;co zc2nR?+=N`Ya;4SX-EBLL<3j3b#P*!D?L1zdhv@T|2m{Z;d%BQ-4QANuyLui610K%V z_By=umbHMvR>SD{M5FfZ*-GUM=iAbb;T4eh;dI=Ho5LR)0BhXCt&49P!J8>-Z zySu57P7`}d>zMI zhfga}cQ7Gg1WqTH&?TXykDwWNB$<&Yx^U5l(?|-BplQP#sscDK^hN!6ITEdX`}T2m zrcJWEwXiRk7bNjnE;S#@(lD@l^XQ|Gnu`}MD0qDpIZlMhr;<>^)sba62s0^*w`goY zTFfAca~2$8B6)xkGEs8k9vHF&so@_I6^H#N(ssDo!oFbeaBjL(3UmGa5%P=}O-eO7 zI;uG{V{N=6pKZ6PwaiK_yH7r>@jTD!Lrqi4WE@mM4$?*j35~STw^R-!W&sF0Jjvks z#}C0ZfhFd|lOpLkKoF&|%4dWqXA~MiFO%h-o?jp9Mbv zRN3g0xjjAbpH&{r{jwNdJE^PDFi8O4ifS(^@c9hjkLgep2&lf`)mKc?&SSwYlgr5< ziX`HZL=G)r`&ZQnuw9+q%o@n zu)#JH1VT>&7#bkZ_?vw<(#xcXV4%F^h_PbDiliIF4Fql(wYw*a0XlgO-9c(=0w&G= zfEgfIBY0hm8Ny@09CPHzkz_o=Q4%tl+WoQCcc{tZXc6g-0>9R~T6URi+g}^b?S(Ct eM1Musq5lUS{spZ5Rn^x30000 { const {image1, image2, image3, image4, image5, image6, image7, image8} = data; if(isMobile){ - imageCustomWidth = "?width=100"; + imageCustomWidth = "?width=80"; } else{ imageCustomWidth = "?width=100"; } @@ -356,24 +356,24 @@ import Layout from '../../layouts/Layout.astro'; graphics.strokePath(); if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){ - this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`}) + this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`}) } if(isMobile){ - this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`}); - this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`}); + this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`}); + this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`}); } else{ this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} @@ -438,53 +438,75 @@ import Layout from '../../layouts/Layout.astro'; // windowLoad(); submitUserData(this); }) + let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8; + + if(isMobile){ + blocks1Width1 = 180; + blocks1Width2 = 90; + blocks1Width3 = 2; + blocks1Width4 = 90; + blocks1Width5 = 180; + blocks1Width6 = 90; + blocks1Width7 = 2; + blocks1Width8 = 90; + } else{ + blocks1Width1 = 200; + blocks1Width2 = 100; + blocks1Width3 = 2; + blocks1Width4 = 100; + blocks1Width5 = 200; + blocks1Width6 = 100; + blocks1Width7 = 2; + blocks1Width8 = 100; + + } const blocks = [ { - x: displayW / 2 - 200, - y: window.innerHeight - 250, + x: displayW / 2 - blocks1Width1, + y: window.innerHeight - 290, textureKey: "blocks1", id: "block1", }, { - x: displayW / 2-100, - y: window.innerHeight - 250, + x: displayW / 2 - blocks1Width2, + y: window.innerHeight - 290, textureKey: "blocks2", id: "block2", }, { - x: displayW / 2, - y: window.innerHeight - 250, + x: displayW / blocks1Width3, + y: window.innerHeight - 290, textureKey: "blocks3", id: "block3", }, { - x: displayW / 2+100, - y: window.innerHeight - 250, + x: displayW / 2 + blocks1Width4, + y: window.innerHeight - 290, textureKey: "blocks4", id: "block4", }, { - x: displayW / 2-200, - y: window.innerHeight - 120, + x: displayW / 2 - blocks1Width5, + y: window.innerHeight - 160, textureKey: "blocks5", id: "block5", }, { - x: displayW / 2-100, - y: window.innerHeight - 120, + x: displayW / 2 - blocks1Width6, + y: window.innerHeight - 160, textureKey: "blocks6", id: "block6", }, { - x: displayW / 2, - y: window.innerHeight - 120, + x: displayW / blocks1Width7, + y: window.innerHeight - 160, textureKey: "blocks7", id: "block7", }, { - x: displayW / 2+100, - y: window.innerHeight - 120, + x: displayW / 2 + blocks1Width8, + y: window.innerHeight - 160, textureKey: "blocks8", id: "block8", }, @@ -495,7 +517,7 @@ import Layout from '../../layouts/Layout.astro'; const targetZoneBorders = []; targetZones.forEach((targetZone) => { const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); - const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale); + const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -516,7 +538,7 @@ import Layout from '../../layouts/Layout.astro'; if ( Phaser.Geom.Intersects.RectangleToRectangle( newBlock.getBounds(), - new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) + new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50) ) ) { // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` @@ -535,7 +557,7 @@ import Layout from '../../layouts/Layout.astro'; droppedOnTargetZone = true; targetZoneBorders[targetIndex].setVisible(true); - targetZoneBorders[targetIndex].setAlpha(0); + targetZoneBorders[targetIndex].setAlpha(0.5); return; } }); diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 339f28b..f0c4921 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -313,7 +313,7 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro index 1cef4bc..9fc4eb8 100644 --- a/src/pages/drag/match_phonics.astro +++ b/src/pages/drag/match_phonics.astro @@ -315,7 +315,7 @@ import Layout from '../../layouts/Layout.astro'; }, ]; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 8089a48..99b9eb5 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -315,7 +315,7 @@ import Layout from '../../layouts/Layout.astro'; }, ]; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index 1f79091..25b5695 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -361,7 +361,7 @@ import Layout from '../../layouts/Layout.astro'; ]; // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index 33ddb27..b102504 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -349,7 +349,7 @@ import Layout from '../../layouts/Layout.astro'; this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index 3180342..29f68f9 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -30,11 +30,11 @@ import Layout from '../../layouts/Layout.astro'; let formattedDateTime; let shortUniqueID; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.47; + tickIconWidth = 1.24; + cancelIconWidth = 1.08; submitWidth = 250; submitHeight = 110; noticeWidth = 100; @@ -139,7 +139,7 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro index 6355d33..fa93452 100644 --- a/src/pages/drawing/drawing_writo.astro +++ b/src/pages/drawing/drawing_writo.astro @@ -31,11 +31,11 @@ import Layout from '../../layouts/Layout.astro'; let shortUniqueID; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.47; + tickIconWidth = 1.24; + cancelIconWidth = 1.08; submitWidth = 250; submitHeight = 110; noticeWidth = 100; @@ -140,7 +140,7 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 046f930..386e59e 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -32,11 +32,11 @@ import Layout from '../../layouts/Layout.astro'; let shortUniqueID; let scoreTotal = 0; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.47; + tickIconWidth = 1.24; + cancelIconWidth = 1.08; submitWidth = 250; submitHeight = 110; noticeWidth = 100; @@ -141,7 +141,7 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 04a2d9c..8ea4093 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -32,11 +32,11 @@ import Layout from '../../layouts/Layout.astro'; let defaultColor; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.47; + tickIconWidth = 1.24; + cancelIconWidth = 1.08; submitWidth = 250; submitHeight = 110; noticeWidth = 100; @@ -45,11 +45,11 @@ import Layout from '../../layouts/Layout.astro'; downloadHeight = 200; learningWidth = 200; learningHeight = 365 - image1Width = 3.7; - image1Height = 2.5; + image1Width = 3.5; + image1Height = 2.2; image2Width = 2; image2Right = 65; - image2Height = 2; + image2Height = 1.7; image2Bottom = 110; } else { topLogoWidth = 6; @@ -154,7 +154,7 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){ diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index 4b225b0..e8c4ab2 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -32,11 +32,11 @@ import Layout from '../../layouts/Layout.astro'; let tickIconWidth; let cancelIconWidth; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.47; + tickIconWidth = 1.24; + cancelIconWidth = 1.08; submitWidth = 250; submitHeight = 110; noticeWidth = 100; @@ -141,7 +141,7 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let wrapWidth; if(isMobile){ @@ -230,7 +230,7 @@ import Layout from '../../layouts/Layout.astro'; // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // } if(isMobile){ - outlineImage.setDepth(-1).setScale(0.40); + outlineImage.setDepth(-1).setScale(0.5); }else if(isTab){ outlineImage.setDepth(-1).setScale(0.90); } else{ @@ -278,7 +278,7 @@ import Layout from '../../layouts/Layout.astro'; colorContainer.appendChild(colorPicker); // const colors = data.colors; // var colors = colorList; - let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700']; + let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700']; // const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700']; // const colors = ['#ff0000']; const buttonSize = 60; diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index 6087e4a..7afe922 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale); diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro index f2e38c2..5d72ff9 100644 --- a/src/pages/guided-tracing/1.astro +++ b/src/pages/guided-tracing/1.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro index bc8adae..b17fe7a 100644 --- a/src/pages/guided-tracing/2.astro +++ b/src/pages/guided-tracing/2.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale); diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro index b7fa87d..8947b0f 100644 --- a/src/pages/guided-tracing/3.astro +++ b/src/pages/guided-tracing/3.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 3431974..20587c9 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.astro @@ -274,7 +274,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 9925f6b..acfe4c2 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.astro @@ -275,7 +275,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro index 3a88e31..ad53094 100644 --- a/src/pages/guided-tracing/6.astro +++ b/src/pages/guided-tracing/6.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro index 3b3ab4a..f4a1faa 100644 --- a/src/pages/guided-tracing/7.astro +++ b/src/pages/guided-tracing/7.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; }); const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro index 80f0f62..c6cb622 100644 --- a/src/pages/guided-tracing/8.astro +++ b/src/pages/guided-tracing/8.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro index 58a62ce..7c4ba00 100644 --- a/src/pages/guided-tracing/9.astro +++ b/src/pages/guided-tracing/9.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index 870c542..23008fa 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index 39b5d1e..8ee87c6 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index a08c3a3..cb766fe 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro index a9f8bbb..710a7ea 100644 --- a/src/pages/guided-tracing/D.astro +++ b/src/pages/guided-tracing/D.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro index c25fd45..9db95d1 100644 --- a/src/pages/guided-tracing/E.astro +++ b/src/pages/guided-tracing/E.astro @@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro index c75a514..1196df5 100644 --- a/src/pages/guided-tracing/F.astro +++ b/src/pages/guided-tracing/F.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro index c87b17a..a28ddd5 100644 --- a/src/pages/guided-tracing/G.astro +++ b/src/pages/guided-tracing/G.astro @@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro index 1cfaaeb..174e674 100644 --- a/src/pages/guided-tracing/H.astro +++ b/src/pages/guided-tracing/H.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index 4e53a18..e7f429e 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro index 9f50156..16f9c0d 100644 --- a/src/pages/guided-tracing/J.astro +++ b/src/pages/guided-tracing/J.astro @@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro index 88d5750..61122d6 100644 --- a/src/pages/guided-tracing/K.astro +++ b/src/pages/guided-tracing/K.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro index e682f37..5e465fe 100644 --- a/src/pages/guided-tracing/L.astro +++ b/src/pages/guided-tracing/L.astro @@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro index b871abe..b67c2ec 100644 --- a/src/pages/guided-tracing/M.astro +++ b/src/pages/guided-tracing/M.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro index 52d98cd..0ebf390 100644 --- a/src/pages/guided-tracing/N.astro +++ b/src/pages/guided-tracing/N.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro index a74c3af..18e5b0b 100644 --- a/src/pages/guided-tracing/O.astro +++ b/src/pages/guided-tracing/O.astro @@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro index abf3145..426c78f 100644 --- a/src/pages/guided-tracing/P.astro +++ b/src/pages/guided-tracing/P.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro index 07ec2cc..caa9251 100644 --- a/src/pages/guided-tracing/Q.astro +++ b/src/pages/guided-tracing/Q.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro index 4dd944a..d89b14f 100644 --- a/src/pages/guided-tracing/R.astro +++ b/src/pages/guided-tracing/R.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro index f9aa0b9..feae8d6 100644 --- a/src/pages/guided-tracing/S.astro +++ b/src/pages/guided-tracing/S.astro @@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro index 2927b21..749c36e 100644 --- a/src/pages/guided-tracing/T.astro +++ b/src/pages/guided-tracing/T.astro @@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro index cff9cce..a14d39b 100644 --- a/src/pages/guided-tracing/U.astro +++ b/src/pages/guided-tracing/U.astro @@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro index b806219..f2466d1 100644 --- a/src/pages/guided-tracing/V.astro +++ b/src/pages/guided-tracing/V.astro @@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro index 4fceabc..4ac9867 100644 --- a/src/pages/guided-tracing/W.astro +++ b/src/pages/guided-tracing/W.astro @@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro index 4abca82..2adbcfe 100644 --- a/src/pages/guided-tracing/X.astro +++ b/src/pages/guided-tracing/X.astro @@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro index d0dace4..d1f683c 100644 --- a/src/pages/guided-tracing/Y.astro +++ b/src/pages/guided-tracing/Y.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale); diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro index bd9938e..ae87f3a 100644 --- a/src/pages/guided-tracing/Z.astro +++ b/src/pages/guided-tracing/Z.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index 6f281b6..8026f7f 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index b47557a..ceb4ba2 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 7a3babc..19314ae 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index cf80cb1..8922bc7 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index a99e20e..4dde5a1 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro index a5dd46c..cd0ea63 100644 --- a/src/pages/guided-tracing/f.astro +++ b/src/pages/guided-tracing/f.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro index 50d8d5e..6bf4f86 100644 --- a/src/pages/guided-tracing/g.astro +++ b/src/pages/guided-tracing/g.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro index 7b74f35..2d4953d 100644 --- a/src/pages/guided-tracing/h.astro +++ b/src/pages/guided-tracing/h.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro index 7cca21b..29bebf8 100644 --- a/src/pages/guided-tracing/i.astro +++ b/src/pages/guided-tracing/i.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro index d54be51..b75a909 100644 --- a/src/pages/guided-tracing/j.astro +++ b/src/pages/guided-tracing/j.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro index 528e162..e2a90c3 100644 --- a/src/pages/guided-tracing/k.astro +++ b/src/pages/guided-tracing/k.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; }); const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro index 724655f..0c44bee 100644 --- a/src/pages/guided-tracing/l.astro +++ b/src/pages/guided-tracing/l.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro index 2e1f061..ae72bf0 100644 --- a/src/pages/guided-tracing/m.astro +++ b/src/pages/guided-tracing/m.astro @@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro"; }); const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale); diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro index d3b2f91..a4924cd 100644 --- a/src/pages/guided-tracing/n.astro +++ b/src/pages/guided-tracing/n.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro index ad8ca3a..f640613 100644 --- a/src/pages/guided-tracing/o.astro +++ b/src/pages/guided-tracing/o.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro index 06df2f1..10422a2 100644 --- a/src/pages/guided-tracing/p.astro +++ b/src/pages/guided-tracing/p.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro index 0906178..db6a061 100644 --- a/src/pages/guided-tracing/q.astro +++ b/src/pages/guided-tracing/q.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro index bb8ba7f..aabad51 100644 --- a/src/pages/guided-tracing/r.astro +++ b/src/pages/guided-tracing/r.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro index d2607c1..f5dacfb 100644 --- a/src/pages/guided-tracing/s.astro +++ b/src/pages/guided-tracing/s.astro @@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro index 9a10fb7..af97673 100644 --- a/src/pages/guided-tracing/t.astro +++ b/src/pages/guided-tracing/t.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro index 13c38fe..041b4c8 100644 --- a/src/pages/guided-tracing/u.astro +++ b/src/pages/guided-tracing/u.astro @@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro index 3777201..7943db7 100644 --- a/src/pages/guided-tracing/v.astro +++ b/src/pages/guided-tracing/v.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro index 0988f23..7fb62e5 100644 --- a/src/pages/guided-tracing/w.astro +++ b/src/pages/guided-tracing/w.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro index fc24d86..1e833ea 100644 --- a/src/pages/guided-tracing/x.astro +++ b/src/pages/guided-tracing/x.astro @@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale); diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro index c60d818..f045b05 100644 --- a/src/pages/guided-tracing/y.astro +++ b/src/pages/guided-tracing/y.astro @@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro"; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale); diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro index ff88a8e..7f8e004 100644 --- a/src/pages/guided-tracing/z.astro +++ b/src/pages/guided-tracing/z.astro @@ -273,7 +273,7 @@ import Layout from "../../layouts/Layout.astro"; }); const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro index ac87607..ff89f42 100644 --- a/src/pages/tracing/index.astro +++ b/src/pages/tracing/index.astro @@ -69,7 +69,7 @@ function create() { .then(response => response.json()) .then(({ data }) => { const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; + const baseFontSize = 24; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', }; From 94cfda779cbc6dbf38b6b298ed39a1ca004a82dd Mon Sep 17 00:00:00 2001 From: Suvodip Date: Thu, 20 Jun 2024 22:04:02 +0530 Subject: [PATCH 02/12] new desgine for mobile --- src/pages/drawing/index.astro | 202 ++++++++++++++++++++++++++---- src/pages/drawing/v2.astro | 223 ++++++++++++++++++++++++++++------ src/pages/drawing/v3.astro | 182 ++++++++++++++++++++++++--- 3 files changed, 530 insertions(+), 77 deletions(-) diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 386e59e..79a7a76 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -131,6 +131,7 @@ import Layout from '../../layouts/Layout.astro'; this.load.image("resetIcon", '/assets/svg/reset.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg'); + this.load.image('colorButton', '/assets/color_button.png'); } function create() { @@ -200,7 +201,7 @@ import Layout from '../../layouts/Layout.astro'; // this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); } - const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); + const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline'); if(isMobile){ outlineImage.setDepth(1).setScale(0.33); }else if(isTab){ @@ -219,6 +220,23 @@ import Layout from '../../layouts/Layout.astro'; colorContainer.style.top = '10%'; colorContainer.style.flexDirection = 'column'; } + if(isMobile){ + colorContainer.style.display = 'none'; + } + + let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton'); + if(!isMobile){ + colorViewButton.setVisible(false); + } + colorViewButton.setInteractive().on('pointerdown', () => { + if(colorContainer.style.display === 'block') { + colorContainer.style.display = 'none'; + }else{ + colorContainer.style.display = 'block'; + } + }); + + // Create the color picker const colorPicker = document.createElement('input'); colorPicker.type = 'color'; @@ -257,6 +275,7 @@ import Layout from '../../layouts/Layout.astro'; // Create a container div for the color buttons const colorButtonsContainer = document.createElement('div'); colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally + colorButtonsContainer.style.flexDirection = 'column'; //** */ if(!isMobile){ colorButtonsContainer.style.flexDirection = 'column'; } @@ -281,19 +300,137 @@ import Layout from '../../layouts/Layout.astro'; // ${color} // Create the SVG element with dynamic fill color if (!isMobile) { - pencilSize = '150px'; + // pencilSize = '150px'; button.style.width = `${buttonSize}px`; button.style.height = `${buttonSize}px`; } else { - pencilSize = '40px'; + // pencilSize = '150px'; + // button.style.width = `${buttonSize}px`; + // button.style.height = `${buttonSize}px`; + // pencilSize = '40px'; button.style.width = `45px`; button.style.height = `45px`; } - if(isMobile){ - button.innerHTML = ` `; - } else{ - button.innerHTML = ` ` - } + button.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + // button.innerHTML = ` ` + // if(isMobile){ + // button.innerHTML = ` `; + // } else{ + // button.innerHTML = ` ` + // } //** */ button.style.marginRight = `${buttonSpacing}px`; button.addEventListener('click', () => { // Remove the border from the previously selected button, if any @@ -314,10 +451,14 @@ import Layout from '../../layouts/Layout.astro'; button.style.marginTop = '5px'; button.style.marginBottom = '5px'; } else{ - button.style.border = "2px solid"; - button.style.borderColor = color; - button.style.boxShadow = '5px 10px 30px #7c4c2390'; - button.style.borderRadius = '20%'; + button.style.transform = 'translateX(0.75rem)'; + button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration + button.style.marginTop = '5px'; + button.style.marginBottom = '5px'; + // button.style.border = "2px solid"; + // button.style.borderColor = color; + // button.style.boxShadow = '5px 10px 30px #7c4c2390'; + // button.style.borderRadius = '20%'; } // Update the selectedButton variable to the current button selectedButton = button; @@ -331,7 +472,7 @@ import Layout from '../../layouts/Layout.astro'; colorPreview.style.backgroundColor = 'blue'; // Append the color buttons container to the color container colorContainer.appendChild(colorButtonsContainer); - // Append the color container to the document body + // Append the color container to the document body document.body.appendChild(colorContainer); // Create a container div for both buttons const buttonsContainer = document.createElement('div'); @@ -359,7 +500,9 @@ import Layout from '../../layouts/Layout.astro'; // clearButton.style.marginRight = '10px'; if(isMobile){ clearButton.style.padding = '2px 8px'; - buttonsContainer.style.top = '17%'; + clearButton.style.display = 'none'; + buttonsContainer.style.top = '9.5%'; + buttonsContainer.style.marginLeft = '30px'; } else { clearButton.style.padding = '5px 10px'; } @@ -369,6 +512,13 @@ import Layout from '../../layouts/Layout.astro'; clearButton.addEventListener('click', () => { clearDrawing(); }); + colorViewButton.setInteractive().on('pointerdown', () => { + if(clearButton.style.display === 'block') { + clearButton.style.display = 'none'; + }else{ + clearButton.style.display = 'block'; + } + }) // Create the Eraser button const eraserButton = document.createElement('button'); // eraserButton.textContent = 'Eraser'; @@ -382,7 +532,7 @@ import Layout from '../../layouts/Layout.astro'; eraserButton.style.marginBottom = '0px'; if(isMobile){ eraserButton.style.padding = '4px 4px'; - } else { + }else{ eraserButton.style.padding = '5px 5px'; eraserButton.style.marginTop = '15px'; eraserButton.style.marginBottom = '15px'; @@ -405,34 +555,38 @@ import Layout from '../../layouts/Layout.astro'; }); // Add the Clear and Eraser buttons to the container buttonsContainer.appendChild(clearButton); + // colorPicker.appendChild(clearButton); // buttonsContainer.appendChild(eraserButton).setVisible; const sliderContainer = document.createElement('div'); + sliderContainer.style.backgroundColor = '#fff'; + sliderContainer.className = 'slider-container'; // sliderContainer.style.position = 'absolute'; // sliderContainer.style.top = '25%'; sliderContainer.style.left = '100%'; - if(!isMobile){ - sliderContainer.style.marginLeft = '-75px' - sliderContainer.style.marginTop = '15px' - } - // Create the slider const slider = document.createElement('input'); slider.type = 'range'; slider.min = '2'; slider.max = '80'; slider.value = brushSize.toString(); - slider.className = 'slider'; + slider.style.transform = 'rotate(-90deg)'; + slider.style.marginTop = '80px'; + slider.style.marginLeft = '-40px'; + if(isMobile){ + + } // slider.style.width = `${window.innerWidth / 2}px`; slider.addEventListener('input', (event) => { brushSize = parseInt(event.target.value); slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`; slider.style.backgroundColor = '#05b3a4'; }); - - sliderContainer.appendChild(slider); - buttonsContainer.appendChild(sliderContainer); + // colorContainer colorButtonsContainer + colorButtonsContainer.appendChild(slider); + // sliderContainer.appendChild(slider); + // buttonsContainer.appendChild(sliderContainer); this.input.on('pointerdown', () => { isDrawing = true; diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 8ea4093..c2d9d81 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -32,7 +32,7 @@ import Layout from '../../layouts/Layout.astro'; let defaultColor; if(isMobile){ - topLogoWidth = 4.5; + topLogoWidth = 4.5; muteIconWidth = 1.8; resetIconWidth = 1.47; tickIconWidth = 1.24; @@ -144,6 +144,7 @@ import Layout from '../../layouts/Layout.astro'; this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.image('waxTexture', '/assets/texture.png'); + this.load.image('colorButton', '/assets/color_button.png'); } function create() { @@ -258,6 +259,9 @@ import Layout from '../../layouts/Layout.astro'; const colorContainer = document.createElement('div'); colorContainer.style.position = 'absolute'; colorContainer.style.top = '13%'; + if(isMobile){ + colorContainer.style.marginTop = '13%'; + } colorContainer.style.left = '10px'; colorContainer.style.display = 'flex'; colorContainer.style.marginBottom = '15px'; @@ -265,14 +269,48 @@ import Layout from '../../layouts/Layout.astro'; colorContainer.style.top = '25%'; colorContainer.style.flexDirection = 'column'; } - var colors = colorList; + + if(isMobile){ + colorContainer.style.display = 'none'; + } + + let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton'); + if(!isMobile){ + colorViewButton.setVisible(false); + } + + colorViewButton.setInteractive().on('pointerdown', () => { + if(colorContainer.style.display === 'block') { + colorContainer.style.display = 'none'; + }else{ + colorContainer.style.display = 'block'; + } + }); + + colorViewButton.setInteractive().on('pointerdown', () => { + if(buttonsContainer.style.display === 'block') { + buttonsContainer.style.display = 'none'; + }else{ + buttonsContainer.style.display = 'block'; + } + }); + var colors = colorList; const buttonSize = 60; const buttonSpacing = 15; + const clearEraserContainer = document.createElement('div'); + clearEraserContainer.style.display = 'flex'; + clearEraserContainer.style.flexDirection = 'row'; + if(isMobile){ + clearEraserContainer.style.marginTop = '-60px'; + }else{ + clearEraserContainer.style.marginTop = '40px'; + } const colorButtonsContainer = document.createElement('div'); colorButtonsContainer.style.display = 'flex'; - if(!isMobile){ - colorButtonsContainer.style.flexDirection = 'column'; - } + colorButtonsContainer.style.flexDirection = 'column'; + // if(!isMobile){ + // colorButtonsContainer.style.flexDirection = 'column'; + // } const buttonX = 300; // const colorPaletteY = drawingZone.y - 20; let selectedButton = null; @@ -286,21 +324,135 @@ import Layout from '../../layouts/Layout.astro'; button.style.border = 'none'; button.style.outline = 'none'; if (!isMobile) { - pencilSize = '40px'; + // pencilSize = '40px'; button.style.width = `${buttonSize}px`; button.style.height = `${buttonSize}px`; } else { - pencilSize = '40px'; + // pencilSize = '40px'; button.style.width = `45px`; button.style.height = `45px`; } - if(isMobile){ - button.innerHTML = ` `; - button.style.boxShadow = '5px 10px 30px #7c4c2390'; - button.style.borderRadius = '20%'; - } else{ - button.innerHTML = ` ` - } + button.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + // if(isMobile){ + // button.innerHTML = ` `; + // button.style.boxShadow = '5px 10px 30px #7c4c2390'; + // button.style.borderRadius = '20%'; + // } else{ + // button.innerHTML = ` ` + // } button.style.marginRight = `${buttonSpacing}px`; button.addEventListener('click', () => { if (selectedButton) { @@ -310,10 +462,9 @@ import Layout from '../../layouts/Layout.astro'; selectedButton.style.marginTop = '0px'; selectedButton.style.marginBottom = '0px'; } - if(isMobile){ - button.style.border = "2px solid"; - button.style.borderColor = color; - } + // if(isMobile){ + // button.style.border = `2px solid ${color}`; + // } defaultColor = color; button.style.scale = '1.1'; if(!isMobile){ @@ -338,7 +489,7 @@ import Layout from '../../layouts/Layout.astro'; const buttonsContainer = document.createElement('div'); buttonsContainer.style.position = 'absolute'; buttonsContainer.style.display = 'flex'; - buttonsContainer.style.flexDirection = 'row'; + buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.top = '0%'; buttonsContainer.style.marginTop = '30px'; if(!isMobile){ @@ -350,6 +501,9 @@ import Layout from '../../layouts/Layout.astro'; } else{ buttonsContainer.style.left = '-20px'; } + if(isMobile){ + buttonsContainer.style.display = 'none'; + } document.body.appendChild(buttonsContainer); // Create the Clear button @@ -358,7 +512,7 @@ import Layout from '../../layouts/Layout.astro'; // // clearButton.style.border = '3px solid blue'; // clearButton.style.color = 'blue'; // clearButton.style.width = 'fit-content'; - clearButton.style.marginLeft = '30px'; + // clearButton.style.marginLeft = '30px'; if(isMobile){ clearButton.style.padding = '2px 8px'; buttonsContainer.style.top = '17%'; @@ -377,17 +531,8 @@ import Layout from '../../layouts/Layout.astro'; eraserButton.innerHTML = ''; eraserButton.style.color = 'blue'; eraserButton.style.width = 'fit-content'; - eraserButton.style.marginRight = '15px'; - // eraserButton.style.marginTop = '0px'; - eraserButton.style.marginBottom = '0px'; - if(isMobile){ - eraserButton.style.padding = '4px 4px'; - } else { - eraserButton.style.padding = '5px 5px'; - eraserButton.style.marginTop = '15px'; - eraserButton.style.marginBottom = '15px'; - eraserButton.style.marginLeft = '30px'; - } + eraserButton.style.marginLeft = '30px'; + eraserButton.style.fontWeight = 'bold'; eraserButton.style.borderRadius = '20%'; eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390'; @@ -405,8 +550,10 @@ import Layout from '../../layouts/Layout.astro'; } }); // Add the Clear and Eraser buttons to the container - buttonsContainer.appendChild(clearButton); - buttonsContainer.appendChild(eraserButton); + clearEraserContainer.appendChild(eraserButton); + clearEraserContainer.appendChild(clearButton); + // buttonsContainer.appendChild(clearButton); + buttonsContainer.appendChild(clearEraserContainer); const sliderContainer = document.createElement('div'); sliderContainer.className = 'slider-container'; @@ -414,7 +561,7 @@ import Layout from '../../layouts/Layout.astro'; if(isMobile){ sliderContainer.style.marginTop = '10px'; } else{ - sliderContainer.style.marginLeft = '20px'; + sliderContainer.style.marginLeft = '10px'; } sliderContainer.style.left = '100%'; @@ -425,6 +572,9 @@ import Layout from '../../layouts/Layout.astro'; slider.max = '80'; slider.value = brushSize.toString(); slider.className = 'slider'; + slider.style.transform = 'rotate(-90deg)'; + slider.style.marginTop = '80px'; + slider.style.marginLeft = '-40px'; // slider.style.width = `${window.innerWidth / 2}px`; slider.addEventListener('input', (event) => { brushSize = parseInt(event.target.value); @@ -432,8 +582,9 @@ import Layout from '../../layouts/Layout.astro'; slider.style.backgroundColor = '#05b3a4'; }); - sliderContainer.appendChild(slider); - buttonsContainer.appendChild(sliderContainer); + // sliderContainer.appendChild(slider); + // buttonsContainer.appendChild(sliderContainer); + colorButtonsContainer.appendChild(slider); this.input.on('pointerdown', () => { isDrawing = true; diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index e8c4ab2..9d870f6 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -131,6 +131,7 @@ import Layout from '../../layouts/Layout.astro'; this.load.image("resetIcon", '/assets/svg/reset.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg'); + this.load.image('colorButton', '/assets/color_button.png'); } function create() { @@ -240,7 +241,10 @@ import Layout from '../../layouts/Layout.astro'; graphics = this.add.graphics(); const colorContainer = document.createElement('div'); colorContainer.style.position = 'absolute'; - colorContainer.style.top = '13%'; + // colorContainer.style.top = '13%'; + if(isMobile){ + colorContainer.style.marginTop = '13%'; + } colorContainer.style.left = '10px'; colorContainer.style.display = 'flex'; colorContainer.style.marginBottom = '15px'; @@ -248,6 +252,25 @@ import Layout from '../../layouts/Layout.astro'; colorContainer.style.top = '25%'; colorContainer.style.flexDirection = 'column'; } + + if(isMobile){ + colorContainer.style.display = 'none'; + } + + let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton'); + if(!isMobile){ + colorViewButton.setVisible(false); + } + + colorViewButton.setInteractive().on('pointerdown', () => { + if(colorContainer.style.display === 'block') { + colorContainer.style.display = 'none'; + }else{ + colorContainer.style.display = 'block'; + } + }); + + // Create the color picker const colorPicker = document.createElement('input'); colorPicker.type = 'color'; @@ -286,8 +309,9 @@ import Layout from '../../layouts/Layout.astro'; // Create a container div for the color buttons const colorButtonsContainer = document.createElement('div'); colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally + colorButtonsContainer.style.flexDirection = 'column'; if(!isMobile){ - colorButtonsContainer.style.flexDirection = 'column'; + // colorButtonsContainer.style.flexDirection = 'column'; } // Align the color buttons to the left of the viewport const buttonX = 30; // Adjusted position (e.g., 10px from the left) @@ -305,11 +329,7 @@ import Layout from '../../layouts/Layout.astro'; // Remove any border or outline styles button.style.border = 'none'; button.style.outline = 'none'; - - // Other button styles remain the same - // ${color} - // Create the SVG element with dynamic fill color - if (!isMobile) { + if (!isMobile) { pencilSize = '150px'; button.style.width = `${buttonSize}px`; button.style.height = `${buttonSize}px`; @@ -318,13 +338,141 @@ import Layout from '../../layouts/Layout.astro'; button.style.width = `45px`; button.style.height = `45px`; } - if(isMobile){ - button.innerHTML = ` `; - } else{ - // button.innerHTML = ` `; - button.innerHTML = ` ` - } + button.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + + // Other button styles remain the same + // ${color} + // Create the SVG element with dynamic fill color + // if (!isMobile) { + // pencilSize = '150px'; + // button.style.width = `${buttonSize}px`; + // button.style.height = `${buttonSize}px`; + // } else { + // pencilSize = '40px'; + // button.style.width = `45px`; + // button.style.height = `45px`; + // } + // if(isMobile){ + // button.innerHTML = ` `; + // } else{ + // // button.innerHTML = ` `; + + // button.innerHTML = ` ` + // } button.style.marginRight = `${buttonSpacing}px`; button.addEventListener('click', () => { // Remove the border from the previously selected button, if any @@ -345,10 +493,10 @@ import Layout from '../../layouts/Layout.astro'; button.style.marginTop = '5px'; button.style.marginBottom = '5px'; } else{ - button.style.border = "2px solid"; - button.style.borderColor = color; - button.style.boxShadow = '5px 10px 30px #7c4c2390'; - button.style.borderRadius = '20%'; + // button.style.border = "2px solid"; + // button.style.borderColor = color; + // button.style.boxShadow = '5px 10px 30px #7c4c2390'; + // button.style.borderRadius = '20%'; } // Update the selectedButton variable to the current button selectedButton = button; From 64ab2bacd4b307bf5d69f2071037e6a69998735e Mon Sep 17 00:00:00 2001 From: Suvodip Date: Fri, 21 Jun 2024 20:43:54 +0530 Subject: [PATCH 03/12] new desgine and some little changes others game previous desgine --- info.txt | 1 + src/pages/cross/cross_phonics_v1.astro | 41 ++- src/pages/cross/cross_phonics_v2.astro | 59 ++-- src/pages/cross/v1.astro | 17 +- src/pages/cross/v2.astro | 61 +++-- src/pages/cross/v3.astro | 5 +- src/pages/drag/dragdrop_phonics.astro | 8 +- src/pages/drag/index.astro | 15 +- src/pages/drag/match_phonics.astro | 26 +- src/pages/drag/v2.astro | 28 +- src/pages/drag/v3.astro | 43 +-- src/pages/drag/v4.astro | 89 +++--- src/pages/drawing/drawing_phonics.astro | 335 ++++++++++++++++++----- src/pages/drawing/drawing_writo.astro | 345 +++++++++++++++++++----- src/pages/drawing/v3.astro | 65 +++-- src/pages/tick/tick_phonics_v1.astro | 41 ++- src/pages/tick/tick_phonics_v2.astro | 59 ++-- src/pages/tick/tick_phonics_v3.astro | 4 +- src/pages/tick/v1.astro | 5 +- src/pages/tick/v2.astro | 65 +++-- src/pages/tick/v3.astro | 14 +- 21 files changed, 904 insertions(+), 422 deletions(-) create mode 100644 info.txt diff --git a/info.txt b/info.txt new file mode 100644 index 0000000..1d7ca1a --- /dev/null +++ b/info.txt @@ -0,0 +1 @@ +1. Auto brake line Drag v4 Left & Right Heading. \ No newline at end of file diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro index 482b675..32c8bee 100644 --- a/src/pages/cross/cross_phonics_v1.astro +++ b/src/pages/cross/cross_phonics_v1.astro @@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
-
+
@@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";

--> -

+

-
-
-
@@ -257,7 +257,6 @@ import Layout from "../../layouts/Layout.astro"; text-align: center; font-weight: bold; color: #7C4C23; - font-size: 20px; padding-top: 10px; } #LearningArea, #LearningSubArea_copy{ diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro index 4d1a120..a1480d7 100644 --- a/src/pages/cross/cross_phonics_v2.astro +++ b/src/pages/cross/cross_phonics_v2.astro @@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
-
+
@@ -24,63 +24,63 @@ import Layout from "../../layouts/Layout.astro";

--> -

+

-
-
-
@@ -292,7 +292,6 @@ import Layout from "../../layouts/Layout.astro"; text-align: center; font-weight: bold; color: #7C4C23; - font-size: 20px; padding-top: 10px; } #LearningArea, #LearningSubArea_copy{ diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro index bd4eadb..7eb5346 100644 --- a/src/pages/cross/v1.astro +++ b/src/pages/cross/v1.astro @@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
-
+
@@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";

--> -

+

@@ -258,7 +258,6 @@ import Layout from "../../layouts/Layout.astro"; text-align: center; font-weight: bold; color: #7C4C23; - font-size: 20px; padding-top: 10px; } #LearningArea, #LearningSubArea_copy{ diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro index 1d1fde9..2d91e54 100644 --- a/src/pages/cross/v2.astro +++ b/src/pages/cross/v2.astro @@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
-
+
@@ -24,70 +24,70 @@ import Layout from "../../layouts/Layout.astro";

--> -

+

-
-
-

- +
@@ -292,7 +292,6 @@ import Layout from "../../layouts/Layout.astro"; text-align: center; font-weight: bold; color: #7C4C23; - font-size: 20px; padding-top: 10px; } #LearningArea, #LearningSubArea_copy{ diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro index ce283ea..19587bf 100644 --- a/src/pages/cross/v3.astro +++ b/src/pages/cross/v3.astro @@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
-
+
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
-

+

@@ -245,7 +245,6 @@ import Layout from "../../layouts/Layout.astro"; text-align: center; font-weight: bold; color: #7C4C23; - font-size: 20px; padding-top: 10px; } #LearningArea, #LearningSubArea{ diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro index 21172ac..bdb2662 100644 --- a/src/pages/drag/dragdrop_phonics.astro +++ b/src/pages/drag/dragdrop_phonics.astro @@ -71,11 +71,11 @@ import Layout from '../../layouts/Layout.astro'; let retryButton; let blockMatches; if(isMobile){ - topLogoWidth = 4.5; + topLogoWidth = 4.5; muteIconWidth = 1.8; - resetIconWidth = 1.47; - tickIconWidth = 1.24; - cancelIconWidth = 1.08; + resetIconWidth = 1.5; + tickIconWidth = 1.28; + cancelIconWidth = 1.12; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index f0c4921..13d2360 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -70,11 +70,11 @@ import Layout from '../../layouts/Layout.astro'; let cancelIconWidth; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.5; + tickIconWidth = 1.28; + cancelIconWidth = 1.12; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -314,10 +314,11 @@ import Layout from '../../layouts/Layout.astro'; // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const baseFontSize = 24; - const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940}; + const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize; let wrapWidth; if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} - const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); + const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); blockMatches = [ { blockName: "blocks1", diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro index 9fc4eb8..c39f325 100644 --- a/src/pages/drag/match_phonics.astro +++ b/src/pages/drag/match_phonics.astro @@ -69,11 +69,11 @@ import Layout from '../../layouts/Layout.astro'; let tickIconWidth; let cancelIconWidth; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.5; + tickIconWidth = 1.28; + cancelIconWidth = 1.12; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -314,12 +314,20 @@ import Layout from '../../layouts/Layout.astro'; targetName: `target${data.right_match4}`, }, ]; + let wrapWidth; + let textSizeScale; + if(isMobile){ + wrapWidth = 10; + textSizeScale = 540 + }else{ + wrapWidth = 200; + textSizeScale = 940 + }; + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const baseFontSize = 24; - const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; - let wrapWidth; - if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} - const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); + const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize; + const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // Left Image Name diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 99b9eb5..78ea0d0 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -69,11 +69,11 @@ import Layout from '../../layouts/Layout.astro'; let tickIconWidth; let cancelIconWidth; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.5; + tickIconWidth = 1.28; + cancelIconWidth = 1.12; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -314,12 +314,20 @@ import Layout from '../../layouts/Layout.astro'; targetName: `target${data.right_match4}`, }, ]; - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 24; - const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; - if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} - const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); + let textSizeScale; + if(isMobile){ + wrapWidth = 10; + textSizeScale = 540 + } else{ + wrapWidth = 200; + textSizeScale = 940 + } + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + const baseFontSize = 24; + const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize; + const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // Left Image Name diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index 25b5695..4fc4b5d 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -70,19 +70,21 @@ import Layout from '../../layouts/Layout.astro'; let cancelIconWidth; let retryButton; let blockMatches; + let retryButtonWidth; + let leftTargetZoneW; if(isMobile){ - topLogoWidth = 5; - muteIconWidth = 2; - resetIconWidth = 1.6; - tickIconWidth = 1.34; - cancelIconWidth = 1.16; + topLogoWidth = 4.5; + muteIconWidth = 1.8; + resetIconWidth = 1.5; + tickIconWidth = 1.28; + cancelIconWidth = 1.12; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; buttonHeight = 0; retryButtonWidth = window.innerWidth / 2 - 140; retryButtonHeight = window.innerHeight - 50; - leftTargetZoneW = window.innerWidth * 0.9 - 40; + leftTargetZoneW = window.innerWidth * 0.9 - 30; rightTargetZoneW = window.innerWidth / 6; } else { topLogoWidth = 6; @@ -131,19 +133,19 @@ import Layout from '../../layouts/Layout.astro'; }, { x: rightTargetZoneW, - y: 340, + y: 330, name: "target2", block: null, }, { x: rightTargetZoneW, - y: 510, + y: 480, name: "target3", block: null, }, { x: rightTargetZoneW, - y: 680, + y: 650, name: "target4", block: null, }, @@ -155,19 +157,19 @@ import Layout from '../../layouts/Layout.astro'; }, { x: leftTargetZoneW, - y: 340, + y: 330, name: "target6", block: null, }, { x: leftTargetZoneW, - y: 510, + y: 480, name: "target7", block: null, }, { x: leftTargetZoneW, - y: 680, + y: 650, name: "target8", block: null, }, @@ -360,12 +362,21 @@ import Layout from '../../layouts/Layout.astro'; } ]; // console.log(data) + + + let wrapWidth; + let textSizeScale; + if(isMobile){ + wrapWidth = 10; + textSizeScale = 540; + } else{ + wrapWidth = 200; + textSizeScale = 940 + } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const baseFontSize = 24; - const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; - let wrapWidth; - if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} - const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); + const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize; + const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); }) .catch(error => { console.error('Error fetching initial data:', error); diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index b102504..e39f7e1 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro'; + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -