106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
"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>
|
|
)
|
|
}
|
|
|
|
// 将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)
|
|
}
|
|
|
|
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, idx) => {
|
|
const sorted = [...group.numbers].sort((a, b) => a - b)
|
|
const color = COLORS[group.colorIndex]
|
|
const globalIdx = groups.indexOf(group)
|
|
return (
|
|
<div
|
|
key={globalIdx}
|
|
className="flex-1 min-w-0"
|
|
>
|
|
{/* Group label with color */}
|
|
<div className="flex items-center gap-2 mb-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(globalIdx + 1).padStart(2, "0")}
|
|
</span>
|
|
<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">
|
|
{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>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|