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);
})
.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 ='<i class="fa fa-remove" style="font-size:30px"></i>';
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%';