feat: greedy algo

src/App.jsx

@@ -10,6 +10,7 @@ import Searchingpage from "./pages/searching/searchingPage";
 import RecursionPage from "./pages/Recursion/RecursionPage";
 import Treepage from "./pages/Tree/Treepage";
 import SlidingWindowPage from "./pages/sliding-window/SlidingWindowPage";
+import GreedyPage from "./pages/greedy/GreedyPage";
 function App() {
   return (
     <Router>
@@ -24,6 +25,7 @@ function App() {
         <Route path="/recursion" element={<RecursionPage/>}/>
         <Route path="/tree" element={<Treepage />} />
         <Route path="/sliding-window" element={<SlidingWindowPage/>}/>
+        <Route path="/greedy" element={<GreedyPage />} />
       </Routes>
     </Router>
   );

src/algorithms/greedy/fractionalKnapsack.js

@@ -0,0 +1,91 @@
+export function* fractionalKnapsack(weights, values, capacity) {
+  const n = weights.length;
+  const items = [];
+  for (let i = 0; i < n; i++) {
+    items.push({index: i, weight: weights[i], value: values[i], ratio: values[i] / weights[i]});
+  }
+
+  yield {
+    type: "calculate_ratios",
+    message: "Calculating value-to-weight ratio for each item",
+    items: items.map(item => ({ ...item })),
+    capacity,
+    selectedItems: [],
+    totalValue: 0,
+    remainingCapacity: capacity
+  };
+
+  items.sort((a, b) => b.ratio - a.ratio);
+
+  yield {
+    type: "sort_items",
+    message: "Sorting items by value-to-weight ratio (descending) - Greedy approach",
+    items: items.map(item => ({ ...item })), capacity, selectedItems: [], totalValue: 0, remainingCapacity: capacity
+  };
+
+  const selectedItems = [];
+  let totalValue = 0;
+  let remainingCapacity = capacity;
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+
+    yield {
+      type: "consider_item",
+      message: `Considering item ${item.index + 1}: weight=${item.weight}, value=${item.value}, ratio=${item.ratio.toFixed(2)}`,
+      items: items.map(item => ({ ...item })),
+      currentItem: { ...item }, capacity, selectedItems: selectedItems.map(si => ({ ...si })), totalValue, remainingCapacity
+    };
+
+    if (remainingCapacity <= 0) {
+      yield {
+        type: "skip_item",
+        message: `Skipping item ${item.index + 1}: No remaining capacity`,
+        items: items.map(item => ({ ...item })),
+        currentItem: { ...item },capacity, selectedItems: selectedItems.map(si => ({ ...si })), totalValue, remainingCapacity
+      };
+      break;
+    }
+
+    if (item.weight <= remainingCapacity) {
+      const fraction = 1.0;
+      const itemValue = item.value;
+      const itemWeight = item.weight;
+
+      selectedItems.push({index: item.index, weight: itemWeight, value: itemValue, ratio: item.ratio, fraction: fraction, actualWeight: itemWeight, actualValue: itemValue});
+
+      totalValue += itemValue;
+      remainingCapacity -= itemWeight;
+
+      yield {
+        type: "take_full",
+        message: `Taking full item ${item.index + 1}: ${itemWeight}kg (value: ${itemValue})`,
+        items: items.map(item => ({ ...item })),
+        currentItem: { ...item },
+        capacity,
+        selectedItems: selectedItems.map(si => ({ ...si })),
+        totalValue,
+        remainingCapacity
+      };
+    } else {
+      const fraction = remainingCapacity / item.weight;
+      const actualWeight = remainingCapacity;
+      const actualValue = item.value * fraction;
+
+      selectedItems.push({index: item.index, weight: item.weight, value: item.value, ratio: item.ratio, fraction: fraction, actualWeight: actualWeight, actualValue: actualValue});
+
+      totalValue += actualValue;
+      remainingCapacity = 0;
+
+      yield {
+        type: "take_fraction",
+        message: `Taking ${(fraction * 100).toFixed(1)}% of item ${item.index + 1}: ${actualWeight.toFixed(2)}kg (value: ${actualValue.toFixed(2)})`,
+        items: items.map(item => ({ ...item })), currentItem: { ...item }, capacity, selectedItems: selectedItems.map(si => ({ ...si })), totalValue, remainingCapacity, fraction
+      };
+      break;
+    }
+  }
+
+  yield {type: "complete", message: `Knapsack filled! Total value: ${totalValue.toFixed(2)}`, items: items.map(item => ({ ...item })), capacity, selectedItems: selectedItems.map(si => ({ ...si })), totalValue, remainingCapacity};
+  return { selectedItems, totalValue, remainingCapacity};
+}

src/components/greedy/FractionalKnapsackVisualizer.jsx

@@ -0,0 +1,161 @@
+import React from "react";
+
+export default function FractionalKnapsackVisualizer({items = [], currentStep = null, capacity = 0}) {
+  if (!currentStep) {
+    return (
+      <div className="flex items-center justify-center h-64 bg-gray-800 rounded-lg border border-gray-700">
+        <div className="text-center">
+          <div className="text-gray-400">No data to visualize</div>
+        </div>
+      </div>
+    );
+  }
+  const step = currentStep;
+  const selectedItems = step.selectedItems || [];
+  const totalValue = step.totalValue || 0;
+  const remainingCapacity = step.remainingCapacity !== undefined ? step.remainingCapacity : capacity;
+  const usedCapacity = capacity - remainingCapacity;
+
+  const getItemStatus = (item) => {
+    const selected = selectedItems.find(si => si.index === item.index);
+
+    if (selected) {
+      return selected.fraction === 1.0 ? "full" : "partial";
+    }
+
+    if (step.currentItem && step.currentItem.index === item.index) {
+      if (step.type === "consider_item") {
+        return "considering";
+      } else if (step.type === "skip_item") {
+        return "skipped";
+      }
+    }
+
+    return "not_selected";
+  };
+
+  const getItemClass = (status) => {
+    switch (status) {
+      case "full":
+        return "bg-green-600 border-green-500";
+      case "partial":
+        return "bg-yellow-600 border-yellow-500";
+      case "considering":
+        return "bg-blue-600 border-blue-500";
+      case "skipped":
+        return "bg-gray-600 border-gray-500 opacity-50";
+      default:
+        return "bg-gray-700 border-gray-600";
+    }
+  };
+  return (
+    <div className="w-3/4 h-full mx-auto space-y-4">
+      <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
+        <h3 className="text-sm font-bold mb-3 text-white">Items (Sorted by Value/Weight Ratio)</h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+          {step.items?.map((item, idx) => {
+            const status = getItemStatus(item);
+            const selected = selectedItems.find(si => si.index === item.index);
+            return (
+              <div
+                key={item.index}
+                className={`border rounded p-2 transition-colors duration-200 ${getItemClass(status)}`}
+              >
+                <div className="flex justify-between items-center mb-1">
+                  <div className="font-bold text-white text-xs">Item {item.index + 1}</div>
+                  <div className="text-xs bg-white/20 px-1 py-0.5 rounded text-white">
+                    {item.ratio.toFixed(2)}
+                  </div>
+                </div>
+                <div className="space-y-0.5 text-xs text-white">
+                  <div className="flex justify-between">
+                    <span>W:</span>
+                    <span className="font-semibold">{item.weight}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>V:</span>
+                    <span className="font-semibold">{item.value}</span>
+                  </div>
+                  {selected && (
+                    <div className="border-t border-white/20 pt-1 mt-1">
+                      <div className="text-xs font-bold">
+                        {selected.fraction === 1.0 
+                          ? "100%" 
+                          : `${(selected.fraction * 100).toFixed(0)}%`}
+                      </div>
+                      <div className="text-xs">
+                        {selected.actualWeight.toFixed(1)}kg
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
+        <h3 className="text-sm font-bold mb-3 text-white">Knapsack</h3>
+        <div className="space-y-3">
+          <div>
+            <div className="flex justify-between text-xs mb-1 text-gray-300">
+              <span>Capacity</span>
+              <span className="font-semibold text-white">
+                {usedCapacity.toFixed(1)} / {capacity} kg
+              </span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-8 overflow-hidden border border-gray-600">
+              <div
+                className="h-full bg-green-600 flex items-center justify-center text-white font-bold text-xs transition-all duration-300"
+                style={{ width: `${Math.min((usedCapacity / capacity) * 100, 100)}%` }}>
+                {capacity > 0 ? ((usedCapacity / capacity) * 100).toFixed(0) : 0}%
+              </div>
+            </div>
+          </div>
+          {selectedItems.length > 0 && (
+            <div className="mt-2">
+              <h4 className="text-xs font-semibold text-gray-300 mb-2">Selected Items:</h4>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+                {selectedItems.map((item, idx) => (
+                  <div
+                    key={idx}
+                    className={`p-2 rounded border text-xs ${
+                      item.fraction === 1.0
+                        ? "bg-green-600/30 border-green-500"
+                        : "bg-yellow-600/30 border-yellow-500"
+                    }`}
+                  >
+                    <div className="text-white">
+                      <div className="font-semibold">Item {item.index + 1}</div>
+                      <div className="text-gray-300 text-xs">
+                        {item.fraction === 1.0 ? "Full" : `${(item.fraction * 100).toFixed(0)}%`}
+                      </div>
+                      <div className="text-xs mt-1">
+                        {item.actualWeight.toFixed(1)}kg
+                      </div>
+                      <div className="text-xs text-gray-300">
+                        V: {item.actualValue.toFixed(1)}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="mt-3 p-3 rounded borde">
+            <div className="flex gap-4 items-center">
+              <span className="text-sm font-semibold text-white">Total Value:</span>
+              <span className="text-xl font-bold text-white">{totalValue.toFixed(2)}</span>
+            </div>
+            {remainingCapacity > 0 && step.type === "complete" && (
+              <div className="text-xs text-gray-300 mt-1">
+                Remaining: {remainingCapacity.toFixed(1)} kg
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/pages/Homepage.jsx

@@ -89,6 +89,15 @@ const sections = [
     link: "/tree",
     flag: false,
   },
+  {
+    title: "Greedy Algorithms",
+    description:
+      "Watch how greedy choices lead to optimal solutions in problems like Fractional Knapsack.",
+    phase: "Phase 2",
+    img: "",
+    link: "/greedy",
+    flag: false,
+  },
 ];
 
 const Homepage = () => {