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>
</div> </div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <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> </main>
</Layout> </Layout>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
const drawingZone = { x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width y: window.innerHeight / 4,
y: window.innerHeight / 4, width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2,
height: window.innerHeight / 2, };
};
var assetsList = {} var assetsList = {}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
@ -143,7 +143,6 @@ const drawingZone = {
// Add a border or tick mark to indicate the selected color // 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;
}); });
@ -167,10 +166,11 @@ const drawingZone = {
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.textContent = 'Clear'; clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.style.backgroundColor = 'blue'; // clearButton.textContent = 'Clear';
clearButton.style.color = 'white'; clearButton.style.color = 'blue';
clearButton.style.padding = '10px 20px'; // clearButton.style.color = 'white';
clearButton.style.padding = '5px 10px';
clearButton.style.fontSize = '16px'; clearButton.style.fontSize = '16px';
clearButton.style.fontWeight = 'bold'; clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%'; clearButton.style.borderRadius = '50%';
@ -181,10 +181,11 @@ const drawingZone = {
// Create the Eraser button // Create the Eraser button
const eraserButton = document.createElement('button'); const eraserButton = document.createElement('button');
eraserButton.textContent = 'Eraser'; // eraserButton.textContent = 'Eraser';
eraserButton.style.backgroundColor = 'green'; eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
eraserButton.style.color = 'white'; eraserButton.style.color = '#7c4c23';
eraserButton.style.padding = '10px 20px'; // eraserButton.style.color = 'white';
eraserButton.style.padding = '5px 5px';
eraserButton.style.fontSize = '16px'; eraserButton.style.fontSize = '16px';
eraserButton.style.fontWeight = 'bold'; eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '50%'; eraserButton.style.borderRadius = '50%';
@ -192,12 +193,12 @@ const drawingZone = {
eraserButton.addEventListener('click', () => { eraserButton.addEventListener('click', () => {
isErasing = !isErasing; isErasing = !isErasing;
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 = 'white'; eraserButton.style.color = '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 = 'white'; eraserButton.style.color = '#7c4c23';
} }
}); });