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

changes_responsive_desgine

pull/5/head
Dev 1 2023-09-05 20:58:54 +05:30
parent 4314342c42
commit 177bb7951b
1 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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