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

try to export as pdf

pull/5/head
Dev 1 2023-09-15 12:10:33 +05:30
parent ae955c0229
commit 5ee8c8c768
3 changed files with 215 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/assets/js/html2canvas.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

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

@ -4,126 +4,184 @@ import Layout from "../../layouts/Layout.astro";
<Layout title=""> <Layout title="">
<main> <main>
<div> <div>
<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>
</div> </div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <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> </main>
</Layout> </Layout>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed var canvas = document.getElementById('myCanvas');
const drawingZone = { var context = canvas.getContext('2d');
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2,
};
var assetsList = {}
const params = new URLSearchParams(window.location.search); // draw a blue cloud
const paramsID = params.get('id'); context.beginPath();
const data = fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`) context.moveTo(170, 80);
.then(response => response.json()) context.bezierCurveTo(130, 100, 130, 150, 230, 150);
.then(({data}) => { context.bezierCurveTo(250, 180, 320, 180, 340, 150);
const {letter_img, icon_img} = data; context.bezierCurveTo(420, 150, 420, 120, 390, 100);
assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img; // + "?width=450"; context.bezierCurveTo(430, 40, 370, 30, 340, 50);
assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img; // + "?width=450"; context.bezierCurveTo(320, 5, 250, 20, 250, 50);
const config = { context.bezierCurveTo(200, 5, 150, 20, 170, 80);
type: Phaser.AUTO, context.closePath();
width: window.innerWidth, context.lineWidth = 5;
height: window.innerHeight, context.fillStyle = '#8ED6FF';
backgroundColor: '#05b3a4', context.fill();
scale: { context.strokeStyle = '#0000ff';
mode: Phaser.Scale.FIT, context.stroke();
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update,
},
};
const game = new Phaser.Game(config);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
var graphics;
var isDragging = false;
var image;
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
function preload() { download.addEventListener("click", function() {
// Load the image asset // only jpeg is supported by jsPDF
this.load.image('letter_img', assetsList.letter_img); var imgData = canvas.toDataURL("image/jpeg", 1.0);
this.load.image('icon_img', assetsList.icon_img); var pdf = new jsPDF();
this.load.image('topLogo', '/assets/top_logo.png');
} pdf.addImage(imgData, 'JPEG', 0, 0);
function create() { pdf.save("download.pdf");
const params = new URLSearchParams(window.location.search); }, false);
const paramsID = params.get('id'); const isMobile = window.innerWidth <= 768;
fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`) const drawingZone = {
.then(response => response.json()) x: isMobile ? 0 : window.innerWidth / 4,
.then(({ data }) => { y: window.innerHeight / 4,
// console.log({ data }) width: isMobile ? window.innerWidth : window.innerWidth / 2,
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; height: window.innerHeight / 2,
const baseFontSize = 20; };
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; var assetsList = {}
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 params = new URLSearchParams(window.location.search);
this.add.text(customWidth / 10, 20, data.letter_text, textStyle); const paramsID = params.get('id');
const textStyle2 = {font: 'bold 40px quicksand', fill: '#5e17eb',}; const data = fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
if(!isMobile){ .then(response => response.json())
image = this.add.image(customWidth / 4, customHeight / 2, 'letter_img'); .then(({ data }) => {
image.setInteractive().setDepth(1).setScale(0.6); const { letter_img, icon_img } = data;
letter_img = this.add.image(customWidth / 1.5, customHeight / 2, 'icon_img'); assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img;
letter_img.setDepth().setScale(0.6); assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img;
this.add.text(customWidth / 1.6, customHeight / 1.25, data.icon_name, textStyle2);
} else{ const config = {
image = this.add.image(customWidth / 2.5, customHeight / 2.5, 'letter_img'); type: Phaser.AUTO,
image.setInteractive().setDepth(1).setScale(0.3); width: window.innerWidth,
letter_img = this.add.image(customWidth / 1.35, customHeight / 2 + 100 , 'icon_img'); height: window.innerHeight,
letter_img.setDepth().setScale(0.3); backgroundColor: '#05b3a4',
this.add.text(customWidth / 2, customHeight / 1.3, data.icon_name, textStyle2); scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update,
},
};
const game = new Phaser.Game(config);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
var graphics;
var isDragging = false;
var image;
var letter_img;
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
function preload() {
this.load.image('letter_img', assetsList.letter_img);
this.load.image('icon_img', assetsList.icon_img);
this.load.image('topLogo', '/assets/top_logo.png');
}
function create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
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' };
this.add.text(customWidth / 10, 20, data.letter_text, textStyle);
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);
letter_img = this.add.image(customWidth / 1.5, customHeight / 2, 'icon_img');
letter_img.setDepth().setScale(0.6);
this.add.text(customWidth / 1.6, customHeight / 1.25, data.icon_name, textStyle2);
} else {
image = this.add.image(customWidth / 2.5, customHeight / 2.5, 'letter_img');
image.setInteractive().setDepth(1).setScale(0.3);
letter_img = this.add.image(customWidth / 1.35, customHeight / 2 + 100, 'icon_img');
letter_img.setDepth().setScale(0.3);
this.add.text(customWidth / 2, customHeight / 1.3, data.icon_name, textStyle2);
}
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
graphics = this.add.graphics();
if (!isMobile) {
graphics.lineStyle(50, 0x5e17eb);
} else {
graphics.lineStyle(25, 0x5e17eb);
} }
}) this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
.catch(error => {
console.error('Error fetching initial data:', error);
});
graphics = this.add.graphics(); this.input.on('pointerdown', function (pointer) {
if(!isMobile){ if (image.getBounds().contains(pointer.x, pointer.y)) {
graphics.lineStyle(50, 0x5e17eb); isDragging = true;
} else { this.children.bringToTop(graphics);
graphics.lineStyle(25, 0x5e17eb); graphics.beginPath();
} graphics.moveTo(pointer.x, pointer.y);
this.add.image(customWidth / 2 * 1.6 - 0.5, 50 , 'topLogo'); }
}, this);
this.input.on('pointerdown', function (pointer) { this.input.on('pointermove', function (pointer) {
if (image.getBounds().contains(pointer.x, pointer.y)) { if (isDragging) {
// Start dragging only if the pointer is over the image graphics.lineTo(pointer.x, pointer.y);
isDragging = true; graphics.strokePath();
}
}, this);
// Bring the graphics to the front this.input.on('pointerup', function () {
this.children.bringToTop(graphics); isDragging = false;
graphics.closePath();
}, this);
graphics.beginPath(); // const saveButton = this.add.text(20, 20, 'Save', {
graphics.moveTo(pointer.x, pointer.y); // font: '24px Arial',
} // fill: '#ffffff',
}, this); // backgroundColor: '#05b3a4',
// padding: {
// x: 10,
// y: 5
// },
// borderRadius: 5
// });
this.input.on('pointermove', function (pointer) { // saveButton.setInteractive();
if (isDragging) {
graphics.lineTo(pointer.x, pointer.y); // saveButton.on('pointerdown', () => {
graphics.strokePath(); // takeSnapshot(this);
} // });
}, this);
this.input.on('pointerup', function () { // function takeSnapshot(scene) {
isDragging = false; // const snapshot = scene.sys.canvas.toDataURL('image/png');
graphics.closePath(); // const a = document.createElement('a');
}, this); // a.style.display = 'none';
} // document.body.appendChild(a);
// a.href = snapshot;
function update() {} // a.download = 'traced_letter.png';
// a.click();
// document.body.removeChild(a);
// }
}
function update() {}
</script> </script>

86
src/pages/tracing/temp.astro
View File

@ -1,77 +1,49 @@
---
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> <script is:inline>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800, // Replace with your game width
height: 600, height: 600, // Replace with your game height
scene: { scene: {
preload: preload, preload: preload,
create: create create: create,
update: update
} }
}; };
var game = new Phaser.Game(config); const game = new Phaser.Game(config);
var saveButton; let snapshotButton;
function preload() { function preload() {
// Preload game assets if needed // Load your game assets here
} }
function create() { function create() {
// Create game objects and render your scene // Create your game objects and setup your scene
// Create the "Save" button // Create a button to take a snapshot
saveButton = this.add.text(700, 550, 'Save', { fontSize: '24px', fill: '#fff' }); snapshotButton = this.add.text(10, 10, 'Snapshot', { fontSize: '24px', fill: '#fff' });
saveButton.setInteractive(); snapshotButton.setInteractive();
saveButton.on('pointerdown', captureAndSave); snapshotButton.on('pointerdown', takeSnapshot, this);
} }
function captureAndSave() { function update() {
// Capture the game canvas as an image // Update your game logic here
game.canvas.toBlob(function (blob) {
// Convert the captured image to JPG
var url = URL.createObjectURL(blob);
// Create a download link for the JPG image
var a = document.createElement("a");
a.href = url;
a.download = "screenshot.jpg";
a.click();
// Clean up the URL object
URL.revokeObjectURL(url);
}, "image/jpeg");
} }
function takeSnapshot() {
// Capture a snapshot of the game canvas
game.renderer.snapshot(snapshot => {
const snapshotImage = snapshot.image;
// Create a temporary HTML anchor element for downloading
const a = document.createElement('a');
a.href = snapshotImage.src;
a.download = 'snapshot.png';
</script> // Trigger a click event to download the snapshot
<!-- <script is:inline> a.dispatchEvent(new MouseEvent('click'));
// Include the html2canvas library (make sure to include it in your HTML file) });
// You can download it from https://html2canvas.hertzen.com/ }
// Capture a screenshot of the entire webpage </script>
html2canvas(document.body).then(function(canvas) {
// Convert the canvas to a data URL
var screenshotDataUrl = canvas.toDataURL('image/jpeg');
// Create a link to download the image
var a = document.createElement('a');
a.href = screenshotDataUrl;
a.download = 'screenshot.jpg';
// Trigger a click event to download the image
a.click();
});
</script> -->