From 239eb22730060a5ebc9f3247a059f1ef677094a5 Mon Sep 17 00:00:00 2001 From: admtracksteel Date: Wed, 3 Jun 2026 12:27:33 +0000 Subject: [PATCH] feat: adiciona gerenciador dinamico de personagens para a Fabrica de Quadrinhos com nomes e tipos customizados --- public/app.js | 76 +++++++++++++++++++++++++++++++++++++++++------ public/index.html | 17 +++++++---- 2 files changed, 78 insertions(+), 15 deletions(-) diff --git a/public/app.js b/public/app.js index f2fb26f..5336486 100644 --- a/public/app.js +++ b/public/app.js @@ -3515,12 +3515,61 @@ const initApp = () => { }); }); - // Toggle ativo personagens principais - document.querySelectorAll('.btn-comics-char').forEach(btn => { - btn.addEventListener('click', () => { - btn.classList.toggle('active'); + // Gerenciador dinâmico de personagens + const comicsCharListContainer = document.getElementById('comicsCharListContainer'); + const btnAddHumanChar = document.getElementById('btnAddHumanChar'); + const btnAddAnimalChar = document.getElementById('btnAddAnimalChar'); + + const addCharacterRow = (type = '', name = '', isAnimal = false) => { + const row = document.createElement('div'); + row.className = 'comic-char-row'; + row.style.cssText = 'display: flex; gap: 8px; align-items: center; background: var(--bg-primary); padding: 8px; border-radius: 8px; border: 1px solid var(--border-light);'; + + const emoji = document.createElement('span'); + emoji.style.fontSize = '1.1rem'; + emoji.textContent = isAnimal ? '🐾' : '🧒'; + row.appendChild(emoji); + + const typeInput = document.createElement('input'); + typeInput.type = 'text'; + typeInput.className = 'obs-input char-type-input'; + typeInput.placeholder = isAnimal ? 'Tipo (ex: Gatinho, Leão)' : 'Tipo (ex: Menino, Menina)'; + typeInput.value = type; + typeInput.style.cssText = 'flex: 1; padding: 6px 10px; font-size: 0.85rem; margin: 0;'; + row.appendChild(typeInput); + + const nameInput = document.createElement('input'); + nameInput.type = 'text'; + nameInput.className = 'obs-input char-name-input'; + nameInput.placeholder = 'Nome'; + nameInput.value = name; + nameInput.style.cssText = 'flex: 1; padding: 6px 10px; font-size: 0.85rem; margin: 0;'; + row.appendChild(nameInput); + + const deleteBtn = document.createElement('button'); + deleteBtn.type = 'button'; + deleteBtn.className = 'btn-delete-char'; + deleteBtn.innerHTML = '×'; + deleteBtn.style.cssText = 'background: none; border: none; color: #ef4444; font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1;'; + deleteBtn.addEventListener('click', () => { + row.remove(); }); - }); + row.appendChild(deleteBtn); + + comicsCharListContainer.appendChild(row); + }; + + if (btnAddHumanChar) { + btnAddHumanChar.addEventListener('click', () => { + addCharacterRow('', '', false); + }); + } + + if (btnAddAnimalChar) { + btnAddAnimalChar.addEventListener('click', () => { + addCharacterRow('', '', true); + }); + } // Exibir/ocultar cenário personalizado if (comicsCenarioSelect) { @@ -3543,6 +3592,11 @@ const initApp = () => { comicsVideoLoader.style.display = 'none'; btnGenerateComics.disabled = false; comicsLoaderProgress.style.width = '0%'; + + // Inicializar lista de personagens com padrão se estiver vazia + comicsCharListContainer.innerHTML = ''; + addCharacterRow("Menino", "Lucas", false); + addCharacterRow("Menina", "Mariana", false); }; if (barBtnComics) { @@ -3591,14 +3645,18 @@ const initApp = () => { return; } - // Reunir personagens selecionados + // Reunir personagens dinamicamente const personagens = []; - document.querySelectorAll('.btn-comics-char.active').forEach(b => { - personagens.push(b.textContent.trim()); + document.querySelectorAll('.comic-char-row').forEach(row => { + const type = row.querySelector('.char-type-input').value.trim(); + const name = row.querySelector('.char-name-input').value.trim(); + if (type && name) { + personagens.push(`${type} chamado(a) ${name}`); + } }); if (personagens.length === 0) { - alert('Selecione pelo menos um personagem principal.'); + alert('Adicione e preencha pelo menos um personagem principal.'); return; } diff --git a/public/index.html b/public/index.html index b72ab4b..c21cf2a 100644 --- a/public/index.html +++ b/public/index.html @@ -786,12 +786,17 @@
- -
- - - - + + + +
+