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="">
<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>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
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 = {}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({data}) => {
const {letter_img, icon_img} = data;
assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img; // + "?width=450";
assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img; // + "?width=450";
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: '#05b3a4',
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;
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
// 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();
function preload() {
// Load the image asset
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 }) => {
// console.log({ 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);
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,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
var assetsList = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
const { letter_img, icon_img } = data;
assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img;
assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img;
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: '#05b3a4',
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);
}
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
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');
this.input.on('pointerdown', function (pointer) {
if (image.getBounds().contains(pointer.x, pointer.y)) {
isDragging = true;
this.children.bringToTop(graphics);
graphics.beginPath();
graphics.moveTo(pointer.x, pointer.y);
}
}, this);
this.input.on('pointerdown', function (pointer) {
if (image.getBounds().contains(pointer.x, pointer.y)) {
// Start dragging only if the pointer is over the image
isDragging = true;
this.input.on('pointermove', function (pointer) {
if (isDragging) {
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
}
}, this);
// Bring the graphics to the front
this.children.bringToTop(graphics);
this.input.on('pointerup', function () {
isDragging = false;
graphics.closePath();
}, this);
graphics.beginPath();
graphics.moveTo(pointer.x, pointer.y);
}
}, this);
// const saveButton = this.add.text(20, 20, 'Save', {
// font: '24px Arial',
// fill: '#ffffff',
// backgroundColor: '#05b3a4',
// padding: {
// x: 10,
// y: 5
// },
// borderRadius: 5
// });
this.input.on('pointermove', function (pointer) {
if (isDragging) {
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
}
}, this);
this.input.on('pointerup', function () {
isDragging = false;
graphics.closePath();
}, this);
}
function update() {}
// 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);
// }
}
function update() {}
</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>
var config = {
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
width: 800, // Replace with your game width
height: 600, // Replace with your game height
scene: {
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() {
// Preload game assets if needed
// Load your game assets here
}
function create() {
// Create game objects and render your scene
// Create your game objects and setup your scene
// Create the "Save" button
saveButton = this.add.text(700, 550, 'Save', { fontSize: '24px', fill: '#fff' });
saveButton.setInteractive();
saveButton.on('pointerdown', captureAndSave);
// Create a button to take a snapshot
snapshotButton = this.add.text(10, 10, 'Snapshot', { fontSize: '24px', fill: '#fff' });
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', takeSnapshot, this);
}
function captureAndSave() {
// Capture the game canvas as an image
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 update() {
// Update your game logic here
}
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>
<!-- <script is:inline>
// Include the html2canvas library (make sure to include it in your HTML file)
// You can download it from https://html2canvas.hertzen.com/
// Trigger a click event to download the snapshot
a.dispatchEvent(new MouseEvent('click'));
});
}
// Capture a screenshot of the entire webpage
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> -->
</script>