155 lines
4.0 KiB
TypeScript
155 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { cn } from '@/lib/utils';
|
|
import type { BitManipulationState } from '@/lib/visualizations/types';
|
|
import { BitDisplay } from '../primitives/bit-display';
|
|
|
|
interface BitManipulationViewProps {
|
|
state: BitManipulationState;
|
|
bitWidth?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const OPERATION_SYMBOLS = {
|
|
XOR: '⊕',
|
|
AND: '&',
|
|
OR: '|',
|
|
NOT: '~',
|
|
} as const;
|
|
|
|
export function BitManipulationView({
|
|
state,
|
|
bitWidth = 4,
|
|
className,
|
|
}: BitManipulationViewProps) {
|
|
const hasOperation = state.operation && state.operands.length >= 2;
|
|
const hasResult = state.result;
|
|
|
|
return (
|
|
<div className={cn('flex flex-col items-center gap-4', className)}>
|
|
{/* Label */}
|
|
{state.label && (
|
|
<span className="text-sm font-medium text-[var(--muted-foreground)]">
|
|
{state.label}
|
|
</span>
|
|
)}
|
|
|
|
{/* Operation layout */}
|
|
<div className="flex flex-col items-center gap-2">
|
|
{/* Operands */}
|
|
{state.operands.map((operand, index) => (
|
|
<motion.div
|
|
key={operand.id}
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.1 }}
|
|
className="flex items-center gap-3"
|
|
>
|
|
{/* Show operation symbol before second operand */}
|
|
{index === 1 && hasOperation && (
|
|
<span className="w-6 text-center text-lg font-bold text-[var(--primary)]">
|
|
{OPERATION_SYMBOLS[state.operation!]}
|
|
</span>
|
|
)}
|
|
{index === 0 && hasOperation && (
|
|
<span className="w-6" /> /* Spacer for alignment */
|
|
)}
|
|
<BitDisplay bit={operand} bitWidth={bitWidth} />
|
|
</motion.div>
|
|
))}
|
|
|
|
{/* Divider line and result */}
|
|
{hasResult && (
|
|
<>
|
|
<motion.div
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="w-full h-0.5 bg-[var(--border)] my-1"
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="flex items-center gap-3"
|
|
>
|
|
<span className="w-6 text-center text-lg font-bold text-green-500">
|
|
=
|
|
</span>
|
|
<BitDisplay bit={state.result!} bitWidth={bitWidth} />
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface BitXORSequenceProps {
|
|
states: BitManipulationState[];
|
|
bitWidth?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function BitXORSequence({
|
|
states,
|
|
bitWidth = 4,
|
|
className,
|
|
}: BitXORSequenceProps) {
|
|
return (
|
|
<div className={cn('flex flex-wrap items-start justify-center gap-8', className)}>
|
|
{states.map((state) => (
|
|
<BitManipulationView
|
|
key={state.id}
|
|
state={state}
|
|
bitWidth={bitWidth}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface BitArrayWithBinaryProps {
|
|
values: Array<{
|
|
value: number;
|
|
bits: string;
|
|
state: 'normal' | 'highlighted' | 'comparing' | 'result' | 'cancelled';
|
|
}>;
|
|
bitWidth?: number;
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function BitArrayWithBinary({
|
|
values,
|
|
bitWidth = 4,
|
|
label,
|
|
className,
|
|
}: BitArrayWithBinaryProps) {
|
|
return (
|
|
<div className={cn('flex flex-col items-center gap-2', className)}>
|
|
{label && (
|
|
<span className="text-sm font-medium text-[var(--muted-foreground)]">
|
|
{label}
|
|
</span>
|
|
)}
|
|
<div className="flex flex-wrap items-end justify-center gap-4">
|
|
{values.map((item, index) => (
|
|
<BitDisplay
|
|
key={index}
|
|
bit={{
|
|
id: `arr-${index}`,
|
|
value: item.value,
|
|
bits: item.bits,
|
|
state: item.state,
|
|
}}
|
|
bitWidth={bitWidth}
|
|
showLabel={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|