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

Merge pull request 'newb' (#31) from newb into master 

Reviewed-on: #31
master
Subhodip Ghosh 2024-12-05 11:59:05 +00:00
parent 0547509a2d 8e96e7b4ba
commit 59ca5f9b09
11 changed files with 147 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/drag/dragdrop_phonics.astro
View File

@ -423,7 +423,7 @@ import Layout from '../../layouts/Layout.astro';
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {

2
src/pages/drag/index.astro
View File

@ -412,7 +412,7 @@ const numberOfTimes = starNumberOfTime;
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");

2
src/pages/drag/match_phonics.astro
View File

@ -385,7 +385,7 @@ import Layout from '../../layouts/Layout.astro';
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");

2
src/pages/drag/v2.astro
View File

@ -387,7 +387,7 @@ import Layout from '../../layouts/Layout.astro';
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");

2
src/pages/drag/v3.astro
View File

@ -435,7 +435,7 @@ import Layout from '../../layouts/Layout.astro';
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
if(audioFileId === true){

2
src/pages/drag/v4.astro
View File

@ -416,7 +416,7 @@ import Layout from '../../layouts/Layout.astro';
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
if(audioFileId === true){
let instructionAudio = this.sound.add('instructAudio')
soundButton.setInteractive().on('pointerdown', () => {

45
src/pages/drawing/drawing_phonics.astro
View File

@ -326,7 +326,16 @@ import Layout from '../../layouts/Layout.astro';
}
if(isMobile){
colorContainer.style.display = 'none';
colorContainer.style.flexDirection = 'row';
}
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 colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
if(!isMobile){
@ -342,6 +351,14 @@ import Layout from '../../layouts/Layout.astro';
// Create the color picker
let colorAndClearContainer = document.createElement('div');
colorAndClearContainer.style.display = 'flex';
colorAndClearContainer.flexDirection = 'row';
colorAndClearContainer.style.alignItems = 'center';
const clearButton = document.createElement('button');
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
@ -368,7 +385,10 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Append the color picker to the color container data
colorContainer.appendChild(colorPicker);
colorAndClearContainer.appendChild(colorPicker)
colorAndClearContainer.appendChild(clearButton)
colorContainer.appendChild(colorAndClearContainer);
// const colors = data.colors;
// var colors = colorList;
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@ -596,20 +616,19 @@ import Layout from '../../layouts/Layout.astro';
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
document.body.appendChild(buttonsContainer);
// 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';
clearButton.style.display = 'none';
buttonsContainer.style.top = '9.5%';
buttonsContainer.style.marginLeft = '30px';
} else {
clearButton.style.padding = '5px 10px';
}
// if(isMobile){
// clearButton.style.padding = '2px 8px';
// clearButton.style.display = 'none';
// buttonsContainer.style.top = '9.5%';
// buttonsContainer.style.marginLeft = '30px';
// } else {
// clearButton.style.padding = '5px 10px';
// }
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@ -622,7 +641,7 @@ import Layout from '../../layouts/Layout.astro';
}else{
clearButton.style.display = 'block';
}
})
})
// Create the Eraser button
const eraserButton = document.createElement('button');
// eraserButton.textContent = 'Eraser';
@ -658,7 +677,7 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
// buttonsContainer.appendChild(clearButton);
// colorPicker.appendChild(clearButton);
// buttonsContainer.appendChild(eraserButton).setVisible;

40
src/pages/drawing/drawing_writo.astro
View File

@ -337,7 +337,16 @@ import Layout from '../../layouts/Layout.astro';
}
if(isMobile){
colorContainer.style.display = 'none';
colorContainer.style.flexDirection = 'row';
}
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 colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
if(!isMobile){
@ -351,6 +360,14 @@ import Layout from '../../layouts/Layout.astro';
}
});
let colorAndClearContainer = document.createElement('div');
colorAndClearContainer.style.display = 'flex';
colorAndClearContainer.flexDirection = 'row';
colorAndClearContainer.style.alignItems = 'center';
const clearButton = document.createElement('button');
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
// Create the color picker
const colorPicker = document.createElement('input');
@ -379,7 +396,9 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Append the color picker to the color container data
colorContainer.appendChild(colorPicker);
colorAndClearContainer.appendChild(colorPicker)
colorAndClearContainer.appendChild(clearButton)
colorContainer.appendChild(colorAndClearContainer);
// const colors = data.colors;
// var colors = colorList;
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@ -605,22 +624,7 @@ import Layout from '../../layouts/Layout.astro';
}
buttonsContainer.style.left = '20px';
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
document.body.appendChild(buttonsContainer);
// 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';
clearButton.style.display = 'none';
buttonsContainer.style.top = '9.5%';
buttonsContainer.style.marginLeft = '30px';
} else {
clearButton.style.padding = '5px 10px';
}
document.body.appendChild(buttonsContainer);
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@ -669,7 +673,7 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
// buttonsContainer.appendChild(clearButton);
// colorPicker.appendChild(clearButton);
// buttonsContainer.appendChild(eraserButton).setVisible;

125
src/pages/drawing/v2.astro
View File

@ -341,13 +341,6 @@ import Layout from '../../layouts/Layout.astro';
}
});
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
} else {
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
if(isMobile){
outlineImage1.setDepth(-5).setScale(0.28);
@ -364,31 +357,41 @@ import Layout from '../../layouts/Layout.astro';
maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
const mask = maskGraphics.createGeometryMask();
graphics = this.add.graphics();
graphics.setMask(mask);
const colorContainer = document.createElement('div');
colorContainer.style.zIndex = '1';
colorContainer.style.position = 'absolute';
colorContainer.style.top = '13%';
if(isMobile){
colorContainer.style.marginTop = '13%';
}
colorContainer.style.left = '10px';
colorContainer.style.display = 'flex';
colorContainer.style.marginBottom = '15px';
colorContainer.style.marginBottom = '0';
if(!isMobile){
colorContainer.style.top = '25%';
colorContainer.style.top = '10%';
colorContainer.style.flexDirection = 'column';
}
if(isMobile){
colorContainer.style.display = 'none';
colorContainer.style.flexDirection = 'row';
}
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);
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
if(!isMobile){
colorViewButton.setVisible(false);
}
!isMobile ? colorViewButton.setVisible(false) : '';
// if(!isMobile){colorViewButton.setVisible(false);}
colorViewButton.setInteractive().on('pointerdown', () => {
if(colorContainer.style.display === 'block') {
@ -405,17 +408,47 @@ import Layout from '../../layouts/Layout.astro';
buttonsContainer.style.display = 'block';
}
});
const eraserButton = document.createElement('button');
eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
eraserButton.style.color = 'blue';
// eraserButton.style.border = '3px solid blue';
// eraserButton.style.color = 'white';
eraserButton.style.width = 'fit-content';
eraserButton.style.marginRight = '15px';
// eraserButton.style.marginTop = '0px';
eraserButton.style.marginBottom = '0px';
if(isMobile){
eraserButton.style.padding = '4px 4px';
}else{
eraserButton.style.padding = '5px 9px';
eraserButton.style.top = '50%';
eraserButton.style.marginBottom = '15px';
}
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '20%';
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
eraserButton.addEventListener('click', () => {
isErasing = !isErasing;
erase = false;
if (isErasing) {
erase = true;
eraserButton.style.border = '3px solid #0348A8';
eraserButton.style.backgroundColor = '#0348A820';
} else {
// Return to drawing mode
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
eraserButton.style.color = 'blue';
eraserButton.style.border = 'none';
eraserButton.style.backgroundColor = 'transparent';
}
});
var colors = colorList;
const buttonSize = 60;
const buttonSpacing = 15;
const clearEraserContainer = document.createElement('div');
clearEraserContainer.style.display = 'flex';
clearEraserContainer.style.flexDirection = 'row';
if(isMobile){
clearEraserContainer.style.marginTop = '-60px';
}else{
clearEraserContainer.style.marginTop = '40px';
}
isMobile ? clearEraserContainer.style.marginTop = '-60px' : clearEraserContainer.style.marginTop = '40px';
const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex';
colorButtonsContainer.style.flexDirection = 'column';
@ -620,51 +653,15 @@ 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.marginLeft = '30px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
} else {
clearButton.style.padding = '5px 10px';
}
// 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();
});
// Create the Eraser button
const eraserButton = document.createElement('button');
// eraserButton.textContent = 'Eraser';
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
eraserButton.style.color = 'blue';
eraserButton.style.width = 'fit-content';
eraserButton.style.marginLeft = '30px';
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '20%';
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
eraserButton.addEventListener('click', () => {
isErasing = !isErasing;
if (isErasing) {
// eraserButton.style.backgroundColor = 'red';
eraserButton.style.color = 'red';
eraserButton.style.border = '3px solid red';
} else {
// Return to drawing mode
// eraserButton.style.backgroundColor = 'green';
eraserButton.style.color = 'blue';
eraserButton.style.border = 'none';
}
});
// Add the Clear and Eraser buttons to the container
clearEraserContainer.appendChild(eraserButton);
clearEraserContainer.appendChild(clearButton);
// buttonsContainer.appendChild(clearButton);
buttonsContainer.appendChild(clearEraserContainer);
colorEraserCont.append(eraserButton);
colorEraserCont.append(clearButton);
// buttonsContainer.appendChild(clearEraserContainer);
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';

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');

2
task/27.11.2024.txt Normal file
View File

@ -0,0 +1,2 @@
Gallery Implement in all drawing games?
The new design for Buzzboard is hard to achieve so its need to develope from base lavel