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; z-index: 100;
} }
.pyramid-layout .card:not(.is-exposed) {
filter: brightness(0.9) grayscale(0.2);
}
.pyramid-bottom-piles { .pyramid-bottom-piles {
display: flex; display: flex;
width: 100%; width: 100%;

8
pyramid.js
View File

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