✨ Updated dialogbuilder to make speaker names bold
This commit is contained in:
parent
9fbcf3d566
commit
6a51629359
@ -182,7 +182,8 @@
|
|||||||
|
|
||||||
const selectedPart = getSelectedDialoguePart();
|
const selectedPart = getSelectedDialoguePart();
|
||||||
dialogue[selectedPart].push({
|
dialogue[selectedPart].push({
|
||||||
speaker: speakerName,
|
// Wrap the speaker name with <b> tags for JSON output
|
||||||
|
speaker: `<b>${speakerName}</b>`,
|
||||||
text: lineText
|
text: lineText
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -240,18 +241,19 @@
|
|||||||
p.dataset.part = partKey; // Store the part key
|
p.dataset.part = partKey; // Store the part key
|
||||||
p.dataset.index = index; // Store the index within the part array
|
p.dataset.index = index; // Store the index within the part array
|
||||||
|
|
||||||
// Apply different styles based on the speaker
|
// Apply different styles based on the speaker (checking against un-bolded names for comparison)
|
||||||
if (line.speaker === party1NameInput.value) {
|
if (line.speaker.replace(/<\/?b>/g, '') === party1NameInput.value) { // Remove <b> tags for comparison
|
||||||
p.classList.add('bg-blue-100', 'self-start', 'mr-auto');
|
p.classList.add('bg-blue-100', 'self-start', 'mr-auto');
|
||||||
} else if (line.speaker === party2NameInput.value) {
|
} else if (line.speaker.replace(/<\/?b>/g, '') === party2NameInput.value) { // Remove <b> tags for comparison
|
||||||
p.classList.add('bg-green-100', 'self-end', 'ml-auto');
|
p.classList.add('bg-green-100', 'self-end', 'ml-auto');
|
||||||
lineWrapper.classList.add('justify-end'); // Align wrapper to end for party 2
|
lineWrapper.classList.add('justify-end'); // Align wrapper to end for party 2
|
||||||
} else {
|
} else {
|
||||||
// Fallback for speaker names that might not match inputs
|
// Fallback for speaker names that might not match inputs or have other formatting
|
||||||
p.classList.add('bg-gray-100');
|
p.classList.add('bg-gray-100');
|
||||||
}
|
}
|
||||||
|
|
||||||
p.innerHTML = `<span class="font-bold text-gray-700">${line.speaker}:</span> <span class="line-text">${line.text}</span>`;
|
// Set innerHTML directly, allowing the <b> tag from the 'speaker' property to render
|
||||||
|
p.innerHTML = `${line.speaker}: <span class="line-text">${line.text}</span>`;
|
||||||
|
|
||||||
// Add blur event listener for editing
|
// Add blur event listener for editing
|
||||||
p.addEventListener('blur', (event) => {
|
p.addEventListener('blur', (event) => {
|
||||||
@ -388,6 +390,7 @@
|
|||||||
|
|
||||||
// Event Listeners
|
// Event Listeners
|
||||||
addParty1Btn.addEventListener('click', () => addDialogueLine(party1NameInput.value));
|
addParty1Btn.addEventListener('click', () => addDialogueLine(party1NameInput.value));
|
||||||
|
// Corrected: changed party22NameInput to party2NameInput
|
||||||
addParty2Btn.addEventListener('click', () => addDialogueLine(party2NameInput.value));
|
addParty2Btn.addEventListener('click', () => addDialogueLine(party2NameInput.value));
|
||||||
generateJsonBtn.addEventListener('click', generateJson);
|
generateJsonBtn.addEventListener('click', generateJson);
|
||||||
copyJsonBtn.addEventListener('click', copyJsonToClipboard);
|
copyJsonBtn.addEventListener('click', copyJsonToClipboard);
|
||||||
|
Loading…
Reference in New Issue
Block a user