sdfsdsfs3/wordwizardry-crosswords
0
1document.addEventListener('DOMContentLoaded', function() {2 // Sample crossword data with animal theme3 const crosswordData = {4 title: "Animal Adventure",5 author: "WordWizardry",6 date: new Date().toLocaleDateString(),7 grid: [8 [1, 2, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],9 [0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],10 [6, 7, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],11 [0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],12 [8, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],13 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],14 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],15 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],16 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],17 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],18 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],19 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],20 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],21 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],22 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]23 ],24 clues: {25 across: [26 {number: 1, clue: "King of the jungle", answer: "LION", row: 0, col: 0},27 {number: 6, clue: "Largest land animal", answer: "ELEPHANT", row: 2, col: 0},28 {number: 8, clue: "Fastest land animal", answer: "CHEETAH", row: 4, col: 0}29 ],30 down: [31 {number: 1, clue: "Likes bananas", answer: "MONKEY", row: 0, col: 0},32 {number: 2, clue: "Black and white bear", answer: "PANDA", row: 0, col: 1},33 {number: 3, clue: "Tallest animal", answer: "GIRAFFE", row: 0, col: 2},34 {number: 4, clue: "Striped horse", answer: "ZEBRA", row: 0, col: 3},35 {number: 5, clue: "Likes to swim", answer: "DOLPHIN", row: 0, col: 3},36 {number: 7, clue: "Has a long trunk", answer: "ELEPHANT", row: 2, col: 1}37 ]38 }39};40 41 // Initialize crossword if on game page42 if (document.getElementById('crossword-container')) {43 initializeCrossword(crosswordData);44 }45 46 // Button event listeners47 document.getElementById('check-button')?.addEventListener('click', checkAnswers);48 document.getElementById('reveal-button')?.addEventListener('click', revealPuzzle);49 document.getElementById('reset-button')?.addEventListener('click', resetPuzzle);50});51 52function initializeCrossword(data) {53 const container = document.getElementById('crossword-container');54 const acrossClues = document.getElementById('across-clues');55 const downClues = document.getElementById('down-clues');56 57 // Create crossword grid58 const grid = document.createElement('div');59 grid.className = 'crossword-grid';60 61 // Create cells62 for (let row = 0; row < 15; row++) {63 for (let col = 0; col < 15; col++) {64 const cellValue = data.grid[row][col];65 const cell = document.createElement('div');66 cell.className = 'crossword-cell';67 68 if (cellValue === 0) {69 cell.classList.add('black');70 } else if (cellValue > 0) {71 cell.dataset.number = cellValue;72 cell.classList.add('numbered');73 cell.dataset.row = row;74 cell.dataset.col = col;75 cell.contentEditable = 'true';76 77 cell.addEventListener('focus', () => {78 document.querySelectorAll('.crossword-cell').forEach(c => c.classList.remove('active'));79 cell.classList.add('active');80 });81 82 cell.addEventListener('input', (e) => {83 const text = e.target.textContent.toUpperCase();84 if (text.length > 1) {85 e.target.textContent = text[text.length - 1];86 }87 });88 89 cell.addEventListener('keydown', (e) => {90 handleCellNavigation(e, row, col);91 });92 }93 94 grid.appendChild(cell);95 }96 }97 98 container.appendChild(grid);99 100 // Add clues101 data.clues.across.forEach(clue => {102 const li = document.createElement('li');103 li.innerHTML = `<strong>${clue.number}.</strong> ${clue.clue}`;104 li.dataset.number = clue.number;105 li.dataset.direction = 'across';106 li.dataset.answer = clue.answer;107 li.dataset.row = clue.row;108 li.dataset.col = clue.col;109 acrossClues.appendChild(li);110 });111 112 data.clues.down.forEach(clue => {113 const li = document.createElement('li');114 li.innerHTML = `<strong>${clue.number}.</strong> ${clue.clue}`;115 li.dataset.number = clue.number;116 li.dataset.direction = 'down';117 li.dataset.answer = clue.answer;118 li.dataset.row = clue.row;119 li.dataset.col = clue.col;120 downClues.appendChild(li);121 });122}123 124function handleCellNavigation(e, row, col) {125 const key = e.key;126 const gridSize = 15;127 let nextRow = row;128 let nextCol = col;129 130 switch(key) {131 case 'ArrowUp':132 nextRow = Math.max(0, row - 1);133 break;134 case 'ArrowDown':135 nextRow = Math.min(gridSize - 1, row + 1);136 break;137 case 'ArrowLeft':138 nextCol = Math.max(0, col - 1);139 break;140 case 'ArrowRight':141 nextCol = Math.min(gridSize - 1, col + 1);142 break;143 default:144 return;145 }146 147 const nextCell = document.querySelector(`.crossword-cell[data-row="${nextRow}"][data-col="${nextCol}"]`);148 if (nextCell && !nextCell.classList.contains('black') && nextCell.contentEditable === 'true') {149 nextCell.focus();150 }151 152 e.preventDefault();153}154 155function checkAnswers() {156 document.querySelectorAll('.crossword-cell').forEach(cell => {157 if (!cell.classList.contains('black') && cell.contentEditable === 'true') {158 const row = parseInt(cell.dataset.row);159 const col = parseInt(cell.dataset.col);160 const userInput = cell.textContent.toUpperCase();161 162 // Find if this cell is part of any correct answer163 let isCorrect = false;164 165 document.querySelectorAll('#across-clues li, #down-clues li').forEach(clue => {166 const answer = clue.dataset.answer;167 const direction = clue.dataset.direction;168 const startRow = parseInt(clue.dataset.row);169 const startCol = parseInt(clue.dataset.col);170 171 if (direction === 'across' && row === startRow) {172 const index = col - startCol;173 if (index >= 0 && index < answer.length) {174 if (answer[index] === userInput) {175 isCorrect = true;176 }177 }178 } else if (direction === 'down' && col === startCol) {179 const index = row - startRow;180 if (index >= 0 && index < answer.length) {181 if (answer[index] === userInput) {182 isCorrect = true;183 }184 }185 }186 });187 188 if (isCorrect) {189 cell.classList.add('correct');190 }191 }192 });193}194 195function revealPuzzle() {196 document.querySelectorAll('#across-clues li, #down-clues li').forEach(clue => {197 const answer = clue.dataset.answer;198 const direction = clue.dataset.direction;199 const startRow = parseInt(clue.dataset.row);200 const startCol = parseInt(clue.dataset.col);201 202 for (let i = 0; i < answer.length; i++) {203 let row = direction === 'across' ? startRow : startRow + i;204 let col = direction === 'across' ? startCol + i : startCol;205 206 const cell = document.querySelector(`.crossword-cell[data-row="${row}"][data-col="${col}"]`);207 if (cell) {208 cell.textContent = answer[i];209 cell.classList.add('correct');210 }211 }212 });213}214 215function resetPuzzle() {216 document.querySelectorAll('.crossword-cell').forEach(cell => {217 if (!cell.classList.contains('black') && cell.contentEditable === 'true') {218 cell.textContent = '';219 cell.classList.remove('correct', 'active');220 }221 });222}