feat: NCWF-5/6/7/8/9 chess analysis page and engine integration (#11)

Co-authored-by: Janis Eccarius <eccariusjanis@gmail.com> Reviewed-on: #11
2026-06-17 08:17:55 +02:00
parent a3e51bade5
commit f9420e5848
22 changed files with 2051 additions and 13 deletions
@@ -0,0 +1,53 @@
+@if (points.length === 0) {
+  <div class="empty">No evaluation data yet.</div>
+} @else {
+  <div class="timeline-wrap" role="img" aria-label="Evaluation timeline">
+    <svg
+      class="timeline-svg"
+      [attr.viewBox]="'0 0 ' + svgWidth + ' ' + svgHeight"
+      preserveAspectRatio="none"
+    >
+      <!-- Midline (balanced) -->
+      <line
+        x1="0"
+        [attr.y1]="svgHeight / 2"
+        [attr.x2]="svgWidth"
+        [attr.y2]="svgHeight / 2"
+        class="midline"
+      />
+
+      <!-- White-advantage fill (clip above midline) -->
+      <defs>
+        <clipPath id="clip-white">
+          <rect x="0" y="0" [attr.width]="svgWidth" [attr.height]="svgHeight / 2" />
+        </clipPath>
+        <clipPath id="clip-black">
+          <rect
+            x="0"
+            [attr.y]="svgHeight / 2"
+            [attr.width]="svgWidth"
+            [attr.height]="svgHeight / 2"
+          />
+        </clipPath>
+      </defs>
+
+      <polygon [attr.points]="polylineWhite" class="area-white" clip-path="url(#clip-white)" />
+
+      <polygon [attr.points]="polylineBlack" class="area-black" clip-path="url(#clip-black)" />
+
+      <!-- Eval line -->
+      <polyline [attr.points]="evalPolyline" class="eval-line" />
+
+      <!-- Active ply marker -->
+      @if (activeX() !== null) {
+        <line
+          [attr.x1]="activeX()"
+          y1="0"
+          [attr.x2]="activeX()"
+          [attr.y2]="svgHeight"
+          class="active-marker"
+        />
+      }
+    </svg>
+  </div>
+}