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

working conditions save button

pull/5/head
Dev 1 2023-09-15 21:22:25 +05:30
parent 5ee8c8c768
commit 2b296cd549
4 changed files with 332 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/svg/button-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#0000FF" width="40px" height="40px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M790.706 338.824v112.94H395.412c-31.06 0-56.47 25.3-56.47 56.471v744.509c17.73-6.325 36.592-10.391 56.47-10.391h1129.412c19.877 0 38.738 4.066 56.47 10.39V508.236c0-31.171-25.412-56.47-56.47-56.47h-395.295V338.824h395.295c93.402 0 169.411 76.009 169.411 169.411v1242.353c0 93.403-76.01 169.412-169.411 169.412H395.412C302.009 1920 226 1843.99 226 1750.588V508.235c0-93.402 76.01-169.411 169.412-169.411h395.294Zm734.118 1016.47H395.412c-31.06 0-56.47 25.299-56.47 56.47v338.824c0 31.172 25.41 56.47 56.47 56.47h1129.412c31.058 0 56.47-25.298 56.47-56.47v-338.823c0-31.172-25.412-56.47-56.47-56.47ZM1016.622-.023v880.151l246.212-246.325 79.85 79.85-382.532 382.644-382.645-382.644 79.85-79.85L903.68 880.128V-.022h112.941ZM564.824 1468.235c-62.344 0-112.942 50.71-112.942 112.941s50.598 112.942 112.942 112.942c62.343 0 112.94-50.71 112.94-112.942 0-62.23-50.597-112.94-112.94-112.94Z" fill-rule="evenodd"></path> </g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

27
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,6 +341,31 @@ 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);
// 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);
// Clear the drawing
// graphics.clear();
});
}
function startDrawing(x, y) {

98
src/pages/tracing/index.astro
View File

@ -4,42 +4,11 @@ import Layout from "../../layouts/Layout.astro";
<Layout title="">
<main>
<div>
<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
</main>
</Layout>
<script is:inline>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw a blue cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
download.addEventListener("click", function() {
// only jpeg is supported by jsPDF
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
}, false);
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
@ -48,6 +17,8 @@ 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');
@ -73,7 +44,6 @@ import Layout from "../../layouts/Layout.astro";
update: update,
},
};
const game = new Phaser.Game(config);
})
.catch(error => {
@ -83,9 +53,8 @@ import Layout from "../../layouts/Layout.astro";
var graphics;
var isDragging = false;
var image;
var letter_img;
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
var customWidth = window.innerWidth;
var customHeight = window.innerHeight;
function preload() {
this.load.image('letter_img', assetsList.letter_img);
@ -102,10 +71,10 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23' }).setOrigin(0.5);
const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4' };
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };
this.add.text(customWidth / 10, 20, data.letter_text, textStyle);
const textStyle2 = { font: 'bold 40px quicksand', fill: '#5e17eb' };
const textStyle2 = { font: 'bold 40px quicksand', fill: '#5e17eb', };
if (!isMobile) {
image = this.add.image(customWidth / 4, customHeight / 2, 'letter_img');
image.setInteractive().setDepth(1).setScale(0.6);
@ -153,35 +122,34 @@ import Layout from "../../layouts/Layout.astro";
graphics.closePath();
}, this);
// const saveButton = this.add.text(20, 20, 'Save', {
// font: '24px Arial',
// fill: '#ffffff',
// backgroundColor: '#05b3a4',
// padding: {
// x: 10,
// y: 5
// },
// borderRadius: 5
// });
// saveButton.setInteractive();
// saveButton.on('pointerdown', () => {
// takeSnapshot(this);
// });
// function takeSnapshot(scene) {
// const snapshot = scene.sys.canvas.toDataURL('image/png');
// const a = document.createElement('a');
// a.style.display = 'none';
// document.body.appendChild(a);
// a.href = snapshot;
// a.download = 'traced_letter.png';
// a.click();
// document.body.removeChild(a);
// }
// Add a "Save Snapshot" button
snapshotButton = this.add.text(customWidth - 150, customHeight - 80, 'SAVE', { fill: '#fff', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
captureSnapshot(this);
});
}
function update() {}
function captureSnapshot(game) {
game.renderer.snapshot((image) => {
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 = 'snapshot.png';
link.click();
document.body.removeChild(image);
// Clear the drawing
// graphics.clear();
});
}
</script>

136
src/pages/tracing/snapshot.astro Normal file
View File

@ -0,0 +1,136 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
class Example extends Phaser.Scene {
isKeyDown = false;
isMouseDown = false;
graphicsPath = [];
graphics;
snapHistory = [];
time = 0;
div = document.createElement('div');
preload() {
this.load.image('myImage', 'assets/sprites/phaser1.png');
this.load.glsl('shader0', 'assets/shaders/shader0.frag');
}
create() {
this.div.innerHTML = 'PRESS SPACE TO TAKE SNAPSHOT<br>';
document.body.appendChild(this.div);
for (let i = 0; i < 5; ++i) {
const image = this.add.image(Math.random() * 800, Math.random() * 600, 'myImage');
}
this.graphics = this.add.graphics({ x: 0, y: 0 });
game.canvas.onmousedown = (e) => {
this.isMouseDown = true;
this.graphics.clear();
this.graphicsPath.length = 0;
};
game.canvas.onmouseup = (e) => {
this.isMouseDown = false;
};
game.canvas.onmousemove = (e) => {
const mouseX = e.clientX - game.canvas.offsetLeft;
const mouseY = e.clientY - game.canvas.offsetTop;
if (this.isMouseDown) {
this.graphicsPath.push({ x: mouseX, y: mouseY });
}
};
window.onkeydown = (e) => {
if (e.keyCode === 32 && !this.isKeyDown) {
game.renderer.snapshot((image) => {
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
this.snapHistory.push(image);
console.log('snap!');
document.body.appendChild(image);
});
this.isKeyDown = true;
}
};
window.onkeyup = (e) => {
if (e.keyCode === 32) {
this.isKeyDown = false;
}
};
// Create a "Save Now" button
const saveButton = this.add.text(650, 10, 'Save Now', { fill: '#05b3a4' });
saveButton.setInteractive();
saveButton.on('pointerdown', () => {
// Hide the "Save Now" text
saveButton.visible = false;
// Trigger the snapshot
game.renderer.snapshot((image) => {
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
this.snapHistory.push(image);
console.log('snap!');
document.body.appendChild(image);
// 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); // Remove the image after download
// Disable snapshot preview
this.graphics.clear();
this.graphicsPath = [];
// Show the "Save Now" text again
saveButton.visible = true;
});
});
}
update() {
const length = this.graphicsPath.length;
this.graphics.clear();
this.graphics.lineStyle(10.0, 0xffff00, 1.0);
this.graphics.beginPath();
for (let i = 0; i < length; ++i) {
const node = this.graphicsPath[i];
if (i !== 0) {
this.graphics.lineTo(node.x, node.y);
} else {
this.graphics.moveTo(node.x, node.y);
}
}
this.graphics.strokePath();
this.graphics.closePath();
this.time += 0.01;
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example,
};
const game = new Phaser.Game(config);
</script>