Initialization

2026-06-15 19:01:02 +08:00
commit 325c267f0c
28 changed files with 12087 additions and 0 deletions
@@ -0,0 +1,72 @@
+"use client"
+
+import { COLORS } from "./logic"
+
+interface ResultPanelProps {
+  groups: { numbers: number[]; colorIndex: number }[]
+  hasResult: boolean
+  placeholder?: string
+}
+
+export function ResultPanel({ groups, hasResult, placeholder }: ResultPanelProps) {
+  if (!hasResult || groups.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full min-h-40 gap-3">
+        <div className="text-[10px] tracking-[0.2em] text-[#cdd2d8] font-mono uppercase">
+          — AWAITING INPUT —
+        </div>
+        {placeholder && (
+          <div className="text-xs text-[#8a95a1] font-mono">{placeholder}</div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col">
+      {groups.map((group, idx) => {
+        const sorted = [...group.numbers].sort((a, b) => a - b)
+        const color = COLORS[group.colorIndex]
+        return (
+          <div
+            key={idx}
+            className="flex items-start gap-4 py-2.5 border-b border-[#e2e6ea] last:border-b-0 fui-slide-up"
+            style={{ animationDelay: `${idx * 40}ms` }}
+          >
+            {/* Group label with color */}
+            <div className="flex flex-col gap-0.5 w-14 flex-shrink-0 pt-0.5">
+              <div className="flex items-center gap-2">
+                <div
+                  className="w-2 h-2 rounded-full"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-xs font-mono uppercase tracking-[0.15em]" style={{ color }}>
+                  G{String(idx + 1).padStart(2, "0")}
+                </span>
+              </div>
+              <span className="text-[10px] font-mono text-[#8a95a1]">
+                {String(group.numbers.length).padStart(2, "0")} P
+              </span>
+            </div>
+            {/* Numbers with color */}
+            <div className="flex flex-wrap gap-1.5 flex-1 min-w-0">
+              {sorted.map((num) => (
+                <span
+                  key={num}
+                  className="min-w-8 h-8 px-1.5 flex items-center justify-center text-sm font-mono border fui-fadein"
+                  style={{ 
+                    borderColor: color + "40",
+                    backgroundColor: color + "15",
+                    color: color,
+                  }}
+                >
+                  {String(num).padStart(2, "0")}
+                </span>
+              ))}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}