adding classification and division yard updates, train collisions, engine and car updates, turnout improvements.

src/web/main.ts

@@ -261,6 +261,8 @@ function render(): void {
     ? f.departments.map((d, i) => cardRow(d, f.departmentsWhat[i] ?? '', null)).join('')
     : '<span class="dim">none</span>';
 
+  renderYards(f);
+
   const total = f.trackSupply.reduce((n, t) => n + t.left, 0);
   $('supply').innerHTML =
     `<div class="dim">${total} pieces left · one may be laid per turn, during the DRAW option</div>` +
@@ -297,6 +299,38 @@ function render(): void {
   save();
 }
 
+/**
+ * The two yards, and how close the Division Yard is to running out.
+ *
+ * §2 — used Rolling Stock is set out in the Classification Yard, and it only returns when the
+ * Division Yard is BARE. So the interesting number is not how much has been used but how little is
+ * left, and the moment the Division Yard empties a whole pile comes back at once.
+ */
+function renderYards(f: ReturnType<typeof view>): void {
+  const row = (rows: { type: string; loaded: number; empty: number }[]): string =>
+    rows.length === 0
+      ? '<span class="dim">empty</span>'
+      : rows
+          .map(
+            (r) =>
+              `<span class="stock" data-tip="${esc(r.type)} — ${r.loaded} loaded, ${r.empty} empty">` +
+              `<b>${esc(r.type)}</b> <span class="ld">${r.loaded}</span>/<span class="mt">${r.empty}</span></span>`,
+          )
+          .join('');
+
+  $('divyard').innerHTML = row(f.yards.division);
+  $('clsyard').innerHTML = row(f.yards.classification);
+  $('divtot').textContent = `${f.yards.divisionTotal} cars`;
+  $('clstot').textContent = `${f.yards.classificationTotal} cars`;
+
+  // The one thing worth calling out: the yard about to turn over.
+  const bare = f.yards.divisionTotal === 0;
+  $('divyard').classList.toggle('bare', bare);
+  $('yardnote').textContent = bare
+    ? `The Division Yard is bare — the ${f.yards.classificationTotal} cars in Classification return to it now.`
+    : 'loaded / empty. Classification returns to the Division Yard only when the Division Yard is bare.';
+}
+
 function renderDistrict(f: ReturnType<typeof view>): void {
   const open = districtMode === 'auto' ? FOCUS_PHASES.has(f.phaseKey) : districtMode === 'open';
   const sec = $('district');