Skip to content

Main1 #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sohan-Rout merged 2 commits into from
Aug 30, 2025
Merged

Main1 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfda0b8
Feat : added edits to is empty of stack
Sohan-Rout Aug 30, 2025
ccc8d45
Fix : added graph
Sohan-Rout Aug 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/visualizer/stack/isempty/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const metadata = {
url: "/og/stack/isEmpty.png",
width: 1200,
height: 630,
alt: "Stack Peek Visualization",
alt: "Stack isEmpty Visualization",
},
],
},
Expand Down
331 changes: 145 additions & 186 deletions app/visualizer/stack/isfull/animation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,202 +1,161 @@
'use client';
import React, { useState, useEffect } from 'react';
import Footer from '@/app/components/footer';
import Content from '@/app/visualizer/stack/isfull/content';
import CodeBlock from '@/app/visualizer/stack/isfull/codeBlock';
import ExploreOther from '@/app/components/ui/exploreOther';
import PushPop from '@/app/components/ui/PushPop';
import GoBackButton from "@/app/components/ui/goback";
import Quiz from '@/app/visualizer/stack/isfull/quiz';
import BackToTop from '@/app/components/ui/backtotop';
"use client";
import React, { useState, useEffect } from "react";
import PushPop from "@/app/components/ui/PushPop";

const StackVisualizer = () => {
const [stack, setStack] = useState([]);
const [operation, setOperation] = useState(null);
const [message, setMessage] = useState('Stack is empty');
const [isAnimating, setIsAnimating] = useState(false);
const [stackLimit] = useState(5); // Set stack capacity
const [isFull, setIsFull] = useState(false);

// Check if stack is full
const checkIfFull = () => {
setIsAnimating(true);
setOperation('Checking if stack is full...');

setTimeout(() => {
const fullStatus = stack.length >= stackLimit;
setIsFull(fullStatus);
setOperation(null);
setMessage(fullStatus ? 'Stack is FULL!' : 'Stack is NOT full');
setIsAnimating(false);
}, 1000);
};

// Reset stack
const reset = () => {
setStack([]);
setMessage('Stack is empty');
setOperation(null);
setIsFull(false);
};

// Effect to update isFull status when stack changes
useEffect(() => {
setIsFull(stack.length >= stackLimit);
}, [stack, stackLimit]);

return (
<div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
<main className="container mx-auto px-6 pt-16 pb-4">
{/* go back block here */}
<div className="mt-10 sm:mt-10">
<GoBackButton />
</div>

{/* main logic here */}
<h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
<span className="text-black dark:text-white">Stack IsFull</span>
</h1>
<div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
<Content />
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
Visualize the LIFO (Last In, First Out) principle
</p>

<div className="max-w-md mx-auto">
{/* Use the PushPop component */}
<PushPop
stack={stack}
setStack={setStack}
isAnimating={isAnimating}
setIsAnimating={setIsAnimating}
setMessage={setMessage}
setOperation={setOperation}
stackLimit={stackLimit}
/>

{/* Is Full Check Button */}
<button
onClick={checkIfFull}
disabled={isAnimating}
className="w-full mb-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded disabled:opacity-50"
const [stack, setStack] = useState([]);
const [operation, setOperation] = useState(null);
const [message, setMessage] = useState("Stack is empty");
const [isAnimating, setIsAnimating] = useState(false);
const [stackLimit] = useState(5); // Set stack capacity
const [isFull, setIsFull] = useState(false);

// Check if stack is full
const checkIfFull = () => {
setIsAnimating(true);
setOperation("Checking if stack is full...");

setTimeout(() => {
const fullStatus = stack.length >= stackLimit;
setIsFull(fullStatus);
setOperation(null);
setMessage(fullStatus ? "Stack is FULL!" : "Stack is NOT full");
setIsAnimating(false);
}, 1000);
};

// Reset stack
const reset = () => {
setStack([]);
setMessage("Stack is empty");
setOperation(null);
setIsFull(false);
};

// Effect to update isFull status when stack changes
useEffect(() => {
setIsFull(stack.length >= stackLimit);
}, [stack, stackLimit]);

return (
<main className="container mx-auto px-6 pb-6">
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
Visualize the LIFO (Last In, First Out) principle
</p>

<div className="max-w-md mx-auto">
{/* Use the PushPop component */}
<PushPop
stack={stack}
setStack={setStack}
isAnimating={isAnimating}
setIsAnimating={setIsAnimating}
setMessage={setMessage}
setOperation={setOperation}
stackLimit={stackLimit}
/>

{/* Is Full Check Button */}
<button
onClick={checkIfFull}
disabled={isAnimating}
className="w-full mb-4 duration-300 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
>
Check If Full
</button>

{/* Stack Visualization */}
<div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>

{/* Operation Status */}
{operation && (
<div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
{operation}
</div>
)}

{/* Message Display */}
{message && (
<div
className={`mb-4 p-3 rounded-lg ${
message.includes("pushed")
? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
: message.includes("popped")
? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
: message.includes("Peek")
? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
: message.includes("FULL")
? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
: "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200"
}`}
>
Check If Full
</button>

{/* Stack Visualization */}
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<h2 className="text-xl font-semibold mb-4">
Stack Visualization
</h2>

{/* Operation Status */}
{operation && (
<div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
{operation}
</div>
)}
{message}
</div>
)}

{/* Message Display */}
{message && (
<div
className={`mb-4 p-3 rounded-lg ${
message.includes("pushed")
? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
: message.includes("popped")
? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
: message.includes("Peek")
? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
: message.includes("FULL")
? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
}`}
>
{message}
</div>
)}
{/* Stack capacity indicator */}
<div className="mb-4 text-center text-sm">
Capacity: {stack.length}/{stackLimit}
</div>

{/* Stack capacity indicator */}
<div className="mb-4 text-center text-sm">
Capacity: {stack.length}/{stackLimit}
</div>
{/* Vertical Stack */}
<div className="flex flex-col items-center min-h-[300px]">
{/* Top indicator */}
<div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
{stack.length > 0 ? "↑ Top" : ""}
</div>

{/* Vertical Stack */}
<div className="flex flex-col items-center min-h-[300px]">
{/* Top indicator */}
<div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
{stack.length > 0 ? "↑ Top" : ""}
{/* Stack elements with full state animation */}
<div className="w-32 relative">
{stack.length === 0 ? (
<div className="text-center py-8 text-gray-500">
Stack is empty
</div>

{/* Stack elements with full state animation */}
<div className="w-32 relative">
{stack.length === 0 ? (
<div className="text-center py-8 text-gray-500">
Stack is empty
</div>
) : (
<div className="space-y-1">
{stack.map((item, index) => (
<div
key={index}
className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
index === 0
? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
: "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
} ${
isAnimating &&
index === 0 &&
operation?.includes("Peek")
? "animate-pulse"
: isAnimating && index === 0
? "animate-bounce"
: ""
} ${
isFull && isAnimating && operation?.includes("full")
? "border-red-500 dark:border-red-500 animate-pulse"
: ""
}`}
>
{item}
{index === 0 && (
<div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
(Top)
</div>
)}
) : (
<div className="space-y-1">
{stack.map((item, index) => (
<div
key={index}
className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
index === 0
? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
: "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
} ${
isAnimating &&
index === 0 &&
operation?.includes("Peek")
? "animate-pulse"
: isAnimating && index === 0
? "animate-bounce"
: ""
} ${
isFull && isAnimating && operation?.includes("full")
? "border-red-500 dark:border-red-500 animate-pulse"
: ""
}`}
>
{item}
{index === 0 && (
<div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
(Top)
</div>
))}
)}
</div>
)}
))}
</div>
)}
</div>

{/* Bottom indicator */}
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
{stack.length > 0 ? "↓ Bottom" : ""}
</div>
</div>
{/* Bottom indicator */}
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
{stack.length > 0 ? "↓ Bottom" : ""}
</div>
</div>

{/* quiz block here */}
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
Test Your Knowledge before moving forward!
</p>
<Quiz />

<CodeBlock />
<ExploreOther
title="Explore other operations"
links={[
{ text: "Peek", url: "/visualizer/stack/peek" },
{ text: "Is Empty", url: "/visualizer/stack/isempty" },
{ text: "Push Pop", url: "/visualizer/stack/push-pop" },
]}
/>
</main>
<div className="bg-gray-700 z-10 h-[1px]"></div>
<BackToTop/>
<Footer />
</div>
</div>
);
</main>
);
};

export default StackVisualizer;
export default StackVisualizer;
4 changes: 2 additions & 2 deletions app/visualizer/stack/isfull/codeBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,10 +390,10 @@ int main() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
>
{/* Header */}
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-neutral-950 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center mb-2 sm:mb-0">
<FaCode className="text-blue-500 mr-2 text-lg" />
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
Expand Down
Loading
Loading