102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { COLORS } from "@/components/logic"
|
|
|
|
interface ResultPanelProps {
|
|
groups: { numbers: number[]; colorIndex: number }[]
|
|
hasResult: boolean
|
|
}
|
|
|
|
export function ResultPanel({ groups, hasResult }: 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>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 将groups分成pairs，每组人数>=15时单独一行
|
|
const rows: { numbers: number[]; colorIndex: number }[][] = []
|
|
let currentRow: { numbers: number[]; colorIndex: number }[] = []
|
|
|
|
for (const group of groups) {
|
|
if (group.numbers.length >= 15) {
|
|
// 单独一行
|
|
if (currentRow.length > 0) {
|
|
rows.push(currentRow)
|
|
currentRow = []
|
|
}
|
|
rows.push([group])
|
|
} else {
|
|
// 尝试凑成一行两组
|
|
currentRow.push(group)
|
|
if (currentRow.length === 2) {
|
|
rows.push(currentRow)
|
|
currentRow = []
|
|
}
|
|
}
|
|
}
|
|
|
|
// 处理剩余的组
|
|
if (currentRow.length > 0) {
|
|
rows.push(currentRow)
|
|
}
|
|
|
|
// 预先建立索引映射
|
|
const groupIndexMap = new Map(groups.map((g, i) => [g, i]))
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
{rows.map((row, rowIdx) => (
|
|
<div
|
|
key={rowIdx}
|
|
className="flex gap-6 fui-slide-up"
|
|
style={{ animationDelay: `${rowIdx * 40}ms` }}
|
|
>
|
|
{row.map((group) => {
|
|
const sorted = [...group.numbers].sort((a, b) => a - b)
|
|
const color = COLORS[group.colorIndex]
|
|
const globalIdx = groupIndexMap.get(group)!
|
|
return (
|
|
<div
|
|
key={globalIdx}
|
|
className="flex-1 min-w-0"
|
|
>
|
|
{/* Group label with color */}
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
<span className="text-sm font-mono uppercase tracking-[0.15em]" style={{ color }}>
|
|
G{String(globalIdx + 1).padStart(2, "0")}
|
|
</span>
|
|
</div>
|
|
{/* Numbers with color */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{sorted.map((num) => (
|
|
<span
|
|
key={num}
|
|
className="min-w-10 h-10 px-2 flex items-center justify-center text-base font-mono border fui-fadein"
|
|
style={{
|
|
borderColor: color + "40",
|
|
backgroundColor: color + "15",
|
|
color: color,
|
|
}}
|
|
>
|
|
{String(num).padStart(2, "0")}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|