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

working conditions save button

Browse Source
This commit is contained in:
Dev 1
2023-09-15 21:22:25 +05:30
parent 5ee8c8c768
commit 2b296cd549
4 changed files with 332 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,7 @@ import Layout from '../../layouts/Layout.astro';
height: window.innerHeight / 2,
};
var assetsList = {}
var snapshotButton;
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
@@ -59,6 +60,7 @@ import Layout from '../../layouts/Layout.astro';
function preload() {
this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
}
function create() {
@@ -339,53 +341,78 @@ import Layout from '../../layouts/Layout.astro';
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 captureSnapshot(game) {
game.renderer.snapshot((image) => {
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
document.body.appendChild(image);
function startDrawing(x, y) {
if (!isErasing) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
} else {
graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
}
graphics.beginPath();
graphics.moveTo(x, y);
}
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = 'snapshot.png';
link.click();
document.body.removeChild(image);
function continueDrawing(x, y) {
if (!isErasing) {
graphics.lineTo(x, y); // Drawing
} else {
graphics.lineTo(x, y); // Erasing by drawing with a white line
}
graphics.strokePath();
}
// Clear the drawing
// graphics.clear();
});
}
function finishDrawing() {
// No need for additional actions here
function startDrawing(x, y) {
if (!isErasing) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
} else {
graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
}
graphics.beginPath();
graphics.moveTo(x, y);
}
function clearDrawing() {
graphics.clear();
function continueDrawing(x, y) {
if (!isErasing) {
graphics.lineTo(x, y); // Drawing
} else {
graphics.lineTo(x, y); // Erasing by drawing with a white line
}
graphics.strokePath();
}
function update() {
const slider = document.querySelector('input[type="range"]');
if (slider && !isDrawing) {
const sliderValue = parseInt(slider.value);
const max = parseInt(slider.max);
const width = slider.offsetWidth;
const offsetX = (sliderValue - 2) / (max - 2) * width;
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
};
const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
customCursor.strokeCircle(0, 0, cursorSize);
// Position the cursor at the current mouse pointer coordinates
customCursor.x = this.input.x;
customCursor.y = this.input.y;
}
function finishDrawing() {
// No need for additional actions here
}
function clearDrawing() {
graphics.clear();
}
function update() {
const slider = document.querySelector('input[type="range"]');
if (slider && !isDrawing) {
const sliderValue = parseInt(slider.value);
const max = parseInt(slider.max);
const width = slider.offsetWidth;
const offsetX = (sliderValue - 2) / (max - 2) * width;
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
};
const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
customCursor.strokeCircle(0, 0, cursorSize);
// Position the cursor at the current mouse pointer coordinates
customCursor.x = this.input.x;
customCursor.y = this.input.y;
}