diff --git a/public/assets/animated-letter/small_t.mp4 b/public/assets/animated-letter/small_t.mp4 old mode 100755 new mode 100644 index 3cb4e47..f1ee3a1 Binary files a/public/assets/animated-letter/small_t.mp4 and b/public/assets/animated-letter/small_t.mp4 differ diff --git a/public/assets/customBG.jpg b/public/assets/customBG.jpg new file mode 100644 index 0000000..ae83eae Binary files /dev/null and b/public/assets/customBG.jpg differ diff --git a/public/assets/pencil.png b/public/assets/pencil.png new file mode 100644 index 0000000..dd2a6d1 Binary files /dev/null and b/public/assets/pencil.png differ diff --git a/public/assets/small-letter/as.svg b/public/assets/small-letter/as.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/as_l1.svg b/public/assets/small-letter/as_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/as_l2.svg b/public/assets/small-letter/as_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/bs.svg b/public/assets/small-letter/bs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/bs_l1.svg b/public/assets/small-letter/bs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/bs_l2.svg b/public/assets/small-letter/bs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/cs.svg b/public/assets/small-letter/cs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ds.svg b/public/assets/small-letter/ds.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ds_l1.svg b/public/assets/small-letter/ds_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ds_l2.svg b/public/assets/small-letter/ds_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/es.svg b/public/assets/small-letter/es.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/es_l1.svg b/public/assets/small-letter/es_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/es_l2.svg b/public/assets/small-letter/es_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/fs.svg b/public/assets/small-letter/fs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/fs_l1.svg b/public/assets/small-letter/fs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/fs_l2.svg b/public/assets/small-letter/fs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/gs.svg b/public/assets/small-letter/gs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/gs_l1.svg b/public/assets/small-letter/gs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/gs_l2.svg b/public/assets/small-letter/gs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/hs.svg b/public/assets/small-letter/hs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/hs_l1.svg b/public/assets/small-letter/hs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/hs_l2.svg b/public/assets/small-letter/hs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/is.svg b/public/assets/small-letter/is.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/is_l1.svg b/public/assets/small-letter/is_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/is_l2.svg b/public/assets/small-letter/is_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/js.svg b/public/assets/small-letter/js.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/js_l1.svg b/public/assets/small-letter/js_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/js_l2.svg b/public/assets/small-letter/js_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks.svg b/public/assets/small-letter/ks.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks_l1.svg b/public/assets/small-letter/ks_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks_l2.svg b/public/assets/small-letter/ks_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks_l3.svg b/public/assets/small-letter/ks_l3.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ls.svg b/public/assets/small-letter/ls.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms _l1.svg b/public/assets/small-letter/ms _l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms.svg b/public/assets/small-letter/ms.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms_l1.svg b/public/assets/small-letter/ms_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms_l2.svg b/public/assets/small-letter/ms_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms_l3.svg b/public/assets/small-letter/ms_l3.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ns.svg b/public/assets/small-letter/ns.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ns_l1.svg b/public/assets/small-letter/ns_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ns_l2.svg b/public/assets/small-letter/ns_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/os.svg b/public/assets/small-letter/os.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ps.svg b/public/assets/small-letter/ps.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ps_l1.svg b/public/assets/small-letter/ps_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ps_l2.svg b/public/assets/small-letter/ps_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/qs.svg b/public/assets/small-letter/qs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/qs_l1.svg b/public/assets/small-letter/qs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/qs_l2.svg b/public/assets/small-letter/qs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/rs.svg b/public/assets/small-letter/rs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/rs_l1.svg b/public/assets/small-letter/rs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/rs_l2.svg b/public/assets/small-letter/rs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ss.svg b/public/assets/small-letter/ss.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ts.svg b/public/assets/small-letter/ts.svg old mode 100755 new mode 100644 index 02345f1..7ea5d57 --- a/public/assets/small-letter/ts.svg +++ b/public/assets/small-letter/ts.svg @@ -7,10 +7,11 @@ viewBox="0 0 100 100" version="1.1" id="svg5" - sodipodi:docname="as.svg" - inkscape:export-filename="ts.svg" + sodipodi:docname="ts_l2.svg" + inkscape:export-filename="ts_l2.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" + inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -28,12 +29,12 @@ showgrid="false" showguides="true" inkscape:zoom="1.6295423" - inkscape:cx="47.252532" - inkscape:cy="206.19287" + inkscape:cx="125.49536" + inkscape:cy="151.88314" inkscape:window-width="1920" - inkscape:window-height="1007" - inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-height="1027" + inkscape:window-x="-8" + inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg5"> - - + + 1 - - + y="26.370642" + id="text9342" + transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)">1 + + + + transform="translate(-1.0583333,-0.52916667)" + style="display:inline"> + transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)" + style="display:inline"> - - - + id="g18882" + style="display:inline"> + d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" + id="path127" + sodipodi:nodetypes="ccc" /> - diff --git a/public/assets/small-letter/ts_l2.svg b/public/assets/small-letter/ts_l2.svg old mode 100755 new mode 100644 index 5bb0835..220fef0 --- a/public/assets/small-letter/ts_l2.svg +++ b/public/assets/small-letter/ts_l2.svg @@ -7,10 +7,11 @@ viewBox="0 0 100 100" version="1.1" id="svg5" - sodipodi:docname="as.svg" - inkscape:export-filename="ts-l2.svg" + sodipodi:docname="ts_l2.svg" + inkscape:export-filename="ts-l3.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" + inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -28,12 +29,12 @@ showgrid="false" showguides="true" inkscape:zoom="1.6295423" - inkscape:cx="47.252532" - inkscape:cy="206.19287" + inkscape:cx="125.49536" + inkscape:cy="151.88314" inkscape:window-width="1920" - inkscape:window-height="1007" - inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-height="1027" + inkscape:window-x="-8" + inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg5"> + d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" + id="path127" + sodipodi:nodetypes="ccc" /> + transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)" + style="display:inline"> pencil \ No newline at end of file diff --git a/public/assets/svg/retry.svg b/public/assets/svg/retry.svg new file mode 100644 index 0000000..4aa9f52 --- /dev/null +++ b/public/assets/svg/retry.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/texture.png b/public/assets/texture.png new file mode 100644 index 0000000..ea2d44b Binary files /dev/null and b/public/assets/texture.png differ diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 4b6d7ce..f5d09f4 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,169 +1,5 @@ - \ No newline at end of file +
+
+ +
+
\ No newline at end of file diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue index 04b163e..d722c13 100644 --- a/src/components/MainHeader.vue +++ b/src/components/MainHeader.vue @@ -1,216 +1,3 @@ - - \ No newline at end of file +
Header
+ \ No newline at end of file diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro new file mode 100644 index 0000000..dc177bb --- /dev/null +++ b/src/pages/cross/cross_phonics_v1.astro @@ -0,0 +1,276 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Cross

+ +
+ +

+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro new file mode 100644 index 0000000..e0212ea --- /dev/null +++ b/src/pages/cross/cross_phonics_v2.astro @@ -0,0 +1,310 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Cross

+ +
+ +

+
+
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro new file mode 100644 index 0000000..ae1cc8c --- /dev/null +++ b/src/pages/cross/v1.astro @@ -0,0 +1,276 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Cross

+ +
+ +

+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro new file mode 100644 index 0000000..a13c3e7 --- /dev/null +++ b/src/pages/cross/v2.astro @@ -0,0 +1,310 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Cross

+ +
+ +

+
+
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro new file mode 100644 index 0000000..ccadb6e --- /dev/null +++ b/src/pages/cross/v3.astro @@ -0,0 +1,263 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + + +
+
+
+
+
+

Tick

+ +
+
+

+ +
+
+ +

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/drag/MyGame.mjs b/src/pages/drag/MyGame.mjs deleted file mode 100644 index 8882c36..0000000 --- a/src/pages/drag/MyGame.mjs +++ /dev/null @@ -1,272 +0,0 @@ -import { assetsList, submitButton, targetZones, isMatch, displayResult } from "./index.astro.inline.mjs"; - -export class MyGame extends Phaser.Scene { -constructor() { -super(); -} -preload() { -var progressBar = this.add.graphics(); -var progressBox = this.add.graphics(); -progressBox.fillStyle(2236962, 0.8); -progressBox.fillRect(240, 270, 320, 50); - -var width = this.cameras.main.width; -var height = this.cameras.main.height; -var loadingText = this.make.text({ -x: width / 2, -y: height / 2 - 50, -text: 'Loading...', -style: { -font: '20px monospace', -fill: '#ffffff' -} -}); -loadingText.setOrigin(0.5, 0.5); -var percentText = this.make.text({ -x: width / 2, -y: height / 2 - 5, -text: '0%', -style: { -font: '18px monospace', -fill: '#ffffff' -} -}); -percentText.setOrigin(0.5, 0.5); -var assetText = this.make.text({ -x: width / 2, -y: height / 2 + 50, -text: '', -style: { -font: '18px monospace', -fill: '#ffffff' -} -}); -assetText.setOrigin(0.5, 0.5); -this.load.on('progress', function (value) { -percentText.setText(parseInt(value * 100) + '%'); -progressBar.clear(); -progressBar.fillStyle(16777215, 1); -progressBar.fillRect(250, 280, 300 * value, 30); -}); -this.load.on('fileprogress', function (file) { -assetText.setText('Loading asset: ' + file.key); -}); -this.load.on('complete', function () { -progressBar.destroy(); -progressBox.destroy(); -loadingText.destroy(); -percentText.destroy(); -assetText.destroy(); -}); -// this.load.image('logo', 'zenvalogo.png'); -for (var i = 0; i < 5; i++) { -this.load.image('logo' + i, '/assets/background.jpg'); -} -this.load.image("topMatch", "/assets/top_match.jpg"); -this.load.image("topLogo", "/assets/top_logo.jpg"); -this.load.image("tick", '/assets/tick.png'); -// this.load.image("bg", '/assets/bgwhite.jpg'); -// this.load.image("target1", assetsList.right_image1); -// this.load.image("target2", '/assets/hay.png'); -// this.load.image("target3", '/assets/mat.png'); -// this.load.image("target4", '/assets/star.png'); -this.load.image("border", '/assets/squar.png'); -this.load.spritesheet("target1", assetsList.right_image1, { -frameWidth: 100, -frameHeight: 100, -}); -this.load.spritesheet("target2", assetsList.right_image2, { -frameWidth: 100, -frameHeight: 100, -}); -this.load.spritesheet("target3", assetsList.right_image3, { -frameWidth: 100, -frameHeight: 100, -}); -this.load.spritesheet("target4", assetsList.right_image4, { -frameWidth: 100, -frameHeight: 100, -}); - -this.load.spritesheet("blocks1", assetsList.left_image1, { -frameWidth: 100, -frameHeight: 100, -}); -this.load.spritesheet("blocks2", assetsList.left_image2, { -frameWidth: 100, -frameHeight: 100, -}); -this.load.spritesheet("blocks3", assetsList.left_image3, { -frameWidth: 100, -frameHeight: 100, -}); -this.load.spritesheet("blocks4", assetsList.left_image4, { -frameWidth: 100, -frameHeight: 100, -}); -} -create() { -const params = new URLSearchParams(window.location.search); -const paramsID = params.get('id'); -fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) -.then(response => response.json()) -.then(({ data }) => { -const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; -// Base font size for your text -const baseFontSize = 20; -// Calculate responsive font size based on screen width -const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width -const descrptText = this.add.text(screenCenterX, 70, data.description, { -font: `600 ${responsiveFontSize}px Quicksand`, -fill: '#7c4c23', -}).setOrigin(0.5); -// Left Image Name -this.add.text(displayW / 14, 240, data.left_image1_name).setTint(8145955); -this.add.text(displayW / 14, 409, data.left_image2_name).setTint(8145955); -this.add.text(displayW / 14, 579, data.left_image3_name).setTint(8145955); -this.add.text(displayW / 14, 750, data.left_image4_name).setTint(8145955); - -//Right Image Name -this.add.text(displayW * 0.9 - 50, 240, data.right_image1_name).setTint(8145955); -this.add.text(displayW * 0.9 - 50, 409, data.right_image2_name).setTint(8145955); -this.add.text(displayW * 0.9 - 50, 579, data.right_image3_name).setTint(8145955); -this.add.text(displayW * 0.9 - 50, 750, data.right_image4_name).setTint(8145955); -}) -.catch(error => { -console.error('Error fetching initial data:', error); -}); -const displayW = window.innerWidth; -async; submitUserData(); { -try { -const response = await fetch(`https://management.beanstalkedu.com/items/game_result`, { -method: 'POST', -headers: { -'Content-Type': 'application/json' -}, -body: JSON.stringify('Test submission') -}); - -if (response.ok) { -console.log('Data Saved', response); -} else { -console.log('Something Wrong', response); -} -} catch (error) { -console.error('An error occurred', error); -} -} -submitButton = this.add.text(window.innerWidth / 2, window.innerHeight / 2, "Submit", { -font: '600 40px Quicksand', -fill: '#fff', -backgroundColor: '#05b3a4', -}); -submitButton.setVisible(true); -submitButton.setInteractive().on('pointerdown', () => { -console.log('Clicked'); -}); -// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); -this.add.image(displayW / 6, 30, "topMatch").setScale(); -this.add.image(displayW * 0.8 - 5, 30, "topLogo").setScale(); -this.add.image(displayW * 0.9 - 32, 170, "target1"), -this.add.image(displayW * 0.9 - 32, 170, "border").setAlpha(0.4).setScale(0.7), -this.add.image(displayW * 0.9 - 32, 340, "target2"), -this.add.image(displayW * 0.9 - 32, 340, "border").setAlpha(0.4).setScale(0.7), -this.add.image(displayW * 0.9 - 32, 510, "target3"), -this.add.image(displayW * 0.9 - 32, 510, "border").setAlpha(0.4).setScale(0.7), -this.add.image(displayW * 0.9 - 32, 680, "target4"), -this.add.image(displayW * 0.9 - 32, 680, "border").setAlpha(0.4).setScale(0.7); -const blocks = [ -{ -x: displayW / 15 - 10, -y: 120, -textureKey: "blocks1", -id: "block1", -}, -{ -x: displayW / 15 - 10, -y: 280, -textureKey: "blocks2", -id: "block2", -}, -{ -x: displayW / 15 - 10, -y: 460, -textureKey: "blocks3", -id: "block3", -}, -{ -x: displayW / 15 - 10, -y: 640, -textureKey: "blocks4", -id: "block4", -}, -]; -const droppedBlocks = []; -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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7); -targetZoneBorders.push(targetBorder); -targetZone.block = null; -}), - -blocks.forEach((block, index) => { -const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); -this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); -newBlock.on("drag", (pointer, dragX, dragY) => { -newBlock.setScale(1.3); -newBlock.x = dragX; -newBlock.y = dragY; -}); -newBlock.on("dragend", () => { -newBlock.setScale(1); -let droppedOnTargetZone = false; -targetZones.forEach((targetZone, targetIndex) => { -if (Phaser.Geom.Intersects.RectangleToRectangle( -newBlock.getBounds(), -new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) -)) { -if (targetZone.block === null) { -newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); -newBlock.disableInteractive(); -targetZone.block = newBlock; -droppedBlocks.push(newBlock); -if (isMatch(newBlock.texture.key, targetZone.name)) { -// console.log(isMatch(newBlock.texture.key, targetZone.name)) -// if(isMatch(newBlock.texture.key, targetZone.name)){ -// score++; -// // console.log(score); -// if(score === 4){ -// const overlap = document.getElementById("overlap"); -// overlap.style.display = "block"; -// let finalDom; -// } -// console.log(score) -// if(score >= 2){ -// console.log("Win") -// } else{ -// console.log("Loose") -// } -// } -//counter++; // Increment the counter when a match is found -} -} else { -newBlock.setPosition(block.x, block.y); -} -droppedOnTargetZone = true; -targetZoneBorders[targetIndex].setVisible(true); -targetZoneBorders[targetIndex].setAlpha(1); -return; -} -}); - -if (!droppedOnTargetZone) { -newBlock.setPosition(block.x, block.y); -} -if (droppedBlocks.length === targetZones.length) { -displayResult(droppedBlocks); -} -}); -}); -} -} diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro new file mode 100644 index 0000000..51bac51 --- /dev/null +++ b/src/pages/drag/dragdrop_phonics.astro @@ -0,0 +1,629 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 421e08a..aefc90a 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -57,9 +57,26 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + if(isMobile){ + noticeWidth = 100; + noticeHeight = 0; + buttonWidth = 67; + buttonHeight = 0; + retryButtonWidth = window.innerWidth / 2 - 50; + retryButtonHeight = window.innerHeight - 70; + } else { + noticeWidth = 100; + noticeHeight = 0; + buttonWidth = 100; + buttonHeight = 0; + retryButtonWidth = window.innerWidth / 2 - 50; + retryButtonHeight = window.innerHeight - 70; + } let submitButton; let formattedDateTime; let shortUniqueID; + let scoreTotal = 0; + let resultView; gameResult = []; window.onload = function() { // Get the current date and time @@ -71,7 +88,7 @@ import Layout from '../../layouts/Layout.astro'; // Log the formatted date and time to the console // // console.log("Page loaded on: " + formattedDateTime); }; - function generateShortUniqueID(length) { + function generateShortUniqueID(length) {14 const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i < length; i++) { @@ -81,18 +98,7 @@ import Layout from '../../layouts/Layout.astro'; return result; }; shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length - if(isMobile){ - noticeWidth = 100; - noticeHeight = 0; - buttonWidth = 67; - buttonHeight = 0; - } else { - noticeWidth = 100; - noticeHeight = 0; - buttonWidth = 100; - buttonHeight = 0; - } - + let blockMatches; const targetZones = [ { x: 0, @@ -119,29 +125,29 @@ import Layout from '../../layouts/Layout.astro'; block: null, }, ]; - const blockMatches = [ - { - blockName: "blocks1", - targetName: "target1", - }, - { - blockName: "blocks2", - targetName: "target2", - }, - { - blockName: "blocks3", - targetName: "target3", - }, - { - blockName: "blocks4", - targetName: "target4", - }, - ]; + // const blockMatches = [ + // { + // blockName: "blocks1", + // targetName: "target1", + // }, + // { + // blockName: "blocks2", + // targetName: "target2", + // }, + // { + // blockName: "blocks3", + // targetName: "target3", + // }, + // { + // blockName: "blocks4", + // targetName: "target4", + // }, + // ]; // console.log(blockMatches.blockName, blockMatches.targetName) var assetsList = {} const params = new URLSearchParams(window.location.search); const paramsID = params.get('id'); - const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) + const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; @@ -150,7 +156,7 @@ import Layout from '../../layouts/Layout.astro'; } else{ imageCustomWidth = "?width=100"; } - const assetsURL = "https://management.beanstalkedu.com/assets/" + const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth; assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth; assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth; @@ -286,29 +292,50 @@ import Layout from '../../layouts/Layout.astro'; create() { const params = new URLSearchParams(window.location.search); const paramsID = params.get('id'); - fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) + fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({ data }) => { + // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text - const baseFontSize = 20; + const baseFontSize = 30; // Calculate responsive font size based on screen width const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 70, data.description, { - font: `600 ${responsiveFontSize}px Quicksand`, + const descrptText = this.add.text(screenCenterX, 76, data.description, { + font: ` ${responsiveFontSize}px Quicksand`, fill: '#7c4c23', }).setOrigin(0.5); + blockMatches = [ + { + blockName: "blocks1", + targetName: `target${data.right_match1}`, + }, + { + blockName: "blocks2", + targetName: `target${data.right_match2}`, + }, + { + blockName: "blocks3", + targetName: `target${data.right_match3}`, + }, + { + blockName: "blocks4", + targetName: `target${data.right_match4}`, + }, + ]; + // 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 - this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23); - this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23); - this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); - this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23); //Right Image Name - this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23); }) .catch(error => { console.error('Error fetching initial data:', error); @@ -317,13 +344,13 @@ import Layout from '../../layouts/Layout.astro'; const URL = window.location.href; const gameName = URL.split('/'); let userData = { - 'status' : 'published', - 'user_id': 'drag@beanstalkedu.com', - 'game_name': gameName[3], - 'game_open': formattedDateTime, + 'user': 'drawing@beanstalkedu.com', + 'game_name': gameName[3], + 'starts': formattedDateTime, + // 'game_start' : gameStartTime, }; function submitUserData() { - fetch(`https://management.beanstalkedu.com/items/game_result`, { + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -332,9 +359,9 @@ import Layout from '../../layouts/Layout.astro'; }) .then(response => { if(response.ok){ - console.log('Data Saved', response) + // console.log('Data Saved', response) } else{ - console.log('Something Wrong', response) + // console.log('Something Wrong', response) } }) .catch(error => { @@ -367,34 +394,34 @@ import Layout from '../../layouts/Layout.astro'; this.add.image(displayW / 6, 30, "topMatch").setScale(); this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); this.add.image(displayW * 0.9-32, 170, "target1"), - this.add.image(displayW * 0.9-32, 170, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65), this.add.image(displayW * 0.9-32, 340, "target2"), - this.add.image(displayW * 0.9-32, 340, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65), this.add.image(displayW * 0.9-32, 510, "target3"), - this.add.image(displayW * 0.9-32, 510, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65), this.add.image(displayW * 0.9-32, 680, "target4"), - this.add.image(displayW * 0.9-32, 680, "border").setAlpha(0.4).setScale(0.7); + this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65); const blocks = [ { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 120, textureKey: "blocks1", id: "block1", }, { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 280, textureKey: "blocks2", id: "block2", }, { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 460, textureKey: "blocks3", id: "block3", }, { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 640, textureKey: "blocks4", id: "block4", @@ -404,7 +431,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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7); + const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -470,7 +497,40 @@ import Layout from '../../layouts/Layout.astro'; displayResult(droppedBlocks); } }); - }); + }); + let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { + font: '600 30px Quicksand', + fill: '#fff', + backgroundColor: 'blue', + padding: { x: 20, y: 10 }, + }) + retryButton.setInteractive().on('pointerdown', () => { + window.location.reload(); + }) + let score = 0; + let counter = 0; + const isMatch = (blockName, targetName) => { + if(isMatch){ + counter++; + // console.log(counter) + } + const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); + console.log(match) + if(match !== undefined){ + scoreTotal++; + console.log("Score Total", scoreTotal) + resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}); + resultView.setVisible(false); + } + if(counter === 4){ + const overlap = document.getElementById("overlap"); + overlap.style.display = "block"; + // console.log(counter) + submitButton.setVisible(true); + resultView.setVisible(true); + } + }; + } } // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { @@ -495,81 +555,7 @@ import Layout from '../../layouts/Layout.astro'; const targetZone = targetZones.find((zone) => zone.name === block.texture.key); }); }; - let score = 0; - let counter = 0; - const isMatch = (blockName, targetName) => { - if(isMatch){ - counter++; - // console.log(counter) - - if(counter === 4){ - const overlap = document.getElementById("overlap"); - overlap.style.display = "block"; - console.log(counter) - submitButton.setVisible(true); - } - } - const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); - let scoreTotal=0; - if(match){ - scoreTotal++; - // console.log(scoreTotal) - } - // console.log(scoreTotal) - // // console.log(match) - // if(match){ - // score++; - // console.log(score) - // let day; - // switch (score) { - // case 0: - // day = "Points - 1"; - // break; - // case 2: - // day = "Points - 2"; - // break; - // case 4: - // day = "Points - 4"; - - // } - // console.log(day) - // finalDom = document.getElementById("good"); - // finalDom.classList.add("good"); - // document.getElementById("good").innerHTML = day; - // document.getElementById("good").style.color = '#7c4c23' - // // console.log(totalScore) - // // if(score === 2){ - // // finalDom = document.getElementById("good"); - // // finalDom.classList.add("good"); - // // document.getElementById("good").innerHTML = " Good"; - // // document.getElementById("good").style.color = '#7c4c23' - - - // // // let img = document.createElement("img"); - // // // img.src = "/assets/party-feestje.gif"; - // // // img.width = 100; - // // // document.getElementById('win').appendChild(img); - // // } - // // else if(score === 4) { - // // finalDom = document.getElementById("verryGood"); - // // finalDom.classList.add("verryGood"); - // // document.getElementById("verryGood").innerHTML = "Verry Good"; - // // document.getElementById("verryGood").style.color = '#7c4c23' - // // } - // // else { - // // // finalDom = document.getElementById("lost"); - // // // finalDom.classList.add("lost"); - // // // document.getElementById("lost").innerHTML = " Lost"; - // // // document.getElementById("lost").style.color = '#7c4c23' - // // // console.log("Losttttt") - // // } - - // } else{ - // score = score - // } - // return match !== undefined; - }; \ No newline at end of file diff --git a/src/pages/drag/testv3.astro b/src/pages/drag/testv3.astro new file mode 100644 index 0000000..e972652 --- /dev/null +++ b/src/pages/drag/testv3.astro @@ -0,0 +1,692 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/tmp.astro b/src/pages/drag/tmp.astro new file mode 100644 index 0000000..6e5beb8 --- /dev/null +++ b/src/pages/drag/tmp.astro @@ -0,0 +1,609 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/tmp2.astro b/src/pages/drag/tmp2.astro new file mode 100644 index 0000000..83afa36 --- /dev/null +++ b/src/pages/drag/tmp2.astro @@ -0,0 +1,636 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro new file mode 100644 index 0000000..e0a9e3b --- /dev/null +++ b/src/pages/drag/v2.astro @@ -0,0 +1,601 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v20.astro b/src/pages/drag/v20.astro new file mode 100644 index 0000000..1ea9beb --- /dev/null +++ b/src/pages/drag/v20.astro @@ -0,0 +1,601 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro new file mode 100644 index 0000000..a5b72bc --- /dev/null +++ b/src/pages/drag/v3.astro @@ -0,0 +1,615 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v30.astro b/src/pages/drag/v30.astro new file mode 100644 index 0000000..a5b72bc --- /dev/null +++ b/src/pages/drag/v30.astro @@ -0,0 +1,615 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro new file mode 100644 index 0000000..6b6d9fc --- /dev/null +++ b/src/pages/drag/v4.astro @@ -0,0 +1,629 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v40.astro b/src/pages/drag/v40.astro new file mode 100644 index 0000000..d48b3c2 --- /dev/null +++ b/src/pages/drag/v40.astro @@ -0,0 +1,627 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro new file mode 100644 index 0000000..eb1b525 --- /dev/null +++ b/src/pages/drawing/drawing_phonics.astro @@ -0,0 +1,578 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro new file mode 100644 index 0000000..4d33c58 --- /dev/null +++ b/src/pages/drawing/drawing_writo.astro @@ -0,0 +1,578 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index c622b46..ec1ff28 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -12,10 +12,10 @@ import Layout from '../../layouts/Layout.astro'; + \ No newline at end of file diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro new file mode 100644 index 0000000..db73b32 --- /dev/null +++ b/src/pages/drawing/v2.astro @@ -0,0 +1,499 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+ + + diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro new file mode 100644 index 0000000..951f2b0 --- /dev/null +++ b/src/pages/drawing/v3.astro @@ -0,0 +1,578 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index f635681..6087e4a 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -40,6 +40,7 @@ import Layout from "../../layouts/Layout.astro"; let graphics; let isDrawing = false; let formattedDateTime; + let animatedLetter; let gameStartTime = "stat timr here"; if(isMobile){ @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -170,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -270,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale); - + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale); + animatedLetter.setLoop(true); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -301,8 +304,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; @@ -360,7 +361,7 @@ import Layout from "../../layouts/Layout.astro"; // gmStartTime(); gamestart = new Date(); gameStartTime = gamestart.toLocaleString(); - console.log("Page loaded on: " + gameStartTime); + // console.log("Page loaded on: " + gameStartTime); firstTextLayer.setVisible(true); animatedLetter.setVisible(false); firstScreen.setVisible(false); diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro index 42a8876..f2e38c2 100644 --- a/src/pages/guided-tracing/1.astro +++ b/src/pages/guided-tracing/1.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "stat timr here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -167,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -270,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -301,8 +304,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro index ba41ed4..bc8adae 100644 --- a/src/pages/guided-tracing/2.astro +++ b/src/pages/guided-tracing/2.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -274,7 +277,7 @@ import Layout from "../../layouts/Layout.astro"; const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro index fe6d649..b7fa87d 100644 --- a/src/pages/guided-tracing/3.astro +++ b/src/pages/guided-tracing/3.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 57cbe4e..3431974 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -127,15 +128,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -173,7 +173,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -238,6 +238,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -262,6 +263,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -274,10 +277,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 1f1cd90..9925f6b 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -128,15 +129,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -174,7 +174,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -239,6 +239,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -263,6 +264,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -275,10 +278,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro index d22f719..3a88e31 100644 --- a/src/pages/guided-tracing/6.astro +++ b/src/pages/guided-tracing/6.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro index c37d842..3b3ab4a 100644 --- a/src/pages/guided-tracing/7.astro +++ b/src/pages/guided-tracing/7.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro index 0002a71..80f0f62 100644 --- a/src/pages/guided-tracing/8.astro +++ b/src/pages/guided-tracing/8.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro index 2ecf9fb..58a62ce 100644 --- a/src/pages/guided-tracing/9.astro +++ b/src/pages/guided-tracing/9.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -261,6 +262,8 @@ import Layout from "../../layouts/Layout.astro"; demoButton.setInteractive().on('pointerdown', () => { graphics.setVisible(false); + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button hideButton.setVisible(true); // Show the "Hide" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index 195c202..870c542 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -125,15 +126,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -171,7 +171,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -228,6 +228,7 @@ import Layout from "../../layouts/Layout.astro"; repeat: -1 // Repeat indefinitely }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -252,6 +253,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -264,10 +267,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index c8ac040..39b5d1e 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -167,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -233,6 +233,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -257,6 +258,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index 36f9f7f..a08c3a3 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -118,15 +119,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -164,7 +164,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -229,6 +229,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -253,6 +254,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -265,10 +268,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -296,8 +299,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro index 311bde9..a9f8bbb 100644 --- a/src/pages/guided-tracing/D.astro +++ b/src/pages/guided-tracing/D.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro index a2dbbc5..c25fd45 100644 --- a/src/pages/guided-tracing/E.astro +++ b/src/pages/guided-tracing/E.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -231,6 +231,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -255,6 +256,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -267,10 +270,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro index a93d76d..c75a514 100644 --- a/src/pages/guided-tracing/F.astro +++ b/src/pages/guided-tracing/F.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro index 47481fe..c87b17a 100644 --- a/src/pages/guided-tracing/G.astro +++ b/src/pages/guided-tracing/G.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -231,6 +231,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -255,6 +256,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -267,16 +270,16 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: animatedLetter.setLoop(true); // Loop the video animatedLetter.setMute(false); // Unmute the video - animatedLetter.on('complete', function () { + animatedLetter.on('complete', function () { // Video playback is complete // You can add your code here for what to do when the video finishes. }); @@ -308,12 +311,10 @@ import Layout from "../../layouts/Layout.astro"; let firstDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { - firstDragStartPoint.x = pointer.x; - firstDragStartPoint.y = pointer.y; + firstDragStartPoint.x = pointer.x; + firstDragStartPoint.y = pointer.y; }); firstLayer.on('drag', (pointer) => { @@ -331,7 +332,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro index 985e779..1cfaaeb 100644 --- a/src/pages/guided-tracing/H.astro +++ b/src/pages/guided-tracing/H.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -233,6 +233,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -257,6 +258,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index ec088a8..4e53a18 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -233,6 +233,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -257,6 +258,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro index 113032b..9f50156 100644 --- a/src/pages/guided-tracing/J.astro +++ b/src/pages/guided-tracing/J.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -118,15 +119,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -164,7 +164,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -213,8 +213,6 @@ import Layout from "../../layouts/Layout.astro"; maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); const mask = maskGraphics.createGeometryMask(); - - let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { font: '900 24px quicksand', fill: '#05b3a4', @@ -230,6 +228,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -254,6 +253,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -266,10 +267,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro index ee937ee..88d5750 100644 --- a/src/pages/guided-tracing/K.astro +++ b/src/pages/guided-tracing/K.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -233,6 +233,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -257,6 +258,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -320,7 +323,6 @@ import Layout from "../../layouts/Layout.astro"; let secondDragStartPoint = { x: 0, y: 0 }; let thirdDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro index e1d32b6..e682f37 100644 --- a/src/pages/guided-tracing/L.astro +++ b/src/pages/guided-tracing/L.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -230,6 +230,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -254,6 +255,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -266,10 +269,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro index 0d7f059..b871abe 100644 --- a/src/pages/guided-tracing/M.astro +++ b/src/pages/guided-tracing/M.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro index e9f1ace..52d98cd 100644 --- a/src/pages/guided-tracing/N.astro +++ b/src/pages/guided-tracing/N.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -124,15 +125,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -170,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -270,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro index b54d331..a74c3af 100644 --- a/src/pages/guided-tracing/O.astro +++ b/src/pages/guided-tracing/O.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -118,15 +119,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -164,7 +164,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -230,6 +230,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -254,6 +255,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -266,10 +269,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -297,7 +300,6 @@ import Layout from "../../layouts/Layout.astro"; // Add these variables to keep track of start points let firstDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro index 1721f5e..abf3145 100644 --- a/src/pages/guided-tracing/P.astro +++ b/src/pages/guided-tracing/P.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro index b307a53..07ec2cc 100644 --- a/src/pages/guided-tracing/Q.astro +++ b/src/pages/guided-tracing/Q.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro index d3bf78c..4dd944a 100644 --- a/src/pages/guided-tracing/R.astro +++ b/src/pages/guided-tracing/R.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -126,15 +127,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -172,7 +172,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro index 724cdcc..f9aa0b9 100644 --- a/src/pages/guided-tracing/S.astro +++ b/src/pages/guided-tracing/S.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -118,15 +119,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -164,7 +164,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -230,6 +230,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -254,6 +255,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -266,10 +269,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro index 322d5c4..2927b21 100644 --- a/src/pages/guided-tracing/T.astro +++ b/src/pages/guided-tracing/T.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -228,8 +228,9 @@ import Layout from "../../layouts/Layout.astro"; blur: 5, // Shadow blur fill: true // Apply shadow to fill (background color) } - }); + }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -254,6 +255,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -266,10 +269,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -307,8 +310,6 @@ import Layout from "../../layouts/Layout.astro"; let firstDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro index 1d577c0..cff9cce 100644 --- a/src/pages/guided-tracing/U.astro +++ b/src/pages/guided-tracing/U.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -118,15 +119,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -164,7 +164,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -229,6 +229,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -253,6 +254,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -265,10 +268,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro index bdc2287..b806219 100644 --- a/src/pages/guided-tracing/V.astro +++ b/src/pages/guided-tracing/V.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -231,6 +231,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -255,6 +256,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -267,10 +270,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro index e89c18c..4fceabc 100644 --- a/src/pages/guided-tracing/W.astro +++ b/src/pages/guided-tracing/W.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -231,6 +231,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -255,6 +256,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -267,10 +270,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro index 9acde65..4abca82 100644 --- a/src/pages/guided-tracing/X.astro +++ b/src/pages/guided-tracing/X.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -231,6 +231,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -255,6 +256,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -267,10 +270,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro index 98cef52..d0dace4 100644 --- a/src/pages/guided-tracing/Y.astro +++ b/src/pages/guided-tracing/Y.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -124,15 +125,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -170,7 +170,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -233,6 +233,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -257,6 +258,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro index 609bde1..bd9938e 100644 --- a/src/pages/guided-tracing/Z.astro +++ b/src/pages/guided-tracing/Z.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index ecdd881..6f281b6 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -259,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index db8081b..55cba50 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -167,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -270,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -310,7 +313,6 @@ import Layout from "../../layouts/Layout.astro"; let firstDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro index 23ccb9d..7a3babc 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -167,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -270,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index 4a80928..60a6053 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -312,8 +315,6 @@ import Layout from "../../layouts/Layout.astro"; let firstDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 }; - // ... - // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { firstDragStartPoint.x = pointer.x; @@ -335,7 +336,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index bf7636a..ec77078 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro index 3fe917a..a5dd46c 100644 --- a/src/pages/guided-tracing/f.astro +++ b/src/pages/guided-tracing/f.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -167,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -270,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro index d9f6df0..50d8d5e 100644 --- a/src/pages/guided-tracing/g.astro +++ b/src/pages/guided-tracing/g.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -312,7 +315,6 @@ import Layout from "../../layouts/Layout.astro"; let firstDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { @@ -335,8 +337,7 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` - // Repeat the above code for secondLayer and thirdLayer + // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer secondLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro index 9ef1a02..f72eec4 100644 --- a/src/pages/guided-tracing/h.astro +++ b/src/pages/guided-tracing/h.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro index be51687..7cca21b 100644 --- a/src/pages/guided-tracing/i.astro +++ b/src/pages/guided-tracing/i.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro index e89e672..d54be51 100644 --- a/src/pages/guided-tracing/j.astro +++ b/src/pages/guided-tracing/j.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro index ed28881..b82447a 100644 --- a/src/pages/guided-tracing/k.astro +++ b/src/pages/guided-tracing/k.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -125,15 +126,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -171,7 +171,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro index 117dd9c..724655f 100644 --- a/src/pages/guided-tracing/l.astro +++ b/src/pages/guided-tracing/l.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -120,15 +121,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -166,7 +166,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -233,6 +233,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -257,6 +258,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro index 3606399..2e1f061 100644 --- a/src/pages/guided-tracing/m.astro +++ b/src/pages/guided-tracing/m.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -269,10 +272,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro index 4ca4a89..cd63eae 100644 --- a/src/pages/guided-tracing/n.astro +++ b/src/pages/guided-tracing/n.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro index d7657e5..ad8ca3a 100644 --- a/src/pages/guided-tracing/o.astro +++ b/src/pages/guided-tracing/o.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro index dfa3d3b..06df2f1 100644 --- a/src/pages/guided-tracing/p.astro +++ b/src/pages/guided-tracing/p.astro @@ -35,8 +35,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro index 964f602..0906178 100644 --- a/src/pages/guided-tracing/q.astro +++ b/src/pages/guided-tracing/q.astro @@ -35,8 +35,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -121,15 +122,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -167,7 +167,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -234,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -258,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro index 053f5e3..bb8ba7f 100644 --- a/src/pages/guided-tracing/r.astro +++ b/src/pages/guided-tracing/r.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro index c543906..d2607c1 100644 --- a/src/pages/guided-tracing/s.astro +++ b/src/pages/guided-tracing/s.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -119,15 +120,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -165,7 +165,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -232,6 +232,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -256,6 +257,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -268,10 +271,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro index 40bd658..f74d4c1 100644 --- a/src/pages/guided-tracing/t.astro +++ b/src/pages/guided-tracing/t.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: @@ -312,7 +315,6 @@ import Layout from "../../layouts/Layout.astro"; let firstDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 }; - // ... // Add this code for firstLayer firstLayer.on('dragstart', (pointer) => { diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro index e10499e..13c38fe 100644 --- a/src/pages/guided-tracing/u.astro +++ b/src/pages/guided-tracing/u.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -112,7 +113,6 @@ import Layout from "../../layouts/Layout.astro"; this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('cloud', '/assets/cloud.png'); this.load.image('canvas', '/assets/canvas4.png'); - this.load.image('sun', '/assets/sun.png'); this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image('canvasStand', '/assets/stand2.png'); @@ -123,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -219,7 +218,6 @@ import Layout from "../../layouts/Layout.astro"; maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale); const mask = maskGraphics.createGeometryMask(); - let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { font: '900 24px quicksand', @@ -236,6 +234,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +259,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +273,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro index ef1d490..3777201 100644 --- a/src/pages/guided-tracing/v.astro +++ b/src/pages/guided-tracing/v.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro index 37de804..0988f23 100644 --- a/src/pages/guided-tracing/w.astro +++ b/src/pages/guided-tracing/w.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro index 150764a..fc24d86 100644 --- a/src/pages/guided-tracing/x.astro +++ b/src/pages/guided-tracing/x.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -123,15 +124,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -236,6 +236,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -260,6 +261,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -272,10 +275,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro index bb99f0a..c60d818 100644 --- a/src/pages/guided-tracing/y.astro +++ b/src/pages/guided-tracing/y.astro @@ -36,8 +36,9 @@ import Layout from "../../layouts/Layout.astro"; const game = new Phaser.Game(config); const customWidth = window.innerWidth; const customHeight = window.innerHeight; - let firstLayer, secondLayer; + let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -122,15 +123,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -168,7 +168,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -235,6 +235,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -259,6 +260,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -271,10 +274,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro index ba6fa85..ff88a8e 100644 --- a/src/pages/guided-tracing/z.astro +++ b/src/pages/guided-tracing/z.astro @@ -38,6 +38,7 @@ import Layout from "../../layouts/Layout.astro"; const customHeight = window.innerHeight; let firstLayer, secondLayer, thirdLayer; let graphics; + let animatedLetter; let isDrawing = false; let formattedDateTime; let gameStartTime = "start time here"; @@ -127,15 +128,14 @@ import Layout from "../../layouts/Layout.astro"; const urlSplit = URL.split('/'); const gameName = urlSplit[3] + '-' + urlSplit[4] let userData = { - 'status' : 'published', - 'user_id': 'guided-tracing@beanstalkedu.com', + 'user': 'guided-tracing@beanstalkedu.com', 'game_name': gameName, - 'game_open': formattedDateTime, + 'starts': formattedDateTime, 'game_start' : gameStartTime, }; function submitUserData() { - console.log(userData) - fetch(`https://management.beanstalkedu.com/items/game_result`, { + // console.log(userData) + fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { 'Content-Type' : 'application/json' @@ -173,7 +173,7 @@ import Layout from "../../layouts/Layout.astro"; }); submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { - console.log('Clicked'); + // console.log('Clicked'); submitButton.setVisible(false); submitNotic.setVisible(true); // windowLoad(); @@ -238,6 +238,7 @@ import Layout from "../../layouts/Layout.astro"; } }); hideButton.setInteractive().on('pointerdown', () => { + animatedLetter.stop(); isDemoButtonClicked = false; firstScreen.setVisible(false); hideButton.setVisible(false); // Hide the "Hide" button @@ -262,6 +263,8 @@ import Layout from "../../layouts/Layout.astro"; }); demoButton.setInteractive().on('pointerdown', () => { + animatedLetter.setCurrentTime(0); + animatedLetter.play(true); graphics.setVisible(false); firstScreen.setVisible(true); demoButton.setVisible(false); // Hide the "Demo" button @@ -273,10 +276,10 @@ import Layout from "../../layouts/Layout.astro"; const baseFontSize = 20; 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); - const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); + animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); // Play the video - animatedLetter.play(); + // animatedLetter.play(); animatedLetter.setVisible(false); // You can set additional properties for the video, such as loop and mute: diff --git a/src/pages/image.astro b/src/pages/image.astro new file mode 100644 index 0000000..c8ef944 --- /dev/null +++ b/src/pages/image.astro @@ -0,0 +1,20 @@ +--- + const planResp = await fetch('https://management.beanstalkedu.com/items/game_drawing'); + const planRespJson = await planResp.json(); + const data = planRespJson.data; + // console.log(data) +--- +
+
+ {data.map((plan: {details2: string | undefined; info: string | undefined; image: string | undefined; slug: string | undefined; name: string | undefined}) => + + + Download + )} +
+
+ \ No newline at end of file diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro new file mode 100644 index 0000000..68d163e --- /dev/null +++ b/src/pages/tick/tick_phonics_v1.astro @@ -0,0 +1,404 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Tick

+ +
+ +

+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + + diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro new file mode 100644 index 0000000..f29ef3d --- /dev/null +++ b/src/pages/tick/tick_phonics_v2.astro @@ -0,0 +1,459 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Tick

+ +
+ +

+
+
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + + diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro new file mode 100644 index 0000000..9a851bb --- /dev/null +++ b/src/pages/tick/tick_phonics_v3.astro @@ -0,0 +1,228 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + + +
+
+
+
+
+

Tick

+ +
+
+

+ +
+
+ +

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro index b85e51c..0f299e4 100644 --- a/src/pages/tick/v1.astro +++ b/src/pages/tick/v1.astro @@ -10,46 +10,68 @@ import Layout from "../../layouts/Layout.astro";

Tick

-

+ +

-
+
- + - +
- + - +
- + - +

- +
@@ -60,13 +82,36 @@ import Layout from "../../layouts/Layout.astro"; -->