1165 lines
48 KiB
JavaScript
1165 lines
48 KiB
JavaScript
// ── Storage ───────────────────────────────────────────────────────────────────
|
||
|
||
const PLANNER_KEY = 'ff14-planner-plans';
|
||
const FOLDERS_KEY = 'ff14-planner-folders';
|
||
|
||
function loadPlans() {
|
||
try { return JSON.parse(localStorage.getItem(PLANNER_KEY) || '[]'); }
|
||
catch { return []; }
|
||
}
|
||
function savePlans(plans) { localStorage.setItem(PLANNER_KEY, JSON.stringify(plans)); }
|
||
|
||
function loadFolders() {
|
||
try { return JSON.parse(localStorage.getItem(FOLDERS_KEY) || '[]'); }
|
||
catch { return []; }
|
||
}
|
||
function saveFolders(f) { localStorage.setItem(FOLDERS_KEY, JSON.stringify(f)); }
|
||
|
||
function createFolder(name) {
|
||
const folder = { id: crypto.randomUUID(), name: name.trim() || 'Neuer Ordner', createdAt: Date.now(), updatedAt: Date.now() };
|
||
const all = loadFolders(); all.push(folder); saveFolders(all); return folder;
|
||
}
|
||
function updateFolder(id, changes) {
|
||
const all = loadFolders(), idx = all.findIndex(f => f.id === id);
|
||
if (idx === -1) return;
|
||
all[idx] = { ...all[idx], ...changes, updatedAt: Date.now() };
|
||
saveFolders(all);
|
||
}
|
||
function deleteFolder(id) {
|
||
saveFolders(loadFolders().filter(f => f.id !== id));
|
||
savePlans(loadPlans().map(p => p.folderId === id ? { ...p, folderId: null, updatedAt: Date.now() } : p));
|
||
}
|
||
|
||
// ── CRUD ──────────────────────────────────────────────────────────────────────
|
||
|
||
function createPlan(name) {
|
||
const plan = {
|
||
id: crypto.randomUUID(),
|
||
name: name.trim() || 'Unbenannter Plan',
|
||
createdAt: Date.now(),
|
||
updatedAt: Date.now(),
|
||
source: null,
|
||
folderId: null,
|
||
jobComposition: Array(8).fill(''),
|
||
mechanics: []
|
||
};
|
||
const all = loadPlans();
|
||
all.push(plan);
|
||
savePlans(all);
|
||
return plan;
|
||
}
|
||
|
||
function getPlan(id) {
|
||
return loadPlans().find(p => p.id === id) ?? null;
|
||
}
|
||
|
||
function updatePlan(id, changes) {
|
||
const all = loadPlans();
|
||
const idx = all.findIndex(p => p.id === id);
|
||
if (idx === -1) return null;
|
||
all[idx] = { ...all[idx], ...changes, updatedAt: Date.now() };
|
||
savePlans(all);
|
||
return all[idx];
|
||
}
|
||
|
||
function deletePlan(id) {
|
||
savePlans(loadPlans().filter(p => p.id !== id));
|
||
}
|
||
|
||
function uniquePlanName(baseName) {
|
||
const names = new Set(loadPlans().map(p => p.name));
|
||
if (!names.has(baseName)) return baseName;
|
||
let i = 2;
|
||
while (names.has(`${baseName} ${i}`)) i++;
|
||
return `${baseName} ${i}`;
|
||
}
|
||
|
||
function copyPlan(id) {
|
||
const all = loadPlans();
|
||
const orig = all.find(p => p.id === id);
|
||
if (!orig) return null;
|
||
const copy = {
|
||
...JSON.parse(JSON.stringify(orig)),
|
||
id: crypto.randomUUID(),
|
||
name: uniquePlanName(orig.name + ' (Kopie)'),
|
||
createdAt: Date.now(),
|
||
updatedAt: Date.now()
|
||
};
|
||
all.push(copy);
|
||
savePlans(all);
|
||
return copy;
|
||
}
|
||
|
||
// ── State ─────────────────────────────────────────────────────────────────────
|
||
|
||
let activePlanId = null;
|
||
let collapsedFolders = new Set();
|
||
|
||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||
|
||
function escHtml(str) {
|
||
return String(str ?? '')
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"');
|
||
}
|
||
|
||
function fmtDate(ts) {
|
||
return new Date(ts).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||
}
|
||
|
||
function fmtTimestamp(ms) {
|
||
const s = Math.floor(ms / 1000);
|
||
return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
|
||
}
|
||
|
||
function fmtNumber(n) {
|
||
return Number(n).toLocaleString('de-DE');
|
||
}
|
||
|
||
// ── Rendering: Plan List ──────────────────────────────────────────────────────
|
||
|
||
function planItemHtml(p) {
|
||
return `
|
||
<div class="plan-item${p.id === activePlanId ? ' active' : ''}" data-id="${escHtml(p.id)}">
|
||
<div class="plan-item-info">
|
||
<div class="plan-item-name">${escHtml(p.name)}</div>
|
||
<div class="plan-item-meta">${p.mechanics.length} Mechaniken · ${fmtDate(p.updatedAt)}</div>
|
||
</div>
|
||
<div class="plan-item-actions">
|
||
<button class="plan-btn plan-btn-move" data-id="${escHtml(p.id)}" title="In Ordner verschieben">📁</button>
|
||
<button class="plan-btn plan-btn-copy" data-id="${escHtml(p.id)}" title="Kopieren">⎘</button>
|
||
<button class="plan-btn plan-btn-danger plan-btn-delete" data-id="${escHtml(p.id)}" title="Löschen">✕</button>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function renderPlanList() {
|
||
const el = document.getElementById('plan-list');
|
||
if (!el) return;
|
||
|
||
const plans = loadPlans();
|
||
const folders = loadFolders();
|
||
|
||
if (plans.length === 0 && folders.length === 0) {
|
||
el.innerHTML = '<div class="plan-list-empty">Noch keine Pläne vorhanden</div>';
|
||
return;
|
||
}
|
||
|
||
const byFolder = new Map();
|
||
const ungrouped = [];
|
||
for (const p of plans) {
|
||
const fid = p.folderId ?? null;
|
||
if (fid && folders.some(f => f.id === fid)) {
|
||
if (!byFolder.has(fid)) byFolder.set(fid, []);
|
||
byFolder.get(fid).push(p);
|
||
} else {
|
||
ungrouped.push(p);
|
||
}
|
||
}
|
||
|
||
let html = folders.map(folder => {
|
||
const folderPlans = byFolder.get(folder.id) ?? [];
|
||
const collapsed = collapsedFolders.has(folder.id);
|
||
return `
|
||
<div class="folder-section" data-folder-id="${escHtml(folder.id)}">
|
||
<div class="folder-row" data-folder-id="${escHtml(folder.id)}">
|
||
<span class="folder-chevron${collapsed ? '' : ' open'}">▶</span>
|
||
<span class="folder-name-text">${escHtml(folder.name)}</span>
|
||
<span class="folder-count">${folderPlans.length}</span>
|
||
<div class="folder-actions">
|
||
<button class="plan-btn folder-rename-btn" data-id="${escHtml(folder.id)}" title="Umbenennen">✎</button>
|
||
<button class="plan-btn plan-btn-danger folder-delete-btn" data-id="${escHtml(folder.id)}" title="Ordner löschen">✕</button>
|
||
</div>
|
||
</div>
|
||
<div class="folder-plans${collapsed ? ' collapsed' : ''}">
|
||
${folderPlans.map(p => planItemHtml(p)).join('') || '<div class="folder-empty">Leer</div>'}
|
||
</div>
|
||
</div>`;
|
||
}).join('') + ungrouped.map(p => planItemHtml(p)).join('');
|
||
|
||
el.innerHTML = html || '<div class="plan-list-empty">Noch keine Pläne vorhanden</div>';
|
||
|
||
// Plan item: open
|
||
el.querySelectorAll('.plan-item').forEach(row => {
|
||
row.addEventListener('click', e => {
|
||
if (e.target.closest('.plan-item-actions')) return;
|
||
openPlan(row.dataset.id);
|
||
});
|
||
});
|
||
|
||
// Plan item: move to folder
|
||
el.querySelectorAll('.plan-btn-move').forEach(btn => {
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
showFolderPicker(btn.dataset.id, btn);
|
||
});
|
||
});
|
||
|
||
// Plan item: copy
|
||
el.querySelectorAll('.plan-btn-copy').forEach(btn => {
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
const copy = copyPlan(btn.dataset.id);
|
||
if (copy) { renderPlanList(); openPlan(copy.id); }
|
||
});
|
||
});
|
||
|
||
// Plan item: delete
|
||
el.querySelectorAll('.plan-btn-delete').forEach(btn => {
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
const plan = getPlan(btn.dataset.id);
|
||
if (!plan) return;
|
||
if (!confirm(`Plan "${plan.name}" löschen?`)) return;
|
||
deletePlan(btn.dataset.id);
|
||
if (activePlanId === btn.dataset.id) { activePlanId = null; renderPlanDetail(null); }
|
||
renderPlanList();
|
||
});
|
||
});
|
||
|
||
// Folder row: toggle collapse
|
||
el.querySelectorAll('.folder-row').forEach(row => {
|
||
row.addEventListener('click', e => {
|
||
if (e.target.closest('.folder-actions')) return;
|
||
const fid = row.dataset.folderId;
|
||
if (collapsedFolders.has(fid)) collapsedFolders.delete(fid);
|
||
else collapsedFolders.add(fid);
|
||
renderPlanList();
|
||
});
|
||
});
|
||
|
||
// Folder: rename
|
||
el.querySelectorAll('.folder-rename-btn').forEach(btn => {
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
const fid = btn.dataset.id;
|
||
const folder = loadFolders().find(f => f.id === fid);
|
||
if (!folder) return;
|
||
const span = el.querySelector(`.folder-row[data-folder-id="${fid}"] .folder-name-text`);
|
||
if (!span) return;
|
||
const input = document.createElement('input');
|
||
input.className = 'folder-name-input';
|
||
input.value = folder.name;
|
||
span.replaceWith(input);
|
||
input.focus(); input.select();
|
||
let saved = false;
|
||
const save = () => {
|
||
if (saved) return; saved = true;
|
||
const name = input.value.trim();
|
||
if (name) updateFolder(fid, { name });
|
||
renderPlanList();
|
||
};
|
||
input.addEventListener('blur', save);
|
||
input.addEventListener('keydown', ev => {
|
||
if (ev.key === 'Enter') { ev.preventDefault(); save(); }
|
||
if (ev.key === 'Escape') { saved = true; renderPlanList(); }
|
||
});
|
||
});
|
||
});
|
||
|
||
// Folder: delete
|
||
el.querySelectorAll('.folder-delete-btn').forEach(btn => {
|
||
btn.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
const folder = loadFolders().find(f => f.id === btn.dataset.id);
|
||
if (!folder) return;
|
||
const count = (byFolder.get(btn.dataset.id) ?? []).length;
|
||
const msg = count > 0
|
||
? `Ordner "${folder.name}" löschen? Die ${count} enthaltenen Pläne werden nicht gelöscht.`
|
||
: `Ordner "${folder.name}" löschen?`;
|
||
if (!confirm(msg)) return;
|
||
deleteFolder(btn.dataset.id);
|
||
renderPlanList();
|
||
});
|
||
});
|
||
}
|
||
|
||
// ── Rendering: Plan Detail ────────────────────────────────────────────────────
|
||
|
||
function renderPlanDetail(plan) {
|
||
const noplan = document.getElementById('planner-no-plan');
|
||
const content = document.getElementById('plan-content');
|
||
if (!noplan || !content) return;
|
||
|
||
if (!plan) {
|
||
noplan.style.display = '';
|
||
content.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
noplan.style.display = 'none';
|
||
content.style.display = '';
|
||
|
||
content.innerHTML = `
|
||
<div class="card section-gap">
|
||
<div class="plan-detail-header">
|
||
<div class="plan-name-wrap">
|
||
<span id="plan-name-display" class="plan-name-text">${escHtml(plan.name)}</span>
|
||
<button id="plan-name-edit-btn" class="plan-btn" title="Umbenennen">✎</button>
|
||
</div>
|
||
<div class="plan-detail-meta">Erstellt ${fmtDate(plan.createdAt)} · ${plan.mechanics.length} Mechaniken</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card section-gap">
|
||
<div class="card-title">Jobaufstellung</div>
|
||
<div class="job-slots-grid" id="job-slots-grid">
|
||
${renderJobSlotsHtml(plan)}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title-row">
|
||
<div class="card-title">Mechaniken</div>
|
||
</div>
|
||
<div id="mechanic-list">
|
||
${renderMechanicListHtml(plan)}
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('plan-name-edit-btn')?.addEventListener('click', () => {
|
||
startRename(plan.id, plan.name);
|
||
});
|
||
initJobSlots(plan.id);
|
||
initMechanicClicks(plan.id);
|
||
}
|
||
|
||
function renderMechanicListHtml(plan) {
|
||
if (plan.mechanics.length === 0) {
|
||
return `
|
||
<div class="empty" style="padding:30px 0">
|
||
<div class="empty-icon" style="font-size:26px">📋</div>
|
||
<h3>Noch keine Mechaniken</h3>
|
||
<p style="font-size:13px;color:var(--t3);margin-top:6px">
|
||
Importiere einen Log aus dem Analyse-Tab
|
||
</p>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
const activeJobSet = new Set(plan.jobComposition.filter(j => j));
|
||
|
||
return plan.mechanics.map(m => {
|
||
const sorted = sortedAssignments(m.assignments);
|
||
const assignHtml = sorted.length === 0
|
||
? '<span class="mechanic-no-assign">Keine Zuweisung</span>'
|
||
: sorted.map(a => {
|
||
const cls = a.buffType === 'debuff' ? 'badge-assign-debuff'
|
||
: a.buffType === 'shield' ? 'badge-assign-shield'
|
||
: 'badge-assign-buff';
|
||
const isMissing = !!a.job && !activeJobSet.has(a.job);
|
||
const icon = MITIG_ICONS[a.ability] ?? '';
|
||
const label = a.job ? `${escHtml(a.job)} · ${escHtml(a.ability)}` : escHtml(a.ability);
|
||
const title = isMissing ? `${escHtml(a.job)} nicht in Jobaufstellung` : '';
|
||
return `<span class="badge badge-assign ${cls}${isMissing ? ' badge-assign--missing-job' : ''}"${title ? ` title="${title}"` : ''}>
|
||
${icon ? `<img class="badge-icon" src="${escHtml(icon)}" alt="">` : ''}
|
||
${label}
|
||
<button class="badge-remove" data-mechanic-id="${escHtml(m.id)}" data-ability="${escHtml(a.ability)}" title="Entfernen">×</button>
|
||
</span>`;
|
||
}).join('');
|
||
|
||
return `
|
||
<div class="mechanic-card" data-mechanic-id="${escHtml(m.id)}">
|
||
<div class="mechanic-time">${escHtml(fmtTimestamp(m.timestamp))}</div>
|
||
<div class="mechanic-body">
|
||
${m.phase ? `<div class="mechanic-phase">${escHtml(m.phase)}</div>` : ''}
|
||
<div class="mechanic-name">${escHtml(m.name)}</div>
|
||
${m.unmitigatedDamage
|
||
? `<div class="mechanic-dmg">${fmtNumber(m.unmitigatedDamage)} unmitigiert</div>`
|
||
: ''
|
||
}
|
||
<div class="mechanic-assignments">${assignHtml}</div>
|
||
${m.notes ? `<div class="mechanic-notes">${escHtml(m.notes)}</div>` : ''}
|
||
<div class="mechanic-edit-hint">Klicken zum Bearbeiten</div>
|
||
</div>
|
||
<button class="mechanic-delete-btn plan-btn plan-btn-danger" data-mechanic-id="${escHtml(m.id)}" title="Mechanik löschen">✕</button>
|
||
</div>`;
|
||
}).join('');
|
||
}
|
||
|
||
// ── Job Slots ─────────────────────────────────────────────────────────────────
|
||
|
||
function renderJobSlotsHtml(plan) {
|
||
return Array.from({ length: 8 }, (_, i) => {
|
||
const job = plan.jobComposition[i] ?? '';
|
||
const role = JOB_ROLE[job] ?? '';
|
||
return `
|
||
<div class="job-slot${role ? ` job-slot--${role}` : ''}">
|
||
<select class="job-slot-select" data-idx="${i}">
|
||
<option value="">—</option>
|
||
${ALL_JOBS.map(g =>
|
||
`<optgroup label="${escHtml(g.group)}">${g.jobs.map(j =>
|
||
`<option value="${j}"${j === job ? ' selected' : ''}>${j}</option>`
|
||
).join('')}</optgroup>`
|
||
).join('')}
|
||
</select>
|
||
</div>`;
|
||
}).join('');
|
||
}
|
||
|
||
function initJobSlots(planId) {
|
||
const grid = document.getElementById('job-slots-grid');
|
||
if (!grid) return;
|
||
grid.addEventListener('change', e => {
|
||
const sel = e.target.closest('.job-slot-select');
|
||
if (!sel) return;
|
||
const plan = getPlan(planId);
|
||
if (!plan) return;
|
||
const comp = [...plan.jobComposition];
|
||
comp[parseInt(sel.dataset.idx, 10)] = sel.value;
|
||
updatePlan(planId, { jobComposition: comp });
|
||
const slot = sel.closest('.job-slot');
|
||
if (slot) {
|
||
const role = JOB_ROLE[sel.value] ?? '';
|
||
slot.className = 'job-slot' + (role ? ` job-slot--${role}` : '');
|
||
}
|
||
refreshMechanicList(planId);
|
||
});
|
||
}
|
||
|
||
// ── Mechanic list helpers ─────────────────────────────────────────────────────
|
||
|
||
function refreshMechanicList(planId) {
|
||
const plan = getPlan(planId);
|
||
if (!plan) return;
|
||
const el = document.getElementById('mechanic-list');
|
||
if (el) el.innerHTML = renderMechanicListHtml(plan);
|
||
}
|
||
|
||
function removeAssignment(planId, mechanicId, abilityName) {
|
||
const plan = getPlan(planId);
|
||
if (!plan) return;
|
||
const mechanic = plan.mechanics.find(m => m.id === mechanicId);
|
||
if (!mechanic) return;
|
||
mechanic.assignments = mechanic.assignments.filter(a => a.ability !== abilityName);
|
||
updatePlan(planId, { mechanics: plan.mechanics });
|
||
refreshMechanicList(planId);
|
||
if (abilityModalMechanicId === mechanicId) renderAbilityModalContent();
|
||
}
|
||
|
||
function deleteMechanic(planId, mechanicId) {
|
||
const plan = getPlan(planId);
|
||
if (!plan) return;
|
||
plan.mechanics = plan.mechanics.filter(m => m.id !== mechanicId);
|
||
updatePlan(planId, { mechanics: plan.mechanics });
|
||
refreshMechanicList(planId);
|
||
renderPlanList();
|
||
}
|
||
|
||
function initMechanicClicks(planId) {
|
||
const list = document.getElementById('mechanic-list');
|
||
if (!list) return;
|
||
list.addEventListener('click', e => {
|
||
const removeBtn = e.target.closest('.badge-remove');
|
||
if (removeBtn) {
|
||
e.stopPropagation();
|
||
removeAssignment(planId, removeBtn.dataset.mechanicId, removeBtn.dataset.ability);
|
||
return;
|
||
}
|
||
const deleteBtn = e.target.closest('.mechanic-delete-btn');
|
||
if (deleteBtn) {
|
||
e.stopPropagation();
|
||
deleteMechanic(planId, deleteBtn.dataset.mechanicId);
|
||
return;
|
||
}
|
||
const card = e.target.closest('.mechanic-card');
|
||
if (!card) return;
|
||
showAbilityModal(planId, card.dataset.mechanicId);
|
||
});
|
||
list.addEventListener('contextmenu', e => {
|
||
const badge = e.target.closest('.badge-assign');
|
||
if (!badge) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const removeBtn = badge.querySelector('.badge-remove');
|
||
if (removeBtn) removeAssignment(planId, removeBtn.dataset.mechanicId, removeBtn.dataset.ability);
|
||
});
|
||
}
|
||
|
||
// ── Rename ────────────────────────────────────────────────────────────────────
|
||
|
||
function startRename(id, currentName) {
|
||
const display = document.getElementById('plan-name-display');
|
||
const editBtn = document.getElementById('plan-name-edit-btn');
|
||
if (!display) return;
|
||
|
||
display.innerHTML = `<input id="plan-name-input" class="plan-name-input" type="text" value="${escHtml(currentName)}">`;
|
||
const input = document.getElementById('plan-name-input');
|
||
input.focus();
|
||
input.select();
|
||
if (editBtn) editBtn.style.display = 'none';
|
||
|
||
let saved = false;
|
||
const save = () => {
|
||
if (saved) return;
|
||
saved = true;
|
||
const newName = input.value.trim() || currentName;
|
||
updatePlan(id, { name: newName });
|
||
renderPlanList();
|
||
openPlan(id);
|
||
};
|
||
|
||
input.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter') save();
|
||
if (e.key === 'Escape') {
|
||
saved = true;
|
||
display.innerHTML = `<span class="plan-name-text">${escHtml(currentName)}</span>`;
|
||
if (editBtn) editBtn.style.display = '';
|
||
}
|
||
});
|
||
input.addEventListener('blur', save);
|
||
}
|
||
|
||
// ── Open plan ─────────────────────────────────────────────────────────────────
|
||
|
||
function openPlan(id) {
|
||
activePlanId = id;
|
||
renderPlanList();
|
||
renderPlanDetail(getPlan(id));
|
||
}
|
||
|
||
// ── New plan form ─────────────────────────────────────────────────────────────
|
||
|
||
function initNewPlanForm() {
|
||
const btn = document.getElementById('planner-new-btn');
|
||
const form = document.getElementById('planner-new-form');
|
||
const input = document.getElementById('planner-new-name');
|
||
const save = document.getElementById('planner-new-save');
|
||
const cancel = document.getElementById('planner-new-cancel');
|
||
if (!btn) return;
|
||
|
||
btn.addEventListener('click', () => {
|
||
form.style.display = '';
|
||
input.value = '';
|
||
input.focus();
|
||
});
|
||
|
||
cancel.addEventListener('click', () => { form.style.display = 'none'; });
|
||
|
||
const clearErr = () => {
|
||
input.style.borderColor = '';
|
||
document.getElementById('planner-new-name-err')?.remove();
|
||
};
|
||
|
||
const doCreate = () => {
|
||
const name = input.value.trim();
|
||
if (!name) { input.focus(); return; }
|
||
if (loadPlans().some(p => p.name === name)) {
|
||
input.style.borderColor = 'var(--red)';
|
||
let err = document.getElementById('planner-new-name-err');
|
||
if (!err) {
|
||
err = document.createElement('div');
|
||
err.id = 'planner-new-name-err';
|
||
err.style.cssText = 'font-size:11px;color:var(--red);margin-top:3px';
|
||
input.insertAdjacentElement('afterend', err);
|
||
}
|
||
err.textContent = 'Name bereits vergeben';
|
||
input.focus();
|
||
return;
|
||
}
|
||
clearErr();
|
||
const plan = createPlan(name);
|
||
form.style.display = 'none';
|
||
renderPlanList();
|
||
openPlan(plan.id);
|
||
};
|
||
|
||
input.addEventListener('input', clearErr);
|
||
save.addEventListener('click', doCreate);
|
||
input.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter') doCreate();
|
||
if (e.key === 'Escape') { clearErr(); form.style.display = 'none'; }
|
||
});
|
||
}
|
||
|
||
// ── Folder Picker ─────────────────────────────────────────────────────────────
|
||
|
||
let folderPickerCleanup = null;
|
||
|
||
function closeFolderPicker() {
|
||
document.getElementById('folder-picker')?.remove();
|
||
if (folderPickerCleanup) { folderPickerCleanup(); folderPickerCleanup = null; }
|
||
}
|
||
|
||
function showFolderPicker(planId, anchorEl) {
|
||
closeFolderPicker();
|
||
const plan = getPlan(planId);
|
||
const folders = loadFolders();
|
||
if (!plan) return;
|
||
if (folders.length === 0) return;
|
||
|
||
const rect = anchorEl.getBoundingClientRect();
|
||
const picker = document.createElement('div');
|
||
picker.id = 'folder-picker';
|
||
picker.className = 'folder-picker';
|
||
picker.style.cssText = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;z-index:9999`;
|
||
|
||
picker.innerHTML = [{ id: null, name: 'Kein Ordner' }, ...folders].map(f => `
|
||
<div class="folder-picker-option${(plan.folderId ?? null) === f.id ? ' active' : ''}" data-fid="${escHtml(f.id ?? '')}">
|
||
${f.id === null ? '— ' : '📁 '}${escHtml(f.name)}
|
||
</div>`).join('');
|
||
|
||
document.body.appendChild(picker);
|
||
|
||
picker.querySelectorAll('.folder-picker-option').forEach(opt => {
|
||
opt.addEventListener('click', e => {
|
||
e.stopPropagation();
|
||
updatePlan(planId, { folderId: opt.dataset.fid || null });
|
||
closeFolderPicker();
|
||
renderPlanList();
|
||
});
|
||
});
|
||
|
||
const onOutside = e => { if (!picker.contains(e.target)) closeFolderPicker(); };
|
||
setTimeout(() => document.addEventListener('click', onOutside), 0);
|
||
folderPickerCleanup = () => document.removeEventListener('click', onOutside);
|
||
}
|
||
|
||
// ── New Folder Form ───────────────────────────────────────────────────────────
|
||
|
||
function initNewFolderForm() {
|
||
const btn = document.getElementById('planner-new-folder-btn');
|
||
const form = document.getElementById('planner-new-folder-form');
|
||
const input = document.getElementById('planner-new-folder-name');
|
||
const save = document.getElementById('planner-new-folder-save');
|
||
const cancel = document.getElementById('planner-new-folder-cancel');
|
||
if (!btn) return;
|
||
|
||
btn.addEventListener('click', () => { form.style.display = ''; input.value = ''; input.focus(); });
|
||
cancel.addEventListener('click', () => { form.style.display = 'none'; });
|
||
|
||
const doCreate = () => {
|
||
const name = input.value.trim();
|
||
if (!name) { input.focus(); return; }
|
||
createFolder(name);
|
||
form.style.display = 'none';
|
||
renderPlanList();
|
||
};
|
||
save.addEventListener('click', doCreate);
|
||
input.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter') doCreate();
|
||
if (e.key === 'Escape') form.style.display = 'none';
|
||
});
|
||
}
|
||
|
||
// ── Ability → Job mapping ─────────────────────────────────────────────────────
|
||
|
||
const ABILITY_JOB_MAP = {
|
||
'Passage of Arms': 'PLD', 'Divine Veil': 'PLD', 'Guardian': 'PLD',
|
||
'Shake It Off': 'WAR', 'Bloodwhetting': 'WAR',
|
||
'Dark Missionary': 'DRK',
|
||
'Heart of Light': 'GNB',
|
||
'Temperance': 'WHM', 'Divine Benison': 'WHM', 'Divine Caress': 'WHM',
|
||
'Sacred Soil': 'SCH', 'Expedient': 'SCH', 'Fey Illumination': 'SCH',
|
||
'Galvanize': 'SCH', 'Seraphic Veil': 'SCH', 'Catalyze': 'SCH',
|
||
'Collective Unconscious': 'AST', 'Neutral Sect': 'AST',
|
||
'Intersection': 'AST', 'the Spire': 'AST',
|
||
'Kerachole': 'SGE', 'Holos': 'SGE', 'Holosakos': 'SGE',
|
||
'Panhaima': 'SGE', 'Haima': 'SGE',
|
||
'Eukrasian Prognosis': 'SGE', 'Eukrasian Prognosis II': 'SGE',
|
||
'Eukrasian Diagnosis': 'SGE', 'Differential Diagnosis': 'SGE',
|
||
'Troubadour': 'BRD',
|
||
'Tactician': 'MCH',
|
||
'Shield Samba': 'DNC', 'Improvised Finish': 'DNC',
|
||
'Radiant Aegis': 'SMN',
|
||
'Magick Barrier': 'RDM',
|
||
'Tempera Coat': 'PCT', 'Tempera Grassa': 'PCT',
|
||
};
|
||
|
||
const JOB_FROM_TYPE = {
|
||
'Paladin': 'PLD', 'Warrior': 'WAR', 'DarkKnight': 'DRK', 'Gunbreaker': 'GNB',
|
||
'WhiteMage': 'WHM', 'Scholar': 'SCH', 'Astrologian': 'AST', 'Sage': 'SGE',
|
||
'Monk': 'MNK', 'Dragoon': 'DRG', 'Ninja': 'NIN', 'Samurai': 'SAM',
|
||
'Reaper': 'RPR', 'Viper': 'VPR', 'Bard': 'BRD', 'Machinist': 'MCH',
|
||
'Dancer': 'DNC', 'BlackMage': 'BLM', 'Summoner': 'SMN', 'RedMage': 'RDM',
|
||
'Pictomancer': 'PCT',
|
||
};
|
||
|
||
const TANK_JOBS = new Set(['PLD', 'WAR', 'DRK', 'GNB']);
|
||
const MELEE_JOBS = new Set(['MNK', 'DRG', 'NIN', 'SAM', 'RPR', 'VPR']);
|
||
const CASTER_JOBS = new Set(['BLM', 'SMN', 'RDM', 'PCT']);
|
||
|
||
const JOB_ROLE = {
|
||
'PLD': 'tank', 'WAR': 'tank', 'DRK': 'tank', 'GNB': 'tank',
|
||
'WHM': 'healer', 'SCH': 'healer', 'AST': 'healer', 'SGE': 'healer',
|
||
'MNK': 'dps', 'DRG': 'dps', 'NIN': 'dps', 'SAM': 'dps',
|
||
'RPR': 'dps', 'VPR': 'dps', 'BRD': 'dps', 'MCH': 'dps',
|
||
'DNC': 'dps', 'BLM': 'dps', 'SMN': 'dps', 'RDM': 'dps', 'PCT': 'dps',
|
||
};
|
||
|
||
const ALL_JOBS = [
|
||
{ group: 'Tank', jobs: ['PLD', 'WAR', 'DRK', 'GNB'] },
|
||
{ group: 'Healer', jobs: ['WHM', 'SCH', 'AST', 'SGE'] },
|
||
{ group: 'Melee', jobs: ['MNK', 'DRG', 'NIN', 'SAM', 'RPR', 'VPR'] },
|
||
{ group: 'Ranged', jobs: ['BRD', 'MCH', 'DNC'] },
|
||
{ group: 'Caster', jobs: ['BLM', 'SMN', 'RDM', 'PCT'] },
|
||
];
|
||
|
||
const JOB_ABILITIES = {
|
||
'PLD': [
|
||
{ name: 'Passage of Arms', buffType: 'buff' },
|
||
{ name: 'Divine Veil', buffType: 'shield' },
|
||
{ name: 'Guardian', buffType: 'shield' },
|
||
{ name: 'Reprisal', buffType: 'debuff' },
|
||
],
|
||
'WAR': [
|
||
{ name: 'Shake It Off', buffType: 'shield' },
|
||
{ name: 'Bloodwhetting', buffType: 'shield' },
|
||
{ name: 'Reprisal', buffType: 'debuff' },
|
||
],
|
||
'DRK': [
|
||
{ name: 'Dark Missionary', buffType: 'buff' },
|
||
{ name: 'Reprisal', buffType: 'debuff' },
|
||
],
|
||
'GNB': [
|
||
{ name: 'Heart of Light', buffType: 'buff' },
|
||
{ name: 'Reprisal', buffType: 'debuff' },
|
||
],
|
||
'WHM': [
|
||
{ name: 'Temperance', buffType: 'buff' },
|
||
{ name: 'Divine Benison', buffType: 'shield' },
|
||
{ name: 'Divine Caress', buffType: 'shield' },
|
||
],
|
||
'SCH': [
|
||
{ name: 'Sacred Soil', buffType: 'buff' },
|
||
{ name: 'Expedient', buffType: 'buff' },
|
||
{ name: 'Fey Illumination', buffType: 'buff' },
|
||
{ name: 'Galvanize', buffType: 'shield' },
|
||
{ name: 'Seraphic Veil', buffType: 'shield' },
|
||
{ name: 'Catalyze', buffType: 'shield' },
|
||
{ name: 'Addle', buffType: 'debuff' },
|
||
],
|
||
'AST': [
|
||
{ name: 'Collective Unconscious', buffType: 'buff' },
|
||
{ name: 'Neutral Sect', buffType: 'shield' },
|
||
{ name: 'Intersection', buffType: 'shield' },
|
||
{ name: 'the Spire', buffType: 'shield' },
|
||
],
|
||
'SGE': [
|
||
{ name: 'Kerachole', buffType: 'buff' },
|
||
{ name: 'Holos', buffType: 'buff' },
|
||
{ name: 'Holosakos', buffType: 'shield' },
|
||
{ name: 'Panhaima', buffType: 'shield' },
|
||
{ name: 'Eukrasian Prognosis', buffType: 'shield' },
|
||
{ name: 'Eukrasian Prognosis II', buffType: 'shield' },
|
||
{ name: 'Eukrasian Diagnosis', buffType: 'shield' },
|
||
{ name: 'Differential Diagnosis', buffType: 'shield' },
|
||
{ name: 'Haima', buffType: 'shield' },
|
||
{ name: 'Addle', buffType: 'debuff' },
|
||
],
|
||
'BRD': [{ name: 'Troubadour', buffType: 'buff' }],
|
||
'MCH': [{ name: 'Tactician', buffType: 'buff' }],
|
||
'DNC': [
|
||
{ name: 'Shield Samba', buffType: 'buff' },
|
||
{ name: 'Improvised Finish', buffType: 'shield' },
|
||
],
|
||
'MNK': [{ name: 'Feint', buffType: 'debuff' }],
|
||
'DRG': [{ name: 'Feint', buffType: 'debuff' }],
|
||
'NIN': [{ name: 'Feint', buffType: 'debuff' }],
|
||
'SAM': [{ name: 'Feint', buffType: 'debuff' }],
|
||
'RPR': [{ name: 'Feint', buffType: 'debuff' }],
|
||
'VPR': [{ name: 'Feint', buffType: 'debuff' }],
|
||
'BLM': [{ name: 'Addle', buffType: 'debuff' }],
|
||
'SMN': [
|
||
{ name: 'Addle', buffType: 'debuff' },
|
||
{ name: 'Radiant Aegis', buffType: 'shield' },
|
||
],
|
||
'RDM': [
|
||
{ name: 'Addle', buffType: 'debuff' },
|
||
{ name: 'Magick Barrier', buffType: 'buff' },
|
||
],
|
||
'PCT': [
|
||
{ name: 'Addle', buffType: 'debuff' },
|
||
{ name: 'Tempera Coat', buffType: 'shield' },
|
||
{ name: 'Tempera Grassa', buffType: 'shield' },
|
||
],
|
||
};
|
||
|
||
const MITIG_ICONS = {
|
||
'Passage of Arms': 'assets/icons/mitigation/passage-of-arms.png',
|
||
'Dark Missionary': 'assets/icons/mitigation/dark-missionary.png',
|
||
'Heart of Light': 'assets/icons/mitigation/heart-of-light.png',
|
||
'Temperance': 'assets/icons/mitigation/temperance.png',
|
||
'Sacred Soil': 'assets/icons/mitigation/sacred-soil.png',
|
||
'Expedient': 'assets/icons/mitigation/expedient.png',
|
||
'Fey Illumination': 'assets/icons/mitigation/fey-illumination.png',
|
||
'Collective Unconscious': 'assets/icons/mitigation/collective-unconscious.png',
|
||
'Holos': 'assets/icons/mitigation/holos.png',
|
||
'Kerachole': 'assets/icons/mitigation/kerachole.png',
|
||
'Troubadour': 'assets/icons/mitigation/troubadour.png',
|
||
'Tactician': 'assets/icons/mitigation/tactician.png',
|
||
'Shield Samba': 'assets/icons/mitigation/shield-samba.png',
|
||
'Magick Barrier': 'assets/icons/mitigation/magick-barrier.png',
|
||
'Reprisal': 'assets/icons/mitigation/reprisal.png',
|
||
'Feint': 'assets/icons/mitigation/feint.png',
|
||
'Addle': 'assets/icons/mitigation/addle.png',
|
||
'Divine Veil': 'assets/icons/mitigation/divine-veil.png',
|
||
'Guardian': 'assets/icons/mitigation/guardian.png',
|
||
'Shake It Off': 'assets/icons/mitigation/shake-it-off.png',
|
||
'Bloodwhetting': 'assets/icons/mitigation/bloodwhetting.png',
|
||
'Divine Benison': 'assets/icons/mitigation/divine-benison.png',
|
||
'Divine Caress': 'assets/icons/mitigation/divine-caress.png',
|
||
'Intersection': 'assets/icons/mitigation/intersection.png',
|
||
'Neutral Sect': 'assets/icons/mitigation/neutral-sect.png',
|
||
'the Spire': 'assets/icons/mitigation/the-spire.png',
|
||
'Panhaima': 'assets/icons/mitigation/panhaima.png',
|
||
'Holosakos': 'assets/icons/mitigation/holos.png',
|
||
'Eukrasian Prognosis': 'assets/icons/mitigation/eukrasian-prognosis.png',
|
||
'Eukrasian Prognosis II': 'assets/icons/mitigation/eukrasian-prognosis-ii.png',
|
||
'Eukrasian Diagnosis': 'assets/icons/mitigation/eukrasian-diagnosis.png',
|
||
'Differential Diagnosis': 'assets/icons/mitigation/eukrasian-diagnosis.png',
|
||
'Haima': 'assets/icons/mitigation/haima.png',
|
||
'Galvanize': 'assets/icons/mitigation/galvanize.png',
|
||
'Seraphic Veil': 'assets/icons/mitigation/seraphic-veil.png',
|
||
'Radiant Aegis': 'assets/icons/mitigation/radiant-aegis.png',
|
||
'Tempera Coat': 'assets/icons/mitigation/tempera-coat.png',
|
||
'Tempera Grassa': 'assets/icons/mitigation/tempera-grassa.png',
|
||
'Improvised Finish': 'assets/icons/mitigation/improvised-finish.png',
|
||
};
|
||
|
||
const ASSIGN_ORDER = { debuff: 0, buff: 1, shield: 2 };
|
||
|
||
function sortedAssignments(assignments) {
|
||
return [...assignments].sort((a, b) =>
|
||
(ASSIGN_ORDER[a.buffType] ?? 1) - (ASSIGN_ORDER[b.buffType] ?? 1)
|
||
);
|
||
}
|
||
|
||
function guessJob(abilityName, players) {
|
||
if (ABILITY_JOB_MAP[abilityName]) return ABILITY_JOB_MAP[abilityName];
|
||
const jobs = (players ?? []).map(p => JOB_FROM_TYPE[p.type] ?? '');
|
||
if (abilityName === 'Reprisal') {
|
||
const tanks = jobs.filter(j => TANK_JOBS.has(j));
|
||
return tanks.length === 1 ? tanks[0] : '';
|
||
}
|
||
if (abilityName === 'Feint') {
|
||
const melees = jobs.filter(j => MELEE_JOBS.has(j));
|
||
return melees.length === 1 ? melees[0] : '';
|
||
}
|
||
if (abilityName === 'Addle') {
|
||
const casters = jobs.filter(j => CASTER_JOBS.has(j));
|
||
return casters.length === 1 ? casters[0] : '';
|
||
}
|
||
return '';
|
||
}
|
||
|
||
// ── AoE Events → Plan Mechanics ───────────────────────────────────────────────
|
||
|
||
function aoeEventsToMechanics(aoeEvents, fightStart, phases, players, withMitigations) {
|
||
return aoeEvents.map(ev => {
|
||
const relTs = ev.timestamp - fightStart;
|
||
const phase = (phases ?? []).filter(p => p.id !== 0).find(p =>
|
||
ev.timestamp >= p.startTime && ev.timestamp < p.endTime
|
||
);
|
||
|
||
const nonTankTargets = ev.targets.filter(t => t.role !== 'tank' && (t.unmitigatedAmount ?? 0) > 0);
|
||
const fallbackTargets = ev.targets.filter(t => (t.unmitigatedAmount ?? 0) > 0);
|
||
const relevantTargets = nonTankTargets.length > 0 ? nonTankTargets : fallbackTargets;
|
||
const avgUnmit = relevantTargets.length > 0
|
||
? Math.round(relevantTargets.reduce((s, t) => s + t.unmitigatedAmount, 0) / relevantTargets.length)
|
||
: 0;
|
||
|
||
let assignments = [];
|
||
if (withMitigations) {
|
||
const seen = new Set();
|
||
for (const t of ev.targets) {
|
||
for (const m of (t.mitigations ?? [])) {
|
||
const key = m.key ?? m.name;
|
||
if (!seen.has(key)) {
|
||
seen.add(key);
|
||
assignments.push({ ability: key, job: guessJob(key, players), buffType: m.buffType ?? '' });
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
id: crypto.randomUUID(),
|
||
name: ev.abilityName,
|
||
timestamp: relTs,
|
||
phase: phase?.name ?? '',
|
||
unmitigatedDamage: avgUnmit,
|
||
notes: '',
|
||
assignments,
|
||
};
|
||
});
|
||
}
|
||
|
||
// ── Merge + Create plan from import ──────────────────────────────────────────
|
||
|
||
function extractJobComp(players) {
|
||
const order = { tank: 0, healer: 1, dps: 2 };
|
||
const sorted = [...(players ?? [])]
|
||
.filter(p => JOB_FROM_TYPE[p.type])
|
||
.sort((a, b) => {
|
||
const roleCmp = (order[a.role] ?? 2) - (order[b.role] ?? 2);
|
||
return roleCmp !== 0 ? roleCmp : a.name.localeCompare(b.name);
|
||
});
|
||
const comp = sorted.map(p => JOB_FROM_TYPE[p.type] ?? '').slice(0, 8);
|
||
while (comp.length < 8) comp.push('');
|
||
return comp;
|
||
}
|
||
|
||
function doImport(data, withMitigations, whereMode, mergeId, newName) {
|
||
const { aoeEvents, fightStart, phases, players, fightName, reportCode } = data;
|
||
const mechanics = aoeEventsToMechanics(aoeEvents, fightStart, phases, players, withMitigations);
|
||
|
||
if (whereMode === 'new') {
|
||
const plan = createPlan(uniquePlanName(newName || fightName || 'Importierter Plan'));
|
||
return updatePlan(plan.id, {
|
||
mechanics,
|
||
source: { reportCode, fightName },
|
||
jobComposition: extractJobComp(players),
|
||
});
|
||
}
|
||
|
||
// Merge into existing plan
|
||
const plan = getPlan(mergeId);
|
||
if (!plan) return null;
|
||
|
||
const merged = [...plan.mechanics];
|
||
for (const newM of mechanics) {
|
||
const exists = plan.mechanics.some(m =>
|
||
m.name === newM.name && Math.abs(m.timestamp - newM.timestamp) < 5000
|
||
);
|
||
if (!exists) merged.push(newM);
|
||
}
|
||
merged.sort((a, b) => a.timestamp - b.timestamp);
|
||
|
||
return updatePlan(mergeId, { mechanics: merged });
|
||
}
|
||
|
||
// ── Ability Assignment Modal ──────────────────────────────────────────────────
|
||
|
||
let abilityModalPlanId = null;
|
||
let abilityModalMechanicId = null;
|
||
|
||
function showAbilityModal(planId, mechanicId) {
|
||
abilityModalPlanId = planId;
|
||
abilityModalMechanicId = mechanicId;
|
||
renderAbilityModalContent();
|
||
document.getElementById('planner-ability-modal').style.display = 'flex';
|
||
}
|
||
|
||
function hideAbilityModal() {
|
||
document.getElementById('planner-ability-modal').style.display = 'none';
|
||
abilityModalPlanId = null;
|
||
abilityModalMechanicId = null;
|
||
}
|
||
|
||
function renderAbilityModalContent() {
|
||
const plan = getPlan(abilityModalPlanId);
|
||
if (!plan) return;
|
||
const mechanic = plan.mechanics.find(m => m.id === abilityModalMechanicId);
|
||
if (!mechanic) return;
|
||
|
||
document.getElementById('ability-modal-title').textContent = mechanic.name;
|
||
|
||
const activeJobs = [...new Set(plan.jobComposition.filter(j => j))];
|
||
const content = document.getElementById('ability-modal-content');
|
||
|
||
if (activeJobs.length === 0) {
|
||
content.innerHTML = `
|
||
<p style="color:var(--t3);font-size:13px;padding:8px 0">
|
||
Bitte zuerst die Jobaufstellung konfigurieren.
|
||
</p>`;
|
||
return;
|
||
}
|
||
|
||
content.innerHTML = activeJobs.map(job => {
|
||
const abilities = JOB_ABILITIES[job] ?? [];
|
||
if (!abilities.length) return '';
|
||
const role = JOB_ROLE[job] ?? 'dps';
|
||
|
||
const chips = abilities.map(ab => {
|
||
const assigned = mechanic.assignments.find(a => a.ability === ab.name);
|
||
const isActive = !!assigned;
|
||
const byOtherJob = isActive && assigned.job !== job;
|
||
const cls = ab.buffType === 'debuff' ? 'badge-assign-debuff'
|
||
: ab.buffType === 'shield' ? 'badge-assign-shield'
|
||
: 'badge-assign-buff';
|
||
const activeClass = isActive ? ' ability-chip--active' : '';
|
||
const otherClass = byOtherJob ? ' ability-chip--other-job' : '';
|
||
const title = byOtherJob ? `Bereits von ${escHtml(assigned.job)} zugewiesen` : '';
|
||
const icon = MITIG_ICONS[ab.name] ?? '';
|
||
return `<button class="ability-chip ${cls}${activeClass}${otherClass}"
|
||
data-ability="${escHtml(ab.name)}"
|
||
data-job="${escHtml(job)}"
|
||
data-buff-type="${escHtml(ab.buffType)}"
|
||
${title ? `title="${title}"` : ''}
|
||
>${icon ? `<img class="badge-icon" src="${escHtml(icon)}" alt="">` : ''}${escHtml(ab.name)}</button>`;
|
||
}).join('');
|
||
|
||
return `
|
||
<div class="ability-job-group">
|
||
<div class="ability-job-label">
|
||
<span class="aoe-target-job role-${role}">${escHtml(job)}</span>
|
||
</div>
|
||
<div class="ability-chips">${chips}</div>
|
||
</div>`;
|
||
}).join('');
|
||
}
|
||
|
||
function toggleAbilityAssignment(abilityName, job, buffType) {
|
||
const plan = getPlan(abilityModalPlanId);
|
||
if (!plan) return;
|
||
const mechanic = plan.mechanics.find(m => m.id === abilityModalMechanicId);
|
||
if (!mechanic) return;
|
||
|
||
const idx = mechanic.assignments.findIndex(a => a.ability === abilityName);
|
||
if (idx !== -1) {
|
||
if (mechanic.assignments[idx].job === job) {
|
||
mechanic.assignments.splice(idx, 1);
|
||
} else {
|
||
mechanic.assignments[idx].job = job;
|
||
}
|
||
} else {
|
||
mechanic.assignments.push({ ability: abilityName, job, buffType });
|
||
}
|
||
|
||
updatePlan(abilityModalPlanId, { mechanics: plan.mechanics });
|
||
refreshMechanicList(abilityModalPlanId);
|
||
renderAbilityModalContent();
|
||
}
|
||
|
||
function initAbilityModal() {
|
||
const overlay = document.getElementById('planner-ability-modal');
|
||
if (!overlay) return;
|
||
|
||
document.getElementById('ability-modal-close')?.addEventListener('click', hideAbilityModal);
|
||
overlay.addEventListener('click', e => { if (e.target === overlay) hideAbilityModal(); });
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === 'Escape' && abilityModalPlanId) hideAbilityModal();
|
||
});
|
||
|
||
document.getElementById('ability-modal-content')?.addEventListener('click', e => {
|
||
const btn = e.target.closest('.ability-chip');
|
||
if (!btn) return;
|
||
toggleAbilityAssignment(btn.dataset.ability, btn.dataset.job, btn.dataset.buffType);
|
||
});
|
||
}
|
||
|
||
// ── Import Modal ──────────────────────────────────────────────────────────────
|
||
|
||
let pendingImportData = null;
|
||
|
||
function showImportModal(data) {
|
||
pendingImportData = data;
|
||
|
||
// Pre-fill name — auto-unique so the user sees immediately what name will be used
|
||
const nameInput = document.getElementById('import-plan-name');
|
||
if (nameInput) { nameInput.value = uniquePlanName(data.fightName || 'Importierter Plan'); }
|
||
|
||
// Populate merge dropdown
|
||
const planSelect = document.getElementById('import-plan-select');
|
||
if (planSelect) {
|
||
const plans = loadPlans();
|
||
planSelect.innerHTML = '<option value="">— Plan auswählen —</option>';
|
||
plans.forEach(p => {
|
||
const opt = document.createElement('option');
|
||
opt.value = p.id;
|
||
opt.textContent = p.name;
|
||
planSelect.appendChild(opt);
|
||
});
|
||
const mergeLabel = document.getElementById('import-merge-label');
|
||
if (mergeLabel) mergeLabel.style.opacity = plans.length === 0 ? '0.4' : '';
|
||
const mergeRadio = document.querySelector('input[name="import-where"][value="merge"]');
|
||
if (mergeRadio) mergeRadio.disabled = plans.length === 0;
|
||
}
|
||
|
||
// Reset to defaults
|
||
document.querySelectorAll('input[name="import-what"]').forEach(r => { r.checked = r.value === 'with-mitigations'; });
|
||
document.querySelectorAll('input[name="import-where"]').forEach(r => { r.checked = r.value === 'new'; });
|
||
document.getElementById('import-new-section').style.display = '';
|
||
document.getElementById('import-merge-section').style.display = 'none';
|
||
|
||
document.getElementById('planner-import-modal').style.display = 'flex';
|
||
nameInput?.focus();
|
||
nameInput?.select();
|
||
}
|
||
|
||
function hideImportModal() {
|
||
document.getElementById('planner-import-modal').style.display = 'none';
|
||
pendingImportData = null;
|
||
}
|
||
|
||
function initImportModal() {
|
||
document.querySelectorAll('input[name="import-where"]').forEach(radio => {
|
||
radio.addEventListener('change', () => {
|
||
document.getElementById('import-new-section').style.display = radio.value === 'new' ? '' : 'none';
|
||
document.getElementById('import-merge-section').style.display = radio.value === 'merge' ? '' : 'none';
|
||
});
|
||
});
|
||
|
||
document.getElementById('import-cancel-btn')?.addEventListener('click', hideImportModal);
|
||
|
||
document.getElementById('planner-import-modal')?.addEventListener('click', e => {
|
||
if (e.target === e.currentTarget) hideImportModal();
|
||
});
|
||
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === 'Escape' && pendingImportData) hideImportModal();
|
||
});
|
||
|
||
document.getElementById('import-confirm-btn')?.addEventListener('click', () => {
|
||
if (!pendingImportData) return;
|
||
|
||
const withMitigations = document.querySelector('input[name="import-what"]:checked')?.value === 'with-mitigations';
|
||
const whereMode = document.querySelector('input[name="import-where"]:checked')?.value ?? 'new';
|
||
const newName = document.getElementById('import-plan-name')?.value.trim();
|
||
const mergeId = document.getElementById('import-plan-select')?.value;
|
||
|
||
if (whereMode === 'new' && !newName) {
|
||
document.getElementById('import-plan-name')?.focus();
|
||
return;
|
||
}
|
||
if (whereMode === 'merge' && !mergeId) {
|
||
document.getElementById('import-plan-select')?.focus();
|
||
return;
|
||
}
|
||
|
||
const plan = doImport(pendingImportData, withMitigations, whereMode, mergeId, newName);
|
||
if (!plan) return;
|
||
|
||
hideImportModal();
|
||
renderPlanList();
|
||
openPlan(plan.id);
|
||
window.showTab?.('planner');
|
||
});
|
||
}
|
||
|
||
// ── window.plannerTab (hooks for other tabs) ──────────────────────────────────
|
||
|
||
window.plannerTab = {
|
||
onTabOpen() {
|
||
renderPlanList();
|
||
if (activePlanId) {
|
||
openPlan(activePlanId);
|
||
} else {
|
||
renderPlanDetail(null);
|
||
}
|
||
},
|
||
|
||
showImportModal(data) {
|
||
showImportModal(data);
|
||
},
|
||
|
||
importFromAnalysis(aoeEvents, _refEvents, _options) {
|
||
console.log('[Planner] importFromAnalysis — use showImportModal instead', aoeEvents);
|
||
},
|
||
};
|
||
|
||
// ── Init ──────────────────────────────────────────────────────────────────────
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initNewPlanForm();
|
||
initNewFolderForm();
|
||
initImportModal();
|
||
initAbilityModal();
|
||
renderPlanList();
|
||
renderPlanDetail(null);
|
||
});
|