kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s2

pull/15/head
Suvodip 2024-06-15 18:08:20 +05:30
parent 71c5f88b9a
commit a8277e9aad
11 changed files with 440 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/drag/dragdrop_phonics.astro
View File

@ -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`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 22; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#60C6CB',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

10
src/pages/drag/index.astro
View File

@ -312,11 +312,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 30; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5); 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 = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",

132
src/pages/drag/match_phonics.astro
View File

@ -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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -65,6 +80,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -72,13 +92,6 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -100,6 +113,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@ -233,12 +247,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("topMatch", "/assets/top_match.jpg");
// this.load.image("target1", assetsList.right_image1); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("target2", '/assets/hay.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target4", '/assets/star.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -298,15 +313,12 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 20 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // 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); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@ -352,77 +364,95 @@ import Layout from '../../layouts/Layout.astro';
console.error('An error occured', error) 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); 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 = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); 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); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@ -451,7 +481,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color 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.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@ -473,12 +503,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })

15
src/pages/drag/v2.astro
View File

@ -313,15 +313,12 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 20 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#60C6CB',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // 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); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name

13
src/pages/drag/v3.astro
View File

@ -360,14 +360,11 @@ import Layout from '../../layouts/Layout.astro';
]; ];
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 30; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#60C6CB',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

13
src/pages/drag/v4.astro
View File

@ -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`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 22; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#60C6CB',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

103
src/pages/drawing/drawing_phonics.astro
View File

@ -11,13 +11,29 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
}; };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -27,6 +43,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -36,11 +57,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -105,6 +122,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
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.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@ -117,9 +138,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
@ -154,17 +177,36 @@ import Layout from '../../layouts/Layout.astro';
}); });
}; };
// window.load // window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
});
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
@ -181,12 +223,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
} }
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); let outlineImagePosition;
isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.31); outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.38);
} else{ } else{
outlineImage.setDepth(1).setScale(0.5); outlineImage.setDepth(1).setScale(0.5);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
@ -227,9 +273,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Append the color picker to the color container data // Append the color picker to the color container data
colorContainer.appendChild(colorPicker); colorContainer.appendChild(colorPicker);
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700']; // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@ -331,20 +378,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue'; // clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -453,13 +500,13 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; snapHeight = 70;
} }
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons'); snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {

107
src/pages/drawing/drawing_writo.astro
View File

@ -11,13 +11,30 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
}; };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -27,6 +44,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -36,11 +58,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -105,6 +123,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
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.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@ -117,9 +139,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 18; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 50, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
@ -154,24 +178,41 @@ import Layout from '../../layouts/Layout.astro';
}); });
}; };
// window.load // window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData();
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@ -181,12 +222,15 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
} }
const outlineImage = this.add.image(customWidth / 2, customHeight / 2+0, 'outline'); let outlineImagePosition; isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2+0, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.33); outlineImage.setDepth(1).setScale(0.21);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.32);
} else{ } else{
outlineImage.setDepth(1).setScale(0.45); outlineImage.setDepth(1).setScale(0.45);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
@ -205,7 +249,7 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.value = selectedColor; colorPicker.value = selectedColor;
colorPicker.className = 'color-picker'; colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px'; colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px'; colorPicker.style.marginTop = '25px';
colorPicker.style.marginRight = '15px'; colorPicker.style.marginRight = '15px';
// colorPicker.style.padding = '1px 1px'; // colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none'; // colorPicker.style.outline = 'none';
@ -227,9 +271,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Append the color picker to the color container data // Append the color picker to the color container data
colorContainer.appendChild(colorPicker); colorContainer.appendChild(colorPicker);
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700']; // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@ -293,7 +338,7 @@ import Layout from '../../layouts/Layout.astro';
button.style.marginTop = '5px'; button.style.marginTop = '5px';
button.style.marginBottom = '5px'; button.style.marginBottom = '5px';
} else{ } else{
button.style.border = "2px solid"; button.style.border = "2px solid";
button.style.borderColor = color; button.style.borderColor = color;
button.style.boxShadow = '5px 10px 30px #7c4c2390'; button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '20%'; button.style.borderRadius = '20%';
@ -321,7 +366,7 @@ import Layout from '../../layouts/Layout.astro';
buttonsContainer.style.marginTop = '30px'; buttonsContainer.style.marginTop = '30px';
if(!isMobile){ if(!isMobile){
// buttonsContainer.style.position = 'fixed'; // buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '10%'; buttonsContainer.style.top = '12%';
buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px'; buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%'; buttonsContainer.style.marginTop = '0%';
@ -331,20 +376,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue'; // clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -453,13 +498,13 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; snapHeight = 70;
} }
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons'); snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {

128
src/pages/drawing/index.astro
View File

@ -11,13 +11,30 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
}; };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -27,6 +44,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -36,11 +58,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -105,6 +123,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
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.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@ -117,9 +139,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
@ -127,21 +151,41 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
// window.load // window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
});
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
submitNotic.setVisible(false);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData(this);
}); });
@ -157,10 +201,11 @@ import Layout from '../../layouts/Layout.astro';
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.33); outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.40);
} else{ } else{
outlineImage.setDepth(1).setScale(0.65); outlineImage.setDepth(1).setScale(0.65);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute'; colorContainer.style.position = 'absolute';
@ -202,7 +247,8 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker); colorContainer.appendChild(colorPicker);
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700']; var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@ -304,20 +350,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue'; // clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -426,27 +472,51 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; snapHeight = 70;
} }
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons'); snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {
// submitUserData(this); captureSnapshot(this);
}); });
snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'}); snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
snapNotice.setVisible(false); snapNotice.setVisible(false);
} }
function captureSnapshot(drawingZone) {
// snapNotice.setVisible(true);
submitButton.setVisible(false);
snapshotButton.setVisible(false);
customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
document.body.appendChild(image);
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = 'my_drawing.png';
link.click();
document.body.removeChild(image);
// Clear the drawing
// graphics.clear();
});
}
const url = window.location.href; const url = window.location.href;
const gameName = url.split('/'); const gameName = url.split('/');
const gameType = gameName[3].split('?id='); const gameType = gameName[3].split('?id=');
function submitUserData(drawingZone) { function submitUserData(drawingZone) {
let imageCode; let imageCode;
console.log(drawingZone); // console.log(drawingZone);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);

114
src/pages/drawing/v2.astro
View File

@ -11,13 +11,31 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
// const drawingZone = { // const drawingZone = {
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width // x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
// y: window.innerHeight / 1, // y: window.innerHeight / 1,
// width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width // width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
// height: window.innerHeight / 2, // height: window.innerHeight / 2,
// }; // };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -33,6 +51,11 @@ import Layout from '../../layouts/Layout.astro';
image2Height = 2; image2Height = 2;
image2Bottom = 110; image2Bottom = 110;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -41,19 +64,14 @@ import Layout from '../../layouts/Layout.astro';
downloadHeight = 70; downloadHeight = 70;
learningWidth = 450; learningWidth = 450;
learningHeight = 350; learningHeight = 350;
image1Width = 4; image1Width = 3;
image1Height = 1.8; image1Height = 1.8;
image2Width = 2; image2Width = 2;
image2Right = 400; image2Right = 250;
image2Height = 1.8; image2Height = 1.8;
image2Bottom = 0; image2Bottom = 0;
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -118,10 +136,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('image1', assetsList.image1); this.load.image('image1', assetsList.image1);
this.load.image('image2', assetsList.image2); this.load.image('image2', assetsList.image2);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
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.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png'); this.load.image('waxTexture', '/assets/texture.png');
} }
function create() { function create() {
@ -132,9 +153,15 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
@ -169,21 +196,39 @@ import Layout from '../../layouts/Layout.astro';
}); });
}; };
// window.load // window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', ()=>{
window.location.reload();
})
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData();
@ -196,14 +241,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
} }
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
if(isMobile){ if(isMobile){
outlineImage1.setDepth(1).setScale(0.28); outlineImage1.setDepth(1).setScale(0.28);
outlineImage2.setDepth(1).setScale(0.28); outlineImage2.setDepth(1).setScale(0.28);
}else if(isTab){
outlineImage1.setDepth(1).setScale(0.34);
outlineImage2.setDepth(1).setScale(0.34);
} else{ } else{
outlineImage1.setDepth(1).setScale(0.65); outlineImage1.setDepth(1).setScale(0.60);
outlineImage2.setDepth(1).setScale(0.65); outlineImage2.setDepth(1).setScale(0.60);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
@ -305,10 +352,10 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue'; // // clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginLeft = '30px'; clearButton.style.marginLeft = '30px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
@ -316,9 +363,9 @@ import Layout from '../../layouts/Layout.astro';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -410,13 +457,14 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics(); const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.lineStyle(borderThickness, borderColor);
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; snapHeight = 70;
} }
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons'); // snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {
captureSnapshot(this); captureSnapshot(this);

4
src/pages/drawing/v3.astro
View File

@ -29,7 +29,7 @@ import Layout from '../../layouts/Layout.astro';
let muteIconWidth; let muteIconWidth;
let resetIconWidth; let resetIconWidth;
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 5;
muteIconWidth = 2; muteIconWidth = 2;
@ -148,7 +148,7 @@ import Layout from '../../layouts/Layout.astro';
} else{ } else{
wrapWidth = 200; wrapWidth = 200;
} }
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); 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(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })