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

105
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);
}
// Clear the drawing
// 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 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 finishDrawing() {
// No need for additional actions here
}
}
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;
}

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

@ -4,184 +4,152 @@ 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');
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 = {}
var snapshotButton;
// 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();
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;
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,
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,
},
};
var assetsList = {}
const game = new Phaser.Game(config);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
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;
var graphics;
var isDragging = false;
var image;
var customWidth = window.innerWidth;
var customHeight = window.innerHeight;
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,
},
};
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');
}
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();
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', 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', };
if (!isMobile) {
graphics.lineStyle(50, 0x5e17eb);
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 {
graphics.lineStyle(25, 0x5e17eb);
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);
}
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
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);
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('pointermove', function (pointer) {
if (isDragging) {
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
}
}, this);
this.input.on('pointerup', function () {
isDragging = false;
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);
// }
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('pointermove', function (pointer) {
if (isDragging) {
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
}
}, this);
this.input.on('pointerup', function () {
isDragging = false;
graphics.closePath();
}, this);
// 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();
});
}
function update() {}
</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>