diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index a41f350..5804975 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -89,9 +89,8 @@ import Layout from '../../layouts/Layout.astro';
} else{
outlineImage.setDepth(1).setScale(0.7);
}
-
- graphics = this.add.graphics();
+ graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
colorContainer.style.top = '10%';
@@ -128,7 +127,6 @@ import Layout from '../../layouts/Layout.astro';
selectedColor = event.target.value; // Update selectedColor if not erasing
}
});
-
// Append the color picker to the color container
colorContainer.appendChild(colorPicker);
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
@@ -160,9 +158,7 @@ import Layout from '../../layouts/Layout.astro';
// Other button styles remain the same
// ${color}
// Create the SVG element with dynamic fill color
- button.innerHTML = `
- `;
-
+ button.innerHTML = ``;
if (!isMobile) {
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
@@ -174,8 +170,7 @@ import Layout from '../../layouts/Layout.astro';
button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '20%';
button.style.marginRight = `${buttonSpacing}px`;
-
- button.addEventListener('click', () => {
+ button.addEventListener('click', () => {
// Remove the border from the previously selected button, if any
if (selectedButton) {
selectedButton.style.border = 'none';
@@ -183,7 +178,6 @@ import Layout from '../../layouts/Layout.astro';
selectedButton.style.transform = 'translateX(0px)';
selectedButton.style.marginTop = '0px';
selectedButton.style.marginBottom = '0px';
-
}
// Set the new selected color
selectedColor = color;
@@ -211,185 +205,187 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorButtonsContainer);
// Append the color container to the document body
document.body.appendChild(colorContainer);
- // Create a container div for both buttons
- const buttonsContainer = document.createElement('div');
- buttonsContainer.style.position = 'absolute';
- buttonsContainer.style.display = 'flex';
- buttonsContainer.style.top = '0%';
- if(!isMobile){
- // buttonsContainer.style.position = 'fixed';
- buttonsContainer.style.top = '25%';
- buttonsContainer.style.flexDirection = 'column';
- buttonsContainer.style.marginLeft = '60px';
- }
- 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 ='';
- // clearButton.style.border = '3px solid blue';
- clearButton.style.color = 'blue';
- clearButton.style.width = 'fit-content';
- clearButton.style.marginRight = '10px';
- if(isMobile){
- clearButton.style.padding = '1px 4px';
- 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.addEventListener('click', () => {
- clearDrawing();
- });
- // Create the Eraser button
- const eraserButton = document.createElement('button');
- // eraserButton.textContent = 'Eraser';
- eraserButton.innerHTML = ' ';
- 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 = '1px 1px';
- } else {
- eraserButton.style.padding = '5px 5px';
- eraserButton.style.marginTop = '15px';
- eraserButton.style.marginBottom = '15px';
- }
- 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'; // Update eraser button color to indicate erasing mode
- eraserButton.style.color = 'red';
- eraserButton.style.border = '3px solid red';
+ // Create a container div for both buttons
+ const buttonsContainer = document.createElement('div');
+ buttonsContainer.style.position = 'absolute';
+ buttonsContainer.style.display = 'flex';
+ buttonsContainer.style.top = '0%';
+ if(!isMobile){
+ // buttonsContainer.style.position = 'fixed';
+ buttonsContainer.style.top = '25%';
+ buttonsContainer.style.flexDirection = 'column';
+ buttonsContainer.style.marginLeft = '60px';
+ }
+ 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 ='';
+ // clearButton.style.border = '3px solid blue';
+ clearButton.style.color = 'blue';
+ clearButton.style.width = 'fit-content';
+ clearButton.style.marginRight = '10px';
+ if(isMobile){
+ clearButton.style.padding = '1px 4px';
+ buttonsContainer.style.top = '17%';
} else {
- // Return to drawing mode
- // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
- eraserButton.style.color = 'blue';
- eraserButton.style.border = 'none';
+ clearButton.style.padding = '5px 10px';
+ }
+ clearButton.style.fontWeight = 'bold';
+ clearButton.style.borderRadius = '20%';
+ clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+ clearButton.addEventListener('click', () => {
+ clearDrawing();
+ });
+ // Create the Eraser button
+ const eraserButton = document.createElement('button');
+ // eraserButton.textContent = 'Eraser';
+ eraserButton.innerHTML = ' ';
+ 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 = '1px 1px';
+ } else {
+ eraserButton.style.padding = '5px 5px';
+ eraserButton.style.marginTop = '15px';
+ eraserButton.style.marginBottom = '15px';
}
- });
- // Add the Clear and Eraser buttons to the container
- buttonsContainer.appendChild(clearButton);
- buttonsContainer.appendChild(eraserButton);
-
- const sliderContainer = document.createElement('div');
- sliderContainer.className = 'slider-container';
- // sliderContainer.style.position = 'absolute';
- // sliderContainer.style.top = '25%';
- sliderContainer.style.left = '100%';
-
- // Create the slider
- const slider = document.createElement('input');
- slider.type = 'range';
- slider.min = '2';
- 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);
- slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
- });
-
- sliderContainer.appendChild(slider);
- buttonsContainer.appendChild(sliderContainer);
-
- this.input.on('pointerdown', () => {
- isDrawing = true;
- startDrawing(this.input.x, this.input.y);
- });
-
- this.input.on('pointermove', () => {
- if (isDrawing) {
- continueDrawing(this.input.x, this.input.y);
- }
- });
- this.input.on('pointerup', () => {
- if (isDrawing) {
- finishDrawing();
- }
- isDrawing = false;
- });
- customCursor = this.add.graphics();
-
- // Disable the default cursor
- this.input.setDefaultCursor('none');
- const borderThickness = 2;
- const borderColor = 0x000000; // Black color (you can customize this)
- const borderGraphics = this.add.graphics();
- borderGraphics.lineStyle(borderThickness, borderColor);
- borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
- function continueDrawing(x, y) {
- // Check if the pointer coordinates are within the drawing zone
- if (
- x >= drawingZone.x &&
- x <= drawingZone.x + drawingZone.width &&
- y >= drawingZone.y &&
- y <= drawingZone.y + drawingZone.height
- ) {
- // The pointer is within the drawing zone, so continue drawing
- graphics.lineTo(x, y);
- graphics.strokePath();
+ 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'; // Update eraser button color to indicate erasing mode
+ eraserButton.style.color = 'red';
+ eraserButton.style.border = '3px solid red';
+ } else {
+ // Return to drawing mode
+ // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+ eraserButton.style.color = 'blue';
+ eraserButton.style.border = 'none';
}
+ });
+ // Add the Clear and Eraser buttons to the container
+ buttonsContainer.appendChild(clearButton);
+ buttonsContainer.appendChild(eraserButton);
+
+ const sliderContainer = document.createElement('div');
+ sliderContainer.className = 'slider-container';
+ // sliderContainer.style.position = 'absolute';
+ // sliderContainer.style.top = '25%';
+ sliderContainer.style.left = '100%';
+
+ // Create the slider
+ const slider = document.createElement('input');
+ slider.type = 'range';
+ slider.min = '2';
+ 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);
+ slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+ slider.style.backgroundColor = '#05b3a4';
+ });
+
+ sliderContainer.appendChild(slider);
+ buttonsContainer.appendChild(sliderContainer);
+
+ this.input.on('pointerdown', () => {
+ isDrawing = true;
+ startDrawing(this.input.x, this.input.y);
+ });
+
+ this.input.on('pointermove', () => {
+ if (isDrawing) {
+ continueDrawing(this.input.x, this.input.y);
+ }
+ });
+ this.input.on('pointerup', () => {
+ if (isDrawing) {
+ finishDrawing();
+ }
+ isDrawing = false;
+ });
+ customCursor = this.add.graphics();
+
+ // Disable the default cursor
+ this.input.setDefaultCursor('none');
+ const borderThickness = 2;
+ const borderColor = 0x000000; // Black color (you can customize this)
+ const borderGraphics = this.add.graphics();
+ borderGraphics.lineStyle(borderThickness, borderColor);
+ borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
+ function continueDrawing(x, y) {
+ // Check if the pointer coordinates are within the drawing zone
+ if (
+ x >= drawingZone.x &&
+ x <= drawingZone.x + drawingZone.width &&
+ y >= drawingZone.y &&
+ y <= drawingZone.y + drawingZone.height
+ ) {
+ // The pointer is within the drawing zone, so continue drawing
+ graphics.lineTo(x, y);
+ graphics.strokePath();
+ }
+ };
+ }
+
+ function startDrawing(x, y) {
+ if (!isErasing) {
+ graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+ } else {
+ graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
+ }
+ graphics.beginPath();
+ graphics.moveTo(x, y);
+
+ }
+
+ function continueDrawing(x, y) {
+ if (!isErasing) {
+ graphics.lineTo(x, y); // Drawing
+ } else {
+ graphics.lineTo(x, y); // Erasing by drawing with a white line
+ }
+ graphics.strokePath();
+ }
+
+ function finishDrawing() {
+ // No need for additional actions here
+ }
+
+ function clearDrawing() {
+ graphics.clear();
+ }
+
+ function update() {
+ const slider = document.querySelector('input[type="range"]');
+ if (slider && !isDrawing) {
+ const sliderValue = parseInt(slider.value);
+ const max = parseInt(slider.max);
+ const width = slider.offsetWidth;
+ const offsetX = (sliderValue - 2) / (max - 2) * width;
+ slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
};
- }
-
- function startDrawing(x, y) {
- if (!isErasing) {
- graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
- } else {
- graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
+ const cursorSize = brushSize * cursorSizeMultiplier;
+ customCursor.clear(); // Clear the previous frame
+ customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+ customCursor.strokeCircle(0, 0, cursorSize);
+ // Position the cursor at the current mouse pointer coordinates
+ customCursor.x = this.input.x;
+ customCursor.y = this.input.y;
}
- graphics.beginPath();
- graphics.moveTo(x, y);
-
- }
-
- function continueDrawing(x, y) {
- if (!isErasing) {
- graphics.lineTo(x, y); // Drawing
- } else {
- graphics.lineTo(x, y); // Erasing by drawing with a white line
- }
- graphics.strokePath();
- }
-
- function finishDrawing() {
- // No need for additional actions here
- }
-
- function clearDrawing() {
- graphics.clear();
- }
-
- function update() {
- const slider = document.querySelector('input[type="range"]');
- if (slider && !isDrawing) {
- const sliderValue = parseInt(slider.value);
- const max = parseInt(slider.max);
- const width = slider.offsetWidth;
- const offsetX = (sliderValue - 2) / (max - 2) * width;
- slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
- };
- const cursorSize = brushSize * cursorSizeMultiplier;
- customCursor.clear(); // Clear the previous frame
- customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
- customCursor.strokeCircle(0, 0, cursorSize);
- // Position the cursor at the current mouse pointer coordinates
- customCursor.x = this.input.x;
- customCursor.y = this.input.y;
- }