mobile-desktop-tablet
This commit is contained in:
mike
62
tablet/404.html
Normal file
62
tablet/404.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
* {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: #888;
|
||||
display: table;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 280px) {
|
||||
|
||||
body,
|
||||
p {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.3em;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->
|
||||
BIN
tablet/favicon.ico
Normal file
BIN
tablet/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
954
tablet/game.js
Normal file
954
tablet/game.js
Normal file
@@ -0,0 +1,954 @@
|
||||
// Kruiswoord Pro Game Logic - Fixed Version with Tablet Support and Correct Hints
|
||||
class KruiswoordProGame {
|
||||
constructor() {
|
||||
this.currentLevel = 1
|
||||
this.coins = 100
|
||||
this.hints = 3
|
||||
this.currentPuzzle = null
|
||||
this.userAnswers = {}
|
||||
this.selectedCell = null
|
||||
this.gridElement = document.getElementById('crosswordGrid')
|
||||
this.isTablet = window.innerWidth >= 768
|
||||
|
||||
this.initializeGame()
|
||||
this.setupEventListeners()
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
|
||||
// Handle window resize for tablet/desktop
|
||||
window.addEventListener('resize', () => {
|
||||
this.handleResize()
|
||||
})
|
||||
}
|
||||
|
||||
handleResize() {
|
||||
const wasTablet = this.isTablet
|
||||
this.isTablet = window.innerWidth >= 768
|
||||
|
||||
if (wasTablet !== this.isTablet && this.currentPuzzle) {
|
||||
this.renderGrid() // Re-render for different screen size
|
||||
}
|
||||
}
|
||||
|
||||
initializeGame() {
|
||||
this.updateUI()
|
||||
this.setupTabletStyles()
|
||||
}
|
||||
|
||||
setupTabletStyles() {
|
||||
if (this.isTablet) {
|
||||
document.body.classList.add('tablet-mode')
|
||||
} else {
|
||||
document.body.classList.remove('tablet-mode')
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Menu controls
|
||||
document.getElementById('menuBtn').addEventListener('click', () => {
|
||||
document.getElementById('sideMenu').classList.add('active')
|
||||
})
|
||||
|
||||
document.getElementById('closeMenu').addEventListener('click', () => {
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
|
||||
// Game controls
|
||||
document.getElementById('checkBtn').addEventListener('click', () => {
|
||||
this.checkAnswers()
|
||||
})
|
||||
|
||||
document.getElementById('clearBtn').addEventListener('click', () => {
|
||||
this.clearGrid()
|
||||
})
|
||||
|
||||
document.getElementById('revealLetterBtn').addEventListener('click', () => {
|
||||
this.showHintModal()
|
||||
})
|
||||
|
||||
document.getElementById('skipBtn').addEventListener('click', () => {
|
||||
this.skipPuzzle()
|
||||
})
|
||||
|
||||
// Hint modal
|
||||
document.getElementById('useHintBtn').addEventListener('click', () => {
|
||||
this.useHint()
|
||||
})
|
||||
|
||||
document.getElementById('cancelHintBtn').addEventListener('click', () => {
|
||||
this.hideHintModal()
|
||||
})
|
||||
|
||||
// Success modal
|
||||
document.getElementById('nextPuzzleBtn').addEventListener('click', () => {
|
||||
this.nextPuzzle()
|
||||
})
|
||||
|
||||
document.getElementById('closeModalBtn').addEventListener('click', () => {
|
||||
this.hideSuccessModal()
|
||||
})
|
||||
|
||||
// Menu items
|
||||
document.getElementById('dailyPuzzle').addEventListener('click', () => {
|
||||
this.loadDailyPuzzle()
|
||||
})
|
||||
|
||||
document.getElementById('levelSelect').addEventListener('click', () => {
|
||||
this.showLevelSelect()
|
||||
})
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', (e) => {
|
||||
this.handleKeyboardInput(e)
|
||||
})
|
||||
}
|
||||
|
||||
// Load puzzles from external puzzleData.js
|
||||
getDutchPuzzles() {
|
||||
// Use puzzles from puzzleData.js if available
|
||||
if (typeof DUTCH_PUZZLES !== 'undefined') {
|
||||
return {
|
||||
1: DUTCH_PUZZLES.level1,
|
||||
2: DUTCH_PUZZLES.level2,
|
||||
3: DUTCH_PUZZLES.level3
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback puzzles
|
||||
return {
|
||||
1: {
|
||||
grid : [
|
||||
['H', 'A', 'A', 'S'],
|
||||
['#', '#', '#', '#'],
|
||||
['V', 'L', 'I', 'E', 'G'],
|
||||
['#', '#', '#', '#', '#']
|
||||
],
|
||||
words : [
|
||||
{
|
||||
word : 'HAAS',
|
||||
clue : 'Snel dier',
|
||||
startRow : 0,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'HAAS'
|
||||
},
|
||||
{
|
||||
word : 'VLIEG',
|
||||
clue : 'Insect',
|
||||
startRow : 2,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'VLIEG'
|
||||
}
|
||||
],
|
||||
difficulty: 1
|
||||
},
|
||||
2: {
|
||||
grid : [
|
||||
['B', 'O', 'M', 'E', 'N'],
|
||||
['#', '#', '#', '#', '#'],
|
||||
['H', 'O', 'N', 'D', 'E'],
|
||||
['#', '#', '#', '#', '#']
|
||||
],
|
||||
words : [
|
||||
{
|
||||
word : 'BOMEN',
|
||||
clue : 'Planten →',
|
||||
startRow : 0,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'BOMEN'
|
||||
},
|
||||
{
|
||||
word : 'HONDE',
|
||||
clue : 'Huisdieren →',
|
||||
startRow : 2,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'HONDE'
|
||||
}
|
||||
],
|
||||
difficulty: 2
|
||||
},
|
||||
3: {
|
||||
grid : [
|
||||
['R', 'E', 'G', 'E', 'N'],
|
||||
['#', '#', '#', '#', '#'],
|
||||
['S', 'N', 'E', 'E', 'U'],
|
||||
['#', '#', '#', '#', '#']
|
||||
],
|
||||
words : [
|
||||
{
|
||||
word : 'REGEN',
|
||||
clue : 'Valt uit de lucht →',
|
||||
startRow : 0,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'REGEN'
|
||||
},
|
||||
{
|
||||
word : 'SNEEU',
|
||||
clue : 'Witte vlokken →',
|
||||
startRow : 2,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'SNEEU'
|
||||
}
|
||||
],
|
||||
difficulty: 3
|
||||
},
|
||||
// Tablet-optimized larger puzzles
|
||||
4: {
|
||||
grid : [
|
||||
['H', 'A', 'A', 'S', '#', '#'],
|
||||
['#', '#', '#', 'T', '#', '#'],
|
||||
['V', 'L', 'I', 'E', 'G', '#'],
|
||||
['#', '#', '#', 'S', '#', '#'],
|
||||
['#', '#', '#', '#', '#', '#'],
|
||||
['#', '#', '#', '#', '#', '#']
|
||||
],
|
||||
words : [
|
||||
{
|
||||
word : 'HAAS',
|
||||
clue : 'Snel dier →',
|
||||
startRow : 0,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'HAAS'
|
||||
},
|
||||
{
|
||||
word : 'VLIEG',
|
||||
clue : 'Insect',
|
||||
startRow : 2,
|
||||
startCol : 0,
|
||||
direction: 'horizontal',
|
||||
answer : 'VLIEG'
|
||||
}
|
||||
],
|
||||
difficulty : 2,
|
||||
tabletOptimized: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadPuzzle(level) {
|
||||
const puzzles = this.getDutchPuzzles()
|
||||
this.currentPuzzle = puzzles[level] || puzzles[1]
|
||||
this.renderGrid()
|
||||
this.userAnswers = {}
|
||||
this.updateProgress()
|
||||
}
|
||||
|
||||
calculateOptimalCellSize(rows, cols) {
|
||||
// Get available viewport space with mobile-specific adjustments
|
||||
const isMobile = window.innerWidth < 768
|
||||
const headerHeight = isMobile ? 70 : 80
|
||||
const progressHeight = isMobile ? 50 : 60
|
||||
const controlsHeight = isMobile ? 100 : 120
|
||||
const gridPadding = isMobile ? 5 : 10 // padding inside grid-container
|
||||
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) + (isMobile ? 20 : 0)
|
||||
const gap = isMobile ? 1 : 2
|
||||
|
||||
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
|
||||
const totalGapHeight = (rows - 1) * gap
|
||||
const totalGapWidth = (cols - 1) * gap
|
||||
|
||||
const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
|
||||
const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
|
||||
|
||||
// Use the smaller dimension
|
||||
let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
|
||||
|
||||
// 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:', {
|
||||
isMobile,
|
||||
viewportWidth: window.innerWidth,
|
||||
availableWidth,
|
||||
availableHeight,
|
||||
rows,
|
||||
cols,
|
||||
maxCellFromWidth,
|
||||
maxCellFromHeight,
|
||||
finalCellSize: cellSize,
|
||||
totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2),
|
||||
totalPadding
|
||||
})
|
||||
|
||||
return cellSize
|
||||
}
|
||||
|
||||
renderGrid() {
|
||||
if (!this.currentPuzzle) return
|
||||
|
||||
const grid = this.currentPuzzle.grid
|
||||
const words = this.currentPuzzle.words
|
||||
|
||||
this.gridElement.innerHTML = ''
|
||||
|
||||
// Set grid dimensions - add 1 column for clue cells on the left
|
||||
const rows = grid.length
|
||||
const cols = Math.max(...grid.map(row => row.length)) + 1
|
||||
|
||||
// Calculate available space and determine optimal cell size
|
||||
const cellSize = this.calculateOptimalCellSize(rows, cols)
|
||||
|
||||
const isMobile = window.innerWidth < 768
|
||||
const gap = isMobile ? 1 : 2
|
||||
|
||||
this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
|
||||
this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`
|
||||
this.gridElement.style.gap = `${gap}px`
|
||||
this.gridElement.style.justifyContent = 'center'
|
||||
this.gridElement.style.margin = '0 auto'
|
||||
|
||||
// Create grid cells with clue column
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
if (col === 0) {
|
||||
// First column is for clues
|
||||
const clueData = this.getClueForRow(row, words)
|
||||
const cellElement = this.createClueCell(row, clueData, cellSize)
|
||||
this.gridElement.appendChild(cellElement)
|
||||
} else {
|
||||
// Remaining columns are the actual grid (offset by 1)
|
||||
const gridCol = col - 1
|
||||
const cellValue = grid[row] && grid[row][gridCol] ? grid[row][gridCol] : '#'
|
||||
const cellElement = this.createCellElement(cellValue, row, gridCol, words, cellSize)
|
||||
this.gridElement.appendChild(cellElement)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.attachCellListeners()
|
||||
}
|
||||
|
||||
getClueForRow(row, words) {
|
||||
// Find horizontal word that starts in this row
|
||||
for (const word of words) {
|
||||
if (word.direction === 'horizontal' && word.startRow === row) {
|
||||
return {
|
||||
clue: word.clue,
|
||||
direction: 'horizontal'
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
createClueCell(row, clueData, cellSize) {
|
||||
const cellDiv = document.createElement('div')
|
||||
cellDiv.className = 'grid-cell clue-cell'
|
||||
cellDiv.style.width = `${ cellSize }px`
|
||||
cellDiv.style.height = `${ cellSize }px`
|
||||
|
||||
if (clueData) {
|
||||
// Has a clue for this row
|
||||
const clueText = document.createElement('div')
|
||||
clueText.className = 'clue-text'
|
||||
clueText.textContent = clueData.clue
|
||||
|
||||
// Responsive font sizing based on cell size
|
||||
const fontSize = Math.max(7, Math.min(12, cellSize / 6))
|
||||
clueText.style.fontSize = `${fontSize}px`
|
||||
clueText.style.lineHeight = '1.1'
|
||||
clueText.style.padding = '2px'
|
||||
|
||||
const arrow = document.createElement('div')
|
||||
arrow.className = 'arrow arrow-right'
|
||||
arrow.textContent = '→'
|
||||
const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
|
||||
arrow.style.fontSize = `${arrowSize}px`
|
||||
|
||||
cellDiv.appendChild(clueText)
|
||||
cellDiv.appendChild(arrow)
|
||||
} else {
|
||||
// Empty clue cell
|
||||
cellDiv.classList.add('blocked-cell')
|
||||
}
|
||||
|
||||
return cellDiv
|
||||
}
|
||||
|
||||
createCellElement(cellValue, row, col, words, cellSize) {
|
||||
const cellDiv = document.createElement('div')
|
||||
cellDiv.className = 'grid-cell'
|
||||
cellDiv.dataset.row = row
|
||||
cellDiv.dataset.col = col
|
||||
|
||||
// FIXED: Set consistent sizing
|
||||
cellDiv.style.width = `${ cellSize }px`
|
||||
cellDiv.style.height = `${ cellSize }px`
|
||||
|
||||
if (cellValue === '#') {
|
||||
// Check if this is a clue cell (before second word in row)
|
||||
const clueData = this.getClueForPosition(row, col, words)
|
||||
if (clueData) {
|
||||
// This is a clue cell for the second word
|
||||
cellDiv.classList.add('clue-cell')
|
||||
|
||||
const clueText = document.createElement('div')
|
||||
clueText.className = 'clue-text'
|
||||
clueText.textContent = clueData.clue
|
||||
|
||||
// Responsive font sizing based on cell size
|
||||
const fontSize = Math.max(7, Math.min(12, cellSize / 6))
|
||||
clueText.style.fontSize = `${fontSize}px`
|
||||
clueText.style.lineHeight = '1.1'
|
||||
clueText.style.padding = '2px'
|
||||
|
||||
const arrow = document.createElement('div')
|
||||
arrow.className = 'arrow arrow-right'
|
||||
arrow.textContent = '→'
|
||||
const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
|
||||
arrow.style.fontSize = `${arrowSize}px`
|
||||
|
||||
cellDiv.appendChild(clueText)
|
||||
cellDiv.appendChild(arrow)
|
||||
} else {
|
||||
// Regular blocked cell
|
||||
cellDiv.classList.add('blocked-cell')
|
||||
}
|
||||
} else {
|
||||
// Letter cell - create input
|
||||
if (this.isPartOfWord(row, col, words)) {
|
||||
cellDiv.classList.add('input-cell')
|
||||
const input = document.createElement('input')
|
||||
input.type = 'text'
|
||||
input.maxLength = 1
|
||||
input.dataset.row = row
|
||||
input.dataset.col = col
|
||||
|
||||
// Responsive font sizing based on cell size
|
||||
const inputFontSize = Math.max(16, Math.min(36, cellSize * 0.5))
|
||||
input.style.fontSize = `${inputFontSize}px`
|
||||
|
||||
// Add existing answer if available
|
||||
const key = `${ row }-${ col }`
|
||||
if (this.userAnswers[key]) {
|
||||
input.value = this.userAnswers[key]
|
||||
}
|
||||
|
||||
cellDiv.appendChild(input)
|
||||
} else {
|
||||
// Empty cell that's not part of any word
|
||||
cellDiv.classList.add('blocked-cell')
|
||||
}
|
||||
}
|
||||
|
||||
return cellDiv
|
||||
}
|
||||
|
||||
// FIXED: Check if cell is part of any word
|
||||
isPartOfWord(row, col, words) {
|
||||
for (const word of words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
|
||||
return true
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
getClueForPosition(row, col, words) {
|
||||
for (const word of words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
// Horizontal clue appears one cell to the left of word start
|
||||
if (word.startRow === row && word.startCol - 1 === col) {
|
||||
return {
|
||||
clue : word.clue,
|
||||
direction: word.direction
|
||||
}
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
// Vertical clue appears one cell above word start
|
||||
if (word.startRow - 1 === row && word.startCol === col) {
|
||||
return {
|
||||
clue : word.clue,
|
||||
direction: word.direction
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
attachCellListeners() {
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('input', (e) => {
|
||||
this.handleInput(e)
|
||||
})
|
||||
|
||||
input.addEventListener('focus', (e) => {
|
||||
this.selectCell(e.target)
|
||||
})
|
||||
|
||||
input.addEventListener('click', (e) => {
|
||||
this.selectCell(e.target)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
const input = e.target
|
||||
const value = input.value.toUpperCase()
|
||||
input.value = value
|
||||
|
||||
const row = parseInt(input.dataset.row)
|
||||
const col = parseInt(input.dataset.col)
|
||||
const key = `${ row }-${ col }`
|
||||
|
||||
this.userAnswers[key] = value
|
||||
|
||||
// FIXED: Smart navigation to next cell in the same word
|
||||
if (value && value.length === 1) {
|
||||
this.moveToNextInWord(input, row, col)
|
||||
}
|
||||
|
||||
this.updateProgress()
|
||||
}
|
||||
|
||||
// FIXED: Navigate to next cell in the same word, not just any next input
|
||||
moveToNextInWord(currentInput, row, col) {
|
||||
const currentWord = this.findWordContainingCell(row, col)
|
||||
if (!currentWord) {
|
||||
this.moveToNextCell(currentInput)
|
||||
return
|
||||
}
|
||||
|
||||
let nextRow = row
|
||||
let nextCol = col
|
||||
|
||||
if (currentWord.direction === 'horizontal') {
|
||||
nextCol++
|
||||
} else {
|
||||
nextRow++
|
||||
}
|
||||
|
||||
// Check if next position is still in the same word
|
||||
const nextInput = this.gridElement.querySelector(`input[data-row="${ nextRow }"][data-col="${ nextCol }"]`)
|
||||
if (nextInput && this.isPartOfWord(nextRow, nextCol, this.currentPuzzle.words)) {
|
||||
nextInput.focus()
|
||||
nextInput.select()
|
||||
} else {
|
||||
// End of word, move to next available input
|
||||
this.moveToNextCell(currentInput)
|
||||
}
|
||||
}
|
||||
|
||||
findWordContainingCell(row, col) {
|
||||
for (const word of this.currentPuzzle.words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
|
||||
return word
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
|
||||
return word
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
selectCell(input) {
|
||||
// Remove previous selection
|
||||
document.querySelectorAll('.grid-cell').forEach(cell => {
|
||||
cell.classList.remove('active')
|
||||
})
|
||||
|
||||
// Add selection to current cell
|
||||
input.parentElement.classList.add('active')
|
||||
this.selectedCell = input
|
||||
}
|
||||
|
||||
// FIXED: Better navigation that respects word boundaries
|
||||
moveToNextCell(currentInput) {
|
||||
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
||||
const currentIndex = inputs.indexOf(currentInput)
|
||||
|
||||
if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
|
||||
const nextInput = inputs[currentIndex + 1]
|
||||
nextInput.focus()
|
||||
nextInput.select()
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyboardInput(e) {
|
||||
if (!this.selectedCell) return
|
||||
|
||||
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
||||
const currentIndex = inputs.indexOf(this.selectedCell)
|
||||
|
||||
if (currentIndex === -1) return
|
||||
|
||||
let targetIndex = currentIndex
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
const currentRow = parseInt(this.selectedCell.dataset.row)
|
||||
const currentCol = parseInt(this.selectedCell.dataset.col)
|
||||
const targetInput = this.findInputAbove(currentRow, currentCol)
|
||||
if (targetInput) {
|
||||
targetInput.focus()
|
||||
targetInput.select()
|
||||
}
|
||||
break
|
||||
case 'ArrowDown':
|
||||
const targetInputDown = this.findInputBelow(currentRow, currentCol)
|
||||
if (targetInputDown) {
|
||||
targetInputDown.focus()
|
||||
targetInputDown.select()
|
||||
}
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
if (currentIndex > 0) {
|
||||
targetIndex--
|
||||
inputs[targetIndex].focus()
|
||||
inputs[targetIndex].select()
|
||||
}
|
||||
break
|
||||
case 'ArrowRight':
|
||||
if (currentIndex < inputs.length - 1) {
|
||||
targetIndex++
|
||||
inputs[targetIndex].focus()
|
||||
inputs[targetIndex].select()
|
||||
}
|
||||
break
|
||||
case 'Backspace':
|
||||
this.selectedCell.value = ''
|
||||
const row = parseInt(this.selectedCell.dataset.row)
|
||||
const col = parseInt(this.selectedCell.dataset.col)
|
||||
delete this.userAnswers[`${ row }-${ col }`]
|
||||
this.updateProgress()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
findInputAbove(row, col) {
|
||||
for (let r = row - 1; r >= 0; r--) {
|
||||
const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
|
||||
if (input) return input
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
findInputBelow(row, col) {
|
||||
const maxRow = Math.max(...Array.from(this.gridElement.querySelectorAll('input')).map(input => parseInt(input.dataset.row)))
|
||||
for (let r = row + 1; r <= maxRow; r++) {
|
||||
const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
|
||||
if (input) return input
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
checkAnswers() {
|
||||
let correct = 0
|
||||
let total = 0
|
||||
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
inputs.forEach(input => {
|
||||
const row = parseInt(input.dataset.row)
|
||||
const col = parseInt(input.dataset.col)
|
||||
const key = `${ row }-${ col }`
|
||||
const userAnswer = input.value.toUpperCase()
|
||||
|
||||
const correctAnswer = this.findCorrectAnswer(row, col)
|
||||
|
||||
if (correctAnswer) {
|
||||
total++
|
||||
if (userAnswer === correctAnswer) {
|
||||
correct++
|
||||
input.parentElement.classList.add('correct')
|
||||
input.parentElement.classList.remove('incorrect')
|
||||
} else if (userAnswer) {
|
||||
input.parentElement.classList.add('incorrect')
|
||||
input.parentElement.classList.remove('correct')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
|
||||
|
||||
if (percentage === 100) {
|
||||
this.showSuccess()
|
||||
} else {
|
||||
this.showFeedback(`Je hebt ${ correct } van de ${ total } letters correct (${ percentage }%)`)
|
||||
}
|
||||
}
|
||||
|
||||
findCorrectAnswer(row, col) {
|
||||
for (const word of this.currentPuzzle.words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
|
||||
const letterIndex = col - word.startCol
|
||||
return word.answer[letterIndex]
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
|
||||
const letterIndex = row - word.startRow
|
||||
return word.answer[letterIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
clearGrid() {
|
||||
if (confirm('Weet je zeker dat je alle ingevulde letters wilt wissen?')) {
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
inputs.forEach(input => {
|
||||
input.value = ''
|
||||
input.parentElement.classList.remove('correct', 'incorrect')
|
||||
})
|
||||
|
||||
this.userAnswers = {}
|
||||
this.updateProgress()
|
||||
this.showFeedback('Raster gewist')
|
||||
}
|
||||
}
|
||||
|
||||
showHintModal() {
|
||||
if (this.hints <= 0) {
|
||||
this.showFeedback('Je hebt geen hints meer. Verdien hints door puzzels op te lossen!', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
document.getElementById('hintModal').classList.add('active')
|
||||
}
|
||||
|
||||
hideHintModal() {
|
||||
document.getElementById('hintModal').classList.remove('active')
|
||||
}
|
||||
|
||||
useHint() {
|
||||
if (this.hints <= 0) return
|
||||
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
const emptyInputs = Array.from(inputs).filter(input => !input.value)
|
||||
|
||||
if (emptyInputs.length === 0) {
|
||||
this.showFeedback('Alle letters zijn al ingevuld!', 'info')
|
||||
this.hideHintModal()
|
||||
return
|
||||
}
|
||||
|
||||
// Randomly select an empty cell
|
||||
const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
|
||||
const row = parseInt(randomInput.dataset.row)
|
||||
const col = parseInt(randomInput.dataset.col)
|
||||
const correctAnswer = this.findCorrectAnswer(row, col)
|
||||
|
||||
if (correctAnswer) {
|
||||
randomInput.value = correctAnswer
|
||||
const key = `${ row }-${ col }`
|
||||
this.userAnswers[key] = correctAnswer
|
||||
|
||||
this.hints--
|
||||
this.updateUI()
|
||||
this.updateProgress()
|
||||
this.showFeedback('Letter onthuld!')
|
||||
this.hideHintModal()
|
||||
|
||||
// Check if puzzle is complete
|
||||
this.checkIfComplete()
|
||||
}
|
||||
}
|
||||
|
||||
checkIfComplete() {
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
let allFilled = true
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (!input.value) {
|
||||
allFilled = false
|
||||
}
|
||||
})
|
||||
|
||||
if (allFilled) {
|
||||
setTimeout(() => this.checkAnswers(), 500)
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess() {
|
||||
// Award rewards
|
||||
this.coins += 50
|
||||
this.hints += 1
|
||||
this.updateUI()
|
||||
|
||||
document.getElementById('successModal').classList.add('active')
|
||||
}
|
||||
|
||||
hideSuccessModal() {
|
||||
document.getElementById('successModal').classList.remove('active')
|
||||
}
|
||||
|
||||
nextPuzzle() {
|
||||
this.hideSuccessModal()
|
||||
this.currentLevel++
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.showFeedback(`Niveau ${ this.currentLevel } geladen!`)
|
||||
}
|
||||
|
||||
skipPuzzle() {
|
||||
if (confirm('Weet je zeker dat je deze puzzel wilt overslaan?')) {
|
||||
this.currentLevel++
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.showFeedback('Puzzel overgeslagen')
|
||||
}
|
||||
}
|
||||
|
||||
loadDailyPuzzle() {
|
||||
this.showFeedback('Dagelijkse puzzel wordt geladen...')
|
||||
// Implement daily puzzle logic
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
}
|
||||
|
||||
showLevelSelect() {
|
||||
this.showFeedback('Niveau selectie komt binnenkort!')
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
}
|
||||
|
||||
updateProgress() {
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
let filled = 0
|
||||
let total = 0
|
||||
|
||||
inputs.forEach(input => {
|
||||
const row = parseInt(input.dataset.row)
|
||||
const col = parseInt(input.dataset.col)
|
||||
const correctAnswer = this.findCorrectAnswer(row, col)
|
||||
|
||||
if (correctAnswer) {
|
||||
total++
|
||||
if (input.value) {
|
||||
filled++
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const progress = total > 0 ? Math.round((filled / total) * 100) : 0
|
||||
|
||||
document.getElementById('progressFill').style.width = `${ progress }%`
|
||||
document.getElementById('progressText').textContent = `${ progress }% voltooid`
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
document.getElementById('coinsCount').textContent = this.coins
|
||||
document.querySelector('.hint-count').textContent = this.hints
|
||||
document.querySelector('.level-number').textContent = `Niveau ${ this.currentLevel }`
|
||||
}
|
||||
|
||||
showFeedback(message, type = 'info') {
|
||||
const feedback = document.createElement('div')
|
||||
feedback.className = `feedback feedback-${ type }`
|
||||
feedback.textContent = message
|
||||
|
||||
feedback.style.cssText = `
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
z-index: 1000;
|
||||
animation: slideIn 0.3s ease;
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
`
|
||||
|
||||
switch (type) {
|
||||
case 'error':
|
||||
feedback.style.background = 'linear-gradient(135deg, #f56565, #e53e3e)'
|
||||
break
|
||||
case 'success':
|
||||
feedback.style.background = 'linear-gradient(135deg, #48bb78, #38a169)'
|
||||
break
|
||||
default:
|
||||
feedback.style.background = 'linear-gradient(135deg, #4299e1, #3182ce)'
|
||||
}
|
||||
|
||||
document.body.appendChild(feedback)
|
||||
|
||||
setTimeout(() => {
|
||||
feedback.style.animation = 'slideOut 0.3s ease'
|
||||
setTimeout(() => {
|
||||
if (feedback.parentNode) {
|
||||
feedback.parentNode.removeChild(feedback)
|
||||
}
|
||||
}, 300)
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
// Add CSS animations and tablet styles
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Tablet Mode Styles */
|
||||
.tablet-mode .grid-container {
|
||||
max-width: 90vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tablet-mode .puzzle-section {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-container {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.game-main {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.bottom-controls {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.grid-container {
|
||||
transform: scale(1.1);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.puzzle-section {
|
||||
min-height: 70vh;
|
||||
}
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
// Initialize game when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const game = new KruiswoordProGame()
|
||||
})
|
||||
BIN
tablet/icon.png
Normal file
BIN
tablet/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
1
tablet/icon.svg
Normal file
1
tablet/icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 192 192"><path fill="#e08524" d="M75.3 73.4H18.4l45.3 34.3L48.3 163l46.1-32.3 48.2 34.6-16.9-58.3 44.9-33.6H115l-20.5-55-19.2 55z"/><path d="m96.7 18.8 18.2 8.2 16.5 44.3h-15.1L96.7 18.8zm-47 146 18.7 9.9 42.6-29.9-16.5-11.4-44.8 31.4zm79.1-56.8 17.4 9.4 18.6 60.1-19.7-11.3-16.3-58.2z"/><path d="m173.1 74.3 17.8 9.2-44.7 34-17.4-9.4 44.3-33.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 429 B |
123
tablet/index.html
Normal file
123
tablet/index.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kruiswoord Pro</title>
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="tablet-container">
|
||||
<!-- Header -->
|
||||
<header class="tablet-header">
|
||||
<button class="menu-btn" id="menuBtn">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="header-center">
|
||||
<h1>Kruiswoord Pro</h1>
|
||||
<span class="level">Niveau <span id="levelNum">1</span></span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="stat">
|
||||
<i class="fas fa-coins"></i>
|
||||
<span id="coinsCount">100</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
<span id="hintsCount">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="main-content">
|
||||
<!-- Grid Section (Left/Center) -->
|
||||
<div class="grid-area">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<span class="progress-text" id="progressText">0%</span>
|
||||
</div>
|
||||
|
||||
<div class="grid-section">
|
||||
<div class="grid-wrapper" id="crosswordGrid">
|
||||
<!-- Grid generated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls Sidebar (Right) -->
|
||||
<div class="controls-sidebar">
|
||||
<button class="control-btn primary" id="checkBtn">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>Controleren</span>
|
||||
</button>
|
||||
|
||||
<button class="control-btn" id="clearBtn">
|
||||
<i class="fas fa-eraser"></i>
|
||||
<span>Wissen</span>
|
||||
</button>
|
||||
|
||||
<button class="control-btn hint" id="hintBtn">
|
||||
<i class="fas fa-eye"></i>
|
||||
<span>Hint</span>
|
||||
</button>
|
||||
|
||||
<button class="control-btn" id="skipBtn">
|
||||
<i class="fas fa-forward"></i>
|
||||
<span>Overslaan</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Side Menu -->
|
||||
<div class="side-menu" id="sideMenu">
|
||||
<div class="menu-header">
|
||||
<h3>Menu</h3>
|
||||
<button class="close-menu" id="closeMenu">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="menu-items">
|
||||
<button class="menu-item" id="dailyPuzzle">
|
||||
<i class="fas fa-calendar-day"></i>
|
||||
<span>Dagelijkse Puzzel</span>
|
||||
</button>
|
||||
<button class="menu-item" id="levelSelect">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<span>Kies Niveau</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal -->
|
||||
<div class="modal" id="successModal">
|
||||
<div class="modal-content">
|
||||
<div class="success-icon">
|
||||
<i class="fas fa-trophy"></i>
|
||||
</div>
|
||||
<h2>Gefeliciteerd!</h2>
|
||||
<p>+50 Munten | +1 Hint</p>
|
||||
<button class="btn-primary" id="nextBtn">Volgende Puzzel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hint Modal -->
|
||||
<div class="modal" id="hintModal">
|
||||
<div class="modal-content">
|
||||
<h3>Hint Gebruiken?</h3>
|
||||
<p>Kost 1 hint</p>
|
||||
<div class="modal-btns">
|
||||
<button class="btn-primary" id="useHintBtn">Ja</button>
|
||||
<button class="btn-secondary" id="cancelHintBtn">Nee</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="puzzleData.js"></script>
|
||||
<script src="tablet.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
244
tablet/puzzleData.js
Normal file
244
tablet/puzzleData.js
Normal file
@@ -0,0 +1,244 @@
|
||||
// Level 4 - 9x8 (Nature & Daily Words)
|
||||
const level1 = {
|
||||
grid: [
|
||||
['B','O','M','E','N','#','Z','O','N'],
|
||||
['H','A','A','S','#','D','O','R','P'],
|
||||
['H','O','N','D','#','O','P','E','N'],
|
||||
['W','I','N','D','#','N','E','S','T'],
|
||||
['W','O','L','K','#','D','U','I','F'],
|
||||
['S','T','E','R','#','E','E','N','D'],
|
||||
['M','A','A','N','#','R','E','U','S'],
|
||||
['R','E','G','E','N','#','V','I','S']
|
||||
],
|
||||
words: [
|
||||
// horizontaal
|
||||
{ word: 'BOMEN', clue: 'Planten', startRow: 0, startCol: 0, direction: 'horizontal', answer: 'BOMEN' },
|
||||
{ word: 'ZON', clue: 'Ster aan de hemel', startRow: 0, startCol: 6, direction: 'horizontal', answer: 'ZON' },
|
||||
|
||||
{ word: 'HAAS', clue: 'Snel dier', startRow: 1, startCol: 0, direction: 'horizontal', answer: 'HAAS' },
|
||||
{ word: 'DORP', clue: 'Kleine plaats', startRow: 1, startCol: 5, direction: 'horizontal', answer: 'DORP' },
|
||||
|
||||
{ word: 'HOND', clue: 'Huisdier', startRow: 2, startCol: 0, direction: 'horizontal', answer: 'HOND' },
|
||||
{ word: 'OPEN', clue: 'Niet dicht', startRow: 2, startCol: 5, direction: 'horizontal', answer: 'OPEN' },
|
||||
|
||||
{ word: 'WIND', clue: 'Luchtbeweging', startRow: 3, startCol: 0, direction: 'horizontal', answer: 'WIND' },
|
||||
{ word: 'NEST', clue: 'Thuis van een vogel', startRow: 3, startCol: 5, direction: 'horizontal', answer: 'NEST' },
|
||||
|
||||
{ word: 'WOLK', clue: 'In de lucht', startRow: 4, startCol: 0, direction: 'horizontal', answer: 'WOLK' },
|
||||
{ word: 'DUIF', clue: 'Stadsvogel', startRow: 4, startCol: 5, direction: 'horizontal', answer: 'DUIF' },
|
||||
|
||||
{ word: 'STER', clue: 'Hemellichaam', startRow: 5, startCol: 0, direction: 'horizontal', answer: 'STER' },
|
||||
{ word: 'EEND', clue: 'Watervogel', startRow: 5, startCol: 5, direction: 'horizontal', answer: 'EEND' },
|
||||
|
||||
{ word: 'MAAN', clue: 'Nachthemel', startRow: 6, startCol: 0, direction: 'horizontal', answer: 'MAAN' },
|
||||
{ word: 'REUS', clue: 'Gigant', startRow: 6, startCol: 5, direction: 'horizontal', answer: 'REUS' },
|
||||
|
||||
{ word: 'REGEN', clue: 'Valt uit de lucht', startRow: 7, startCol: 0, direction: 'horizontal', answer: 'REGEN' },
|
||||
{ word: 'VIS', clue: 'Zwemt in water', startRow: 7, startCol: 6, direction: 'horizontal', answer: 'VIS' },
|
||||
|
||||
// verticaal (spine)
|
||||
{ word: 'DONDER', clue: 'Weerverschijnsel', startRow: 1, startCol: 5, direction: 'vertical', answer: 'DONDER' }
|
||||
],
|
||||
difficulty: 3,
|
||||
rewards: { coins: 125, stars: 4, hints: 1 }
|
||||
};
|
||||
|
||||
// Dutch Swedish-style Crossword Puzzles Database
|
||||
const DUTCH_PUZZLES = {
|
||||
// Level 1 - Easy
|
||||
level1,
|
||||
level0: {
|
||||
grid: [
|
||||
['#','#', '#', '#', '#'],
|
||||
['#','H', 'A', 'A', 'S'],
|
||||
['#','#', '#', '#', 'T'],
|
||||
['#','V', 'L', 'I', 'E', 'G'],
|
||||
['#','#', '#', '#', 'S']
|
||||
],
|
||||
words: [
|
||||
{
|
||||
word: 'HAAS',
|
||||
clue: 'Snel dier',
|
||||
startRow: 0,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'HAAS'
|
||||
},
|
||||
{
|
||||
word: 'VLIEG',
|
||||
clue: 'Insect',
|
||||
startRow: 2,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'VLIEG'
|
||||
},
|
||||
{
|
||||
word: 'AT',
|
||||
clue: 'Kleine woord',
|
||||
startRow: 0,
|
||||
startCol: 2,
|
||||
direction: 'vertical',
|
||||
answer: 'AT'
|
||||
}
|
||||
],
|
||||
difficulty: 1,
|
||||
rewards: { coins: 50, stars: 3, hints: 1 }
|
||||
},
|
||||
|
||||
// Level 2 - Medium Easy
|
||||
level2: {
|
||||
grid: [
|
||||
['B', 'O', 'M', 'E', 'N'],
|
||||
['#', '#', '#', '#', 'D'],
|
||||
['H', 'O', 'N', 'D', 'E'],
|
||||
['#', '#', '#', '#', 'R']
|
||||
],
|
||||
words: [
|
||||
{
|
||||
word: 'BOMEN',
|
||||
clue: 'Planten',
|
||||
startRow: 0,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'BOMEN'
|
||||
},
|
||||
{
|
||||
word: 'HONDE',
|
||||
clue: 'Huisdieren',
|
||||
startRow: 2,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'HONDE'
|
||||
},
|
||||
{
|
||||
word: 'NE',
|
||||
clue: 'Nee afkorting',
|
||||
startRow: 0,
|
||||
startCol: 4,
|
||||
direction: 'vertical',
|
||||
answer: 'NE'
|
||||
}
|
||||
],
|
||||
difficulty: 2,
|
||||
rewards: { coins: 75, stars: 3, hints: 1 }
|
||||
},
|
||||
|
||||
// Level 3 - Weather Theme
|
||||
level3: {
|
||||
grid: [
|
||||
['R', 'E', 'G', 'E', 'N'],
|
||||
['#', '#', '#', '#', 'B'],
|
||||
['S', 'N', 'E', 'E', 'U'],
|
||||
['#', '#', '#', '#', 'W']
|
||||
],
|
||||
words: [
|
||||
{
|
||||
word: 'REGEN',
|
||||
clue: 'Valt uit de lucht',
|
||||
startRow: 0,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'REGEN'
|
||||
},
|
||||
{
|
||||
word: 'SNEEU',
|
||||
clue: 'Witte vlokken',
|
||||
startRow: 2,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'SNEEU'
|
||||
},
|
||||
{
|
||||
word: 'NB',
|
||||
clue: 'Nota bene',
|
||||
startRow: 0,
|
||||
startCol: 4,
|
||||
direction: 'vertical',
|
||||
answer: 'NB'
|
||||
}
|
||||
],
|
||||
difficulty: 3,
|
||||
rewards: { coins: 100, stars: 3, hints: 1 }
|
||||
},
|
||||
|
||||
// Daily Puzzle Template
|
||||
daily: {
|
||||
grid: [
|
||||
['Z', 'O', 'N', 'N', 'E'],
|
||||
['#', '#', '#', '#', 'D'],
|
||||
['M', 'A', 'A', 'N', 'D'],
|
||||
['#', '#', '#', '#', 'G']
|
||||
],
|
||||
words: [
|
||||
{
|
||||
word: 'ZONNE',
|
||||
clue: 'Daglicht',
|
||||
startRow: 0,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'ZONNE'
|
||||
},
|
||||
{
|
||||
word: 'MAAND',
|
||||
clue: 'Tijdseenheid',
|
||||
startRow: 2,
|
||||
startCol: 0,
|
||||
direction: 'horizontal',
|
||||
answer: 'MAAND'
|
||||
},
|
||||
{
|
||||
word: 'ND',
|
||||
clue: 'Noord',
|
||||
startRow: 0,
|
||||
startCol: 4,
|
||||
direction: 'vertical',
|
||||
answer: 'ND'
|
||||
}
|
||||
],
|
||||
difficulty: 2,
|
||||
rewards: { coins: 150, stars: 5, hints: 2 },
|
||||
dailyBonus: true
|
||||
}
|
||||
};
|
||||
|
||||
// Word Database for hints and validation
|
||||
const DUTCH_WORD_DATABASE = {
|
||||
animals: [
|
||||
{ word: 'HAAS', clue: 'Snel dier' },
|
||||
{ word: 'HOND', clue: 'Huisdier' },
|
||||
{ word: 'KAT', clue: 'Katachtige' },
|
||||
{ word: 'VLIEG', clue: 'Insect' },
|
||||
{ word: 'VIS', clue: 'Zwemt in water' },
|
||||
{ word: 'MUIS', clue: 'Klein dier' },
|
||||
{ word: 'PAARD', clue: 'Rijdier' },
|
||||
{ word: 'KIP', clue: 'Legt eieren' },
|
||||
{ word: 'EEL', clue: 'Lang dier' }
|
||||
],
|
||||
nature: [
|
||||
{ word: 'BOMEN', clue: 'Planten' },
|
||||
{ word: 'REGEN', clue: 'Valt uit de lucht' },
|
||||
{ word: 'SNEEU', clue: 'Witte vlokken' },
|
||||
{ word: 'DONDER', clue: 'Weer verschijnsel' },
|
||||
{ word: 'BLIKSEM', clue: 'Lichtflits' },
|
||||
{ word: 'MAAND', clue: 'Satelliet' },
|
||||
{ word: 'STER', clue: 'Hemellichaam' },
|
||||
{ word: 'WOLK', clue: 'Watten in lucht' },
|
||||
{ word: 'WIND', clue: 'Luchtbeweging' },
|
||||
{ word: 'ZON', clue: 'Ster' }
|
||||
],
|
||||
common: [
|
||||
{ word: 'AT', clue: 'Kleine woord' },
|
||||
{ word: 'NE', clue: 'Nee afkorting' },
|
||||
{ word: 'NB', clue: 'Nota bene' },
|
||||
{ word: 'ND', clue: 'Noord' },
|
||||
{ word: 'EN', clue: 'En' },
|
||||
{ word: 'ER', clue: 'Er' },
|
||||
{ word: 'IN', clue: 'In' },
|
||||
{ word: 'OP', clue: 'Op' }
|
||||
]
|
||||
};
|
||||
|
||||
// Export for use in game logic
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = { DUTCH_PUZZLES, DUTCH_WORD_DATABASE };
|
||||
}
|
||||
471
tablet/tablet-app.css
Normal file
471
tablet/tablet-app.css
Normal file
@@ -0,0 +1,471 @@
|
||||
/* Full-Screen Tablet App */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
||||
background: #1a202c;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.app-fullscreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level-text {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-bar-wrapper {
|
||||
background: rgba(255,255,255,0.95);
|
||||
padding: 8px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #48bb78, #38a169);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
/* Grid Container */
|
||||
.grid-container-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,0.95);
|
||||
}
|
||||
|
||||
.crossword-grid {
|
||||
display: grid;
|
||||
background: #a0aec0;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
gap: 2px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Grid Cells */
|
||||
.grid-cell {
|
||||
background: white;
|
||||
border: 2px solid #cbd5e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.grid-cell.clue-cell {
|
||||
background: linear-gradient(135deg, #4a5568, #2d3748);
|
||||
color: white;
|
||||
padding: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.clue-text {
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
word-wrap: break-word;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
color: #4299e1;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
right: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.grid-cell.blocked-cell {
|
||||
background: #2d3748;
|
||||
border-color: #2d3748;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.grid-cell.letter-cell {
|
||||
background: white;
|
||||
font-size: 28px;
|
||||
color: #2d3748;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.grid-cell.letter-cell:hover {
|
||||
background: #f7fafc;
|
||||
border-color: #4299e1;
|
||||
}
|
||||
|
||||
.grid-cell.letter-cell.active {
|
||||
background: #ebf8ff;
|
||||
border-color: #3182ce;
|
||||
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.4);
|
||||
}
|
||||
|
||||
.grid-cell.letter-cell.highlighted {
|
||||
background: #fef5e7;
|
||||
border-color: #f39c12;
|
||||
}
|
||||
|
||||
.grid-cell.letter-cell.correct {
|
||||
background: #c6f6d5;
|
||||
border-color: #48bb78;
|
||||
animation: correctPulse 0.5s ease;
|
||||
}
|
||||
|
||||
.grid-cell.letter-cell.incorrect {
|
||||
background: #fed7d7;
|
||||
border-color: #f56565;
|
||||
animation: shake 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes correctPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
75% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
@keyframes wordComplete {
|
||||
0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
|
||||
100% { box-shadow: 0 0 0 20px rgba(72, 187, 120, 0); }
|
||||
}
|
||||
|
||||
.word-complete {
|
||||
animation: wordComplete 0.8s ease;
|
||||
}
|
||||
|
||||
/* On-Screen Keyboard */
|
||||
.keyboard-area {
|
||||
background: #2d3748;
|
||||
padding: 12px 10px 10px 10px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.keyboard-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.key-btn {
|
||||
background: linear-gradient(135deg, #4a5568, #2d3748);
|
||||
border: none;
|
||||
color: white;
|
||||
min-width: 50px;
|
||||
height: 52px;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.key-btn:active {
|
||||
transform: scale(0.95);
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
}
|
||||
|
||||
.key-btn.key-action {
|
||||
background: linear-gradient(135deg, #ed8936, #dd6b20);
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.key-btn.key-del {
|
||||
background: linear-gradient(135deg, #fc8181, #f56565);
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.keyboard-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
}
|
||||
|
||||
/* Side Menu */
|
||||
.side-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -300px;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: 2px 0 15px rgba(0,0,0,0.3);
|
||||
transition: left 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.side-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-header h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.close-menu {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 18px 20px;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
width: 24px;
|
||||
color: #4facfe;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 2000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 80px;
|
||||
color: #48bb78;
|
||||
margin-bottom: 20px;
|
||||
animation: bounce 1s ease;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-20px); }
|
||||
60% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
color: #2d3748;
|
||||
margin-bottom: 12px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
color: #4a5568;
|
||||
margin-bottom: 24px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 16px 32px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
z-index: 9999;
|
||||
animation: toastFade 2.5s ease;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
@keyframes toastFade {
|
||||
0%, 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
||||
15%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
138
tablet/tablet-app.html
Normal file
138
tablet/tablet-app.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<title>Kruiswoord Pro</title>
|
||||
<!-- <script src="redirect2.js"></script>-->
|
||||
<link rel="stylesheet" href="tablet-app.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-fullscreen">
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<button class="icon-btn" id="menuBtn">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="header-info">
|
||||
<span class="level-text">Niveau <span id="levelNum">1</span></span>
|
||||
</div>
|
||||
<div class="header-stats">
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-coins"></i>
|
||||
<span id="coinsCount">100</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
<span id="hintsCount">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="progress-bar-wrapper">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<span class="progress-text" id="progressText">0%</span>
|
||||
</div>
|
||||
|
||||
<!-- Grid Area -->
|
||||
<div class="grid-container-wrapper">
|
||||
<div class="crossword-grid" id="crosswordGrid">
|
||||
<!-- Generated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- On-Screen Keyboard -->
|
||||
<div class="keyboard-area">
|
||||
<div class="keyboard-row">
|
||||
<button class="key-btn">Q</button>
|
||||
<button class="key-btn">W</button>
|
||||
<button class="key-btn">E</button>
|
||||
<button class="key-btn">R</button>
|
||||
<button class="key-btn">T</button>
|
||||
<button class="key-btn">Y</button>
|
||||
<button class="key-btn">U</button>
|
||||
<button class="key-btn">I</button>
|
||||
<button class="key-btn">O</button>
|
||||
<button class="key-btn">P</button>
|
||||
</div>
|
||||
<div class="keyboard-row">
|
||||
<button class="key-btn">A</button>
|
||||
<button class="key-btn">S</button>
|
||||
<button class="key-btn">D</button>
|
||||
<button class="key-btn">F</button>
|
||||
<button class="key-btn">G</button>
|
||||
<button class="key-btn">H</button>
|
||||
<button class="key-btn">J</button>
|
||||
<button class="key-btn">K</button>
|
||||
<button class="key-btn">L</button>
|
||||
</div>
|
||||
<div class="keyboard-row">
|
||||
<button class="key-btn key-action" id="hintKey">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</button>
|
||||
<button class="key-btn">Z</button>
|
||||
<button class="key-btn">X</button>
|
||||
<button class="key-btn">C</button>
|
||||
<button class="key-btn">V</button>
|
||||
<button class="key-btn">B</button>
|
||||
<button class="key-btn">N</button>
|
||||
<button class="key-btn">M</button>
|
||||
<button class="key-btn key-action key-del" id="delKey">
|
||||
<i class="fas fa-backspace"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="keyboard-actions">
|
||||
<button class="action-btn" id="checkBtn">
|
||||
<i class="fas fa-check"></i> Controleren
|
||||
</button>
|
||||
<button class="action-btn secondary" id="clearBtn">
|
||||
<i class="fas fa-eraser"></i> Wissen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Side Menu -->
|
||||
<div class="side-menu" id="sideMenu">
|
||||
<div class="menu-header">
|
||||
<h3>Menu</h3>
|
||||
<button class="close-menu" id="closeMenu">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="menu-items">
|
||||
<button class="menu-item" id="newGame">
|
||||
<i class="fas fa-play"></i> Nieuw Spel
|
||||
</button>
|
||||
<button class="menu-item" id="dailyPuzzle">
|
||||
<i class="fas fa-calendar-day"></i> Dagelijkse Puzzel
|
||||
</button>
|
||||
<button class="menu-item" id="levelSelect">
|
||||
<i class="fas fa-layer-group"></i> Kies Niveau
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal -->
|
||||
<div class="modal" id="successModal">
|
||||
<div class="modal-content">
|
||||
<div class="success-icon">
|
||||
<i class="fas fa-trophy"></i>
|
||||
</div>
|
||||
<h2>Gefeliciteerd!</h2>
|
||||
<p>+50 Munten | +1 Hint</p>
|
||||
<button class="btn-primary" id="nextBtn">Volgende Puzzel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="puzzleData.js"></script>
|
||||
<script src="tablet-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
657
tablet/tablet-app.js
Normal file
657
tablet/tablet-app.js
Normal file
@@ -0,0 +1,657 @@
|
||||
// Full-Featured Tablet Crossword App
|
||||
class TabletCrosswordApp {
|
||||
constructor() {
|
||||
this.currentLevel = 1
|
||||
this.coins = 100
|
||||
this.hints = 3
|
||||
this.currentPuzzle = null
|
||||
this.userAnswers = {}
|
||||
this.selectedCell = null
|
||||
this.selectedWord = null
|
||||
this.gridElement = document.getElementById('crosswordGrid')
|
||||
this.cells = []
|
||||
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadGameState()
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.setupEventListeners()
|
||||
this.updateUI()
|
||||
this.enableFullscreen()
|
||||
}
|
||||
|
||||
enableFullscreen() {
|
||||
// Request fullscreen on first interaction
|
||||
document.addEventListener('click', () => {
|
||||
if (document.documentElement.requestFullscreen && !document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen().catch(() => {})
|
||||
}
|
||||
}, { once: true })
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Menu
|
||||
document.getElementById('menuBtn').addEventListener('click', () => {
|
||||
document.getElementById('sideMenu').classList.add('active')
|
||||
})
|
||||
document.getElementById('closeMenu').addEventListener('click', () => {
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
|
||||
// On-screen keyboard
|
||||
document.querySelectorAll('.key-btn').forEach(btn => {
|
||||
if (!btn.id) {
|
||||
btn.addEventListener('click', () => {
|
||||
const letter = btn.textContent.trim()
|
||||
this.handleLetterInput(letter)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('delKey').addEventListener('click', () => this.handleDelete())
|
||||
document.getElementById('hintKey').addEventListener('click', () => this.useHintForCurrentWord())
|
||||
|
||||
// Actions
|
||||
document.getElementById('checkBtn').addEventListener('click', () => this.checkAllAnswers())
|
||||
document.getElementById('clearBtn').addEventListener('click', () => this.clearGrid())
|
||||
|
||||
// Menu items
|
||||
document.getElementById('newGame').addEventListener('click', () => this.newGame())
|
||||
document.getElementById('dailyPuzzle').addEventListener('click', () => {
|
||||
this.showToast('Dagelijkse puzzel komt binnenkort!')
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
document.getElementById('levelSelect').addEventListener('click', () => {
|
||||
this.showToast('Niveau selectie komt binnenkort!')
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
|
||||
document.getElementById('nextBtn').addEventListener('click', () => this.nextPuzzle())
|
||||
|
||||
// Prevent accidental zoom/scroll
|
||||
document.addEventListener('gesturestart', e => e.preventDefault())
|
||||
document.addEventListener('gesturechange', e => e.preventDefault())
|
||||
}
|
||||
|
||||
loadPuzzle(level) {
|
||||
if (typeof DUTCH_PUZZLES !== 'undefined') {
|
||||
this.currentPuzzle = DUTCH_PUZZLES[`level${level}`] || DUTCH_PUZZLES.level1
|
||||
}
|
||||
|
||||
this.renderGrid()
|
||||
this.updateProgress()
|
||||
this.updateUI()
|
||||
}
|
||||
|
||||
renderGrid() {
|
||||
if (!this.currentPuzzle) return
|
||||
|
||||
const grid = this.currentPuzzle.grid
|
||||
const words = this.currentPuzzle.words
|
||||
|
||||
this.gridElement.innerHTML = ''
|
||||
this.cells = []
|
||||
|
||||
const rows = grid.length
|
||||
const cols = Math.max(...grid.map(row => row.length)) + 1
|
||||
const cellSize = this.calculateCellSize(rows, cols)
|
||||
|
||||
this.gridElement.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`
|
||||
this.gridElement.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`
|
||||
|
||||
// Create cells
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
if (col === 0) {
|
||||
const clueData = this.getClueForRow(row, words)
|
||||
this.gridElement.appendChild(this.createClueCell(clueData, cellSize))
|
||||
} else {
|
||||
const gridCol = col - 1
|
||||
const cellValue = grid[row]?.[gridCol] || '#'
|
||||
const cell = this.createCell(cellValue, row, gridCol, words, cellSize)
|
||||
this.gridElement.appendChild(cell)
|
||||
|
||||
if (cell.classList.contains('letter-cell')) {
|
||||
this.cells.push({ element: cell, row, col: gridCol })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
calculateCellSize(rows, cols) {
|
||||
const headerHeight = 66
|
||||
const progressHeight = 40
|
||||
const keyboardHeight = 230
|
||||
const padding = 30
|
||||
|
||||
const availableHeight = window.innerHeight - headerHeight - progressHeight - keyboardHeight - padding
|
||||
const availableWidth = window.innerWidth - padding
|
||||
|
||||
const maxFromHeight = Math.floor(availableHeight / rows)
|
||||
const maxFromWidth = Math.floor(availableWidth / cols)
|
||||
|
||||
let cellSize = Math.min(maxFromHeight, maxFromWidth)
|
||||
cellSize = Math.max(50, Math.min(75, cellSize))
|
||||
|
||||
return cellSize
|
||||
}
|
||||
|
||||
getClueForRow(row, words) {
|
||||
return words.find(w => w.direction === 'horizontal' && w.startRow === row)
|
||||
}
|
||||
|
||||
createClueCell(clueData, cellSize) {
|
||||
const cell = document.createElement('div')
|
||||
cell.className = 'grid-cell clue-cell'
|
||||
cell.style.width = `${cellSize}px`
|
||||
cell.style.height = `${cellSize}px`
|
||||
|
||||
if (clueData) {
|
||||
const text = document.createElement('div')
|
||||
text.className = 'clue-text'
|
||||
text.textContent = clueData.clue
|
||||
|
||||
const arrow = document.createElement('div')
|
||||
arrow.className = 'arrow'
|
||||
arrow.textContent = '→'
|
||||
|
||||
cell.appendChild(text)
|
||||
cell.appendChild(arrow)
|
||||
} else {
|
||||
cell.classList.add('blocked-cell')
|
||||
}
|
||||
|
||||
return cell
|
||||
}
|
||||
|
||||
createCell(value, row, col, words, cellSize) {
|
||||
const cell = document.createElement('div')
|
||||
cell.className = 'grid-cell'
|
||||
cell.style.width = `${cellSize}px`
|
||||
cell.style.height = `${cellSize}px`
|
||||
cell.dataset.row = row
|
||||
cell.dataset.col = col
|
||||
|
||||
if (value === '#') {
|
||||
const clueData = this.getClueAtPosition(row, col, words)
|
||||
if (clueData) {
|
||||
cell.classList.add('clue-cell')
|
||||
const text = document.createElement('div')
|
||||
text.className = 'clue-text'
|
||||
text.textContent = clueData.clue
|
||||
const arrow = document.createElement('div')
|
||||
arrow.className = 'arrow'
|
||||
arrow.textContent = '→'
|
||||
cell.appendChild(text)
|
||||
cell.appendChild(arrow)
|
||||
} else {
|
||||
cell.classList.add('blocked-cell')
|
||||
}
|
||||
} else {
|
||||
cell.classList.add('letter-cell')
|
||||
const key = `${row}-${col}`
|
||||
cell.textContent = this.userAnswers[key] || ''
|
||||
|
||||
// Click to select and highlight word
|
||||
cell.addEventListener('click', () => {
|
||||
this.selectCell(cell, row, col)
|
||||
this.highlightWord(row, col)
|
||||
})
|
||||
}
|
||||
|
||||
return cell
|
||||
}
|
||||
|
||||
getClueAtPosition(row, col, words) {
|
||||
for (const word of words) {
|
||||
if (word.direction === 'horizontal' && word.startRow === row && word.startCol - 1 === col) {
|
||||
return word
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
selectCell(cell, row, col) {
|
||||
this.cells.forEach(c => c.element.classList.remove('active'))
|
||||
cell.classList.add('active')
|
||||
this.selectedCell = { element: cell, row, col }
|
||||
}
|
||||
|
||||
highlightWord(row, col) {
|
||||
// Clear previous highlights
|
||||
this.cells.forEach(c => c.element.classList.remove('highlighted'))
|
||||
|
||||
// Find word containing this cell
|
||||
const word = this.findWordContainingCell(row, col)
|
||||
if (!word) return
|
||||
|
||||
this.selectedWord = word
|
||||
|
||||
// Highlight all cells in this word
|
||||
if (word.direction === 'horizontal') {
|
||||
for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
|
||||
const cellData = this.cells.find(cell => cell.row === word.startRow && cell.col === c)
|
||||
if (cellData) {
|
||||
cellData.element.classList.add('highlighted')
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
|
||||
const cellData = this.cells.find(cell => cell.row === r && cell.col === word.startCol)
|
||||
if (cellData) {
|
||||
cellData.element.classList.add('highlighted')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
findWordContainingCell(row, col) {
|
||||
for (const word of this.currentPuzzle.words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
|
||||
return word
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
|
||||
return word
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
handleLetterInput(letter) {
|
||||
if (!this.selectedCell) {
|
||||
// Auto-select first empty cell
|
||||
const firstEmpty = this.cells.find(c => !c.element.textContent)
|
||||
if (firstEmpty) {
|
||||
this.selectCell(firstEmpty.element, firstEmpty.row, firstEmpty.col)
|
||||
this.highlightWord(firstEmpty.row, firstEmpty.col)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const { element, row, col } = this.selectedCell
|
||||
element.textContent = letter
|
||||
const key = `${row}-${col}`
|
||||
this.userAnswers[key] = letter
|
||||
|
||||
this.saveGameState()
|
||||
this.updateProgress()
|
||||
|
||||
// Check if word is complete
|
||||
this.checkWordComplete()
|
||||
|
||||
// Move to next cell in word
|
||||
this.moveToNextInWord()
|
||||
}
|
||||
|
||||
handleDelete() {
|
||||
if (!this.selectedCell) return
|
||||
|
||||
const { element, row, col } = this.selectedCell
|
||||
|
||||
if (element.textContent) {
|
||||
// Delete current cell
|
||||
element.textContent = ''
|
||||
const key = `${row}-${col}`
|
||||
delete this.userAnswers[key]
|
||||
element.classList.remove('correct', 'incorrect')
|
||||
} else {
|
||||
// Move to previous cell and delete
|
||||
this.moveToPreviousInWord()
|
||||
if (this.selectedCell) {
|
||||
const { element: prevElement, row: prevRow, col: prevCol } = this.selectedCell
|
||||
prevElement.textContent = ''
|
||||
const key = `${prevRow}-${prevCol}`
|
||||
delete this.userAnswers[key]
|
||||
prevElement.classList.remove('correct', 'incorrect')
|
||||
}
|
||||
}
|
||||
|
||||
this.saveGameState()
|
||||
this.updateProgress()
|
||||
}
|
||||
|
||||
moveToNextInWord() {
|
||||
if (!this.selectedCell || !this.selectedWord) return
|
||||
|
||||
const { row, col } = this.selectedCell
|
||||
const word = this.selectedWord
|
||||
|
||||
let nextRow = row
|
||||
let nextCol = col
|
||||
|
||||
if (word.direction === 'horizontal') {
|
||||
nextCol++
|
||||
if (nextCol >= word.startCol + word.answer.length) return
|
||||
} else {
|
||||
nextRow++
|
||||
if (nextRow >= word.startRow + word.answer.length) return
|
||||
}
|
||||
|
||||
const nextCell = this.cells.find(c => c.row === nextRow && c.col === nextCol)
|
||||
if (nextCell) {
|
||||
this.selectCell(nextCell.element, nextCell.row, nextCell.col)
|
||||
}
|
||||
}
|
||||
|
||||
moveToPreviousInWord() {
|
||||
if (!this.selectedCell || !this.selectedWord) return
|
||||
|
||||
const { row, col } = this.selectedCell
|
||||
const word = this.selectedWord
|
||||
|
||||
let prevRow = row
|
||||
let prevCol = col
|
||||
|
||||
if (word.direction === 'horizontal') {
|
||||
prevCol--
|
||||
if (prevCol < word.startCol) return
|
||||
} else {
|
||||
prevRow--
|
||||
if (prevRow < word.startRow) return
|
||||
}
|
||||
|
||||
const prevCell = this.cells.find(c => c.row === prevRow && c.col === prevCol)
|
||||
if (prevCell) {
|
||||
this.selectCell(prevCell.element, prevCell.row, prevCell.col)
|
||||
}
|
||||
}
|
||||
|
||||
checkWordComplete() {
|
||||
if (!this.selectedWord) return
|
||||
|
||||
const word = this.selectedWord
|
||||
let userWord = ''
|
||||
let allFilled = true
|
||||
|
||||
if (word.direction === 'horizontal') {
|
||||
for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
|
||||
const key = `${word.startRow}-${c}`
|
||||
const letter = this.userAnswers[key]
|
||||
if (!letter) {
|
||||
allFilled = false
|
||||
break
|
||||
}
|
||||
userWord += letter
|
||||
}
|
||||
} else {
|
||||
for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
|
||||
const key = `${r}-${word.startCol}`
|
||||
const letter = this.userAnswers[key]
|
||||
if (!letter) {
|
||||
allFilled = false
|
||||
break
|
||||
}
|
||||
userWord += letter
|
||||
}
|
||||
}
|
||||
|
||||
if (allFilled) {
|
||||
// Auto-validate word
|
||||
if (userWord === word.answer) {
|
||||
this.animateWordSuccess(word)
|
||||
} else {
|
||||
this.animateWordError(word)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animateWordSuccess(word) {
|
||||
const cells = []
|
||||
|
||||
if (word.direction === 'horizontal') {
|
||||
for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
|
||||
const cellData = this.cells.find(cell => cell.row === word.startRow && cell.col === c)
|
||||
if (cellData) cells.push(cellData.element)
|
||||
}
|
||||
} else {
|
||||
for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
|
||||
const cellData = this.cells.find(cell => cell.row === r && cell.col === word.startCol)
|
||||
if (cellData) cells.push(cellData.element)
|
||||
}
|
||||
}
|
||||
|
||||
cells.forEach((cell, index) => {
|
||||
setTimeout(() => {
|
||||
cell.classList.remove('incorrect', 'highlighted')
|
||||
cell.classList.add('correct', 'word-complete')
|
||||
|
||||
setTimeout(() => {
|
||||
cell.classList.remove('word-complete')
|
||||
}, 800)
|
||||
}, index * 100)
|
||||
})
|
||||
|
||||
this.showToast('Correct! 🎉')
|
||||
this.checkPuzzleComplete()
|
||||
}
|
||||
|
||||
animateWordError(word) {
|
||||
const cells = []
|
||||
|
||||
if (word.direction === 'horizontal') {
|
||||
for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
|
||||
const cellData = this.cells.find(cell => cell.row === word.startRow && cell.col === c)
|
||||
if (cellData) cells.push(cellData.element)
|
||||
}
|
||||
} else {
|
||||
for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
|
||||
const cellData = this.cells.find(cell => cell.row === r && cell.col === word.startCol)
|
||||
if (cellData) cells.push(cellData.element)
|
||||
}
|
||||
}
|
||||
|
||||
cells.forEach(cell => {
|
||||
cell.classList.remove('correct')
|
||||
cell.classList.add('incorrect')
|
||||
|
||||
setTimeout(() => {
|
||||
cell.classList.remove('incorrect')
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
this.showToast('Probeer opnieuw')
|
||||
}
|
||||
|
||||
checkPuzzleComplete() {
|
||||
const allCorrect = this.cells.every(cell => {
|
||||
const row = cell.row
|
||||
const col = cell.col
|
||||
const key = `${row}-${col}`
|
||||
const userAnswer = this.userAnswers[key]
|
||||
const correctAnswer = this.getCorrectAnswer(row, col)
|
||||
return userAnswer === correctAnswer
|
||||
})
|
||||
|
||||
if (allCorrect) {
|
||||
setTimeout(() => this.showSuccess(), 500)
|
||||
}
|
||||
}
|
||||
|
||||
checkAllAnswers() {
|
||||
this.cells.forEach(cell => {
|
||||
const row = cell.row
|
||||
const col = cell.col
|
||||
const key = `${row}-${col}`
|
||||
const userAnswer = this.userAnswers[key]
|
||||
const correctAnswer = this.getCorrectAnswer(row, col)
|
||||
|
||||
if (userAnswer === correctAnswer) {
|
||||
cell.element.classList.add('correct')
|
||||
cell.element.classList.remove('incorrect')
|
||||
} else if (userAnswer) {
|
||||
cell.element.classList.add('incorrect')
|
||||
cell.element.classList.remove('correct')
|
||||
}
|
||||
})
|
||||
|
||||
this.checkPuzzleComplete()
|
||||
}
|
||||
|
||||
getCorrectAnswer(row, col) {
|
||||
for (const word of this.currentPuzzle.words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
|
||||
return word.answer[col - word.startCol]
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
|
||||
return word.answer[row - word.startRow]
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
useHintForCurrentWord() {
|
||||
if (this.hints <= 0) {
|
||||
this.showToast('Geen hints meer!')
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.selectedWord) {
|
||||
this.showToast('Selecteer eerst een woord')
|
||||
return
|
||||
}
|
||||
|
||||
const word = this.selectedWord
|
||||
const emptyCells = []
|
||||
|
||||
if (word.direction === 'horizontal') {
|
||||
for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
|
||||
const key = `${word.startRow}-${c}`
|
||||
if (!this.userAnswers[key]) {
|
||||
emptyCells.push({ row: word.startRow, col: c, letter: word.answer[c - word.startCol] })
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
|
||||
const key = `${r}-${word.startCol}`
|
||||
if (!this.userAnswers[key]) {
|
||||
emptyCells.push({ row: r, col: word.startCol, letter: word.answer[r - word.startRow] })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (emptyCells.length === 0) {
|
||||
this.showToast('Woord al compleet!')
|
||||
return
|
||||
}
|
||||
|
||||
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)]
|
||||
const key = `${randomCell.row}-${randomCell.col}`
|
||||
this.userAnswers[key] = randomCell.letter
|
||||
|
||||
const cellData = this.cells.find(c => c.row === randomCell.row && c.col === randomCell.col)
|
||||
if (cellData) {
|
||||
cellData.element.textContent = randomCell.letter
|
||||
}
|
||||
|
||||
this.hints--
|
||||
this.updateUI()
|
||||
this.saveGameState()
|
||||
this.showToast('Hint gebruikt!')
|
||||
this.checkWordComplete()
|
||||
}
|
||||
|
||||
clearGrid() {
|
||||
if (confirm('Alles wissen?')) {
|
||||
this.userAnswers = {}
|
||||
this.cells.forEach(cell => {
|
||||
cell.element.textContent = ''
|
||||
cell.element.classList.remove('correct', 'incorrect', 'highlighted')
|
||||
})
|
||||
this.saveGameState()
|
||||
this.updateProgress()
|
||||
this.showToast('Gewist')
|
||||
}
|
||||
}
|
||||
|
||||
newGame() {
|
||||
if (confirm('Nieuw spel starten?')) {
|
||||
this.currentLevel = 1
|
||||
this.userAnswers = {}
|
||||
this.loadPuzzle(1)
|
||||
this.saveGameState()
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
this.showToast('Nieuw spel gestart!')
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess() {
|
||||
this.coins += 50
|
||||
this.hints += 1
|
||||
this.updateUI()
|
||||
this.saveGameState()
|
||||
document.getElementById('successModal').classList.add('active')
|
||||
}
|
||||
|
||||
nextPuzzle() {
|
||||
document.getElementById('successModal').classList.remove('active')
|
||||
this.currentLevel++
|
||||
this.userAnswers = {}
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.saveGameState()
|
||||
this.showToast(`Niveau ${this.currentLevel}`)
|
||||
}
|
||||
|
||||
updateProgress() {
|
||||
const total = this.cells.length
|
||||
const filled = Object.keys(this.userAnswers).length
|
||||
const progress = total > 0 ? Math.round((filled / total) * 100) : 0
|
||||
|
||||
document.getElementById('progressFill').style.width = `${progress}%`
|
||||
document.getElementById('progressText').textContent = `${progress}%`
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
document.getElementById('coinsCount').textContent = this.coins
|
||||
document.getElementById('hintsCount').textContent = this.hints
|
||||
document.getElementById('levelNum').textContent = this.currentLevel
|
||||
}
|
||||
|
||||
showToast(message) {
|
||||
const toast = document.createElement('div')
|
||||
toast.className = 'toast'
|
||||
toast.textContent = message
|
||||
document.body.appendChild(toast)
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove()
|
||||
}, 2500)
|
||||
}
|
||||
|
||||
// LocalStorage - Game State Persistence
|
||||
saveGameState() {
|
||||
const state = {
|
||||
currentLevel: this.currentLevel,
|
||||
coins: this.coins,
|
||||
hints: this.hints,
|
||||
userAnswers: this.userAnswers,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
localStorage.setItem('crosswordGameState', JSON.stringify(state))
|
||||
}
|
||||
|
||||
loadGameState() {
|
||||
const saved = localStorage.getItem('crosswordGameState')
|
||||
if (saved) {
|
||||
const state = JSON.parse(saved)
|
||||
this.currentLevel = state.currentLevel || 1
|
||||
this.coins = state.coins || 100
|
||||
this.hints = state.hints || 3
|
||||
this.userAnswers = state.userAnswers || {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new TabletCrosswordApp()
|
||||
})
|
||||
442
tablet/tablet.css
Normal file
442
tablet/tablet.css
Normal file
@@ -0,0 +1,442 @@
|
||||
/* Tablet-Optimized Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tablet-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.tablet-header {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.menu-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.header-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-center h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.level {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 8px 14px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Main Content - Side by Side Layout */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Grid Area (Left) */
|
||||
.grid-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 10px;
|
||||
background: #e9ecef;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #48bb78, #38a169);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.grid-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
display: grid;
|
||||
background: #a0aec0;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
background: white;
|
||||
border: 1px solid #cbd5e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.grid-cell.clue-cell {
|
||||
background: linear-gradient(135deg, #4a5568, #2d3748);
|
||||
color: white;
|
||||
padding: 3px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.clue-text {
|
||||
font-size: 9px;
|
||||
line-height: 1.2;
|
||||
word-wrap: break-word;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
color: #4299e1;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
right: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.grid-cell.blocked-cell {
|
||||
background: #2d3748;
|
||||
border-color: #2d3748;
|
||||
}
|
||||
|
||||
.grid-cell.input-cell {
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.grid-cell.input-cell:hover {
|
||||
background: #f7fafc;
|
||||
border-color: #4299e1;
|
||||
}
|
||||
|
||||
.grid-cell.input-cell.active {
|
||||
background: #ebf8ff;
|
||||
border-color: #3182ce;
|
||||
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
|
||||
}
|
||||
|
||||
.grid-cell.correct {
|
||||
background: #c6f6d5;
|
||||
border-color: #48bb78;
|
||||
}
|
||||
|
||||
.grid-cell.incorrect {
|
||||
background: #fed7d7;
|
||||
border-color: #f56565;
|
||||
}
|
||||
|
||||
.grid-cell input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #2d3748;
|
||||
text-transform: uppercase;
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Controls Sidebar (Right) */
|
||||
.controls-sidebar {
|
||||
width: 180px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
border-left: 1px solid #e9ecef;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.control-btn i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.control-btn.primary {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
}
|
||||
|
||||
.control-btn.hint {
|
||||
background: linear-gradient(135deg, #ed8936, #dd6b20);
|
||||
}
|
||||
|
||||
/* Side Menu */
|
||||
.side-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -280px;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: 2px 0 15px rgba(0,0,0,0.2);
|
||||
transition: left 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.side-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close-menu {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px 20px;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
width: 20px;
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 2000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 64px;
|
||||
color: #48bb78;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
color: #2d3748;
|
||||
margin-bottom: 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
color: #2d3748;
|
||||
margin-bottom: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
color: #4a5568;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-btns {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 14px 24px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e2e8f0;
|
||||
color: #4a5568;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 14px 24px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
.btn-secondary:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
476
tablet/tablet.js
Normal file
476
tablet/tablet.js
Normal file
@@ -0,0 +1,476 @@
|
||||
// Tablet-Optimized Crossword Game
|
||||
class TabletCrosswordGame {
|
||||
constructor() {
|
||||
this.currentLevel = 1
|
||||
this.coins = 100
|
||||
this.hints = 3
|
||||
this.currentPuzzle = null
|
||||
this.userAnswers = {}
|
||||
this.selectedCell = null
|
||||
this.gridElement = document.getElementById('crosswordGrid')
|
||||
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.setupEventListeners()
|
||||
this.updateUI()
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
document.getElementById('menuBtn').addEventListener('click', () => {
|
||||
document.getElementById('sideMenu').classList.add('active')
|
||||
})
|
||||
document.getElementById('closeMenu').addEventListener('click', () => {
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
|
||||
document.getElementById('checkBtn').addEventListener('click', () => this.checkAnswers())
|
||||
document.getElementById('clearBtn').addEventListener('click', () => this.clearGrid())
|
||||
document.getElementById('hintBtn').addEventListener('click', () => this.showHintModal())
|
||||
document.getElementById('skipBtn').addEventListener('click', () => this.skipPuzzle())
|
||||
|
||||
document.getElementById('useHintBtn').addEventListener('click', () => this.useHint())
|
||||
document.getElementById('cancelHintBtn').addEventListener('click', () => this.hideHintModal())
|
||||
document.getElementById('nextBtn').addEventListener('click', () => this.nextPuzzle())
|
||||
|
||||
document.getElementById('dailyPuzzle').addEventListener('click', () => {
|
||||
this.showFeedback('Dagelijkse puzzel komt binnenkort!')
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
document.getElementById('levelSelect').addEventListener('click', () => {
|
||||
this.showFeedback('Niveau selectie komt binnenkort!')
|
||||
document.getElementById('sideMenu').classList.remove('active')
|
||||
})
|
||||
}
|
||||
|
||||
loadPuzzle(level) {
|
||||
if (typeof DUTCH_PUZZLES !== 'undefined') {
|
||||
this.currentPuzzle = DUTCH_PUZZLES[`level${level}`] || DUTCH_PUZZLES.level1
|
||||
}
|
||||
|
||||
this.userAnswers = {}
|
||||
this.renderGrid()
|
||||
this.updateProgress()
|
||||
this.updateUI()
|
||||
}
|
||||
|
||||
renderGrid() {
|
||||
if (!this.currentPuzzle) return
|
||||
|
||||
const grid = this.currentPuzzle.grid
|
||||
const words = this.currentPuzzle.words
|
||||
|
||||
this.gridElement.innerHTML = ''
|
||||
|
||||
const rows = grid.length
|
||||
const cols = Math.max(...grid.map(row => row.length)) + 1
|
||||
|
||||
// Tablet-specific calculation - fill available space
|
||||
const cellSize = this.calculateCellSize(rows, cols)
|
||||
|
||||
this.gridElement.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`
|
||||
this.gridElement.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`
|
||||
|
||||
// Create grid cells
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
if (col === 0) {
|
||||
const clueData = this.getClueForRow(row, words)
|
||||
this.gridElement.appendChild(this.createClueCell(clueData, cellSize))
|
||||
} else {
|
||||
const gridCol = col - 1
|
||||
const cellValue = grid[row]?.[gridCol] || '#'
|
||||
this.gridElement.appendChild(this.createCell(cellValue, row, gridCol, words, cellSize))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.attachCellListeners()
|
||||
}
|
||||
|
||||
calculateCellSize(rows, cols) {
|
||||
// Tablet layout: sidebar is 180px, header is ~70px, progress is ~50px, padding is 30px each side
|
||||
const headerHeight = 70
|
||||
const progressHeight = 50
|
||||
const sidebarWidth = 180
|
||||
const padding = 60 // Total padding
|
||||
|
||||
const availableHeight = window.innerHeight - headerHeight - progressHeight - padding
|
||||
const availableWidth = window.innerWidth - sidebarWidth - padding
|
||||
|
||||
const maxFromHeight = Math.floor(availableHeight / rows)
|
||||
const maxFromWidth = Math.floor(availableWidth / cols)
|
||||
|
||||
let cellSize = Math.min(maxFromHeight, maxFromWidth)
|
||||
|
||||
// Tablet range: 45-80px for better fit and touch
|
||||
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
|
||||
}
|
||||
|
||||
getClueForRow(row, words) {
|
||||
return words.find(w => w.direction === 'horizontal' && w.startRow === row)
|
||||
}
|
||||
|
||||
createClueCell(clueData, cellSize) {
|
||||
const cell = document.createElement('div')
|
||||
cell.className = 'grid-cell clue-cell'
|
||||
cell.style.width = `${cellSize}px`
|
||||
cell.style.height = `${cellSize}px`
|
||||
|
||||
if (clueData) {
|
||||
const text = document.createElement('div')
|
||||
text.className = 'clue-text'
|
||||
text.textContent = clueData.clue
|
||||
|
||||
const arrow = document.createElement('div')
|
||||
arrow.className = 'arrow arrow-right'
|
||||
arrow.textContent = '→'
|
||||
|
||||
cell.appendChild(text)
|
||||
cell.appendChild(arrow)
|
||||
} else {
|
||||
cell.classList.add('blocked-cell')
|
||||
}
|
||||
|
||||
return cell
|
||||
}
|
||||
|
||||
createCell(value, row, col, words, cellSize) {
|
||||
const cell = document.createElement('div')
|
||||
cell.className = 'grid-cell'
|
||||
cell.style.width = `${cellSize}px`
|
||||
cell.style.height = `${cellSize}px`
|
||||
cell.dataset.row = row
|
||||
cell.dataset.col = col
|
||||
|
||||
if (value === '#') {
|
||||
const clueData = this.getClueAtPosition(row, col, words)
|
||||
if (clueData) {
|
||||
cell.classList.add('clue-cell')
|
||||
|
||||
const text = document.createElement('div')
|
||||
text.className = 'clue-text'
|
||||
text.textContent = clueData.clue
|
||||
|
||||
const arrow = document.createElement('div')
|
||||
arrow.className = 'arrow arrow-right'
|
||||
arrow.textContent = '→'
|
||||
|
||||
cell.appendChild(text)
|
||||
cell.appendChild(arrow)
|
||||
} else {
|
||||
cell.classList.add('blocked-cell')
|
||||
}
|
||||
} else {
|
||||
cell.classList.add('input-cell')
|
||||
const input = document.createElement('input')
|
||||
input.type = 'text'
|
||||
input.maxLength = 1
|
||||
input.dataset.row = row
|
||||
input.dataset.col = col
|
||||
|
||||
const fontSize = Math.max(20, Math.min(36, cellSize * 0.5))
|
||||
input.style.fontSize = `${fontSize}px`
|
||||
|
||||
const key = `${row}-${col}`
|
||||
if (this.userAnswers[key]) {
|
||||
input.value = this.userAnswers[key]
|
||||
}
|
||||
|
||||
cell.appendChild(input)
|
||||
}
|
||||
|
||||
return cell
|
||||
}
|
||||
|
||||
getClueAtPosition(row, col, words) {
|
||||
for (const word of words) {
|
||||
if (word.direction === 'horizontal' && word.startRow === row && word.startCol - 1 === col) {
|
||||
return word
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
attachCellListeners() {
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('input', (e) => this.handleInput(e))
|
||||
input.addEventListener('focus', (e) => this.selectCell(e.target))
|
||||
input.addEventListener('click', (e) => this.selectCell(e.target))
|
||||
})
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', (e) => this.handleKeyboard(e))
|
||||
}
|
||||
|
||||
handleInput(e) {
|
||||
const input = e.target
|
||||
const value = input.value.toUpperCase()
|
||||
input.value = value
|
||||
|
||||
const row = parseInt(input.dataset.row)
|
||||
const col = parseInt(input.dataset.col)
|
||||
const key = `${row}-${col}`
|
||||
|
||||
this.userAnswers[key] = value
|
||||
|
||||
if (value && value.length === 1) {
|
||||
this.moveToNextCell(input)
|
||||
}
|
||||
|
||||
this.updateProgress()
|
||||
}
|
||||
|
||||
selectCell(input) {
|
||||
document.querySelectorAll('.grid-cell.input-cell').forEach(cell => {
|
||||
cell.classList.remove('active')
|
||||
})
|
||||
input.parentElement.classList.add('active')
|
||||
this.selectedCell = input
|
||||
}
|
||||
|
||||
moveToNextCell(currentInput) {
|
||||
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
||||
const currentIndex = inputs.indexOf(currentInput)
|
||||
|
||||
if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
|
||||
const nextInput = inputs[currentIndex + 1]
|
||||
nextInput.focus()
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyboard(e) {
|
||||
if (!this.selectedCell) return
|
||||
|
||||
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
||||
const currentIndex = inputs.indexOf(this.selectedCell)
|
||||
|
||||
if (currentIndex === -1) return
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowRight':
|
||||
if (currentIndex < inputs.length - 1) {
|
||||
inputs[currentIndex + 1].focus()
|
||||
}
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
if (currentIndex > 0) {
|
||||
inputs[currentIndex - 1].focus()
|
||||
}
|
||||
e.preventDefault()
|
||||
break
|
||||
case 'Backspace':
|
||||
if (!this.selectedCell.value && currentIndex > 0) {
|
||||
inputs[currentIndex - 1].focus()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
checkAnswers() {
|
||||
let correct = 0
|
||||
let total = 0
|
||||
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
inputs.forEach(input => {
|
||||
const row = parseInt(input.dataset.row)
|
||||
const col = parseInt(input.dataset.col)
|
||||
const userAnswer = input.value.toUpperCase()
|
||||
const correctAnswer = this.getCorrectAnswer(row, col)
|
||||
|
||||
if (correctAnswer) {
|
||||
total++
|
||||
const cell = input.parentElement
|
||||
if (userAnswer === correctAnswer) {
|
||||
correct++
|
||||
cell.classList.add('correct')
|
||||
cell.classList.remove('incorrect')
|
||||
} else if (userAnswer) {
|
||||
cell.classList.add('incorrect')
|
||||
cell.classList.remove('correct')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
|
||||
|
||||
if (percentage === 100) {
|
||||
this.showSuccess()
|
||||
} else {
|
||||
this.showFeedback(`${correct}/${total} correct (${percentage}%)`)
|
||||
}
|
||||
}
|
||||
|
||||
getCorrectAnswer(row, col) {
|
||||
for (const word of this.currentPuzzle.words) {
|
||||
if (word.direction === 'horizontal') {
|
||||
if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
|
||||
return word.answer[col - word.startCol]
|
||||
}
|
||||
} else if (word.direction === 'vertical') {
|
||||
if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
|
||||
return word.answer[row - word.startRow]
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
clearGrid() {
|
||||
if (confirm('Alles wissen?')) {
|
||||
this.userAnswers = {}
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
inputs.forEach(input => {
|
||||
input.value = ''
|
||||
input.parentElement.classList.remove('correct', 'incorrect')
|
||||
})
|
||||
this.updateProgress()
|
||||
this.showFeedback('Gewist')
|
||||
}
|
||||
}
|
||||
|
||||
showHintModal() {
|
||||
if (this.hints <= 0) {
|
||||
this.showFeedback('Geen hints meer!')
|
||||
return
|
||||
}
|
||||
document.getElementById('hintModal').classList.add('active')
|
||||
}
|
||||
|
||||
hideHintModal() {
|
||||
document.getElementById('hintModal').classList.remove('active')
|
||||
}
|
||||
|
||||
useHint() {
|
||||
if (this.hints <= 0) return
|
||||
|
||||
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
||||
const emptyInputs = inputs.filter(input => !input.value)
|
||||
|
||||
if (emptyInputs.length === 0) {
|
||||
this.showFeedback('Alles al ingevuld!')
|
||||
this.hideHintModal()
|
||||
return
|
||||
}
|
||||
|
||||
const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
|
||||
const row = parseInt(randomInput.dataset.row)
|
||||
const col = parseInt(randomInput.dataset.col)
|
||||
const correctAnswer = this.getCorrectAnswer(row, col)
|
||||
|
||||
if (correctAnswer) {
|
||||
randomInput.value = correctAnswer
|
||||
this.userAnswers[`${row}-${col}`] = correctAnswer
|
||||
|
||||
this.hints--
|
||||
this.updateUI()
|
||||
this.updateProgress()
|
||||
this.showFeedback('Letter onthuld!')
|
||||
this.hideHintModal()
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess() {
|
||||
this.coins += 50
|
||||
this.hints += 1
|
||||
this.updateUI()
|
||||
document.getElementById('successModal').classList.add('active')
|
||||
}
|
||||
|
||||
nextPuzzle() {
|
||||
document.getElementById('successModal').classList.remove('active')
|
||||
this.currentLevel++
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.showFeedback(`Niveau ${this.currentLevel}`)
|
||||
}
|
||||
|
||||
skipPuzzle() {
|
||||
if (confirm('Overslaan?')) {
|
||||
this.currentLevel++
|
||||
this.loadPuzzle(this.currentLevel)
|
||||
this.showFeedback('Overgeslagen')
|
||||
}
|
||||
}
|
||||
|
||||
updateProgress() {
|
||||
const inputs = this.gridElement.querySelectorAll('input')
|
||||
let filled = 0
|
||||
let total = 0
|
||||
|
||||
inputs.forEach(input => {
|
||||
total++
|
||||
if (input.value) filled++
|
||||
})
|
||||
|
||||
const progress = total > 0 ? Math.round((filled / total) * 100) : 0
|
||||
document.getElementById('progressFill').style.width = `${progress}%`
|
||||
document.getElementById('progressText').textContent = `${progress}%`
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
document.getElementById('coinsCount').textContent = this.coins
|
||||
document.getElementById('hintsCount').textContent = this.hints
|
||||
document.getElementById('levelNum').textContent = this.currentLevel
|
||||
}
|
||||
|
||||
showFeedback(message) {
|
||||
const feedback = document.createElement('div')
|
||||
feedback.style.cssText = `
|
||||
position: fixed;
|
||||
top: 90px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.85);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
z-index: 9999;
|
||||
animation: fadeInOut 2.5s ease;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
`
|
||||
feedback.textContent = message
|
||||
document.body.appendChild(feedback)
|
||||
|
||||
setTimeout(() => {
|
||||
feedback.remove()
|
||||
}, 2500)
|
||||
}
|
||||
}
|
||||
|
||||
// Animation
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
||||
15% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
85% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new TabletCrosswordGame()
|
||||
})
|
||||
Reference in New Issue
Block a user