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

Desgine Modified

Browse Source
This commit is contained in:
Dev 1
2023-09-04 22:13:50 +05:30
parent 2e0e100189
commit 4314342c42
2 changed files with 33 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -89,16 +89,22 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.style.top = '10%';
colorContainer.style.left = '20px';
colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
// Create the color picker
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
colorPicker.style.marginTop = '-5px';
colorPicker.style.marginRight = '5px';
colorPicker.style.width = '45px';
colorPicker.style.height = '48px';
colorPicker.style.marginTop = '-0px';
colorPicker.style.marginRight = '15px';
colorPicker.style.padding = '1px 1px';
colorPicker.style.outline = 'none';
colorPicker.style.width = '46px';
colorPicker.style.height = '46px';
colorPicker.style.border = '3px solid #05b3a4';
colorPicker.style.backgroundColor = '#05b3a4';
colorPicker.style.borderRadius = '50%';
colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
colorPicker.addEventListener('input', (event) => {
if (!isErasing) {
@@ -110,8 +116,8 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 40;
const buttonSpacing = 10;
const buttonSize = 50;
const buttonSpacing = 15;
// Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div');
@@ -130,13 +136,15 @@ import Layout from '../../layouts/Layout.astro';
button.style.backgroundColor = color;
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
button.style.border = 'none';
button.style.border = '3px solid #05b3a4';
button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '50%'
button.style.marginRight = `${buttonSpacing}px`;
button.addEventListener('click', () => {
// Remove the mark from the previously selected button, if any
if (selectedButton) {
selectedButton.style.border = 'none'; // Remove the border
// Remove the border
}
// Set the new selected color
selectedColor = color;
@@ -160,21 +168,24 @@ import Layout from '../../layouts/Layout.astro';
// Create a container div for both buttons
const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute';
buttonsContainer.style.top = '15%';
buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
buttonsContainer.style.left = '20px';
buttonsContainer.style.top = '17%';
// 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 ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.style.border = '3px solid blue';
// clearButton.textContent = 'Clear';
clearButton.style.color = 'blue';
// clearButton.style.color = 'white';
clearButton.style.marginRight = '10px';
clearButton.style.padding = '5px 10px';
clearButton.style.fontSize = '16px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@@ -184,7 +195,9 @@ import Layout from '../../layouts/Layout.astro';
// 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.style.color = 'white';
eraserButton.style.marginRight = '15px';
eraserButton.style.padding = '5px 5px';
eraserButton.style.fontSize = '16px';
eraserButton.style.fontWeight = 'bold';
@@ -219,6 +232,7 @@ import Layout from '../../layouts/Layout.astro';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
// slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);