tour/word
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inital-release

Browse Source
This commit is contained in:
mike
2025-12-16 14:05:48 +01:00
parent f6ade94e1f
commit 795194ed59
2 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
public/game.js
View File

@@ -217,7 +217,7 @@ class KruiswoordProGame {
}, },
{ {
word : 'VLIEG', word : 'VLIEG',
clue : 'Insect →', clue : 'Insect',
startRow : 2, startRow : 2,
startCol : 0, startCol : 0,
direction: 'horizontal', direction: 'horizontal',
@@ -244,24 +244,42 @@ class KruiswoordProGame {
const headerHeight = isMobile ? 70 : 80 const headerHeight = isMobile ? 70 : 80
const progressHeight = isMobile ? 50 : 60 const progressHeight = isMobile ? 50 : 60
const controlsHeight = isMobile ? 90 : 120 const controlsHeight = isMobile ? 90 : 120
const padding = isMobile ? 20 : 40 const gridPadding = isMobile ? 10 : 20 // padding inside grid-container
const sectionPadding = isMobile ? 20 : 40 // padding of puzzle-section
const totalPadding = (gridPadding * 2) + (sectionPadding * 2)
const gap = 2 const gap = 2
const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
const availableWidth = window.innerWidth - padding const availableWidth = window.innerWidth - totalPadding
// Calculate max cell size based on available space // Calculate max cell size based on available space
const maxCellFromHeight = (availableHeight - (rows * gap)) / rows // Account for gaps between cells
const maxCellFromWidth = (availableWidth - (cols * gap)) / cols const totalGapHeight = (rows - 1) * gap
const totalGapWidth = (cols - 1) * gap
const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
// Use the smaller dimension // Use the smaller dimension
let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth)) let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
// Set min/max bounds based on device // Set min/max bounds based on device
const minSize = isMobile ? 32 : 40 const minSize = isMobile ? 28 : 40
const maxSize = isMobile ? 60 : 120 const maxSize = isMobile ? 55 : 120
cellSize = Math.max(minSize, Math.min(maxSize, cellSize)) cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
console.log('Grid calculation:', {
isMobile,
availableWidth,
availableHeight,
rows,
cols,
maxCellFromWidth,
maxCellFromHeight,
finalCellSize: cellSize,
totalGridWidth: cols * cellSize + totalGapWidth
})
return cellSize return cellSize
} }

6
public/styles_v1.css
View File

@@ -170,7 +170,8 @@ body {
border-radius: 15px; border-radius: 15px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow: auto; overflow: visible;
position: relative;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -182,6 +183,7 @@ body {
.puzzle-section { .puzzle-section {
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
overflow: visible;
} }
} }
@@ -193,6 +195,8 @@ body {
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 0 auto;
max-width: 100%;
} }
@media (max-width: 768px) { @media (max-width: 768px) {