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

color pen desgine updated

pull/5/head
Dev 1 2023-09-08 11:55:37 +05:30
parent 65bf88a15a
commit 675d8a1728
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,8 +110,8 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px';
colorPicker.style.marginRight = '15px';
colorPicker.style.padding = '1px 1px';
colorPicker.style.outline = 'none';
// colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none';
if (!isMobile) {
colorPicker.style.marginBottom = '15px';
colorPicker.style.width = '46px';
@ -121,7 +121,7 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.style.height = '40px';
}
colorPicker.style.border = '3px solid #05b3a4';
colorPicker.style.borderRadius = '50%';
colorPicker.style.borderRadius = '20%';
colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
colorPicker.addEventListener('input', (event) => {
if (!isErasing) {
@ -161,7 +161,7 @@ import Layout from '../../layouts/Layout.astro';
// Create the SVG element with dynamic fill color
button.innerHTML = `
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="${color}" transform="rotate(90)">
<svg class="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="${color}" transform="rotate(90)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
@ -180,25 +180,29 @@ import Layout from '../../layouts/Layout.astro';
button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '20%';
button.style.marginRight = `${buttonSpacing}px`;
button.style.transform = 'none';
button.style.marginRight = `${buttonSpacing}px`;
button.addEventListener('click', () => {
// Remove the border from the previously selected button, if any
if (selectedButton) {
selectedButton.style.border = 'none';
selectedButton.style.scale = '1';
button.style.transform = 'none';
selectedButton.style.transform = 'translateX(0px)';
selectedButton.style.marginTop = '0px';
selectedButton.style.marginBottom = '0px';
}
// Set the new selected color
selectedColor = color;
// Add a border or tick mark to indicate the selected color to the current button
button.style.border = "2px solid"; // Add a black border (you can customize this)
button.style.border = "2px solid";
button.style.borderColor = color;
button.style.scale = '1.2';
button.style.scale = '1.1';
if(!isMobile){
button.style.transform = 'translateX(0.75rem)';
button.style.transform = 'translateX(0.75rem)';
button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
button.style.marginTop = '5px';
button.style.marginBottom = '5px';
}
// Update the selectedButton variable to the current button
selectedButton = button;
@ -206,6 +210,10 @@ import Layout from '../../layouts/Layout.astro';
// Append the color button to the color buttons container
colorButtonsContainer.appendChild(button);
});
const colorPreview = document.createElement('div');
colorPreview.style.width = '40px';
colorPreview.style.height = '40px';
colorPreview.style.backgroundColor = 'blue';
// Append the color buttons container to the color container
colorContainer.appendChild(colorButtonsContainer);
// Append the color container to the document body
@ -227,7 +235,7 @@ import Layout from '../../layouts/Layout.astro';
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.style.border = '3px solid blue';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px';
@ -238,7 +246,7 @@ import Layout from '../../layouts/Layout.astro';
clearButton.style.padding = '5px 10px';
}
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
@ -246,9 +254,9 @@ import Layout from '../../layouts/Layout.astro';
// 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 = '#7c4c23';
eraserButton.style.border = '3px solid #7c4c23';
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"> </i>';
eraserButton.style.color = 'blue';
// eraserButton.style.border = '3px solid blue';
// eraserButton.style.color = 'white';
eraserButton.style.width = 'fit-content';
eraserButton.style.marginRight = '15px';
@ -262,10 +270,10 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.style.marginBottom = '15px';
}
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '50%';
eraserButton.style.borderRadius = '20%';
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
eraserButton.addEventListener('click', () => {
isErasing = !isErasing;
isErasing = !isErasing;
if (isErasing) {
// eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
eraserButton.style.color = 'red';
@ -273,11 +281,10 @@ import Layout from '../../layouts/Layout.astro';
} else {
// Return to drawing mode
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
eraserButton.style.color = '#7c4c23';
eraserButton.style.border = '3px solid #7c4c23';
eraserButton.style.color = 'blue';
eraserButton.style.border = 'none';
}
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
buttonsContainer.appendChild(eraserButton);