diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 31456c6..31f3275 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -41,15 +41,13 @@ import Layout from '../../layouts/Layout.astro'; }, }; const game = new Phaser.Game(config); - + }) .catch(error => { - console.error('Error fetching initial data:', error); }); const displayW = window.innerWidth; const displayH = window.innerHeight; - let graphics; let isDrawing = false; let selectedColor = '#f00f0f'; // Default color @@ -60,6 +58,7 @@ import Layout from '../../layouts/Layout.astro'; function preload() { this.load.image('outline', assetsList.image); + this.load.image('topLogo', '/assets/top_logo.png'); } function create() { @@ -68,18 +67,23 @@ import Layout from '../../layouts/Layout.astro'; fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`) .then(response => response.json()) .then(({ data }) => { - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 40; - const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; - const descrptText = this.add.text(screenCenterX, 50, data.description, { - font: `${responsiveFontSize}px quicksand`, - fill: '#7c4c23', - }).setOrigin(0.5); - + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + // const screenCenterX = window.innerWidth / 2; + const baseFontSize = 15; + const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; + const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); }) .catch(error => { console.error('Error fetching initial data:', error); }); + const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; + if(!isMobile){ + this.add.text(displayW / 10, 20, "Drawing", textStyle); + this.add.image(displayW / 2 * 1.6 - 0.5, 50, 'topLogo'); + } else { + this.add.text(displayW / 30, 0, "Drawing", textStyle); + this.add.image(displayW / 2 * 1.6 - 0.5, 25, 'topLogo'); + } const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5); outlineImage.setDepth(1); graphics = this.add.graphics(); @@ -88,45 +92,54 @@ import Layout from '../../layouts/Layout.astro'; colorContainer.style.position = 'absolute'; colorContainer.style.top = '10%'; colorContainer.style.left = '20px'; - colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally + colorContainer.style.display = 'flex'; + colorContainer.style.marginBottom = '15px'; + if(!isMobile){ + colorContainer.style.top = '25%'; + colorContainer.style.flexDirection = 'column'; + } // Create the color picker const colorPicker = document.createElement('input'); colorPicker.type = 'color'; colorPicker.value = selectedColor; colorPicker.className = 'color-picker'; + colorPicker.style.marginBottom = '0px'; 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'; + if (!isMobile) { + colorPicker.style.marginBottom = '15px'; + colorPicker.style.width = '46px'; + colorPicker.style.height = '46px'; + } else { + colorPicker.style.width = '40px'; + colorPicker.style.height = '40px'; + } 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) { 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']; const buttonSize = 50; const buttonSpacing = 15; - // Create a container div for the color buttons const colorButtonsContainer = document.createElement('div'); colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally - + if(!isMobile){ + colorButtonsContainer.style.flexDirection = 'column'; + } + // colorButtonsContainer.style.alignItems = 'flex-start'; // Align the color buttons to the left of the viewport const buttonX = 30; // Adjusted position (e.g., 10px from the left) const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone - // Keep track of the selected color let selectedButton = null; @@ -134,62 +147,72 @@ import Layout from '../../layouts/Layout.astro'; const x = buttonX + index * (buttonSize + buttonSpacing); const button = document.createElement('button'); button.style.backgroundColor = color; - button.style.width = `${buttonSize}px`; - button.style.height = `${buttonSize}px`; - button.style.border = '3px solid #05b3a4'; + button.style.marginBottom = '15px'; + if (!isMobile) { + button.style.width = `${buttonSize}px`; + button.style.height = `${buttonSize}px`; + } else { + button.style.width = `40px`; + button.style.height = `40px`; + } + // button.style.border = '3px solid #05b3a4'; button.style.boxShadow = '5px 10px 30px #7c4c2390'; - button.style.borderRadius = '50%' + button.style.borderRadius = '50%'; button.style.marginRight = `${buttonSpacing}px`; - button.addEventListener('click', () => { - // Remove the mark from the previously selected button, if any + // Remove the border from the previously selected button, if any if (selectedButton) { - // Remove the border + selectedButton.style.border = 'none'; } // Set the new selected color selectedColor = color; - - // Add a border or tick mark to indicate the selected color + // Add a border or tick mark to indicate the selected color to the current button button.style.border = '3px solid #000'; // Add a black border (you can customize this) // Update the selectedButton variable to the current button selectedButton = button; }); - // Append the color button to the color buttons container colorButtonsContainer.appendChild(button); }); - // Append the color buttons container to the color container 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'; + if(!isMobile){ + buttonsContainer.style.marginTop = '7.5%'; + buttonsContainer.style.flexDirection = 'column'; + buttonsContainer.style.marginLeft = '60px'; + } 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 =''; + buttonsContainer.style.top = '10%'; clearButton.style.border = '3px solid blue'; // clearButton.textContent = 'Clear'; clearButton.style.color = 'blue'; // clearButton.style.color = 'white'; + clearButton.style.width = 'fit-content'; clearButton.style.marginRight = '10px'; - clearButton.style.padding = '5px 10px'; - clearButton.style.fontSize = '16px'; + if(isMobile){ + clearButton.style.padding = '1px 4px'; + buttonsContainer.style.top = '17%'; + } else { + clearButton.style.padding = '5px 10px'; + } + // clearButton.style.fontSize = '16px'; clearButton.style.fontWeight = 'bold'; clearButton.style.borderRadius = '50%'; clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; clearButton.addEventListener('click', () => { clearDrawing(); - }); - + }); // Create the Eraser button const eraserButton = document.createElement('button'); // eraserButton.textContent = 'Eraser'; @@ -197,9 +220,17 @@ import Layout from '../../layouts/Layout.astro'; eraserButton.style.color = '#7c4c23'; eraserButton.style.border = '3px solid #7c4c23'; // eraserButton.style.color = 'white'; + eraserButton.style.width = 'fit-content'; eraserButton.style.marginRight = '15px'; - eraserButton.style.padding = '5px 5px'; - eraserButton.style.fontSize = '16px'; + 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 = '50%'; eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390'; @@ -208,10 +239,12 @@ import Layout from '../../layouts/Layout.astro'; 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 = '#7c4c23'; + eraserButton.style.border = '3px solid #7c4c23'; } }); @@ -221,7 +254,7 @@ import Layout from '../../layouts/Layout.astro'; const sliderContainer = document.createElement('div'); sliderContainer.className = 'slider-container'; - sliderContainer.style.position = 'absolute'; + // sliderContainer.style.position = 'absolute'; sliderContainer.style.top = '25%'; sliderContainer.style.left = '100%';