tablet-initial-release
This commit is contained in:
mike
@@ -28,8 +28,8 @@
|
|||||||
// Small screens: force mobile
|
// Small screens: force mobile
|
||||||
targetPage = 'mobile.html'
|
targetPage = 'mobile.html'
|
||||||
} else if (isTabletDevice || (width >= 500 && width < 1200)) {
|
} else if (isTabletDevice || (width >= 500 && width < 1200)) {
|
||||||
// Tablets: iPad/Android tablet OR 500-1200px
|
// Tablets: iPad/Android tablet OR 500-1200px - use full app
|
||||||
targetPage = 'index.html'
|
targetPage = 'tablet-app.html'
|
||||||
} else {
|
} else {
|
||||||
// Desktop: >= 1200px
|
// Desktop: >= 1200px
|
||||||
targetPage = 'index.html'
|
targetPage = 'index.html'
|
||||||
|
|||||||
471
public/tablet-app.css
Normal file
471
public/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
public/tablet-app.html
Normal file
138
public/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
public/tablet-app.js
Normal file
657
public/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()
|
||||||
|
})
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Kruiswoord Pro</title>
|
<title>Kruiswoord Pro</title>
|
||||||
<script src="redirect2.js"></script>
|
<!-- <script src="redirect2.js"></script>-->
|
||||||
<link rel="stylesheet" href="tablet.css">
|
<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">
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user