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

color desgine change

pull/5/head
Dev 1 2023-09-07 19:50:07 +05:30
parent b49ccd9da9
commit 65bf88a15a
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,7 @@ import Layout from '../../layouts/Layout.astro';
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
colorContainer.style.top = '10%';
colorContainer.style.left = '20px';
colorContainer.style.left = '10px';
colorContainer.style.display = 'flex';
colorContainer.style.marginBottom = '15px';
if(!isMobile){
@ -149,28 +149,57 @@ import Layout from '../../layouts/Layout.astro';
colors.forEach((color, index) => {
const x = buttonX + index * (buttonSize + buttonSpacing);
const button = document.createElement('button');
button.style.backgroundColor = color;
button.style.marginBottom = '15px';
// Make the button transparent
button.style.backgroundColor = 'transparent';
// Remove any border or outline styles
button.style.border = 'none';
button.style.outline = 'none';
// Other button styles remain the same
// Create the SVG element with dynamic fill color
button.innerHTML = `
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="${color}" transform="rotate(90)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.394 1.154h-.788l-4.574 12.17L7 23h1v-8.292l1.498 1.499 2.502-2.5 2.499 2.5 1.501-1.5V23h1v-9.5zM12 2.95L13.147 6h-2.294zm0 9.344l-2.502 2.5-1.417-1.418L10.477 7h3.046l2.396 6.374-1.42 1.419z"></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</g>
</svg>`;
if (!isMobile) {
button.style.width = `${buttonSize}px`;
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 = '20%';
button.style.marginRight = `${buttonSpacing}px`;
button.style.transform = 'none';
button.addEventListener('click', () => {
// Remove the border from the previously selected button, if any
if(selectedButton) {
if (selectedButton) {
selectedButton.style.border = 'none';
selectedButton.style.scale = '1';
button.style.transform = 'none';
}
// Set the new selected color
selectedColor = 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)
button.style.border = "2px solid"; // Add a black border (you can customize this)
button.style.borderColor = color;
button.style.scale = '1.2';
if(!isMobile){
button.style.transform = 'translateX(0.75rem)';
}
// Update the selectedButton variable to the current button
selectedButton = button;
});
@ -182,7 +211,6 @@ import Layout from '../../layouts/Layout.astro';
// 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';

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

@ -9,13 +9,13 @@
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor : 0xffffff,
scene: {
preload: preload,
create: create,
update: update
}
};
var graphics;
var isDragging = false;
var image;
@ -25,11 +25,9 @@
function preload() {
// Load the image asset
this.load.image('image', '/assets/A.png');
}
}
function create() {
graphics = this.add.graphics();
// Set line style for the dragging line
graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width