diff options
| author | Zhineng Li <[email protected]> | 2026-04-30 10:33:23 +0800 |
|---|---|---|
| committer | Zhineng Li <[email protected]> | 2026-04-30 10:34:20 +0800 |
| commit | 68c9b7560642c802ca3bfe6d7e0f7a8c54412c40 (patch) | |
| tree | a262f6e37f4991cc5c8d88b50993c58af722e70c /index.html | |
| parent | 6f2282ca7c13fdb43f21e8f52ac20235ff7e4ded (diff) | |
| download | word-search-game-68c9b7560642c802ca3bfe6d7e0f7a8c54412c40.tar.gz word-search-game-68c9b7560642c802ca3bfe6d7e0f7a8c54412c40.zip | |
keyboard & touch navigation, configurable settings, and refactor
- keyboard support: arrow keys or `hjkl` to move cursor, Space to start
selection, Enter to confirm, Escape to cancel
- configurable settings: word placement directions, grid size, cell
size, colors, fonts, debug mode, and more via `GameSettings`
- modernize CSS (logical properties, grid layout) and HTML semantics
- refactor JavaScript code around single-responsibility principles
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 97 |
1 files changed, 73 insertions, 24 deletions
@@ -2,32 +2,81 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Word search game</title> - <link rel="stylesheet" href="css/wordsearch.min.css" /> - <link rel="stylesheet" href="css/style.min.css" /> + <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> - <div class="wrap"> - <h1 class="logo">Word search game</h1> - <section id="ws-area"></section> - <ul class="ws-words"></ul> - </div> - <a href="https://github.com/lizhineng/word-search-game"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_right_red.png" alt="Fork me on GitHub"></a> - <script src="js/utility.min.js"></script> - <script src="js/wordsearch.min.js"></script> - <script type="text/javascript"> - var gameAreaEl = document.getElementById('ws-area'); - var gameobj = gameAreaEl.wordSearch(); - - // Put words into `.ws-words` - var words = gameobj.settings.wordsList, - wordsWrap = document.querySelector('.ws-words'); - for (i in words) { - var liEl = document.createElement('li'); - liEl.setAttribute('class', 'ws-word'); - liEl.innerText = words[i]; - wordsWrap.appendChild(liEl); + <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 { WordSearch } from './js/wordsearch.js'; + + const game = new WordSearch({ + 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>
\ No newline at end of file +</html> |