diff --git a/game.html b/game.html index 79af698..7106a5f 100644 --- a/game.html +++ b/game.html @@ -674,6 +674,14 @@ position: absolute; top: 16px; bottom: 0; z-index: 2; cursor: crosshair; background: transparent; } + .tl-connector { + position: absolute; + width: 0; + border-left: 1px dashed rgba(232,220,196,.22); + transform: translateX(-50%); + pointer-events: none; + z-index: 0; + } .project-events { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); @@ -922,6 +930,13 @@ + + + @@ -2131,6 +2146,26 @@ return result.sort((a, b) => a.term.localeCompare(b.term)) }, + // Vertical connector lines from main-rail event dots down to project pins. + // SUBLABEL_H ≈ 1rem margin-top + 10px text + 6px margin-bottom = 32px + projectConnectors() { + if (!this.game) return [] + const projs = this.projects() + if (!projs.length) return [] + const SUBLABEL_H = 32, ROW_H = 36, PIN_LEVEL = 7 + return this.events() + .filter(ev => ev.project_id) + .map(ev => { + const idx = projs.findIndex(p => p.id === ev.project_id) + if (idx === -1) return null + const pct = this.posPercent(ev.date) + const topY = this.tlRailY() + const pinY = this.tlHeight() + SUBLABEL_H + idx * ROW_H + PIN_LEVEL + return { id: ev.id, pct, top: topY, height: Math.max(0, pinY - topY) } + }) + .filter(Boolean) + }, + openAddEventToProject(project, clickEvent) { const env = this.randomEnv(project.discipline) this.activeForm = {