From 00d69e282d2addc4405537d27bdc37c566c18d08 Mon Sep 17 00:00:00 2001
From: Startklar <A.Nikolic.inf24@stud.bbbaden.ch>
Date: Tue, 7 Jul 2026 03:00:28 +0200
Subject: [PATCH] Fix comparison mode result cards

---
 src/App.jsx    | 70 ++++++++++++++++++++++++++++++++++++++++++--------
 src/styles.css | 34 ++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 578ca51..5e531ac 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -54,6 +54,24 @@ const getAlgorithmLabel = (value) =>
 
 const clampArraySize = (size) => Math.min(Math.max(size, ARRAY_MIN), ARRAY_MAX);
 
+const comparisonMetricLabels = [
+  { key: 'comparisons', label: 'Vergleiche' },
+  { key: 'moves', label: 'Bewegungen' },
+  { key: 'steps', label: 'Schritte' },
+  { key: 'generationTimeMs', label: 'Zeit' }
+];
+
+const createComparisonPlaceholder = (key) => ({
+  key,
+  label: getAlgorithmLabel(key),
+  comparisons: '-',
+  moves: '-',
+  steps: '-',
+  generationTimeMs: '-'
+});
+
+const getNumericMetric = (row, key) => (typeof row[key] === 'number' ? row[key] : 0);
+
 function App() {
   const initialArray = useMemo(() => createRandomArray(DEFAULT_SIZE), []);
   const [activeTab, setActiveTab] = useState('visualizer');
@@ -158,6 +176,20 @@ function App() {
       : currentStep > 0 && steps.length > 0
         ? 'Bereit zum Fortsetzen'
         : 'Bereit';
+  const comparisonDisplayRows = useMemo(
+    () => [compareLeftAlgorithm, compareRightAlgorithm].map((algorithmKey) => (
+      comparisonRows.find((row) => row.key === algorithmKey) ?? createComparisonPlaceholder(algorithmKey)
+    )),
+    [compareLeftAlgorithm, compareRightAlgorithm, comparisonRows]
+  );
+  const hasComparisonResult = comparisonRows.length > 0;
+  const comparisonMaxValues = useMemo(() => comparisonMetricLabels.reduce((maxValues, metric) => ({
+    ...maxValues,
+    [metric.key]: Math.max(
+      ...comparisonDisplayRows.map((row) => getNumericMetric(row, metric.key)),
+      1
+    )
+  }), {}), [comparisonDisplayRows]);
 
   const resetPlaybackState = () => {
     if (timeoutRef.current) {
@@ -531,7 +563,10 @@ function App() {
                 <select
                   id="compare-left-select"
                   value={compareLeftAlgorithm}
-                  onChange={(event) => setCompareLeftAlgorithm(event.target.value)}
+                  onChange={(event) => {
+                    setCompareLeftAlgorithm(event.target.value);
+                    setComparisonRows([]);
+                  }}
                 >
                   {algorithmOptions.map((option) => (
                     <option key={option.value} value={option.value}>
@@ -545,7 +580,10 @@ function App() {
                 <select
                   id="compare-right-select"
                   value={compareRightAlgorithm}
-                  onChange={(event) => setCompareRightAlgorithm(event.target.value)}
+                  onChange={(event) => {
+                    setCompareRightAlgorithm(event.target.value);
+                    setComparisonRows([]);
+                  }}
                 >
                   {algorithmOptions.map((option) => (
                     <option key={option.value} value={option.value}>
@@ -587,15 +625,8 @@ function App() {
             </div>
 
             <div className="comparison-grid">
-              {(comparisonRows.length > 0 ? comparisonRows : [compareLeftAlgorithm, compareRightAlgorithm].map((key) => ({
-                key,
-                label: getAlgorithmLabel(key),
-                comparisons: '-',
-                moves: '-',
-                steps: '-',
-                generationTimeMs: '-'
-              }))).map((row) => (
-                <article className="compare-card" key={`${row.key}-${row.label}`}>
+              {comparisonDisplayRows.map((row, rowIndex) => (
+                <article className="compare-card" key={`${row.key}-${rowIndex}`}>
                   <h3>{row.label}</h3>
                   <dl>
                     <div>
@@ -615,6 +646,23 @@ function App() {
                       <dd>{row.generationTimeMs} ms</dd>
                     </div>
                   </dl>
+                  {hasComparisonResult && (
+                    <div className="compare-mini-chart" aria-label={`Kennzahlen für ${row.label}`}>
+                      {comparisonMetricLabels.map((metric) => {
+                        const value = getNumericMetric(row, metric.key);
+                        const width = Math.max((value / comparisonMaxValues[metric.key]) * 100, value > 0 ? 6 : 0);
+
+                        return (
+                          <div className="compare-mini-row" key={metric.key}>
+                            <span>{metric.label}</span>
+                            <div className="compare-mini-track">
+                              <i style={{ width: `${width}%` }} />
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
                 </article>
               ))}
             </div>
diff --git a/src/styles.css b/src/styles.css
index 05ec329..1d01d1c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -549,6 +549,40 @@ button.secondary:hover {
   font-weight: 700;
 }
 
+.compare-mini-chart {
+  display: grid;
+  gap: 8px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+
+.compare-mini-row {
+  display: grid;
+  grid-template-columns: 110px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+.compare-mini-row span {
+  color: var(--muted);
+  font-size: 0.86rem;
+}
+
+.compare-mini-track {
+  height: 9px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e5e7eb;
+}
+
+.compare-mini-track i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--purple), var(--accent));
+}
+
 @media (max-width: 1120px) {
   .hero-card {
     display: grid;