+
+ How to use
+
+ {[
+ { step: '1', label: 'Select Greedy Algorithm' },
+ {
+ step: '2',
+ label:
+ algorithm === 'huffman'
+ ? 'Modify text string'
+ : algorithm === 'knapsack'
+ ? 'Modify cargo items list'
+ : 'Modify jobs and deadlines',
+ },
+ { step: '3', label: 'Run greedy visualization' },
+ ].map(({ step, label }) => {
+ const done =
+ (step === '1' && algorithm) ||
+ (step === '2' &&
+ (algorithm === 'huffman'
+ ? huffmanText
+ : algorithm === 'knapsack'
+ ? knapsackItems.length > 0
+ : jobs.length > 0)) ||
+ (step === '3' && hasSteps)
+ return (
+
+
+ {done ? 'ā' : step}
+
+
+ {label}
+
+
+ )
+ })}
+
+ {/* Algorithm Selector */}
+
+
+ Target Algorithm
+
+
+
+
+ Huffman Coding (Data Compression)
+
+
+ Fractional Knapsack (Resource Optimization)
+
+
+ Job Sequencing (Timeline Optimization)
+
+
+
+
+
+ {/* Huffman Specific Controls */}
+ {algorithm === 'huffman' && (
+
+
+ Input text string
+
+
+
+
+ Maximum 25 characters for layout spacing.
+
+
+ )}
+
+ {/* Knapsack Specific Controls */}
+ {algorithm === 'knapsack' && (
+
+ {/* Capacity input */}
+
+
+ Knapsack Capacity (kg)
+
+
{
+ setKnapsackCapacity(
+ Math.max(1, Number(e.target.value))
+ )
+ clearPlayback()
+ }}
+ disabled={isPlaying}
+ className="w-full bg-slate-900/80 text-white text-sm border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:border-cyan-500 transition disabled:opacity-50"
+ placeholder="Capacity"
+ />
+
+
+ {/* Item editor list */}
+
+
+ Cargo Items list
+
+
+
+ {knapsackItems.map((item) => (
+
+
+ {item.id}
+
+
+ ${item.value} | {item.weight} kg |{' '}
+ {(item.value / item.weight || 0).toFixed(1)}/kg
+
+ handleRemoveKnapsackItem(item.id)}
+ disabled={isPlaying || knapsackItems.length <= 1}
+ className="text-rose-400 hover:text-rose-300 disabled:opacity-30 cursor-pointer"
+ title="Delete Item"
+ >
+ ā
+
+
+ ))}
+
+
+ {/* Add new item */}
+
+
+ Add Custom Cargo
+
+
+
+
= 6
+ }
+ className="w-full text-xs font-bold rounded-xl bg-cyan-700/80 hover:bg-cyan-600 text-white py-2 transition disabled:opacity-40"
+ >
+ Add Item{' '}
+ {String.fromCharCode(65 + knapsackItems.length)}
+
+ {knapsackItems.length >= 6 && (
+
+ Maximum 6 items allowed.
+
+ )}
+
+
+
+ )}
+
+ {/* Job Sequencing Specific Controls */}
+ {algorithm === 'jobsequencing' && (
+
+
+
+ Jobs Directory Editor
+
+
+
+ {jobs.map((job) => (
+
+
+ {job.id}
+
+
+ Profit: ${job.profit} | Deadline: {job.deadline}
+
+ handleRemoveJob(job.id)}
+ disabled={isPlaying || jobs.length <= 1}
+ className="text-rose-400 hover:text-rose-300 disabled:opacity-30 cursor-pointer text-xs"
+ title="Delete Job"
+ >
+ ā
+
+
+ ))}
+
+
+ {/* Add new job */}
+
+
+ Add Custom Job
+
+
+
+
= 8
+ }
+ className="w-full text-xs font-bold rounded-xl bg-cyan-700/80 hover:bg-cyan-600 text-white py-2 transition disabled:opacity-40"
+ >
+ Add Job {String.fromCharCode(65 + jobs.length)}
+
+ {jobs.length >= 8 && (
+
+ Maximum 8 jobs allowed.
+
+ )}
+
+
+
+ )}
+
+ {/* Speed Slider */}
+
+ setSpeed(v)}
+ min={0.25}
+ max={3}
+ step={0.05}
+ />
+
+
+ {/* Stepper Modes */}
+
+ {
+ setIsStepMode(false)
+ clearPlayback()
+ }}
+ className={`flex-1 py-2 text-xs font-semibold transition-all ${!isStepMode ? 'bg-cyan-600 text-white' : 'bg-slate-800 text-slate-400 hover:text-slate-200'}`}
+ >
+ Auto Play
+
+ {
+ setIsStepMode(true)
+ clearPlayback()
+ }}
+ className={`flex-1 py-2 text-xs font-semibold transition-all ${isStepMode ? 'bg-cyan-600 text-white' : 'bg-slate-800 text-slate-400 hover:text-slate-200'}`}
+ >
+ Manual Step
+
+
+
+ {/* Play Action Triggers */}
+
+
+ {isPlaying
+ ? 'Visualizing...'
+ : hasSteps
+ ? 'Restart Visualizer'
+ : 'Start Visualizer'}
+
+
+ Reset Settings
+
+
+
+
+ {/* Playback step-by-step panel */}
+ {hasSteps && (
+