Improved word grid app by GPT 4o

ToonTalk · Jun 5, 2024 · b70a68e · b70a68e
1 parent 7fd8045
commit b70a68e
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 0 deletions.
diff --git a/apps/word grid 4o improved/index.html b/apps/word grid 4o improved/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Letter Grid Game</title>
+<style>
+  table {
+    border-collapse: collapse;
+    margin: 20px;
+  }
+  td {
+    width: 30px;
+    height: 30px;
+    border: 1px solid black;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 20px;
+    font-family: Arial, sans-serif;
+    cursor: pointer;
+  }
+  .selected {
+    background-color: yellow;
+  }
+  .found {
+    background-color: lightgreen;
+  }
+</style>
+</head>
+<body>
+  <h1>Letter Grid Game</h1>
+  <p>Score: <span id="score">0</span></p>
+  <p>Find these words:</p>
+  <ul id="word-list"></ul>
+  <button onclick="clearSelections()">Clear Selections</button>
+  <table id="grid"></table>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/apps/word grid 4o improved/script.js b/apps/word grid 4o improved/script.js
@@ -0,0 +1,124 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const grid = document.getElementById('grid');
+  const scoreDisplay = document.getElementById('score');
+  const wordListDisplay = document.getElementById('word-list');
+  const gridSize = 10;
+  const allFoodWords = ["APPLE", "BANANA", "CHERRY", "DATE", "EGGPLANT", "FIG", "GRAPE", "HONEYDEW", "KIWI", "LEMON", "MANGO", "NECTARINE", "ORANGE", "PAPAYA", "QUINCE", "RASPBERRY", "STRAWBERRY", "TOMATO", "UGLI", "VANILLA", "WATERMELON", "XIGUA", "YAM", "ZUCCHINI"];
+  let words = getRandomWords(allFoodWords, 4);
+  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  let matrix = Array.from({length: gridSize}, () => new Array(gridSize).fill(''));
+  let selectedCells = [];
+  let score = 0;
+
+  function getRandomWords(wordList, count) {
+    let selectedWords = [];
+    while (selectedWords.length < count) {
+      const randomIndex = Math.floor(Math.random() * wordList.length);
+      const word = wordList[randomIndex];
+      if (!selectedWords.includes(word)) {
+        selectedWords.push(word);
+      }
+    }
+    return selectedWords;
+  }
+
+  function placeWords() {
+    words.forEach(word => {
+      let placed = false;
+      while (!placed) {
+        let vertical = Math.random() > 0.5;
+        let row = Math.floor(Math.random() * gridSize);
+        let col = Math.floor(Math.random() * gridSize);
+        let spaceAvailable = true;
+
+        for (let i = 0; i < word.length; i++) {
+          let newRow = row + (vertical ? i : 0);
+          let newCol = col + (vertical ? 0 : i);
+          if (newRow >= gridSize || newCol >= gridSize || (matrix[newRow][newCol] !== '' && matrix[newRow][newCol] !== word[i])) {
+            spaceAvailable = false;
+            break;
+          }
+        }
+
+        if (spaceAvailable) {
+          for (let i = 0; i < word.length; i++) {
+            matrix[row + (vertical ? i : 0)][col + (vertical ? 0 : i)] = word[i];
+          }
+          placed = true;
+        }
+      }
+    });
+  }
+
+  function fillEmptySpaces() {
+    for (let row = 0; row < gridSize; row++) {
+      for (let col = 0; col < gridSize; col++) {
+        if (matrix[row][col] === '') {
+          matrix[row][col] = letters.charAt(Math.floor(Math.random() * letters.length));
+        }
+      }
+    }
+  }
+
+  function drawGrid() {
+    for (let row = 0; row < gridSize; row++) {
+      const tr = grid.insertRow();
+      for (let col = 0; col < gridSize; col++) {
+        const td = tr.insertCell();
+        td.textContent = matrix[row][col];
+        td.addEventListener('click', () => handleCellClick(td, row, col));
+      }
+    }
+    updateWordList();
+  }
+
+  function handleCellClick(cell, row, col) {
+    if (cell.classList.contains('selected')) {
+      cell.classList.remove('selected');
+      selectedCells = selectedCells.filter(([r, c]) => r !== row || c !== col);
+    } else {
+      cell.classList.add('selected');
+      selectedCells.push([row, col]);
+    }
+    checkForWord();
+  }
+
+  function checkForWord() {
+    const selectedWord = selectedCells.map(([row, col]) => matrix[row][col]).join('');
+    if (words.includes(selectedWord)) {
+      score++;
+      scoreDisplay.textContent = score;
+      alert(`You found a word: ${selectedWord}`);
+      selectedCells.forEach(([row, col]) => {
+        const cell = grid.rows[row].cells[col];
+        cell.classList.remove('selected');
+        cell.classList.add('found');
+      });
+      words = words.filter(word => word !== selectedWord);
+      updateWordList();
+      selectedCells = [];
+    }
+  }
+
+  function updateWordList() {
+    wordListDisplay.innerHTML = '';
+    words.forEach(word => {
+      const li = document.createElement('li');
+      li.textContent = word;
+      wordListDisplay.appendChild(li);
+    });
+  }
+
+  function clearSelections() {
+    selectedCells.forEach(([row, col]) => {
+      const cell = grid.rows[row].cells[col];
+      cell.classList.remove('selected');
+    });
+    selectedCells = [];
+  }
+
+  words = getRandomWords(allFoodWords, 4);
+  placeWords();
+  fillEmptySpaces();
+  drawGrid();
+});