chris/solitare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile scaling gap and remove hardcoded card opacity

Browse Source
This commit is contained in:
chris 2026-05-25 01:05:23 -04:00
parent 9a6aa261b0
commit ea4faa9fcf
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pyramid.css
View File

@ -21,6 +21,10 @@
z-index: 100;
}
.pyramid-layout .card:not(.is-exposed) {
filter: brightness(0.9) grayscale(0.2);
}
.pyramid-bottom-piles {
display: flex;
width: 100%;

8
pyramid.js
View File

@ -152,11 +152,13 @@
const rootStyle = getComputedStyle(document.documentElement);
let cardWidth = parseFloat(rootStyle.getPropertyValue('--card-width'));
let horizontalGap = parseFloat(rootStyle.getPropertyValue('--gap'));
if (isNaN(cardWidth) || cardWidth === 0) cardWidth = 80;
if (isNaN(horizontalGap)) horizontalGap = 10;
const cardHeight = cardWidth * 1.4;
const rowOverlap = 0.45;
const horizontalGap = cardWidth * 0.15; // Proportional gap
const boardTop = boardRect.top;
const boardLeft = boardRect.left;
@ -186,8 +188,8 @@
// Mark if it's currently playable for visual feedback
const exposed = isExposed(card.id);
el.classList.toggle('is-exposed', exposed);
el.style.opacity = exposed ? '1' : '0.85';
// el.style.filter = exposed ? 'none' : 'brightness(0.8)'; // Optional: dim unexposed cards
// Remove hardcoded opacity, handle via CSS if needed
el.style.opacity = '1';
}
index++;
}