diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 386e59e..79a7a76 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -131,6 +131,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+ this.load.image('colorButton', '/assets/color_button.png');
}
function create() {
@@ -200,7 +201,7 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
- const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
+ const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
@@ -219,6 +220,23 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.style.top = '10%';
colorContainer.style.flexDirection = 'column';
}
+ if(isMobile){
+ colorContainer.style.display = 'none';
+ }
+
+ let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+ if(!isMobile){
+ colorViewButton.setVisible(false);
+ }
+ colorViewButton.setInteractive().on('pointerdown', () => {
+ if(colorContainer.style.display === 'block') {
+ colorContainer.style.display = 'none';
+ }else{
+ colorContainer.style.display = 'block';
+ }
+ });
+
+
// Create the color picker
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
@@ -257,6 +275,7 @@ import Layout from '../../layouts/Layout.astro';
// Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+ colorButtonsContainer.style.flexDirection = 'column'; //** */
if(!isMobile){
colorButtonsContainer.style.flexDirection = 'column';
}
@@ -281,19 +300,137 @@ import Layout from '../../layouts/Layout.astro';
// ${color}
// Create the SVG element with dynamic fill color
if (!isMobile) {
- pencilSize = '150px';
+ // pencilSize = '150px';
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
} else {
- pencilSize = '40px';
+ // pencilSize = '150px';
+ // button.style.width = `${buttonSize}px`;
+ // button.style.height = `${buttonSize}px`;
+ // pencilSize = '40px';
button.style.width = `45px`;
button.style.height = `45px`;
}
- if(isMobile){
- button.innerHTML = ``;
- } else{
- button.innerHTML = ``
- }
+ button.innerHTML = `
+ `;
+ // button.innerHTML = ``
+ // if(isMobile){
+ // button.innerHTML = ``;
+ // } else{
+ // button.innerHTML = ``
+ // } //** */
button.style.marginRight = `${buttonSpacing}px`;
button.addEventListener('click', () => {
// Remove the border from the previously selected button, if any
@@ -314,10 +451,14 @@ import Layout from '../../layouts/Layout.astro';
button.style.marginTop = '5px';
button.style.marginBottom = '5px';
} else{
- button.style.border = "2px solid";
- button.style.borderColor = color;
- button.style.boxShadow = '5px 10px 30px #7c4c2390';
- button.style.borderRadius = '20%';
+ 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';
+ // button.style.border = "2px solid";
+ // button.style.borderColor = color;
+ // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+ // button.style.borderRadius = '20%';
}
// Update the selectedButton variable to the current button
selectedButton = button;
@@ -331,7 +472,7 @@ import Layout from '../../layouts/Layout.astro';
colorPreview.style.backgroundColor = 'blue';
// Append the color buttons container to the color container
colorContainer.appendChild(colorButtonsContainer);
- // Append the color container to the document body
+ // Append the color container to the document body
document.body.appendChild(colorContainer);
// Create a container div for both buttons
const buttonsContainer = document.createElement('div');
@@ -359,7 +500,9 @@ import Layout from '../../layouts/Layout.astro';
// clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '2px 8px';
- buttonsContainer.style.top = '17%';
+ clearButton.style.display = 'none';
+ buttonsContainer.style.top = '9.5%';
+ buttonsContainer.style.marginLeft = '30px';
} else {
clearButton.style.padding = '5px 10px';
}
@@ -369,6 +512,13 @@ import Layout from '../../layouts/Layout.astro';
clearButton.addEventListener('click', () => {
clearDrawing();
});
+ colorViewButton.setInteractive().on('pointerdown', () => {
+ if(clearButton.style.display === 'block') {
+ clearButton.style.display = 'none';
+ }else{
+ clearButton.style.display = 'block';
+ }
+ })
// Create the Eraser button
const eraserButton = document.createElement('button');
// eraserButton.textContent = 'Eraser';
@@ -382,7 +532,7 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.style.marginBottom = '0px';
if(isMobile){
eraserButton.style.padding = '4px 4px';
- } else {
+ }else{
eraserButton.style.padding = '5px 5px';
eraserButton.style.marginTop = '15px';
eraserButton.style.marginBottom = '15px';
@@ -405,34 +555,38 @@ import Layout from '../../layouts/Layout.astro';
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
+ // colorPicker.appendChild(clearButton);
// buttonsContainer.appendChild(eraserButton).setVisible;
const sliderContainer = document.createElement('div');
+ sliderContainer.style.backgroundColor = '#fff';
+
sliderContainer.className = 'slider-container';
// sliderContainer.style.position = 'absolute';
// sliderContainer.style.top = '25%';
sliderContainer.style.left = '100%';
- if(!isMobile){
- sliderContainer.style.marginLeft = '-75px'
- sliderContainer.style.marginTop = '15px'
- }
-
// 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.transform = 'rotate(-90deg)';
+ slider.style.marginTop = '80px';
+ slider.style.marginLeft = '-40px';
+ if(isMobile){
+
+ }
// 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);
+ // colorContainer colorButtonsContainer
+ colorButtonsContainer.appendChild(slider);
+ // sliderContainer.appendChild(slider);
+ // buttonsContainer.appendChild(sliderContainer);
this.input.on('pointerdown', () => {
isDrawing = true;
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 8ea4093..c2d9d81 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -32,7 +32,7 @@ import Layout from '../../layouts/Layout.astro';
let defaultColor;
if(isMobile){
- topLogoWidth = 4.5;
+ topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
@@ -144,6 +144,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png');
+ this.load.image('colorButton', '/assets/color_button.png');
}
function create() {
@@ -258,6 +259,9 @@ import Layout from '../../layouts/Layout.astro';
const colorContainer = document.createElement('div');
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';
@@ -265,14 +269,48 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.style.top = '25%';
colorContainer.style.flexDirection = 'column';
}
- var colors = colorList;
+
+ if(isMobile){
+ colorContainer.style.display = 'none';
+ }
+
+ let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+ if(!isMobile){
+ colorViewButton.setVisible(false);
+ }
+
+ colorViewButton.setInteractive().on('pointerdown', () => {
+ if(colorContainer.style.display === 'block') {
+ colorContainer.style.display = 'none';
+ }else{
+ colorContainer.style.display = 'block';
+ }
+ });
+
+ colorViewButton.setInteractive().on('pointerdown', () => {
+ if(buttonsContainer.style.display === 'block') {
+ buttonsContainer.style.display = 'none';
+ }else{
+ buttonsContainer.style.display = 'block';
+ }
+ });
+ 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';
+ }
const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex';
- if(!isMobile){
- colorButtonsContainer.style.flexDirection = 'column';
- }
+ colorButtonsContainer.style.flexDirection = 'column';
+ // if(!isMobile){
+ // colorButtonsContainer.style.flexDirection = 'column';
+ // }
const buttonX = 300;
// const colorPaletteY = drawingZone.y - 20;
let selectedButton = null;
@@ -286,21 +324,135 @@ import Layout from '../../layouts/Layout.astro';
button.style.border = 'none';
button.style.outline = 'none';
if (!isMobile) {
- pencilSize = '40px';
+ // pencilSize = '40px';
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
} else {
- pencilSize = '40px';
+ // pencilSize = '40px';
button.style.width = `45px`;
button.style.height = `45px`;
}
- if(isMobile){
- button.innerHTML = ``;
- button.style.boxShadow = '5px 10px 30px #7c4c2390';
- button.style.borderRadius = '20%';
- } else{
- button.innerHTML = ``
- }
+ button.innerHTML = `
+ `;
+ // if(isMobile){
+ // button.innerHTML = ``;
+ // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+ // button.style.borderRadius = '20%';
+ // } else{
+ // button.innerHTML = ``
+ // }
button.style.marginRight = `${buttonSpacing}px`;
button.addEventListener('click', () => {
if (selectedButton) {
@@ -310,10 +462,9 @@ import Layout from '../../layouts/Layout.astro';
selectedButton.style.marginTop = '0px';
selectedButton.style.marginBottom = '0px';
}
- if(isMobile){
- button.style.border = "2px solid";
- button.style.borderColor = color;
- }
+ // if(isMobile){
+ // button.style.border = `2px solid ${color}`;
+ // }
defaultColor = color;
button.style.scale = '1.1';
if(!isMobile){
@@ -338,7 +489,7 @@ import Layout from '../../layouts/Layout.astro';
const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute';
buttonsContainer.style.display = 'flex';
- buttonsContainer.style.flexDirection = 'row';
+ buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.top = '0%';
buttonsContainer.style.marginTop = '30px';
if(!isMobile){
@@ -350,6 +501,9 @@ import Layout from '../../layouts/Layout.astro';
} else{
buttonsContainer.style.left = '-20px';
}
+ if(isMobile){
+ buttonsContainer.style.display = 'none';
+ }
document.body.appendChild(buttonsContainer);
// Create the Clear button
@@ -358,7 +512,7 @@ import Layout from '../../layouts/Layout.astro';
// // clearButton.style.border = '3px solid blue';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
- clearButton.style.marginLeft = '30px';
+ // clearButton.style.marginLeft = '30px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
@@ -377,17 +531,8 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.innerHTML = '';
eraserButton.style.color = 'blue';
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 5px';
- eraserButton.style.marginTop = '15px';
- eraserButton.style.marginBottom = '15px';
- eraserButton.style.marginLeft = '30px';
- }
+ eraserButton.style.marginLeft = '30px';
+
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '20%';
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
@@ -405,8 +550,10 @@ import Layout from '../../layouts/Layout.astro';
}
});
// Add the Clear and Eraser buttons to the container
- buttonsContainer.appendChild(clearButton);
- buttonsContainer.appendChild(eraserButton);
+ clearEraserContainer.appendChild(eraserButton);
+ clearEraserContainer.appendChild(clearButton);
+ // buttonsContainer.appendChild(clearButton);
+ buttonsContainer.appendChild(clearEraserContainer);
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
@@ -414,7 +561,7 @@ import Layout from '../../layouts/Layout.astro';
if(isMobile){
sliderContainer.style.marginTop = '10px';
} else{
- sliderContainer.style.marginLeft = '20px';
+ sliderContainer.style.marginLeft = '10px';
}
sliderContainer.style.left = '100%';
@@ -425,6 +572,9 @@ import Layout from '../../layouts/Layout.astro';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
+ slider.style.transform = 'rotate(-90deg)';
+ slider.style.marginTop = '80px';
+ slider.style.marginLeft = '-40px';
// slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);
@@ -432,8 +582,9 @@ import Layout from '../../layouts/Layout.astro';
slider.style.backgroundColor = '#05b3a4';
});
- sliderContainer.appendChild(slider);
- buttonsContainer.appendChild(sliderContainer);
+ // sliderContainer.appendChild(slider);
+ // buttonsContainer.appendChild(sliderContainer);
+ colorButtonsContainer.appendChild(slider);
this.input.on('pointerdown', () => {
isDrawing = true;
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index e8c4ab2..9d870f6 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -131,6 +131,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+ this.load.image('colorButton', '/assets/color_button.png');
}
function create() {
@@ -240,7 +241,10 @@ import Layout from '../../layouts/Layout.astro';
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
- colorContainer.style.top = '13%';
+ // colorContainer.style.top = '13%';
+ if(isMobile){
+ colorContainer.style.marginTop = '13%';
+ }
colorContainer.style.left = '10px';
colorContainer.style.display = 'flex';
colorContainer.style.marginBottom = '15px';
@@ -248,6 +252,25 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.style.top = '25%';
colorContainer.style.flexDirection = 'column';
}
+
+ if(isMobile){
+ colorContainer.style.display = 'none';
+ }
+
+ let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+ if(!isMobile){
+ colorViewButton.setVisible(false);
+ }
+
+ colorViewButton.setInteractive().on('pointerdown', () => {
+ if(colorContainer.style.display === 'block') {
+ colorContainer.style.display = 'none';
+ }else{
+ colorContainer.style.display = 'block';
+ }
+ });
+
+
// Create the color picker
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
@@ -286,8 +309,9 @@ import Layout from '../../layouts/Layout.astro';
// Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+ colorButtonsContainer.style.flexDirection = 'column';
if(!isMobile){
- colorButtonsContainer.style.flexDirection = 'column';
+ // colorButtonsContainer.style.flexDirection = 'column';
}
// Align the color buttons to the left of the viewport
const buttonX = 30; // Adjusted position (e.g., 10px from the left)
@@ -305,11 +329,7 @@ import Layout from '../../layouts/Layout.astro';
// Remove any border or outline styles
button.style.border = 'none';
button.style.outline = 'none';
-
- // Other button styles remain the same
- // ${color}
- // Create the SVG element with dynamic fill color
- if (!isMobile) {
+ if (!isMobile) {
pencilSize = '150px';
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
@@ -318,13 +338,141 @@ import Layout from '../../layouts/Layout.astro';
button.style.width = `45px`;
button.style.height = `45px`;
}
- if(isMobile){
- button.innerHTML = ``;
- } else{
- // button.innerHTML = ``;
- button.innerHTML = ``
- }
+ button.innerHTML = `
+ `;
+
+ // Other button styles remain the same
+ // ${color}
+ // Create the SVG element with dynamic fill color
+ // if (!isMobile) {
+ // pencilSize = '150px';
+ // button.style.width = `${buttonSize}px`;
+ // button.style.height = `${buttonSize}px`;
+ // } else {
+ // pencilSize = '40px';
+ // button.style.width = `45px`;
+ // button.style.height = `45px`;
+ // }
+ // if(isMobile){
+ // button.innerHTML = ``;
+ // } else{
+ // // button.innerHTML = ``;
+
+ // button.innerHTML = ``
+ // }
button.style.marginRight = `${buttonSpacing}px`;
button.addEventListener('click', () => {
// Remove the border from the previously selected button, if any
@@ -345,10 +493,10 @@ import Layout from '../../layouts/Layout.astro';
button.style.marginTop = '5px';
button.style.marginBottom = '5px';
} else{
- button.style.border = "2px solid";
- button.style.borderColor = color;
- button.style.boxShadow = '5px 10px 30px #7c4c2390';
- button.style.borderRadius = '20%';
+ // button.style.border = "2px solid";
+ // button.style.borderColor = color;
+ // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+ // button.style.borderRadius = '20%';
}
// Update the selectedButton variable to the current button
selectedButton = button;