s2
This commit is contained in:
Suvodip
@@ -11,13 +11,29 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: window.innerWidth,
|
||||
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){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
submitWidth = 250;
|
||||
submitHeight = 110;
|
||||
noticeWidth = 100;
|
||||
@@ -27,6 +43,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
learningWidth = 200;
|
||||
learningHeight = 400
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
submitWidth = 380;
|
||||
submitHeight = 95;
|
||||
noticeWidth = 0;
|
||||
@@ -36,11 +57,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
learningWidth = 450;
|
||||
learningHeight = 400
|
||||
}
|
||||
var assetsList = {}
|
||||
var snapshotButton;
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
currentDate = new Date();
|
||||
@@ -105,6 +122,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
function preload() {
|
||||
this.load.image('outline', assetsList.image);
|
||||
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('cursorImage', '/assets/svg/pencil.svg');
|
||||
}
|
||||
@@ -117,9 +138,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
.then(({ data }) => {
|
||||
// console.log(data.colors)
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 22;
|
||||
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).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);
|
||||
// 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)
|
||||
})
|
||||
@@ -154,17 +177,36 @@ import Layout from '../../layouts/Layout.astro';
|
||||
});
|
||||
};
|
||||
// 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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
});
|
||||
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// });
|
||||
submitButton.setVisible(true);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
@@ -181,12 +223,16 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
|
||||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
|
||||
}
|
||||
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
|
||||
let outlineImagePosition;
|
||||
isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
|
||||
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2, 'outline');
|
||||
if(isMobile){
|
||||
outlineImage.setDepth(1).setScale(0.31);
|
||||
outlineImage.setDepth(1).setScale(0.33);
|
||||
}else if(isTab){
|
||||
outlineImage.setDepth(1).setScale(0.38);
|
||||
} else{
|
||||
outlineImage.setDepth(1).setScale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
graphics = this.add.graphics();
|
||||
const colorContainer = document.createElement('div');
|
||||
@@ -227,9 +273,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
});
|
||||
// Append the color picker to the color container data
|
||||
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;
|
||||
// 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 buttonSize = 60;
|
||||
const buttonSpacing = 5;
|
||||
@@ -331,20 +378,20 @@ import Layout from '../../layouts/Layout.astro';
|
||||
document.body.appendChild(buttonsContainer);
|
||||
// Create the Clear 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.color = 'blue';
|
||||
clearButton.style.width = 'fit-content';
|
||||
clearButton.style.marginRight = '10px';
|
||||
// clearButton.style.color = 'blue';
|
||||
// clearButton.style.width = 'fit-content';
|
||||
// clearButton.style.marginRight = '10px';
|
||||
if(isMobile){
|
||||
clearButton.style.padding = '2px 8px';
|
||||
buttonsContainer.style.top = '17%';
|
||||
} else {
|
||||
clearButton.style.padding = '5px 10px';
|
||||
}
|
||||
clearButton.style.fontWeight = 'bold';
|
||||
clearButton.style.borderRadius = '20%';
|
||||
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
// clearButton.style.fontWeight = 'bold';
|
||||
// clearButton.style.borderRadius = '20%';
|
||||
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
clearButton.addEventListener('click', () => {
|
||||
clearDrawing();
|
||||
});
|
||||
@@ -453,13 +500,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||
};
|
||||
// Add a "Save Snapshot" button
|
||||
if(isMobile){
|
||||
snapWidth = 50;
|
||||
snapWidth = 70;
|
||||
snapHeight = 70;
|
||||
} else {
|
||||
snapWidth = 200;
|
||||
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.setInteractive();
|
||||
snapshotButton.on('pointerdown', () => {
|
||||
|
||||
Reference in New Issue
Block a user