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

looks good with responsevness

pull/5/head
Dev 1 2023-09-02 21:46:07 +05:30
parent 92d6731862
commit 5e7081b27c
2 changed files with 201 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,14 @@ import Layout from '../../layouts/Layout.astro';
</main>
</Layout>
<script is:inline>
const drawingZone = {
x: window.innerWidth / 4, // X-coordinate of the drawing zone
y: window.innerHeight / 4, // Y-coordinate of the drawing zone
width: window.innerWidth / 2, // Width of the drawing zone
height: window.innerHeight / 2, // Height of the drawing zone
};
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2,
};
var assetsList = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
@ -76,115 +78,117 @@ import Layout from '../../layouts/Layout.astro';
})
.catch(error => {
console.error('Error fetching initial data:', error);
console.error('Error fetching initial data:', error);
});
const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
outlineImage.setDepth(1);
graphics = this.add.graphics();
const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
outlineImage.setDepth(1);
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
colorContainer.style.top = '10%';
colorContainer.style.left = '20px';
colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
// Create the color picker
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
colorPicker.style.marginTop = '-5px';
colorPicker.style.marginRight = '5px';
colorPicker.style.width = '45px';
colorPicker.style.height = '48px';
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 colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
document.body.appendChild(colorPicker);
colorPicker.style.position = 'absolute';
colorPicker.style.top = '10%';
colorPicker.style.left = '20px';
colorPicker.style.width = '38px';
colorPicker.style.height = '38px';
colorPicker.addEventListener('input', (event) => {
if (!isErasing) {
selectedColor = event.target.value; // Update selectedColor if not erasing
}
});
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 40;
const buttonSpacing = 10;
// Define the horizontal position for the vertical palette
const colorPaletteX = 40; // Adjusted position
// Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
// Define the starting position for the vertical palette
const paletteY = displayH / 1.9 - (colors.length / 1 * (buttonSize + buttonSpacing));
// 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;
colors.forEach((color, index) => {
const y = paletteY + index * (buttonSize + buttonSpacing);
const button = this.add.circle(colorPaletteX, y, buttonSize / 3, Phaser.Display.Color.HexStringToColor(color).color);
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 = 'none';
button.style.marginRight = `${buttonSpacing}px`;
button.setInteractive();
button.on('pointerdown', function () {
button.addEventListener('click', () => {
// Remove the mark from the previously selected button, if any
if (selectedButton) {
selectedButton.setStrokeStyle(0); // Remove the border
selectedButton.style.border = 'none'; // Remove the border
}
// Set the new selected color
selectedColor = color;
// Add a border or tick mark to indicate the selected color
button.setStrokeStyle(3, 0x000000); // Add a white 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
selectedButton = button;
});
// Append the color button to the color buttons container
colorButtonsContainer.appendChild(button);
});
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
document.body.appendChild(sliderContainer);
sliderContainer.style.position = 'absolute';
sliderContainer.style.top = '18%';
sliderContainer.style.left = '15%';
// Append the color buttons container to the color container
colorContainer.appendChild(colorButtonsContainer);
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '2';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
sliderContainer.appendChild(slider);
// Append the color container to the document body
document.body.appendChild(colorContainer);
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
});
// Create a container div for both buttons
const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute';
buttonsContainer.style.top = '15%';
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.textContent = 'Clear';
// clearButton.className = 'clear-button';
document.body.appendChild(clearButton);
clearButton.style.position = 'absolute';
clearButton.style.top = '10%';
clearButton.style.left = '120px';
clearButton.style.backgroundColor = 'blue';
clearButton.style.color = 'white';
clearButton.style.padding = '10px 30px';
clearButton.style.fontSize = '20px';
clearButton.style.padding = '10px 20px';
clearButton.style.fontSize = '16px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
// Create the Eraser button
const eraserButton = document.createElement('button');
eraserButton.textContent = 'Eraser';
document.body.appendChild(eraserButton);
eraserButton.style.position = 'absolute';
eraserButton.style.top = '10%';
eraserButton.style.left = '80px';
eraserButton.style.backgroundColor = 'white'; // Background color for eraser button
eraserButton.style.color = 'black'; // Text color for eraser button
eraserButton.style.backgroundColor = 'green';
eraserButton.style.color = 'white';
eraserButton.style.padding = '10px 20px';
eraserButton.style.fontSize = '16px';
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '50%';
eraserButton.style.boxShadow = '5px 10px 15px #aaa';
// Toggle erasing mode when the eraser button is clicked
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
eraserButton.addEventListener('click', () => {
isErasing = !isErasing;
if (isErasing) {
@ -192,11 +196,36 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.style.color = 'white';
} else {
// Return to drawing mode
eraserButton.style.backgroundColor = 'white'; // Restore eraser button color
eraserButton.style.color = 'black';
eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
eraserButton.style.color = 'white';
}
});
// 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.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;
@ -221,24 +250,24 @@ import Layout from '../../layouts/Layout.astro';
const borderThickness = 2;
const borderColor = 0x000000; // Black color (you can customize this)
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();
}
}
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) {

82
src/pages/drawing/temp.astro
View File

@ -0,0 +1,82 @@
<script is:inline>
function create() {
// Adjust the positions and sizes of elements based on screen size
const screenWidth = game.scale.width;
const screenHeight = game.scale.height;
if (screenWidth <= 768) {
// Adjust elements for mobile screens
// You can modify these values as needed
// Example: Move a button to the top-right corner
button.x = screenWidth - button.width;
button.y = 0;
} else {
// Adjust elements for larger screens
// Example: Move a button to the bottom-right corner
button.x = screenWidth - button.width;
button.y = screenHeight - button.height;
}
// ... other element adjustments ...
}
</script>
<!-- <script is:inline>
const isMobile = window.innerWidth <= 768; // You can adjust the breakpoint as needed
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: isMobile ? 0 : window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: isMobile ? window.innerHeight : window.innerHeight / 2,
};
// ...
function create() {
// ...
// Position UI elements based on screen size
const colorPickerX = isMobile ? 10 : 20;
const colorPickerY = isMobile ? 10 : '10%';
colorPicker.style.position = 'absolute';
colorPicker.style.top = colorPickerY;
colorPicker.style.left = `${colorPickerX}px`;
const sliderContainerX = isMobile ? 10 : '5%';
const sliderContainerY = isMobile ? 10 : '10%';
sliderContainer.style.position = 'absolute';
sliderContainer.style.top = sliderContainerY;
sliderContainer.style.left = sliderContainerX;
const clearButtonX = isMobile ? 10 : '5%';
const clearButtonY = isMobile ? 20 : '20%';
clearButton.style.position = 'absolute';
clearButton.style.top = clearButtonY;
clearButton.style.left = clearButtonX;
const eraserButtonX = isMobile ? 10 : '5%';
const eraserButtonY = isMobile ? 14 : '14%';
eraserButton.style.position = 'absolute';
eraserButton.style.top = eraserButtonY;
eraserButton.style.left = eraserButtonX;
// ...
// Adjust cursor size based on screen size
const cursorSizeMultiplier = isMobile ? 0.5 : 1;
// ...
// Adjust the borderGraphics position and size
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
// ...
}
</script>
-->