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

working_on_game_description_from_API_line_No-74

Browse Source
This commit is contained in:
Dev 1
2023-08-31 20:08:02 +05:30
parent 35c4c21b30
commit dc84dad317
4 changed files with 433 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,16 @@ import Layout from '../../layouts/Layout.astro';
</main>
</Layout>
<script is:inline>
const config = {
var assetsList = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({data}) => {
const {image} = data;
assetsList.image = "https://management.beanstalkedu.com/assets/" + image ;
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
@@ -24,8 +33,29 @@ import Layout from '../../layouts/Layout.astro';
update: update,
},
};
const game = new Phaser.Game(config);
})
.catch(error => {
const game = new Phaser.Game(config);
console.error('Error fetching initial data:', error);
});
// const config = {
// type: Phaser.AUTO,
// width: window.innerWidth,
// height: window.innerHeight,
// backgroundColor: '#ffffff',
// scale: {
// mode: Phaser.Scale.FIT,
// autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
// },
// scene: {
// preload: preload,
// create: create,
// update: update,
// },
// };
// const game = new Phaser.Game(config);
const displayW = window.innerWidth;
const displayH = window.innerHeight;
@@ -33,10 +63,11 @@ let graphics;
let outlineImage;
let isDrawing = false;
let selectedColor = '#ff0000'; // Default color
let brushSize = 5; // Default brush size
let brushSize = 1; // Default brush size
function preload() {
this.load.image('outline', '/assets/cow.png');
// this.load.image('outline', '/assets/cow.png');
this.load.image('outline', assetsList.image);
}
function create() {
@@ -44,26 +75,34 @@ function create() {
graphics = this.add.graphics();
// Create a color picker using HTML input type color
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
colorPicker.addEventListener('input', (event) => {
selectedColor = event.target.value;
});
document.body.appendChild(colorPicker);
colorPicker.style.position = 'absolute';
// colorPicker.textContent = 'Clear';
colorPicker.style.top = '30px';
colorPicker.style.left = '20px';
colorPicker.addEventListener('input', (event) => {
selectedColor = event.target.value; // Update selectedColor
});
// Create a brush size slider using HTML input type range
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
document.body.appendChild(sliderContainer);
sliderContainer.style.position = 'absolute';
sliderContainer.style.top = '20px';
sliderContainer.style.right = '20px';
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '2';
slider.max = '20';
slider.value = brushSize.toString(); // Set initial value to brushSize
slider.value = brushSize.toString();
slider.className = 'slider';
sliderContainer.appendChild(slider);
@@ -74,11 +113,24 @@ function create() {
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
clearButton.className = 'clear-button';
// clearButton.className = 'clear-button';
document.body.appendChild(clearButton);
clearButton.style.position = 'absolute';
clearButton.style.top = '20px';
clearButton.style.left = '120px';
clearButton.style.backgroundColor = 'blue';
clearButton.style.color = 'white';
clearButton.style.padding = '10px 30px';
clearButton.style.fontSize = '20px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
clearButton.addEventListener('click', () => {
clearDrawing();
});
document.body.appendChild(clearButton);
this.input.on('pointerdown', () => {
isDrawing = true;
startDrawing(this.input.x, this.input.y);
@@ -97,6 +149,7 @@ function create() {
isDrawing = false;
});
}
function startDrawing(x, y) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
graphics.beginPath();
@@ -117,7 +170,6 @@ function clearDrawing() {
}
function update() {
// Update the slider position based on the pointer's movement
const slider = document.querySelector('input[type="range"]');
if (slider && !isDrawing) {
const sliderValue = parseInt(slider.value);
@@ -128,6 +180,131 @@ function update() {
}
}
// 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);
// const displayW = window.innerWidth;
// const displayH = window.innerHeight;
// let graphics;
// let outlineImage;
// let isDrawing = false;
// let selectedColor = '#ff0000'; // Default color
// let brushSize = 5; // Default brush size
// function preload() {
// this.load.image('outline', '/assets/cow.png');
// }
// function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
// graphics = this.add.graphics();
// // Create a color picker using HTML input type color
// const colorPicker = document.createElement('input');
// colorPicker.type = 'color';
// colorPicker.value = selectedColor;
// colorPicker.className = 'color-picker';
// colorPicker.addEventListener('input', (event) => {
// selectedColor = event.target.value;
// });
// document.body.appendChild(colorPicker);
// // Create a brush size slider using HTML input type range
// const sliderContainer = document.createElement('div');
// sliderContainer.className = 'slider-container';
// document.body.appendChild(sliderContainer);
// const slider = document.createElement('input');
// slider.type = 'range';
// slider.min = '2';
// slider.max = '20';
// slider.value = brushSize.toString(); // Set initial value to brushSize
// slider.className = 'slider';
// sliderContainer.appendChild(slider);
// slider.addEventListener('input', (event) => {
// brushSize = parseInt(event.target.value);
// slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
// });
// const clearButton = document.createElement('button');
// clearButton.textContent = 'Clear';
// clearButton.className = 'clear-button';
// clearButton.addEventListener('click', () => {
// clearDrawing();
// });
// document.body.appendChild(clearButton);
// this.input.on('pointerdown', () => {
// isDrawing = true;
// startDrawing(this.input.x, this.input.y);
// });
// this.input.on('pointermove', () => {
// if (isDrawing) {
// continueDrawing(this.input.x, this.input.y);
// }
// });
// this.input.on('pointerup', () => {
// if (isDrawing) {
// finishDrawing();
// }
// isDrawing = false;
// });
// }
// function startDrawing(x, y) {
// graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
// graphics.beginPath();
// graphics.moveTo(x, y);
// }
// function continueDrawing(x, y) {
// graphics.lineTo(x, y);
// graphics.strokePath();
// }
// function finishDrawing() {
// // No need for additional actions here
// }
// function clearDrawing() {
// graphics.clear();
// }
// function update() {
// // Update the slider position based on the pointer's movement
// 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 config = {
// type: Phaser.AUTO,
// width: window.innerWidth,
@@ -254,5 +431,4 @@ function update() {
.clear-button {
background-color: blue;
}
/* .clearButton */
</style>