1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f5f3f0">
<title>Word Search</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="page">
<header class="page__header">
<h1 class="page__title">Word Search Game</h1>
</header>
<section id="gameboard" class="page__board"></section>
<aside class="page__words" aria-label="Words to find">
<ul class="word-list"></ul>
</aside>
<footer class="page__footer">
<p id="status" class="page__status" aria-live="polite"></p>
</footer>
</main>
<script type="module">
import { Game } from './js/wordsearch.js';
const game = new Game({
container: 'gameboard',
words: ['Bangkok', 'Hong Kong', 'London', 'Macau', 'Istanbul', 'Dubai', 'Mecca', 'Antalya', 'Paris', 'Kuala Lumpur'],
});
const list = document.querySelector('.word-list');
if (list) {
list.innerHTML = '';
for (let i = 0; i < game.words.length; i++) {
const li = document.createElement('li');
li.className = 'word-list__item';
li.dataset.word = game.normalizedWords[i];
li.textContent = game.words[i];
list.appendChild(li);
}
const statusEl = document.getElementById('status');
const STATUS_MESSAGES = {
'game-started': 'Find all the words!',
'board-focused': 'Use arrow keys to move, Space to start a selection, Enter to confirm.',
'keyboard-started': 'Move with arrow keys, then press Enter to confirm.',
'keyboard-cancelled': 'Selection canceled.',
'word-found': ({ displayWord }) => `Found: ${displayWord}!`,
'game-completed': 'You found all the words — well done!',
};
game.container.addEventListener('wordsearch:status', ({ detail }) => {
const msg = STATUS_MESSAGES[detail.name];
if (statusEl && msg !== undefined) {
statusEl.textContent = typeof msg === 'function' ? msg(detail) : msg;
}
if (detail.name === 'word-found') {
const item = list.querySelector(`[data-word="${detail.normalizedWord}"]`);
item?.classList.add('word-list__item--found');
}
if (detail.name === 'game-completed') {
const overlay = document.createElement('div');
overlay.className = 'complete';
overlay.innerHTML = `
<div class="complete__inner">
<div class="complete__content">
<h2 class="complete__title">Congratulations!</h2>
<p class="complete__message">You found all of the words!</p>
</div>
</div>
`;
game.container.parentNode.appendChild(overlay);
}
});
}
</script>
</body>
</html>
|
