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 = {