CODE: WordFind

CODE: To use as a starting point for new WordFinds.

Note: This was tricky: WordFind Development

<!DOCTYPE html>

<head>

<style>

body {

font-family: 'Arial', sans-serif;

background: linear-gradient(to bottom, #f4f4f9, #e0e7ff);

margin: 0;

padding: 20px;

}

.container {

max-width: 1400px;

margin: 0 auto;

display: flex;

gap: 20px;

}

.main-content {

flex: 3;

}

#wordsearch {

border-collapse: collapse;

margin: 20px 0;

box-shadow: 0 4px 8px rgba(0,0,0,0.1);

background: white;

touch-action: none; /* Prevent default touch behaviors like scrolling */

}

#wordsearch td {

width: 35px;

height: 35px;

text-align: center;

font-size: 22px;

border: 2px solid #333;

cursor: pointer;

user-select: none;

transition: background-color 0.3s;

box-sizing: border-box;

}

.selected {

background-color: #FFFF99 !important;

color: black !important;

}

.highlighted {

background-color: #FFFF99 !important;

color: black !important;

}

.found0 { background-color: #6495ED !important; color: white !important; }

.found1 { background-color: #FF7F50 !important; color: white !important; }

.found2 { background-color: #9ACD32 !important; color: white !important; }

.found3 { background-color: #FFC0CB !important; color: black !important; }

.found4 { background-color: #DAA520 !important; color: white !important; }

.found5 { background-color: #BA55D3 !important; color: white !important; }

.found6 { background-color: #40E0D0 !important; color: black !important; }

.found7 { background-color: #FFD700 !important; color: black !important; }

.found8 { background-color: #B0C4DE !important; color: black !important; }

.found9 { background-color: #DEB887 !important; color: black !important; }

.found10 { background-color: #F08080 !important; color: white !important; }

.found11 { background-color: #7B68EE !important; color: white !important; }

.found12 { background-color: #00FF7F !important; color: black !important; }

.found13 { background-color: #9370DB !important; color: white !important; }

.found14 { background-color: #FFA500 !important; color: black !important; }

.found15 { background-color: #8A2BE2 !important; color: white !important; }

.found16 { background-color: #CD5C5C !important; color: white !important; }

.found17 { background-color: #20B2AA !important; color: white !important; }

.found18 { background-color: #4682B4 !important; color: white !important; }

.found19 { background-color: #FF6347 !important; color: white !important; }

.found-word-color {

font-weight: bold;

}

.word-count {

font-size: 14px;

font-weight: normal;

margin-left: 5px;

}

.lists {

display: flex;

justify-content: space-between;

gap: 20px;

flex: 1;

}

.find, .found {

width: 48%;

background: white;

padding: 15px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

h1 {

font-size: 2.5em;

color: #333;

text-align: center;

margin-bottom: 20px;

text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

}

h2 {

font-size: 1.5em;

color: #444;

margin-bottom: 10px;

}

ul {

list-style-type: none;

padding: 0;

}

li {

margin: 8px 0;

font-size: 18px;

padding: 5px;

border-radius: 4px;

transition: background-color 0.3s;

}

li:hover {

background-color: #f0f0f0;

}

.alphabet-panel {

width: 220px;

background: white;

padding: 15px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

.alphabet-panel h2 {

font-size: 1.5em;

color: #444;

margin-bottom: 10px;

}

.alphabet-button {

display: inline-block;

width: 35px;

height: 35px;

margin: 3px;

text-align: center;

line-height: 35px;

font-size: 18px;

border: 2px solid #333;

cursor: pointer;

background-color: #f0f0f0;

border-radius: 4px;

transition: background-color 0.3s;

}

.alphabet-button.active {

background-color: #FFFF99;

font-weight: bold;

}

.alphabet-button:hover {

background-color: #e0e0e0;

}

.clear-button, .cheat-button {

display: block;

width: 100%;

padding: 10px;

margin-top: 10px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

text-align: center;

transition: background-color 0.3s;

}

.clear-button {

background-color: #dc3545;

color: white;

}

.clear-button:hover {

background-color: #c82333;

}

.cheat-button {

background-color: #6f42c1;

color: white;

}

.cheat-button:hover {

background-color: #5a32a3;

}

.cheat-button:disabled {

background-color: #a89fc7;

cursor: not-allowed;

}

</style>

</head>

<body>

</table>

<h2>Words to Find</h2>

<li data-word-index="1">ARERO</li>

<li data-word-index="2">RINGA</li>

<li data-word-index="4">RINGARINGA</li>

<li data-word-index="5">WAEWAE</li>

<li data-word-index="6">UPOKO</li>

<li data-word-index="7">MAIKUKU</li>

<li data-word-index="8">WAEWAERARO</li>

<li data-word-index="9">TARINGA</li>

<li data-word-index="14">MATIMATI</li>

<li data-word-index="15">TUARĀ</li>

<li data-word-index="16">POKOHIWI</li>

<li data-word-index="18">KANOHI</li>

</ul>

</div>

<h2>Found Words</h2>

</div>

<h2>Māori Alphabet</h2>

<button class="clear-button" onclick="clearHighlight()">Clear Highlights</button>

<button class="cheat-button" onclick="showSolution()">Cheat</button>

</div>

const table = document.getElementById('wordsearch');

const cells = [];

for (let row of table.rows) {

let r = [];

for (let cell of row.cells) {

r.push(cell);

}

cells.push(r);

}

const wordData = [

{ word: "WAHA", translation: "Mouth", coords: [[0,0],[0,1],[0,2],[0,3]], count: 0 },

{ word: "ARERO", translation: "Tongue", coords: [[1,0],[1,1],[1,2],[1,3],[1,4]], count: 0 },

{ word: "RINGA", translation: "Hand", coords: [[2,0],[2,1],[2,2],[2,3],[2,4]], count: 0 },

{ word: "IHU", translation: "Nose", coords: [[3,0],[3,1],[3,2]], count: 0 },

{ word: "RINGARINGA", translation: "Hands", coords: [[4,0],[4,1],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9]], count: 0 },

{ word: "WAEWAE", translation: "Feet", coords: [[5,0],[5,1],[5,2],[5,3],[5,4],[5,5]], count: 0 },

{ word: "UPOKO", translation: "Head", coords: [[6,0],[6,1],[6,2],[6,3],[6,4]], count: 0 },

{ word: "MAIKUKU", translation: "Fingernail Toenail", coords: [[7,0],[7,1],[7,2],[7,3],[7,4],[7,5],[7,6]], count: 0 },

{ word: "WAEWAERARO", translation: "Legs", coords: [[8,0],[8,1],[8,2],[8,3],[8,4],[8,5],[8,6],[8,7],[8,8],[8,9]], count: 0 },

{ word: "TARINGA", translation: "Ear", coords: [[9,0],[9,1],[9,2],[9,3],[9,4],[9,5],[9,6]], count: 0 },

{ word: "HOPE", translation: "Waist", coords: [[10,0],[10,1],[10,2],[10,3]], count: 0 },

{ word: "TURI", translation: "Knee", coords: [[11,0],[11,1],[11,2],[11,3]], count: 0 },

{ word: "KARU", translation: "Eye", coords: [[12,0],[12,1],[12,2],[12,3]], count: 0 },

{ word: "KAKĪ", translation: "Neck", coords: [[13,0],[13,1],[13,2],[13,3]], count: 0 },

{ word: "MATIMATI", translation: "Fingers", coords: [[14,0],[14,1],[14,2],[14,3],[14,4],[14,5],[14,6],[14,7]], count: 0 },

{ word: "TUARĀ", translation: "Back", coords: [[0,4],[0,5],[0,6],[0,7],[0,8]], count: 0 },

{ word: "POKOHIWI", translation: "Shoulder", coords: [[11,4],[11,5],[11,6],[11,7],[11,8],[11,9],[11,10],[11,11]], count: 0 },

{ word: "PUKU", translation: "Stomach", coords: [[1,5],[1,6],[1,7],[1,8]], count: 0 },

{ word: "KANOHI", translation: "Face", coords: [[2,5],[2,6],[2,7],[2,8],[2,9]], count: 0 },

{ word: "NIHO", translation: "Teeth", coords: [[12,6],[12,7],[12,8],[12,9]], count: 0 }

];

const words = wordData.map(d => d.word);

const wordIndexes = {};

words.forEach((w, i) => wordIndexes[w] = i);

const colorValues = ['#6495ED', '#FF7F50', '#9ACD32', '#FFC0CB', '#DAA520', '#BA55D3', '#40E0D0', '#FFD700', '#B0C4DE', '#DEB887', '#F08080', '#7B68EE', '#00FF7F', '#9370DB', '#FFA500', '#8A2BE2', '#CD5C5C', '#20B2AA', '#4682B4', '#FF6347'];

const maoriAlphabet = ['A', 'Ā', 'E', 'Ē', 'I', 'Ī', 'O', 'Ō', 'U', 'Ū', 'H', 'K', 'M', 'N', 'P', 'R', 'T', 'W', 'NG', 'WH'];

let highlightedLetters = new Set();

let startCell = null;

let selectedCells = [];

let isDragging = false;

let isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

let touchStartTime = 0;

let touchStartCell = null;

let cheatTimeout = null;

function getCellsInLine(startRow, startCol, endRow, endCol) {

const cellsInLine = [];

let currentRow = startRow;

let currentCol = startCol;

const dx = Math.sign(endCol - startCol);

const dy = Math.sign(endRow - startRow);

while (true) {

if (cells[currentRow] && cells[currentRow][currentCol]) {

cellsInLine.push(cells[currentRow][currentCol]);

} else {

break;

}

if (currentRow === endRow && currentCol === endCol) {

break;

}

currentRow += dy;

currentCol += dx;

}

return cellsInLine;

}

function addToSelection(cell) {

cell.classList.add('selected');

selectedCells.push(cell);

}

function clearSelection() {

selectedCells.forEach(c => c.classList.remove('selected'));

selectedCells = [];

}

function checkWord() {

if (selectedCells.length < 2) {

clearSelection();

return;

}

let wordStr = selectedCells.map(c => c.innerText).join('');

let foundWordIndex = -1;

const foundWord = words.find(w => w === wordStr || w === [...wordStr].reverse().join(''));

if (foundWord) {

foundWordIndex = words.indexOf(foundWord);

}

if (foundWordIndex !== -1) {

const originalWord = words[foundWordIndex];

wordData[foundWordIndex].count++;

const findLi = document.querySelector(`#find-list li[data-word-index="${foundWordIndex}"]`);

if (findLi) {

findLi.remove();

}

let foundLi = document.querySelector(`#found-list li[data-word-index="${foundWordIndex}"]`);

if (!foundLi) {

foundLi = document.createElement('li');

foundLi.dataset.wordIndex = foundWordIndex;

foundLi.innerText = `${originalWord} (${wordData[foundWordIndex].translation})`;

foundLi.style.color = colorValues[foundWordIndex];

document.getElementById('found-list').appendChild(foundLi);

}

selectedCells.forEach(c => {

c.classList.remove('selected');

c.classList.remove('highlighted');

c.classList.add(`found${foundWordIndex}`);

});

} else {

clearSelection();

}

// Mouse/Touch Event Handlers

function handleStart(e) {

e.preventDefault();

const cell = e.target.closest('#wordsearch td');

if (!cell) return;

clearSelection();

startCell = cell;

isDragging = true;

addToSelection(startCell);

if (e.type === 'touchstart') {

touchStartTime = Date.now();

touchStartCell = cell;

}

// console.log('Start event:', e.type); // Uncomment for debugging

}

function handleMove(e) {

if (!isDragging) return;

e.preventDefault();

const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;

const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;

const currentCell = document.elementFromPoint(clientX, clientY);

if (!currentCell || !currentCell.matches('#wordsearch td')) return;

const startRow = parseInt(startCell.dataset.row);

const startCol = parseInt(startCell.dataset.col);

const endRow = parseInt(currentCell.dataset.row);

const endCol = parseInt(currentCell.dataset.col);

const dy = Math.abs(endRow - startRow);

const dx = Math.abs(endCol - startCol);

if ((dy === dx) || (dy === 0) || (dx === 0)) {

clearSelection();

selectedCells = getCellsInLine(startRow, startCol, endRow, endCol);

selectedCells.forEach(cell => cell.classList.add('selected'));

} else {

clearSelection();

}

// console.log('Move event:', e.type); // Uncomment for debugging

}

function handleEnd(e) {

if (!isDragging) return;

isDragging = false;

if (e.type === 'touchend') {

const duration = Date.now() - touchStartTime;

if (duration < 200 && selectedCells.length === 1 && touchStartCell === selectedCells[0]) {

clearSelection();

return;

}

checkWord();

// console.log('End event:', e.type); // Uncomment for debugging

}

function handleClick(e) {

if (e.type === 'touchstart') return; // Ignore touch clicks to avoid conflicts

const cell = e.target.closest('#wordsearch td');

if (!cell) return;

if (startCell && startCell !== cell) {

const startRow = parseInt(startCell.dataset.row);

const startCol = parseInt(startCell.dataset.col);

const endRow = parseInt(cell.dataset.row);

const endCol = parseInt(cell.dataset.col);

const dy = Math.abs(endRow - startRow);

const dx = Math.abs(endCol - startCol);

if ((dy === dx) || (dy === 0) || (dx === 0)) {

clearSelection();

selectedCells = getCellsInLine(startRow, startCol, endRow, endCol);

selectedCells.forEach(c => c.classList.add('selected'));

checkWord();

startCell = null;

return;

}

clearSelection();

startCell = cell;

addToSelection(cell);

// console.log('Click event:', e.type); // Uncomment for debugging

}

table.addEventListener('mousedown', handleStart);

table.addEventListener('mousemove', handleMove);

document.addEventListener('mouseup', handleEnd);

table.addEventListener('touchstart', handleStart);

table.addEventListener('touchmove', handleMove);

document.addEventListener('touchend', handleEnd);

table.addEventListener('click', handleClick);

function showSolution() {

const cheatButton = document.querySelector('.cheat-button');

if (cheatTimeout || cheatButton.disabled) return;

cheatButton.disabled = true;

const originalClasses = new Map();

cells.forEach((row, r) => {

row.forEach((cell, c) => {

originalClasses.set(cell, cell.className || '');

cell.classList.remove('selected', 'highlighted');

for (let i = 0; i < wordData.length; i++) {

cell.classList.remove(`found${i}`);

}

});

wordData.forEach((word, index) => {

console.log(`Highlighting ${word.word} at coords: ${JSON.stringify(word.coords)}`); // Debug log

word.coords.forEach(([r, c]) => {

if (cells[r] && cells[r][c]) {

cells[r][c].classList.add(`found${index}`);

}

});

cheatTimeout = setTimeout(() => {

cells.forEach(row => row.forEach(cell => {

cell.className = originalClasses.get(cell) || '';

}));

cheatButton.disabled = false;

cheatTimeout = null;

console.log('Cheat timeout completed'); // Debug log

}, 2000);

}

function createAlphabetButtons() {

const panel = document.getElementById('alphabet-buttons');

maoriAlphabet.forEach(letter => {

const button = document.createElement('div');

button.classList.add('alphabet-button');

button.innerText = letter;

button.addEventListener('click', () => {

if (highlightedLetters.has(letter)) {

highlightedLetters.delete(letter);

button.classList.remove('active');

} else {

highlightedLetters.add(letter);

button.classList.add('active');

}

updateHighlights();

});

panel.appendChild(button);

});

}

function updateHighlights() {

cells.forEach(row => row.forEach(cell => {

if (!cell.classList.toString().includes('found')) {

cell.classList.remove('highlighted');

}

}));

highlightedLetters.forEach(letter => {

if (letter.length === 2) {

const firstLetter = letter[0];

const secondLetter = letter[1];

cells.forEach((row, rIdx) => {

row.forEach((cell, cIdx) => {

if (cIdx < row.length - 1 && cell.innerText === firstLetter && row[cIdx + 1].innerText === secondLetter) {

if (!cell.classList.toString().includes('found')) {

cell.classList.add('highlighted');

row[cIdx + 1].classList.add('highlighted');

}

});

} else {

cells.forEach(row => {

row.forEach(cell => {

if (cell.innerText === letter && !cell.classList.toString().includes('found')) {

cell.classList.add('highlighted');

}

});

}

});

}

function clearHighlight() {

highlightedLetters.clear();

document.querySelectorAll('.alphabet-button').forEach(button => button.classList.remove('active'));

updateHighlights();

}

createAlphabetButtons();

</script>

</body>

</html>