From a8277e9aad27a28a31d1defc76c8ed39b9abf494 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Sat, 15 Jun 2024 18:08:20 +0530 Subject: [PATCH] s2 --- src/pages/drag/dragdrop_phonics.astro | 13 +-- src/pages/drag/index.astro | 10 +- src/pages/drag/match_phonics.astro | 132 +++++++++++++++--------- src/pages/drag/v2.astro | 15 ++- src/pages/drag/v3.astro | 13 +-- src/pages/drag/v4.astro | 13 +-- src/pages/drawing/drawing_phonics.astro | 103 +++++++++++++----- src/pages/drawing/drawing_writo.astro | 107 +++++++++++++------ src/pages/drawing/index.astro | 128 +++++++++++++++++------ src/pages/drawing/v2.astro | 114 ++++++++++++++------ src/pages/drawing/v3.astro | 4 +- 11 files changed, 440 insertions(+), 212 deletions(-) diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro index d0c25b4..e8841fd 100644 --- a/src/pages/drag/dragdrop_phonics.astro +++ b/src/pages/drag/dragdrop_phonics.astro @@ -372,14 +372,11 @@ import Layout from '../../layouts/Layout.astro'; this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - // Base font size for your text - const baseFontSize = 22; - // Calculate responsive font size based on screen width - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 95, data.description, { - font: ` ${responsiveFontSize}px Quicksand`, - fill: '#60C6CB', - }).setOrigin(0.5); + const baseFontSize = 20; + const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; + if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} + const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); }) .catch(error => { console.error('Error fetching initial data:', error); diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 748f431..2d5b227 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -312,11 +312,11 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - // Base font size for your text - const baseFontSize = 30; - // Calculate responsive font size based on screen width - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5); + const baseFontSize = 20; + const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; + if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} + const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); blockMatches = [ { blockName: "blocks1", diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro index e8cf9f4..7cc1cfa 100644 --- a/src/pages/drag/match_phonics.astro +++ b/src/pages/drag/match_phonics.astro @@ -57,7 +57,22 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + let submitButton; + let formattedDateTime; + let shortUniqueID; + let scoreTotal = 0; + let resultView; + let topLogoWidth; + let muteIconWidth; + let resetIconWidth; + let tickIconWidth; + let cancelIconWidth; if(isMobile){ + topLogoWidth = 5; + muteIconWidth = 2; + resetIconWidth = 1.6; + tickIconWidth = 1.34; + cancelIconWidth = 1.16; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -65,6 +80,11 @@ import Layout from '../../layouts/Layout.astro'; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; } else { + topLogoWidth = 6; + muteIconWidth = 1.3; + resetIconWidth = 1.26; + tickIconWidth = 1.222; + cancelIconWidth = 1.185; noticeWidth = 100; noticeHeight = 0; buttonWidth = 100; @@ -72,13 +92,6 @@ import Layout from '../../layouts/Layout.astro'; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; } - let submitButton; - let formattedDateTime; - let shortUniqueID; - let blockMatches; - let resultView; - let scoreTotal = 0; - gameResult = []; window.onload = function() { // Get the current date and time @@ -100,6 +113,7 @@ import Layout from '../../layouts/Layout.astro'; return result; }; shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length + let blockMatches; const targetZones = [ { @@ -233,12 +247,13 @@ import Layout from '../../layouts/Layout.astro'; this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("tick", '/assets/tick.png'); - // this.load.image("bg", '/assets/bgwhite.jpg'); - // this.load.image("target1", assetsList.right_image1); - // this.load.image("target2", '/assets/hay.png'); - // this.load.image("target3", '/assets/mat.png'); - // this.load.image("target4", '/assets/star.png'); - this.load.image("border", '/assets/squar.png'); + this.load.image("topMatch", "/assets/top_match.jpg"); + this.load.image("topLogo", "/assets/top_logo.jpg"); + this.load.image("tickIcon", '/assets/svg/tick2.svg'); + this.load.image("muteIcon", '/assets/svg/mute.svg'); + this.load.image("cancelIcon", '/assets/svg/cancel.svg'); + this.load.image("resetIcon", '/assets/svg/reset.svg'); + this.load.image("border", '/assets/svg/pointer.svg'); this.load.spritesheet("target1", assetsList.right_image1,{ frameWidth: 100, frameHeight: 100, @@ -298,15 +313,12 @@ import Layout from '../../layouts/Layout.astro'; targetName: `target${data.right_match4}`, }, ]; - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - // Base font size for your text - const baseFontSize = 20 - // Calculate responsive font size based on screen width - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 76, data.description, { - font: ` ${responsiveFontSize}px Quicksand`, - fill: '#7c4c23', - }).setOrigin(0.5); + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + const baseFontSize = 20; + const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; + if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} + const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // Left Image Name @@ -352,77 +364,95 @@ import Layout from '../../layouts/Layout.astro'; console.error('An error occured', error) }); }; - // window.load + this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); + this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale(); + submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); + this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); + this.add.image(displayW * 0.9-32, 170, "target1"); + // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1); + this.add.image(displayW * 0.9-32, 340, "target2"); + // this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1); + this.add.image(displayW * 0.9-32, 510, "target3"); + // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1); + this.add.image(displayW * 0.9-32, 680, "target4"); + // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1); + + const graphics = this.add.graphics(); + const x = 0; const y = 54; + const lineWidth = window.innerWidth; + graphics.lineStyle(1, 0x0348A8); + graphics.setAlpha(0.2); + graphics.beginPath(); + graphics.moveTo(x, y); + graphics.lineTo(x + lineWidth, y); + graphics.strokePath(); const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue' }).setDepth(1); submitNotic.setVisible(false); - submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }).setDepth(1); - submitButton.setVisible(false); + // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }).setDepth(1); + // submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { // console.log('Clicked'); - submitButton.setVisible(false); + // submitButton.setVisible(false); submitNotic.setVisible(true); // window.location.reload(); // windowLoad(); submitUserData(); }) - // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); - this.add.image(displayW / 6, 30, "topMatch").setScale(); - this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); - this.add.image(displayW * 0.9-32, 170, "target1"), - this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65), - this.add.image(displayW * 0.9-32, 340, "target2"), - this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65), - this.add.image(displayW * 0.9-32, 510, "target3"), - this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65), - this.add.image(displayW * 0.9-32, 680, "target4"), - this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65); + const blocks = [ { x: displayW / 15 - 15, y: 120, textureKey: "blocks1", id: "block1", + blockPointer: 'border', }, { x: displayW / 15 - 15, y: 280, textureKey: "blocks2", id: "block2", + blockPointer: 'border', }, { x: displayW / 15 - 15, y: 460, textureKey: "blocks3", id: "block3", + blockPointer: 'border', }, { x: displayW / 15 - 15, y: 640, textureKey: "blocks4", id: "block4", + blockPointer: 'border', }, ]; this.graphics = this.add.graphics(); const droppedBlocks = []; const targetZoneBorders = []; targetZones.forEach((targetZone) => { - const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); - const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); + // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1); + const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1); targetZoneBorders.push(targetBorder); targetZone.block = null; }), blocks.forEach((block, index) => { const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); + this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true }); + this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.setScale(1.3); @@ -451,7 +481,7 @@ import Layout from '../../layouts/Layout.astro'; if (droppedOnTargetZone) { // Draw a line from the dragged block to the targetZone this.graphics.lineStyle(6, 0xFF0000); // Red color - this.graphics.moveTo(block.x + 50, block.y + 50); + this.graphics.moveTo(block.x + 105, block.y + 47); this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y); this.graphics.strokePath(); @@ -473,12 +503,12 @@ import Layout from '../../layouts/Layout.astro'; } }); }); - let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }) + // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }) retryButton.setInteractive().on('pointerdown', () => { window.location.reload(); }) diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 6185276..95f86f8 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -313,15 +313,12 @@ import Layout from '../../layouts/Layout.astro'; targetName: `target${data.right_match4}`, }, ]; - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - // Base font size for your text - const baseFontSize = 20 - // Calculate responsive font size based on screen width - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 76, data.description, { - font: ` ${responsiveFontSize}px Quicksand`, - fill: '#60C6CB', - }).setOrigin(0.5); + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + const baseFontSize = 20; + const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; + if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} + const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // Left Image Name diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index eef3113..80f97aa 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -360,14 +360,11 @@ import Layout from '../../layouts/Layout.astro'; ]; // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - // Base font size for your text - const baseFontSize = 30; - // Calculate responsive font size based on screen width - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 95, data.description, { - font: ` ${responsiveFontSize}px Quicksand`, - fill: '#60C6CB', - }).setOrigin(0.5); + const baseFontSize = 20; + const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; + if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} + const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); }) .catch(error => { console.error('Error fetching initial data:', error); diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index 952ecc2..373be0d 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -348,14 +348,11 @@ import Layout from '../../layouts/Layout.astro'; this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - // Base font size for your text - const baseFontSize = 22; - // Calculate responsive font size based on screen width - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width - const descrptText = this.add.text(screenCenterX, 95, data.description, { - font: ` ${responsiveFontSize}px Quicksand`, - fill: '#60C6CB', - }).setOrigin(0.5); + const baseFontSize = 20; + const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + let wrapWidth; + if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} + const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); }) .catch(error => { console.error('Error fetching initial data:', error); diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index eb1b525..f91b17e 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -11,13 +11,29 @@ import Layout from '../../layouts/Layout.astro';