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

little changes in drag game and guided letter tracing game

Browse Source
This commit is contained in:
Dev 1
2023-10-06 18:20:59 +05:30
parent 2e1fef6390
commit 1178b1bd29
3 changed files with 94 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,8 +47,8 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
const displayH = window.innerHeight;
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let graphics;
let isDrawing = false;
let selectedColor = '#f00f0f'; // Default color
@@ -79,13 +79,13 @@ import Layout from '../../layouts/Layout.astro';
});
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){
this.add.text(displayW / 10, 20, "Drawing", textStyle);
this.add.image(displayW / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Drawing", textStyle);
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
} else {
this.add.text(displayW / 30, 0, "Drawing", textStyle);
this.add.image(displayW / 2 * 1.6 - 0.5, 25, 'topLogo');
this.add.text(customWidth / 30, 0, "Drawing", textStyle);
this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.5);
} else{
@@ -95,7 +95,7 @@ import Layout from '../../layouts/Layout.astro';
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
colorContainer.style.top = '10%';
colorContainer.style.top = '13%';
colorContainer.style.left = '10px';
colorContainer.style.display = 'flex';
colorContainer.style.marginBottom = '15px';
@@ -165,8 +165,8 @@ import Layout from '../../layouts/Layout.astro';
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
} else {
button.style.width = `40px`;
button.style.height = `40px`;
button.style.width = `45px`;
button.style.height = `45px`;
}
button.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -211,12 +211,15 @@ import Layout from '../../layouts/Layout.astro';
const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute';
buttonsContainer.style.display = 'flex';
buttonsContainer.style.flexDirection = 'row';
buttonsContainer.style.top = '0%';
buttonsContainer.style.marginTop = '30px';
if(!isMobile){
// buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '25%';
buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%';
}
buttonsContainer.style.left = '20px';
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
@@ -229,7 +232,7 @@ import Layout from '../../layouts/Layout.astro';
clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '1px 4px';
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
} else {
clearButton.style.padding = '5px 10px';
@@ -252,7 +255,7 @@ import Layout from '../../layouts/Layout.astro';
// eraserButton.style.marginTop = '0px';
eraserButton.style.marginBottom = '0px';
if(isMobile){
eraserButton.style.padding = '1px 1px';
eraserButton.style.padding = '4px 4px';
} else {
eraserButton.style.padding = '5px 5px';
eraserButton.style.marginTop = '15px';
@@ -318,7 +321,7 @@ import Layout from '../../layouts/Layout.astro';
isDrawing = false;
});
customCursor = this.add.graphics();
customCursor.setDepth(2)
// Disable the default cursor
this.input.setDefaultCursor('none');
const borderThickness = 0;
@@ -326,29 +329,40 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor);
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
function continueDrawing(x, y) {
// Check if the pointer coordinates are within the drawing zone
if (
x >= drawingZone.x &&
x <= drawingZone.x + drawingZone.width &&
y >= drawingZone.y &&
y <= drawingZone.y + drawingZone.height
) {
// The pointer is within the drawing zone, so continue drawing
graphics.lineTo(x, y);
graphics.strokePath();
}
};
// Add a "Save Snapshot" button
snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, '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', () => {
captureSnapshot(this);
});
function continueDrawing(x, y) {
// Check if the pointer coordinates are within the drawing zone
if (
x >= drawingZone.x &&
x <= drawingZone.x + drawingZone.width &&
y >= drawingZone.y &&
y <= drawingZone.y + drawingZone.height
) {
// The pointer is within the drawing zone, so continue drawing
graphics.lineTo(x, y);
graphics.strokePath();
}
};
// Add a "Save Snapshot" button
if(isMobile){
snapWidth = 50;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - snapWidth, window.innerHeight - snapHeight, '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', () => {
captureSnapshot(this);
});
}
function captureSnapshot(drawingZone) {
snapshotButton.setVisible(false);
customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => {
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
@@ -434,8 +448,8 @@ import Layout from '../../layouts/Layout.astro';
// };
// const drawingZone = new Phaser.Game(config);
// const displayW = window.innerWidth;
// const displayH = window.innerHeight;
// const customWidth = window.innerWidth;
// const customHeight = window.innerHeight;
// let graphics;
// let outlineImage;
@@ -448,7 +462,7 @@ import Layout from '../../layouts/Layout.astro';
// }
// function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
// outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
// graphics = this.add.graphics();
@@ -553,8 +567,8 @@ import Layout from '../../layouts/Layout.astro';
// };
// const game = new Phaser.Game(config);
// const displayW = window.innerWidth;
// const displayH = window.innerHeight;
// const customWidth = window.innerWidth;
// const customHeight = window.innerHeight;
// let graphics;
// let outlineImage;
@@ -567,7 +581,7 @@ import Layout from '../../layouts/Layout.astro';
// }
// function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
// outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
// graphics = this.add.graphics();