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

little changes on button desgine

pull/5/head
Dev 1 2023-09-04 11:54:57 +05:30
parent 5e7081b27c
commit d0e133459d
1 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,17 +6,17 @@ import Layout from '../../layouts/Layout.astro';
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main>
</Layout>
<script is:inline>
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,
};
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');
@ -143,7 +143,6 @@ const drawingZone = {
// 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)
// Update the selectedButton variable to the current button
selectedButton = button;
});
@ -167,10 +166,11 @@ const drawingZone = {
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
clearButton.style.backgroundColor = 'blue';
clearButton.style.color = 'white';
clearButton.style.padding = '10px 20px';
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
// clearButton.textContent = 'Clear';
clearButton.style.color = 'blue';
// clearButton.style.color = 'white';
clearButton.style.padding = '5px 10px';
clearButton.style.fontSize = '16px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
@ -181,10 +181,11 @@ const drawingZone = {
// Create the Eraser button
const eraserButton = document.createElement('button');
eraserButton.textContent = 'Eraser';
eraserButton.style.backgroundColor = 'green';
eraserButton.style.color = 'white';
eraserButton.style.padding = '10px 20px';
// eraserButton.textContent = 'Eraser';
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
eraserButton.style.color = '#7c4c23';
// eraserButton.style.color = 'white';
eraserButton.style.padding = '5px 5px';
eraserButton.style.fontSize = '16px';
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '50%';
@ -192,12 +193,12 @@ const drawingZone = {
eraserButton.addEventListener('click', () => {
isErasing = !isErasing;
if (isErasing) {
eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
eraserButton.style.color = 'white';
// eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
eraserButton.style.color = 'red';
} else {
// Return to drawing mode
eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
eraserButton.style.color = 'white';
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
eraserButton.style.color = '#7c4c23';
}
});