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

ui modifications in drawing game

Browse Source
This commit is contained in:
Suvodip
2024-11-27 17:40:35 +05:30
parent 4a303849ad
commit 4372f87838
11 changed files with 146 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/drawing/v3.astro
View File

@@ -357,13 +357,26 @@ import Layout from '../../layouts/Layout.astro';
if(isMobile){
colorContainer.style.display = 'none';
colorContainer.style.flexDirection = 'row';
}
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
if(!isMobile){
colorViewButton.setVisible(false);
}
!isMobile ? colorViewButton.setVisible(false) : '';
colorContainer.style.backgroundColor = '#FFFFFF';
colorContainer.style.padding = '30px 20px';
colorContainer.style.borderRadius = '80px';
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
colorContainer.style.left = '0px';
colorContainer.style.top = '50%';
colorContainer.style.transform = 'translate(0, -50%)';
colorContainer.style.border = '1px solid #F9F9F9';
let colorEraserCont = document.createElement('div');
colorEraserCont.style.display = 'flex';
colorEraserCont.style.flexDirection = 'row';
colorContainer.appendChild(colorEraserCont);
colorViewButton.setInteractive().on('pointerdown', () => {
if(colorContainer.style.display === 'block') {
colorContainer.style.display = 'none';
@@ -400,7 +413,8 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Append the color picker to the color container data
colorContainer.appendChild(colorPicker);
// colorContainer.appendChild(colorPicker);
// const colors = data.colors;
// var colors = colorList;
let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -624,39 +638,14 @@ import Layout from '../../layouts/Layout.astro';
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
// clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '100px';
buttonsContainer.style.marginLeft = '30px';
clearButton.style.marginTop = '-15px';
}else if(isTab){
clearButton.style.marginTop = '-100px';
} else {
clearButton.style.padding = '5px 10px';
clearButton.style.marginTop = '-115px';
}
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
clearButton.addEventListener('click', () => {
clearDrawing();
});
if(isMobile){
clearButton.style.display = 'none';
}
colorViewButton.setInteractive().on('pointerdown', () => {
if(clearButton.style.display === 'block') {
clearButton.style.display = 'none';
}else{
clearButton.style.display = 'block';
}
clearButton.style.display === 'block' ? clearButton.style.display = 'none' : clearButton.style.display = 'block';
});
// Create the Eraser button
@@ -694,7 +683,8 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
colorEraserCont.append(colorPicker);
colorEraserCont.append(clearButton);
// buttonsContainer.appendChild(eraserButton).setVisible;
const sliderContainer = document.createElement('div');