{ "projectName": "alphabetPuzzle", "files": { "/alphabetPuzzle/js/GameBoard.js": { "imports": [], "exports": [ { "type": "ExportNamedDeclaration", "name": "GameBoard", "kind": "ClassDeclaration", "start": 0, "end": 10068, "declarationStart": 7 } ] }, "/alphabetPuzzle/js/GameSolver.js": { "imports": [ { "sourceDir": "alphabetPuzzle/js", "source": "/alphabetPuzzle/js/GameBoard.js", "start": 0, "end": 43, "kind": "named", "symbol": "GameBoard", "imported": "GameBoard", "local": "GameBoard" } ], "exports": [ { "type": "ExportNamedDeclaration", "name": "GameSolver", "kind": "ClassDeclaration", "start": 45, "end": 5566, "declarationStart": 52 } ] }, "/alphabetPuzzle/js/LabsPanel.js": { "imports": [ { "sourceDir": "alphabetPuzzle/js//sharedLib", "source": "/sharedLib/DialogBox.js", "start": 0, "end": 52, "kind": "named", "symbol": "DialogBox", "imported": "DialogBox", "local": "DialogBox" }, { "sourceDir": "alphabetPuzzle/js//sharedLib", "source": "/sharedLib/applyCss.js", "start": 53, "end": 103, "kind": "named", "symbol": "applyCss", "imported": "applyCss", "local": "applyCss" }, { "sourceDir": "alphabetPuzzle/js//sharedLib", "source": "/sharedLib/makeElement.js", "start": 104, "end": 160, "kind": "named", "symbol": "makeElement", "imported": "makeElement", "local": "makeElement" } ], "exports": [ { "type": "ExportNamedDeclaration", "name": "LabsPanel", "kind": "ClassDeclaration", "start": 162, "end": 12159, "declarationStart": 169 } ] }, "/alphabetPuzzle/js/LetterGridGame.js": { "imports": [ { "sourceDir": "alphabetPuzzle/js", "source": "/alphabetPuzzle/js/GameBoard.js", "start": 0, "end": 43, "kind": "named", "symbol": "GameBoard", "imported": "GameBoard", "local": "GameBoard" }, { "sourceDir": "alphabetPuzzle/js", "source": "/alphabetPuzzle/js/GameSolver.js", "start": 44, "end": 89, "kind": "named", "symbol": "GameSolver", "imported": "GameSolver", "local": "GameSolver" }, { "sourceDir": "alphabetPuzzle/js", "source": "/alphabetPuzzle/js/LabsPanel.js", "start": 90, "end": 133, "kind": "named", "symbol": "LabsPanel", "imported": "LabsPanel", "local": "LabsPanel" }, { "sourceDir": "alphabetPuzzle/js//sharedLib", "source": "/sharedLib/DialogBox.js", "start": 134, "end": 186, "kind": "named", "symbol": "DialogBox", "imported": "DialogBox", "local": "DialogBox" }, { "sourceDir": "alphabetPuzzle/js//sharedLib", "source": "/sharedLib/applyCss.js", "start": 187, "end": 237, "kind": "named", "symbol": "applyCss", "imported": "applyCss", "local": "applyCss" }, { "sourceDir": "alphabetPuzzle/js//sharedLib", "source": "/sharedLib/makeElement.js", "start": 238, "end": 294, "kind": "named", "symbol": "makeElement", "imported": "makeElement", "local": "makeElement" } ], "exports": [ { "type": "ExportNamedDeclaration", "name": "LetterGridGame", "kind": "ClassDeclaration", "start": 296, "end": 74624, "declarationStart": 303 } ] } }, "fileMetadata": { "/alphabetPuzzle/js/GameBoard.js": { "codeSize": 340, "docSize": 0 }, "/alphabetPuzzle/js/GameSolver.js": { "codeSize": 185, "docSize": 0 }, "/alphabetPuzzle/js/LetterGridGame.js": { "codeSize": 2403, "docSize": 0 }, "/sharedLib/applyCss.js": { "codeSize": 25, "docSize": 0 }, "/sharedLib/DialogBox.js": { "codeSize": 602, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/mostcode-1755630061460.json": { "codeSize": 202, "docSize": 0 }, "/alphabetPuzzle/index.html": { "codeSize": 18, "docSize": 0 }, "/alphabetPuzzle/lc.html": { "codeSize": 268, "docSize": 0 }, "/alphabetPuzzle/clone-metadata.json": { "codeSize": 5, "docSize": 0 }, "/sharedLib/makeElement.js": { "codeSize": 73, "docSize": 0 }, "/alphabetPuzzle/css/letterGridGame.css": { "codeSize": 10, "docSize": 0 }, "/alphabetPuzzle/file_metadata.json": { "codeSize": 50, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/manifest.json": { "codeSize": 4, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/noimages-1755395147870.json": { "codeSize": 137, "docSize": 0 }, "/sharedLib/documentation/applyCss_js.md": { "codeSize": 20, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/noimages-1755492563461.json": { "codeSize": 207, "docSize": 0 }, "/sharedLib/documentation/makeElement_js.md": { "codeSize": 42, "docSize": 0 }, "/alphabetPuzzle/js/LabsPanel.js": { "codeSize": 357, "docSize": 0 } }, "initiatorScript": "import { LetterGridGame } from './js/LetterGridGame.js';\n // Global for console access\n window.letterGridGameInstance = new LetterGridGame();\n letterGridGameInstance.init(document.body);" } { "css/letterGridGame.css": { "code": true, "signatures": false, "docsLevel": 0 }, "images/A.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/B.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/C.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/D.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/E.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/F.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/G.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/H.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/I.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/J.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/K.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/L.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/M.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/N.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/O.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/P.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Q.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/R.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/S.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/T.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/U.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/V.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/W.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/X.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Y.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Z.png": { "code": false, "signatures": false, "docsLevel": 0 }, "js/lib/applyCss.js": { "code": true, "signatures": true, "docsLevel": 0 }, "js/lib/DialogBox.js": { "code": false, "signatures": true, "docsLevel": 0 }, "js/lib/makeElement.js": { "code": true, "signatures": true, "docsLevel": 0 }, "js/GameBoard.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/GameSolver.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/LetterGridGame.js": { "code": true, "signatures": false, "docsLevel": 0 }, "visibilitySets/manifest.json": { "code": false, "signatures": false, "docsLevel": 0 }, "visibilitySets/noimages-1755395147870.json": { "code": false, "signatures": false, "docsLevel": 0 }, "visibilitySets/noimages-1755492563461.json": { "code": false, "signatures": false, "docsLevel": 0 }, "clone-metadata.json": { "code": false, "signatures": false, "docsLevel": 0 }, "file_metadata.json": { "code": false, "signatures": false, "docsLevel": 0 }, "index.html": { "code": false, "signatures": false, "docsLevel": 0 }, "lc.html": { "code": false, "signatures": false, "docsLevel": 0 } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Interactive Alphabet Grid</title> <link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="stylesheet"> <style> body { margin: 0; font-family: 'Kalam', cursive; background: white; display: flex; flex-direction: column; align-items: center; } table.alphabet { border-collapse: collapse; table-layout: fixed; border: 2px solid black; } table.alphabet td { border: 1px solid black; width: 140px; height: 140px; text-align: center; vertical-align: middle; position: relative; } .img-box { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .img-box img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .label { display: block; margin-top: 4px; } .placeholder { width: 70%; height: 60%; background: #cfd8dc; border: 2px dashed #90a4ae; display: flex; align-items: center; justify-content: center; font-size: 0.9em; color: #607d8b; text-align: center; padding: 4px; } .controls { margin-top: 20px; padding: 16px; border: 2px solid #999; border-radius: 10px; background: #f0f0f0; font-size: 1rem; max-width: 600px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); } .controls label { display: block; margin-bottom: 10px; } .controls input[type="range"] { width: 100%; } #hideBtn { margin-top: 10px; padding: 6px 12px; border: none; background: #555; color: white; border-radius: 5px; cursor: pointer; } #hideBtn:hover { background: #000; } /* Give breathing-room above the grid */ body { margin: 40px 0 0; } /* Grid lines: same thickness everywhere */ table.alphabet { border: none; /* rely on cell borders only */ border-collapse: collapse; margin-top: 40px; /* extra top space */ } table.alphabet td { border: 2px solid #000; /* outer + inner lines match */ width: 140px; height: 140px; text-align: center; vertical-align: top; /* text will always start at same spot */ position: relative; } /* Square image zone that’s identical in every cell */ .img-box { width: 80%; /* updated by slider */ aspect-ratio: 1 / 1; /* always square */ margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Image fills that square, keeps aspect ratio */ .img-box img { width: 100%; height: 100%; object-fit: contain; } /* Placeholder is also a perfect square */ .placeholder { width: 100%; height: 100%; background: #cfd8dc; border: 2px dashed #90a4ae; display: flex; align-items: center; justify-content: center; font-size: 0.9em; color: #607d8b; } /* Caption always in same vertical position */ .label { margin-top: 6px; font-size: inherit; /* gets scaled by slider */ } </style> </head> <body> <table class="alphabet" id="alphabetTable"></table> <div class="controls" id="controls"> <label> Image Size: <input type="range" id="imageSizeSlider" min="30" max="130" value="80"> </label> <label> Font Size: <input type="range" id="fontSizeSlider" min="12" max="36" value="18"> </label> <button id="hideBtn">Hide Controls</button> </div> <script> const items = { A: "Apple", B: "Bus", C: "Cat", D: "Dog", E: "Egg", F: "Fish", G: "Grape", H: "Hat", I: "Ice Cream", J: "Juice", K: "Kite", L: "Lion", M: "Moon", N: "Nest", O: "Orange", P: "Penguin", Q: "Queen", R: "Robot", S: "Sun", T: "Turtle", U: "Umbrella", V: "Violin", W: "Whale", X: "Xylophone", Y: "Yak", Z: "Zebra" }; const table = document.getElementById('alphabetTable'); const imageSizeSlider = document.getElementById('imageSizeSlider'); const fontSizeSlider = document.getElementById('fontSizeSlider'); function createCell(letter, label) { const td = document.createElement('td'); const wrapper = document.createElement('div'); wrapper.className = 'img-box'; const img = document.createElement('img'); img.src = `./images/${letter}.png`; img.alt = label; img.onerror = () => { wrapper.innerHTML = ''; const ph = document.createElement('div'); ph.className = 'placeholder'; ph.textContent = label; wrapper.appendChild(ph); }; wrapper.appendChild(img); const caption = document.createElement('span'); caption.className = 'label'; caption.textContent = label; td.appendChild(wrapper); td.appendChild(caption); return td; } function generateGrid() { let row; const letters = Object.keys(items); letters.forEach((letter, i) => { if (i % 6 === 0) { row = document.createElement('tr'); table.appendChild(row); } row.appendChild(createCell(letter, items[letter])); }); // Fill remaining empty cells to make a 6x5 grid const remainder = 30 - letters.length; for (let i = 0; i < remainder; i++) { const empty = document.createElement('td'); row.appendChild(empty); if ((letters.length + i + 1) % 6 === 0 && i < remainder - 1) { row = document.createElement('tr'); table.appendChild(row); } } } function applySizes() { const boxSize = imageSizeSlider.value + '%'; // 30–130% of cell width const fontSize = fontSizeSlider.value + 'px'; // 12–36 px // Resize the square image zone, not the <img> itself document.querySelectorAll('.img-box').forEach(box => { box.style.width = boxSize; // height stays square via aspect-ratio }); // Resize labels document.querySelectorAll('.label').forEach(label => { label.style.fontSize = fontSize; }); } document.getElementById('hideBtn').onclick = () => { const box = document.getElementById('controls'); box.style.display = 'none'; }; imageSizeSlider.addEventListener('input', applySizes); fontSizeSlider.addEventListener('input', applySizes); generateGrid(); applySizes(); </script> </body> </html> { "version": 1, "clonedFrom": "alphabetPuzzle", "createdAt": "2025-09-29T19:22:54.516Z" } { "/alphabetPuzzle/index.html": { "codeSize": 18, "docSize": 0 }, "/alphabetPuzzle/lc.html": { "codeSize": 268, "docSize": 0 }, "/alphabetPuzzle/css/letterGridGame.css": { "codeSize": 10, "docSize": 0 }, "/alphabetPuzzle/js/GameBoard.js": { "codeSize": 331, "docSize": 0 }, "/alphabetPuzzle/js/GameSolver.js": { "codeSize": 185, "docSize": 0 }, "/alphabetPuzzle/js/LetterGridGame.js": { "codeSize": 2091, "docSize": 0 }, "/alphabetPuzzle/clone-metadata.json": { "codeSize": 5, "docSize": 0 }, "/alphabetPuzzle/file_metadata.json": { "codeSize": 50, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/manifest.json": { "codeSize": 4, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/mostcode-1755630061460.json": { "codeSize": 202, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/noimages-1755395147870.json": { "codeSize": 137, "docSize": 0 }, "/alphabetPuzzle/visibilitySets/noimages-1755492563461.json": { "codeSize": 207, "docSize": 0 } } { "noImages": "noimages-1755492563461.json", "mostcode": "mostcode-1755630061460.json" } { "css/letterGridGame.css": { "code": true, "signatures": false, "docsLevel": 0 }, "images/A.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/B.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/D.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/E.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/F.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/I.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/J.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/K.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/L.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/M.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/N.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/O.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/P.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Q.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/R.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/T.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/U.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/W.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/X.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Y.png": { "code": false, "signatures": false, "docsLevel": 0 }, "js/lib/applyCss.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/lib/DialogBox.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/lib/makeElement.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/LetterGridGame.js": { "code": true, "signatures": false, "docsLevel": 0 }, "index.html": { "code": true, "signatures": false, "docsLevel": 0 }, "lc.html": { "code": true, "signatures": false, "docsLevel": 0 } } { "css/letterGridGame.css": { "code": true, "signatures": false, "docsLevel": 0 }, "images/A.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/B.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/C.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/ChatGPT Image Aug 17, 2025, 12_38_17 PM.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/ChatGPT Image Aug 17, 2025, 12_41_21 PM.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/D.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/E.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/F.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/G.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/grid.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/H.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/I.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/J.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/K.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/L.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/M.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/N.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/O.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/P.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Q.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/R.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/S.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/T.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/U.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/V.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/W.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/X.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Y.png": { "code": false, "signatures": false, "docsLevel": 0 }, "images/Z.png": { "code": false, "signatures": false, "docsLevel": 0 }, "js/lib/applyCss.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/lib/DialogBox.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/lib/makeElement.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/GameBoard.js": { "code": true, "signatures": false, "docsLevel": 0 }, "js/LetterGridGame.js": { "code": true, "signatures": false, "docsLevel": 0 }, "visibilitySets/manifest.json": { "code": true, "signatures": false, "docsLevel": 0 }, "visibilitySets/noimages-1755395147870.json": { "code": true, "signatures": false, "docsLevel": 0 }, "clone-metadata.json": { "code": true, "signatures": false, "docsLevel": 0 }, "file_metadata.json": { "code": true, "signatures": false, "docsLevel": 0 }, "index.html": { "code": true, "signatures": false, "docsLevel": 0 }, "lc.html": { "code": true, "signatures": false, "docsLevel": 0 } }