diff --git a/index.html b/index.html index 03f6918..6788313 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,8 @@ body { font-family: Arial, sans-serif; background-color: #f3f4f6; - padding: 20px; + padding: 28px; + font-size: 18px; } .container { @@ -87,11 +88,6 @@ width: 100%; } - .btn-primary:hover { - background-color: #1d4ed8; - } - - .btn-success { background-color: #16a34a; color: white; } @@ -145,8 +141,8 @@ } .cell { - width: 40px; - height: 40px; + width: 56px; + height: 56px; border: 1px solid #6b7280; position: relative; cursor: pointer; @@ -177,7 +173,7 @@ display: flex; align-items: center; justify-content: center; - font-size: 20px; + font-size: 22px; font-weight: bold; } @@ -202,8 +198,8 @@ height: 50%; position: relative; padding: 2px; - font-size: 8px; - line-height: 10px; + font-size: 7px; + line-height: 8px; overflow: hidden; word-wrap: break-word; display:flex; @@ -220,7 +216,7 @@ .definition-text { font-variant: small-caps; text-transform:uppercase; - font-size:10px; + font-size:9px; display:flex; align-items:center; justify-content:center; @@ -369,9 +365,10 @@
-
- - +
+ + +
@@ -596,6 +593,28 @@ sectionH.appendChild(btn); }); } + + // Custom input for horizontal definition + const customH = document.createElement('div'); + customH.style.display = 'flex'; + customH.style.gap = '8px'; + customH.style.marginTop = '8px'; + const inputH = document.createElement('input'); + inputH.type = 'text'; + inputH.value = grid[row][col].definitionH || ''; + inputH.style.flex = '1'; + const saveH = document.createElement('button'); + saveH.className = 'btn-primary'; + saveH.textContent = 'Enregistrer (H)'; + saveH.onclick = () => { + grid[row][col].definitionH = inputH.value.trim(); + closeModal(); + renderGrid(); + }; + inputH.addEventListener('keydown', (ev) => { if (ev.key === 'Enter') { ev.preventDefault(); saveH.click(); } }); + customH.appendChild(inputH); + customH.appendChild(saveH); + sectionH.appendChild(customH); } const sectionV = document.createElement('div'); @@ -632,6 +651,28 @@ sectionV.appendChild(btn); }); } + + // Custom input for vertical definition + const customV = document.createElement('div'); + customV.style.display = 'flex'; + customV.style.gap = '8px'; + customV.style.marginTop = '8px'; + const inputV = document.createElement('input'); + inputV.type = 'text'; + inputV.value = grid[row][col].definitionV || ''; + inputV.style.flex = '1'; + const saveV = document.createElement('button'); + saveV.className = 'btn-primary'; + saveV.textContent = 'Enregistrer (V)'; + saveV.onclick = () => { + grid[row][col].definitionV = inputV.value.trim(); + closeModal(); + renderGrid(); + }; + inputV.addEventListener('keydown', (ev) => { if (ev.key === 'Enter') { ev.preventDefault(); saveV.click(); } }); + customV.appendChild(inputV); + customV.appendChild(saveV); + sectionV.appendChild(customV); } // Delete button: transforms case into letter empty @@ -755,6 +796,24 @@ renderGrid(); } + function transformActiveToDefinition() { + if (!activeCell) { + alert('Aucune cellule active sélectionnée.'); + return; + } + const { row, col } = activeCell; + const cell = grid[row][col]; + if (cell.type === 'definition') return; + if (cell.letter || cell.definitionH || cell.definitionV) { + if (!confirm('La transformation effacera la lettre actuelle et/ou définitions existantes. Confirmer ?')) return; + } + cell.type = 'definition'; + cell.letter = ''; + cell.definitionH = ''; + cell.definitionV = ''; + renderGrid(); + } + // Ajoute une colonne function addColumn() { grid.forEach((row, rowIndex) => { @@ -912,16 +971,7 @@ gridEl.appendChild(rowEl); }); - // Ligne d'ajout - const addRowLine = document.createElement('div'); - addRowLine.className = 'add-row-controls'; - for (let i = 0; i < grid[0].length; i++) { - const addBtn = document.createElement('div'); - addBtn.className = 'add-col-control'; - addBtn.innerHTML = ''; - addRowLine.appendChild(addBtn); - } - gridEl.appendChild(addRowLine); + // No per-cell + buttons (global controls only) // After grid built, place arrows in the first-letter cells based on adjacent definition cells if (window._cellEls) { @@ -959,13 +1009,13 @@ if (horizontalIsVertical) { // arrow downwards from top border arrow.innerHTML = ''; - arrow.style.top = '0px'; + arrow.style.top = '-10px'; arrow.style.left = '50%'; arrow.style.transform = 'translateX(-50%)'; } else { // arrow pointing leftwards from left border into cell (originates from definition at left) arrow.innerHTML = ''; - arrow.style.left = '0px'; + arrow.style.left = '-10px'; arrow.style.top = '50%'; arrow.style.transform = 'translateY(-50%)'; } @@ -992,13 +1042,13 @@ if (verticalIsHorizontal) { // arrow rightwards from left border arrow.innerHTML = ''; - arrow.style.left = '0px'; + arrow.style.left = '-10px'; arrow.style.top = '50%'; arrow.style.transform = 'translateY(-50%)'; } else { // arrow pointing upwards from top border? we want from definition to word, so arrow downwards from top border arrow.innerHTML = ''; - arrow.style.top = '0px'; + arrow.style.top = '-10px'; arrow.style.left = '50%'; arrow.style.transform = 'translateX(-50%)'; } @@ -1028,6 +1078,26 @@ if (!activeCell) return; const { row, col } = activeCell; + // Enter: transform empty letter into definition (or open modal if definition exists) + if (e.key === 'Enter') { + e.preventDefault(); + if (grid[row][col].type === 'letter' && !grid[row][col].letter) { + transformActiveToDefinition(); + return; + } + if (grid[row][col].type === 'definition') { + // open modal for this definition + const wordInfoH = (row === 0) ? getWordAt(row, col + 1, 'vertical') : getWordAt(row, col + 1, 'horizontal'); + const wordInfoV = (col === 0) ? getWordAt(row + 1, col, 'horizontal') : getWordAt(row + 1, col, 'vertical'); + const wordH = (wordInfoH && wordInfoH.word) ? wordInfoH.word : null; + const wordV = (wordInfoV && wordInfoV.word) ? wordInfoV.word : null; + const defsH = wordH ? ([...new Set(dictionaries[normalizeWord(wordH)] || [])]) : []; + const defsV = wordV ? ([...new Set(dictionaries[normalizeWord(wordV)] || [])]) : []; + showDefinitionModal(row, col, wordH, defsH, wordV, defsV); + return; + } + } + if (e.key === 'Backspace') { e.preventDefault(); if (grid[row][col].letter) {