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 15:04:54 +01:00
parent 977aff0697
commit bd86a2354a
4 changed files with 45 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/mobile.css
View File

@@ -113,9 +113,9 @@ body {
.grid-section { .grid-section {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 5px; padding: 5px 5px 0 5px;
overflow: hidden; overflow: hidden;
background: #f8f9fa; background: #f8f9fa;
} }

18
public/mobile.js
View File

@@ -100,10 +100,10 @@ class MobileCrosswordGame {
} }
calculateCellSize(rows, cols) { calculateCellSize(rows, cols) {
// Mobile-specific calculation // Mobile-specific calculation - maximize grid size
const headerHeight = 50 const headerHeight = 50
const progressHeight = 35 const progressHeight = 35
const controlsHeight = 75 const controlsHeight = 70
const padding = 16 const padding = 16
const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding
@@ -114,8 +114,18 @@ class MobileCrosswordGame {
let cellSize = Math.min(maxFromHeight, maxFromWidth) let cellSize = Math.min(maxFromHeight, maxFromWidth)
// Constrain to 30-42px for mobile readability // Allow larger cells on mobile - 32-50px range
cellSize = Math.max(30, Math.min(42, cellSize)) cellSize = Math.max(32, Math.min(50, cellSize))
console.log('Mobile grid:', {
availableHeight,
availableWidth,
rows,
cols,
cellSize,
totalGridHeight: rows * cellSize,
totalGridWidth: cols * cellSize
})
return cellSize return cellSize
} }

21
public/redirect.js
View File

@@ -11,20 +11,27 @@
// Detect device type // Detect device type
const width = window.innerWidth const width = window.innerWidth
const isMobileDevice = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) const height = window.innerHeight
const isTabletDevice = /iPad|Android/i.test(navigator.userAgent) && !isMobileDevice const userAgent = navigator.userAgent
// Better mobile detection
const isMobilePhone = /Android.*Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)
const isTabletDevice = /iPad|Android(?!.*Mobile)/i.test(userAgent)
let targetPage = null let targetPage = null
// Determine target page based on device and screen size // Determine target page based on device and screen size
if (width < 600 || (isMobileDevice && width < 768)) { if (isMobilePhone && width < 768) {
// Mobile: < 600px or mobile device < 768px // Mobile phones: detected mobile device < 768px
targetPage = 'mobile.html' targetPage = 'mobile.html'
} else if (width >= 600 && width < 1024) { } else if (width < 500) {
// Tablet: 600-1024px // Small screens: force mobile
targetPage = 'mobile.html'
} else if (isTabletDevice || (width >= 500 && width < 1200)) {
// Tablets: iPad/Android tablet OR 500-1200px
targetPage = 'tablet.html' targetPage = 'tablet.html'
} else { } else {
// Desktop: >= 1024px // Desktop: >= 1200px
targetPage = 'index.html' targetPage = 'index.html'
} }

18
public/tablet.js
View File

@@ -95,7 +95,7 @@ class TabletCrosswordGame {
const headerHeight = 70 const headerHeight = 70
const progressHeight = 50 const progressHeight = 50
const sidebarWidth = 180 const sidebarWidth = 180
const padding = 60 // 15px on each side x2 const padding = 60 // Total padding
const availableHeight = window.innerHeight - headerHeight - progressHeight - padding const availableHeight = window.innerHeight - headerHeight - progressHeight - padding
const availableWidth = window.innerWidth - sidebarWidth - padding const availableWidth = window.innerWidth - sidebarWidth - padding
@@ -105,8 +105,20 @@ class TabletCrosswordGame {
let cellSize = Math.min(maxFromHeight, maxFromWidth) let cellSize = Math.min(maxFromHeight, maxFromWidth)
// Tablet range: 50-90px for good visibility and touch // Tablet range: 45-80px for better fit and touch
cellSize = Math.max(50, Math.min(90, cellSize)) cellSize = Math.max(45, Math.min(80, cellSize))
console.log('Tablet grid:', {
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
availableHeight,
availableWidth,
rows,
cols,
cellSize,
totalGridHeight: rows * cellSize,
totalGridWidth: cols * cellSize
})
return cellSize return cellSize
} }