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

work on drawing game page

pull/5/head
Dev 1 2023-09-06 21:40:59 +05:30
parent 7ae61d14d5
commit b49ccd9da9
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,7 @@ import Layout from '../../layouts/Layout.astro';
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
var assetsList = {} var assetsList = {}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`) const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
@ -41,7 +42,6 @@ import Layout from '../../layouts/Layout.astro';
}, },
}; };
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
@ -140,7 +140,6 @@ import Layout from '../../layouts/Layout.astro';
if(!isMobile){ if(!isMobile){
colorButtonsContainer.style.flexDirection = 'column'; colorButtonsContainer.style.flexDirection = 'column';
} }
// colorButtonsContainer.style.alignItems = 'flex-start';
// Align the color buttons to the left of the viewport // Align the color buttons to the left of the viewport
const buttonX = 30; // Adjusted position (e.g., 10px from the left) const buttonX = 30; // Adjusted position (e.g., 10px from the left)
const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone
@ -183,11 +182,14 @@ import Layout from '../../layouts/Layout.astro';
// Append the color container to the document body // Append the color container to the document body
document.body.appendChild(colorContainer); document.body.appendChild(colorContainer);
// Create a container div for both buttons // Create a container div for both buttons
const buttonsContainer = document.createElement('div'); const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute'; buttonsContainer.style.position = 'absolute';
buttonsContainer.style.display = 'flex'; buttonsContainer.style.display = 'flex';
buttonsContainer.style.top = '0%';
if(!isMobile){ if(!isMobile){
buttonsContainer.style.marginTop = '7.5%'; // buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '25%';
buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px'; buttonsContainer.style.marginLeft = '60px';
} }
@ -197,11 +199,8 @@ import Layout from '../../layouts/Layout.astro';
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
buttonsContainer.style.top = '10%';
clearButton.style.border = '3px solid blue'; clearButton.style.border = '3px solid blue';
// clearButton.textContent = 'Clear';
clearButton.style.color = 'blue'; clearButton.style.color = 'blue';
// clearButton.style.color = 'white';
clearButton.style.width = 'fit-content'; clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
@ -210,7 +209,6 @@ import Layout from '../../layouts/Layout.astro';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
// clearButton.style.fontSize = '16px';
clearButton.style.fontWeight = 'bold'; clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%'; clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@ -226,7 +224,7 @@ import Layout from '../../layouts/Layout.astro';
// eraserButton.style.color = 'white'; // eraserButton.style.color = 'white';
eraserButton.style.width = 'fit-content'; eraserButton.style.width = 'fit-content';
eraserButton.style.marginRight = '15px'; eraserButton.style.marginRight = '15px';
eraserButton.style.marginTop = '0px'; // eraserButton.style.marginTop = '0px';
eraserButton.style.marginBottom = '0px'; eraserButton.style.marginBottom = '0px';
if(isMobile){ if(isMobile){
eraserButton.style.padding = '1px 1px'; eraserButton.style.padding = '1px 1px';
@ -259,7 +257,7 @@ import Layout from '../../layouts/Layout.astro';
const sliderContainer = document.createElement('div'); const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container'; sliderContainer.className = 'slider-container';
// sliderContainer.style.position = 'absolute'; // sliderContainer.style.position = 'absolute';
sliderContainer.style.top = '25%'; // sliderContainer.style.top = '25%';
sliderContainer.style.left = '100%'; sliderContainer.style.left = '100%';
// Create the slider // Create the slider
@ -299,11 +297,8 @@ import Layout from '../../layouts/Layout.astro';
// Disable the default cursor // Disable the default cursor
this.input.setDefaultCursor('none'); this.input.setDefaultCursor('none');
const borderThickness = 2; const borderThickness = 2;
const borderColor = 0x000000; // Black color (you can customize this) const borderColor = 0x000000; // Black color (you can customize this)
const borderGraphics = this.add.graphics(); const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.lineStyle(borderThickness, borderColor);
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);