diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro index 53059d2..7a8c71f 100644 --- a/src/pages/guided-tracing/0.astro +++ b/src/pages/guided-tracing/0.astro @@ -63,12 +63,9 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; - submitWidth = customWidth / 2 - 100; - submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; + } else{ cloudeSize = 500; cloudHeight = 250; @@ -86,16 +83,12 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; - noticeWidth = 0; - noticeHeight = 0; - submitWidth = customWidth / 1.32; - submitHeight = customHeight / 2 - 20; - noticeWidth = 0; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 120; + noticeHeight = window.innerHeight * 0.32; } window.onload = function() { currentDate = new Date(); @@ -156,11 +149,11 @@ import Layout from "../../layouts/Layout.astro"; console.error('An error occured', error) }); }; - const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue' }).setDepth(1); - submitNotic.setVisible(false); + submitNotic.setVisible(true); submitButton = this.add.text(submitWidth, submitHeight, "Submit", { font: '900 24px Quicksand', fill: '#05b3a4', diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro index 2b32c28..32d88fc 100644 --- a/src/pages/guided-tracing/1.astro +++ b/src/pages/guided-tracing/1.astro @@ -64,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro index 1d06386..410acdf 100644 --- a/src/pages/guided-tracing/2.astro +++ b/src/pages/guided-tracing/2.astro @@ -64,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro index fb3ced3..ca823a1 100644 --- a/src/pages/guided-tracing/3.astro +++ b/src/pages/guided-tracing/3.astro @@ -64,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro index 022b77a..20b3266 100644 --- a/src/pages/guided-tracing/4.astro +++ b/src/pages/guided-tracing/4.astro @@ -68,8 +68,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro index 998a4c7..15844f1 100644 --- a/src/pages/guided-tracing/5.astro +++ b/src/pages/guided-tracing/5.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -86,13 +88,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animated5', '/assets/animated-letter/number_5.mp4'); this.load.svg('number5', '/assets/numeric/n5.svg'); @@ -117,6 +124,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -360,9 +423,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro index c63d469..af28909 100644 --- a/src/pages/guided-tracing/6.astro +++ b/src/pages/guided-tracing/6.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro index bac9037..fb8ce64 100644 --- a/src/pages/guided-tracing/7.astro +++ b/src/pages/guided-tracing/7.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -204,7 +267,6 @@ import Layout from "../../layouts/Layout.astro"; animatedLetter.setVisible(true); }); - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const baseFontSize = 20; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; @@ -262,7 +324,6 @@ import Layout from "../../layouts/Layout.astro"; const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y); if (distance >= 100) { - firstTextLayer.setVisible(false); secondTextLayer.setVisible(true); audioTwoAudio.play(); @@ -273,7 +334,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -328,9 +388,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro index 9ee2b33..abea737 100644 --- a/src/pages/guided-tracing/8.astro +++ b/src/pages/guided-tracing/8.astro @@ -39,11 +39,13 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; cloudHeight = 340; - canvasScale = 0.14 + canvasScale = 0.14; canvasHeight = 30; letterHeight = 30; letterScale = 1; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -105,13 +112,68 @@ 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'); } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -273,7 +335,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -328,9 +389,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro index c576475..5e88aa5 100644 --- a/src/pages/guided-tracing/9.astro +++ b/src/pages/guided-tracing/9.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -89,6 +91,11 @@ import Layout from "../../layouts/Layout.astro"; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -328,9 +391,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro index e6dee97..15ec93a 100644 --- a/src/pages/guided-tracing/A.astro +++ b/src/pages/guided-tracing/A.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; @@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -85,13 +87,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4'); this.load.svg('letterA', '/assets/capital-letter/a.svg'); @@ -114,6 +121,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -350,17 +413,16 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); startButton.setVisible(false); }) - - } function update() { diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro index 8bfa4bc..607a031 100644 --- a/src/pages/guided-tracing/B.astro +++ b/src/pages/guided-tracing/B.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -110,6 +117,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -359,9 +422,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro index f09ef1a..13d231e 100644 --- a/src/pages/guided-tracing/C.astro +++ b/src/pages/guided-tracing/C.astro @@ -39,6 +39,9 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; + if(isMobile){ cloudeSize = 200; cloudHeight = 340; @@ -59,8 +62,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -78,13 +81,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -106,6 +114,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -289,9 +353,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro index b138355..89301c9 100644 --- a/src/pages/guided-tracing/D.astro +++ b/src/pages/guided-tracing/D.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +116,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro index 428280a..e14d2db 100644 --- a/src/pages/guided-tracing/E.astro +++ b/src/pages/guided-tracing/E.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -60,8 +62,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -78,13 +80,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedE', '/assets/animated-letter/capital_e.mp4'); this.load.svg('letterE', '/assets/capital-letter/e.svg'); @@ -108,6 +115,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -388,9 +451,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro index 1ff583f..8e84412 100644 --- a/src/pages/guided-tracing/F.astro +++ b/src/pages/guided-tracing/F.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4'); this.load.svg('letterA', '/assets/capital-letter/f.svg'); @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -350,9 +413,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro index 61e54d4..3fc897b 100644 --- a/src/pages/guided-tracing/G.astro +++ b/src/pages/guided-tracing/G.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,7 +82,7 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; @@ -107,8 +109,68 @@ import Layout from "../../layouts/Layout.astro"; this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image('canvasStand', '/assets/stand2.png'); } - + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -323,9 +385,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro index 46c84b8..c05e6fe 100644 --- a/src/pages/guided-tracing/H.astro +++ b/src/pages/guided-tracing/H.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedH', '/assets/animated-letter/capital_h.mp4'); this.load.svg('letterH', '/assets/capital-letter/h.svg'); @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro index 4f85c7a..e5b91d8 100644 --- a/src/pages/guided-tracing/I.astro +++ b/src/pages/guided-tracing/I.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedI', '/assets/animated-letter/capital_i.mp4'); this.load.svg('letterI', '/assets/capital-letter/i.svg'); @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -353,9 +416,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro index a6f0a4b..fbc728d 100644 --- a/src/pages/guided-tracing/J.astro +++ b/src/pages/guided-tracing/J.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -107,6 +114,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -229,13 +292,8 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); - - // 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; @@ -253,8 +311,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); - - graphics = this.add.graphics(); graphics.setMask(mask); @@ -290,8 +346,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro index 0a5d344..933149b 100644 --- a/src/pages/guided-tracing/K.astro +++ b/src/pages/guided-tracing/K.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedK', '/assets/animated-letter/capital_k.mp4'); this.load.svg('letterK', '/assets/capital-letter/k.svg'); @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -353,9 +416,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro index 3b25f9b..0324213 100644 --- a/src/pages/guided-tracing/L.astro +++ b/src/pages/guided-tracing/L.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -56,13 +58,12 @@ import Layout from "../../layouts/Layout.astro"; animatedLHeight = 32; helpButtonHeight = customHeight / 1.1; helpButtonWidth = customWidth / 2 + 10; - startButtonHeight = customHeight / 1.1; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +81,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +115,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro index 4dbae50..6af1a23 100644 --- a/src/pages/guided-tracing/M.astro +++ b/src/pages/guided-tracing/M.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedM', '/assets/animated-letter/capital_m.mp4'); this.load.svg('letterM', '/assets/capital-letter/m.svg'); @@ -109,6 +116,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro index 253fbef..a94cbee 100644 --- a/src/pages/guided-tracing/N.astro +++ b/src/pages/guided-tracing/N.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedN', '/assets/animated-letter/capital_n.mp4'); this.load.svg('letterN', '/assets/capital-letter/n.svg'); @@ -113,6 +120,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro index 3e271d5..0716e8d 100644 --- a/src/pages/guided-tracing/O.astro +++ b/src/pages/guided-tracing/O.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -107,6 +114,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro index 026cc45..dbf38d7 100644 --- a/src/pages/guided-tracing/P.astro +++ b/src/pages/guided-tracing/P.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +116,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -323,9 +386,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro index c9963a1..09bbd05 100644 --- a/src/pages/guided-tracing/Q.astro +++ b/src/pages/guided-tracing/Q.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +116,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -269,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 @@ -324,9 +386,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro index bb43f23..59f465e 100644 --- a/src/pages/guided-tracing/R.astro +++ b/src/pages/guided-tracing/R.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -86,13 +88,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedR', '/assets/animated-letter/capital_r.mp4'); this.load.svg('letterR', '/assets/capital-letter/r.svg'); @@ -115,6 +122,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -357,9 +420,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro index c64ea00..793f57b 100644 --- a/src/pages/guided-tracing/S.astro +++ b/src/pages/guided-tracing/S.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -107,6 +114,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -234,8 +297,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; @@ -290,9 +351,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro index 13b1f99..7277c51 100644 --- a/src/pages/guided-tracing/T.astro +++ b/src/pages/guided-tracing/T.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +116,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -267,7 +330,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -322,9 +384,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro index b12512f..579ceed 100644 --- a/src/pages/guided-tracing/U.astro +++ b/src/pages/guided-tracing/U.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -107,6 +114,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -289,14 +352,14 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); startButton.setVisible(false); - }) diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro index 74661d0..23429e3 100644 --- a/src/pages/guided-tracing/V.astro +++ b/src/pages/guided-tracing/V.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -108,6 +115,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro index f0bbc02..231f12c 100644 --- a/src/pages/guided-tracing/W.astro +++ b/src/pages/guided-tracing/W.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedW', '/assets/animated-letter/capital_w.mp4'); this.load.svg('letterW', '/assets/capital-letter/w.svg'); @@ -108,6 +115,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro index b10eb52..6b90c9e 100644 --- a/src/pages/guided-tracing/X.astro +++ b/src/pages/guided-tracing/X.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +116,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -268,7 +331,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -323,9 +385,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro index 0bad225..b2fda62 100644 --- a/src/pages/guided-tracing/Y.astro +++ b/src/pages/guided-tracing/Y.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedY', '/assets/animated-letter/capital_y.mp4'); this.load.svg('letterY', '/assets/capital-letter/y.svg'); @@ -113,6 +120,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -354,9 +417,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro index 58618db..8c838e9 100644 --- a/src/pages/guided-tracing/Z.astro +++ b/src/pages/guided-tracing/Z.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedZ', '/assets/animated-letter/capital_z.mp4'); this.load.svg('letterZ', '/assets/capital-letter/z.svg'); @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -352,9 +415,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro index 2a31b0a..16fea75 100644 --- a/src/pages/guided-tracing/a.astro +++ b/src/pages/guided-tracing/a.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -106,10 +113,67 @@ import Layout from "../../layouts/Layout.astro"; this.load.image('sun', '/assets/sun.png'); this.load.image('bgMobile', '/assets/bgMobile.png'); - this.load.image('canvasStand', '/assets/stand2.png'); + this.load.image('canvasStand', '/assets/stand2.png'); let formattedDateTime; + let gameStartTime = "start time here"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -325,8 +389,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro index eb11ae3..f78abc2 100644 --- a/src/pages/guided-tracing/b.astro +++ b/src/pages/guided-tracing/b.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -81,13 +83,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -110,6 +117,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -270,7 +333,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/c.astro b/src/pages/guided-tracing/c.astro index 1056ccd..54dec73 100644 --- a/src/pages/guided-tracing/c.astro +++ b/src/pages/guided-tracing/c.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -110,6 +117,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -294,9 +357,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro index 767f9f0..b7fe0dd 100644 --- a/src/pages/guided-tracing/d.astro +++ b/src/pages/guided-tracing/d.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro index 91a78b5..7ed0100 100644 --- a/src/pages/guided-tracing/e.astro +++ b/src/pages/guided-tracing/e.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro index b24e39a..72d86c0 100644 --- a/src/pages/guided-tracing/f.astro +++ b/src/pages/guided-tracing/f.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -110,6 +117,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -270,7 +333,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -325,9 +387,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro index 0c50003..60bf18e 100644 --- a/src/pages/guided-tracing/g.astro +++ b/src/pages/guided-tracing/g.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -327,9 +390,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro index f390954..16a7b06 100644 --- a/src/pages/guided-tracing/h.astro +++ b/src/pages/guided-tracing/h.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -111,6 +118,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -271,7 +334,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -326,9 +388,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro index a0ca189..03edbb5 100644 --- a/src/pages/guided-tracing/i.astro +++ b/src/pages/guided-tracing/i.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro index eeaff42..1589b01 100644 --- a/src/pages/guided-tracing/j.astro +++ b/src/pages/guided-tracing/j.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -111,6 +118,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro index e8dda69..2177d36 100644 --- a/src/pages/guided-tracing/k.astro +++ b/src/pages/guided-tracing/k.astro @@ -39,11 +39,12 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x // console.log(x); - if(isMobile){ cloudeSize = 200; cloudHeight = 340; @@ -66,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -86,13 +87,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedK', '/assets/animated-letter/small_k.mp4'); this.load.svg('letterK', '/assets/small-letter/ks.svg'); @@ -108,15 +114,69 @@ import Layout from "../../layouts/Layout.astro"; this.load.svg('handPointer', '/assets/svg/hand.svg'); this.load.image('backgroundImage', '/assets/bg6.png'); this.load.image('cloud', '/assets/cloud.png'); - this.load.image('canvas', '/assets/canvas4.png'); - - + this.load.image('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'); } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -359,8 +419,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro index 7afe8d4..9e06dfa 100644 --- a/src/pages/guided-tracing/l.astro +++ b/src/pages/guided-tracing/l.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -103,13 +110,68 @@ 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'); } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : l", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -294,9 +356,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); -submitButton.setVisible(true); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro index 3a87615..cb92986 100644 --- a/src/pages/guided-tracing/m.astro +++ b/src/pages/guided-tracing/m.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -84,13 +86,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedM', '/assets/animated-letter/small_m.mp4'); this.load.svg('letterM', '/assets/small-letter/ms.svg'); @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : m", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -354,8 +417,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro index 982cdb3..12d63e3 100644 --- a/src/pages/guided-tracing/n.astro +++ b/src/pages/guided-tracing/n.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -105,13 +112,68 @@ 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'); } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -272,7 +334,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -327,8 +388,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro index fdbca33..e5dd74c 100644 --- a/src/pages/guided-tracing/o.astro +++ b/src/pages/guided-tracing/o.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +82,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -108,6 +115,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -226,7 +289,7 @@ import Layout from "../../layouts/Layout.astro"; textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); - audioOneAudio.play(); + // audioOneAudio.play(); firstLayer.setDepth(1); firstLayer.setAlpha(0.5); firstLayer.setInteractive({ draggable: true }); @@ -292,15 +355,15 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); startButton.setVisible(false); }) - - } function update() { diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro index 23a95c0..46568dd 100644 --- a/src/pages/guided-tracing/p.astro +++ b/src/pages/guided-tracing/p.astro @@ -16,7 +16,6 @@ import Layout from "../../layouts/Layout.astro"; width: isMobile ? window.innerWidth : window.innerWidth / 2, height: window.innerHeight / 2, }; - const config = { type: Phaser.AUTO, width: window.innerWidth, @@ -39,6 +38,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -61,8 +62,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -80,13 +81,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; } + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -109,6 +115,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -246,8 +308,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; @@ -323,8 +383,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro index 673dd53..342f1d1 100644 --- a/src/pages/guided-tracing/q.astro +++ b/src/pages/guided-tracing/q.astro @@ -16,7 +16,6 @@ import Layout from "../../layouts/Layout.astro"; width: isMobile ? window.innerWidth : window.innerWidth / 2, height: window.innerHeight / 2, }; - const config = { type: Phaser.AUTO, width: window.innerWidth, @@ -39,6 +38,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +63,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +83,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -111,6 +117,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -289,8 +351,7 @@ import Layout from "../../layouts/Layout.astro"; secondLayer.setAlpha(0.5); } }); - - + graphics = this.add.graphics(); graphics.setMask(mask); graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) @@ -325,8 +386,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro index 917ebbd..19f286f 100644 --- a/src/pages/guided-tracing/r.astro +++ b/src/pages/guided-tracing/r.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -272,7 +335,6 @@ import Layout from "../../layouts/Layout.astro"; firstLayer.setAlpha(0.5); } }); -`` // Repeat the above code for secondLayer and thirdLayer // Add this code for secondLayer @@ -327,8 +389,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro index 7bb70ae..e8ae1a1 100644 --- a/src/pages/guided-tracing/s.astro +++ b/src/pages/guided-tracing/s.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedS', '/assets/animated-letter/small_s.mp4'); @@ -102,13 +109,68 @@ 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'); } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -237,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; @@ -291,8 +351,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro index 4078d9e..8124ea0 100644 --- a/src/pages/guided-tracing/t.astro +++ b/src/pages/guided-tracing/t.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -326,8 +389,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro index 1a2f38f..1f08a0a 100644 --- a/src/pages/guided-tracing/u.astro +++ b/src/pages/guided-tracing/u.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -226,8 +289,8 @@ import Layout from "../../layouts/Layout.astro"; let textX, textY; firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterUeight, 'layer1').setScale(letterScale); - textX = isMobile ? customWidth / 25 : customWidth * 0.70; - textY = isMobile ? customHeight / 6 : customHeight / 2; + textX = isMobile ? customWidth / 25 : customWidth * 0.75; + textY = isMobile ? customHeight / 6 : customHeight / 2.3; const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'}); const audioOneAudio = this.sound.add('audioOne'); // audioOneAudio.play(); @@ -326,8 +389,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro index 65b6b22..304c46b 100644 --- a/src/pages/guided-tracing/v.astro +++ b/src/pages/guided-tracing/v.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -111,6 +118,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -325,8 +388,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro index f0595a0..25f9388 100644 --- a/src/pages/guided-tracing/w.astro +++ b/src/pages/guided-tracing/w.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer, fourthLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedW', '/assets/animated-letter/small_w.mp4'); this.load.svg('letterW', '/assets/small-letter/ws.svg'); @@ -111,6 +118,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -391,8 +454,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro index 4b1c8cd..803914d 100644 --- a/src/pages/guided-tracing/x.astro +++ b/src/pages/guided-tracing/x.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -112,6 +119,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -326,8 +389,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro index 693b5c7..fd80405 100644 --- a/src/pages/guided-tracing/y.astro +++ b/src/pages/guided-tracing/y.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; if(isMobile){ cloudeSize = 200; @@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -82,13 +84,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; // let hideButton; function preload() { @@ -105,13 +112,68 @@ 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'); } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', }); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); @@ -326,8 +388,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true); diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro index a6d8f84..ba05d4d 100644 --- a/src/pages/guided-tracing/z.astro +++ b/src/pages/guided-tracing/z.astro @@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro"; let firstLayer, secondLayer, thirdLayer; let graphics; let isDrawing = false; + let formattedDateTime; + let gameStartTime = "start time here"; // let x = 100; // // Use x @@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro"; startButtonWidth = customWidth / 2 - 100; submitWidth = customWidth / 2 - 100; submitHeight = customHeight / 1.1; - noticeWidth = 100; - noticeHeight = 0; + noticeWidth = window.innerWidth * 0.5 - 100; + noticeHeight = window.innerHeight * 0.85 - 0; } else{ cloudeSize = 500; cloudHeight = 250; @@ -86,13 +88,18 @@ import Layout from "../../layouts/Layout.astro"; helpButtonHeight = customHeight / 2 + 40; helpButtonWidth = customWidth / 1.32; - startButtonHeight = customHeight / 2 - 20; + startButtonHeight = customHeight / 2 - 20; startButtonWidth = customWidth / 1.32; submitWidth = customWidth / 1.32; submitHeight = customHeight / 2 - 20; noticeWidth = 0; noticeHeight = 0; - } + }; + window.onload = function() { + currentDate = new Date(); + formattedDateTime = currentDate.toLocaleString(); + console.log("Page loaded on: " + formattedDateTime); + }; function preload() { this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4'); this.load.svg('letterZ', '/assets/small-letter/zs.svg'); @@ -116,6 +123,62 @@ import Layout from "../../layouts/Layout.astro"; } function create() { + const URL = window.location.href; + const urlSplit = URL.split('/'); + const gameName = urlSplit[3] + '-' + urlSplit[4] + let userData = { + 'status' : 'published', + 'user_id': 'guided-tracing@beanstalkedu.com', + 'game_name': gameName, + 'game_open': formattedDateTime, + 'game_start' : gameStartTime, + }; + function submitUserData() { + console.log(userData) + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(userData) + }) + .then(response => { + if(response.ok){ + // console.log('Data Saved', response) + } else{ + // console.log('Something Wrong', response) + } + }) + .catch(error => { + console.error('An error occured', error) + }); + }; + const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { + font: '600 20px Quicksand', + fill: 'blue' + }).setDepth(1); + submitNotic.setVisible(false); + submitButton = this.add.text(submitWidth, submitHeight, "Submit", { + font: '900 24px Quicksand', + fill: '#05b3a4', + backgroundColor : '#7c4c23', + padding: {x: 10, y: 10}, + shadow: { + offsetX : 2, + offsetY : 2, + color: '#000', + blur: 5, + fill: true + } + }); + submitButton.setVisible(false); + submitButton.setInteractive().on('pointerdown', () => { + console.log('Clicked'); + submitButton.setVisible(false); + submitNotic.setVisible(true); + // windowLoad(); + submitUserData(); + }) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', }); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9); @@ -358,8 +421,10 @@ import Layout from "../../layouts/Layout.astro"; firstTextLayer.setVisible(false); startButton.setInteractive().on('pointerdown', () => { audioOneAudio.play(); + submitButton.setVisible(true); firstTextLayer.setVisible(true); - animatedLetter.setVisible(false); firstScreen.setVisible(false); + animatedLetter.setVisible(false); + firstScreen.setVisible(false); graphics.setVisible(true); hideButton.setVisible(false); demoButton.setVisible(true);