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

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

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