inital-release
This commit is contained in:
mike
@@ -1,6 +1,6 @@
|
|||||||
// Device Detection and Redirect
|
// Device Detection and Redirect
|
||||||
(function() {
|
(function() {
|
||||||
// Check if we're already on the correct page
|
// Check current page
|
||||||
const currentPage = window.location.pathname.split('/').pop() || 'index.html'
|
const currentPage = window.location.pathname.split('/').pop() || 'index.html'
|
||||||
|
|
||||||
// Check if we've already redirected (prevent infinite loops)
|
// Check if we've already redirected (prevent infinite loops)
|
||||||
@@ -9,16 +9,28 @@
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Detect mobile device
|
// Detect device type
|
||||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
const width = window.innerWidth
|
||||||
|| window.innerWidth < 768
|
const isMobileDevice = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
||||||
|
const isTabletDevice = /iPad|Android/i.test(navigator.userAgent) && !isMobileDevice
|
||||||
|
|
||||||
// Only redirect if needed
|
let targetPage = null
|
||||||
if (isMobile && currentPage !== 'mobile.html') {
|
|
||||||
|
// Determine target page based on device and screen size
|
||||||
|
if (width < 600 || (isMobileDevice && width < 768)) {
|
||||||
|
// Mobile: < 600px or mobile device < 768px
|
||||||
|
targetPage = 'mobile.html'
|
||||||
|
} else if (width >= 600 && width < 1024) {
|
||||||
|
// Tablet: 600-1024px
|
||||||
|
targetPage = 'tablet.html'
|
||||||
|
} else {
|
||||||
|
// Desktop: >= 1024px
|
||||||
|
targetPage = 'index.html'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect if needed
|
||||||
|
if (currentPage !== targetPage) {
|
||||||
sessionStorage.setItem('hasRedirected', 'true')
|
sessionStorage.setItem('hasRedirected', 'true')
|
||||||
window.location.href = 'mobile.html'
|
window.location.href = targetPage
|
||||||
} else if (!isMobile && currentPage === 'mobile.html') {
|
|
||||||
sessionStorage.setItem('hasRedirected', 'true')
|
|
||||||
window.location.href = 'index.html'
|
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
|
|||||||
442
public/tablet.css
Normal file
442
public/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);
|
||||||
|
}
|
||||||
124
public/tablet.html
Normal file
124
public/tablet.html
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
<!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>
|
||||||
|
<script src="redirect.js"></script>
|
||||||
|
<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>
|
||||||
464
public/tablet.js
Normal file
464
public/tablet.js
Normal file
@@ -0,0 +1,464 @@
|
|||||||
|
// 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 // 15px on each side x2
|
||||||
|
|
||||||
|
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: 50-90px for good visibility and touch
|
||||||
|
cellSize = Math.max(50, Math.min(90, 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