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:14:26 +01:00
parent 24cb98e75c
commit 1744f1b210
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/game.js
View File

@@ -243,15 +243,15 @@ class KruiswoordProGame {
const isMobile = window.innerWidth < 768
const headerHeight = isMobile ? 70 : 80
const progressHeight = isMobile ? 50 : 60
const controlsHeight = isMobile ? 90 : 120
const controlsHeight = isMobile ? 100 : 120
const gridPadding = isMobile ? 5 : 10 // padding inside grid-container
const sectionPadding = isMobile ? 10 : 20 // padding of puzzle-section
const sectionPadding = isMobile ? 5 : 20 // padding of puzzle-section
const mainPadding = isMobile ? 10 : 20 // game-main padding
const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2)
const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2) + (isMobile ? 20 : 0)
const gap = isMobile ? 1 : 2
const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding - 20 // 20px safety margin
const availableWidth = window.innerWidth - totalPadding - 10 // 10px safety margin
const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
const availableWidth = window.innerWidth - totalPadding
// Calculate max cell size based on available space
// Account for gaps between cells
@@ -264,9 +264,9 @@ class KruiswoordProGame {
// Use the smaller dimension
let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
// Set min/max bounds based on device
const minSize = isMobile ? 30 : 40
const maxSize = isMobile ? 50 : 120
// Set min/max bounds based on device - more conservative on mobile
const minSize = isMobile ? 28 : 40
const maxSize = isMobile ? 45 : 120
cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
console.log('Grid calculation:', {

8
public/styles_v3.css
View File

@@ -181,10 +181,13 @@ body {
}
.puzzle-section {
padding: 10px;
padding: 5px;
border-radius: 10px;
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
@@ -206,6 +209,9 @@ body {
padding: 5px;
gap: 1px;
width: fit-content;
margin: 0 auto;
display: grid;
place-items: center;
}
}