akurosia/ff14-mitigator
1
0
Fork 0
forked from xziino/ff14-mitigator
Code Pull Requests Activity

add hint, hover for boss skills

Browse Source
This commit is contained in:
Akurosia Kamo 2026-06-08 17:08:29 +02:00
parent 695c0fb99e
commit f6078542ef
2 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/planner.css
View File

@ -711,11 +711,26 @@
/* ── Planner Timeline ───────────────────────────────────────────────────────── */
.timeline-hint {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
color: var(--t3);
margin-bottom: 8px;
}
.timeline-zoom-hint {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border: 1px solid rgba(200,168,75,.25);
border-radius: var(--r);
background: rgba(200,168,75,.08);
color: var(--gold);
font-weight: 600;
}
.timeline-controls {
display: flex;
align-items: center;
@ -850,18 +865,42 @@
position: absolute;
top: 0;
bottom: 0;
width: 1px;
width: 10px;
transform: translateX(-50%);
background: rgba(200,168,75,.38);
pointer-events: none;
background: transparent;
pointer-events: auto;
cursor: help;
z-index: 1;
}
.timeline-hit-line::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
transform: translateX(-50%);
background: rgba(200,168,75,.38);
}
.timeline-hit-line--tankbuster {
width: 12px;
}
.timeline-hit-line--tankbuster::before {
width: 2px;
background: rgba(177,112,255,.62);
}
.timeline-hit-line:hover::before {
background: var(--gold);
}
.timeline-hit-line--tankbuster:hover::before {
background: #b170ff;
}
.timeline-player-row .timeline-track {
background-color: rgba(255,255,255,0.015);
}

8
js/planner.js
View File

@ -459,10 +459,12 @@ function renderPlanDetail(plan) {
</label>
</div>
</div>
<div class="timeline-hint">Boss-Aktion klicken zum Zuweisen · Mitigation ziehen · Modifier+Scroll zum Zoomen · Klick für Zeiten</div>
<div id="planner-timeline">
${renderTimelineHtml(plan)}
</div>
<div class="timeline-hint">
<span class="timeline-zoom-hint">Zoom: Strg + Mausrad</span>
</div>
<div id="timeline-settings">
${renderTimelineSettingsHtml(plan)}
</div>
@ -1595,7 +1597,9 @@ function renderTimelineHtml(plan) {
const bossActions = layoutBossActions(mechanics, duration);
const laneCount = Math.max(1, ...bossActions.map(item => item.lane + 1));
const hitLines = mechanics.map(m => `
<span class="timeline-hit-line${m.isHeavyTankbuster ? ' timeline-hit-line--tankbuster' : ''}" style="left:${(m.timestamp / duration) * 100}%"></span>
<span class="timeline-hit-line${m.isHeavyTankbuster ? ' timeline-hit-line--tankbuster' : ''}"
style="left:${(m.timestamp / duration) * 100}%"
title="${escHtml(`${fmtTimestamp(m.timestamp)} · ${m.name} · ${m.isHeavyTankbuster ? 'Tankbuster' : 'AoE'}`)}"></span>
`).join('');
const bossItems = bossActions.map(({ mechanic: m, left, lane }) => `