Skip to content

Commit cfda0b8

Browse files
Sohan-RoutSohan-Rout
committed
Feat : added edits to is empty of stack
1 parent 9d1c794 commit cfda0b8

File tree

8 files changed

+326
-232
lines changed

8 files changed

+326
-232
lines changed

‎app/visualizer/stack/isempty/page.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const metadata = {
3737
url: "/og/stack/isEmpty.png",
3838
width: 1200,
3939
height: 630,
40-
alt: "Stack Peek Visualization",
40+
alt: "Stack isEmpty Visualization",
4141
},
4242
],
4343
},

‎app/visualizer/stack/isfull/animation.jsx‎

Lines changed: 145 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,161 @@
1-
'use client';
2-
import React, { useState, useEffect } from 'react';
3-
import Footer from '@/app/components/footer';
4-
import Content from '@/app/visualizer/stack/isfull/content';
5-
import CodeBlock from '@/app/visualizer/stack/isfull/codeBlock';
6-
import ExploreOther from '@/app/components/ui/exploreOther';
7-
import PushPop from '@/app/components/ui/PushPop';
8-
import GoBackButton from "@/app/components/ui/goback";
9-
import Quiz from '@/app/visualizer/stack/isfull/quiz';
10-
import BackToTop from '@/app/components/ui/backtotop';
1+
"use client";
2+
import React, { useState, useEffect } from "react";
3+
import PushPop from "@/app/components/ui/PushPop";
114

125
const StackVisualizer = () => {
13-
const [stack, setStack] = useState([]);
14-
const [operation, setOperation] = useState(null);
15-
const [message, setMessage] = useState('Stack is empty');
16-
const [isAnimating, setIsAnimating] = useState(false);
17-
const [stackLimit] = useState(5); // Set stack capacity
18-
const [isFull, setIsFull] = useState(false);
19-
20-
// Check if stack is full
21-
const checkIfFull = () => {
22-
setIsAnimating(true);
23-
setOperation('Checking if stack is full...');
24-
25-
setTimeout(() => {
26-
const fullStatus = stack.length >= stackLimit;
27-
setIsFull(fullStatus);
28-
setOperation(null);
29-
setMessage(fullStatus ? 'Stack is FULL!' : 'Stack is NOT full');
30-
setIsAnimating(false);
31-
}, 1000);
32-
};
33-
34-
// Reset stack
35-
const reset = () => {
36-
setStack([]);
37-
setMessage('Stack is empty');
38-
setOperation(null);
39-
setIsFull(false);
40-
};
41-
42-
// Effect to update isFull status when stack changes
43-
useEffect(() => {
44-
setIsFull(stack.length >= stackLimit);
45-
}, [stack, stackLimit]);
46-
47-
return (
48-
<div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
49-
<main className="container mx-auto px-6 pt-16 pb-4">
50-
{/* go back block here */}
51-
<div className="mt-10 sm:mt-10">
52-
<GoBackButton />
53-
</div>
54-
55-
{/* main logic here */}
56-
<h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
57-
<span className="text-black dark:text-white">Stack IsFull</span>
58-
</h1>
59-
<div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
60-
<Content />
61-
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
62-
Visualize the LIFO (Last In, First Out) principle
63-
</p>
64-
65-
<div className="max-w-md mx-auto">
66-
{/* Use the PushPop component */}
67-
<PushPop
68-
stack={stack}
69-
setStack={setStack}
70-
isAnimating={isAnimating}
71-
setIsAnimating={setIsAnimating}
72-
setMessage={setMessage}
73-
setOperation={setOperation}
74-
stackLimit={stackLimit}
75-
/>
76-
77-
{/* Is Full Check Button */}
78-
<button
79-
onClick={checkIfFull}
80-
disabled={isAnimating}
81-
className="w-full mb-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded disabled:opacity-50"
6+
const [stack, setStack] = useState([]);
7+
const [operation, setOperation] = useState(null);
8+
const [message, setMessage] = useState("Stack is empty");
9+
const [isAnimating, setIsAnimating] = useState(false);
10+
const [stackLimit] = useState(5); // Set stack capacity
11+
const [isFull, setIsFull] = useState(false);
12+
13+
// Check if stack is full
14+
const checkIfFull = () => {
15+
setIsAnimating(true);
16+
setOperation("Checking if stack is full...");
17+
18+
setTimeout(() => {
19+
const fullStatus = stack.length >= stackLimit;
20+
setIsFull(fullStatus);
21+
setOperation(null);
22+
setMessage(fullStatus ? "Stack is FULL!" : "Stack is NOT full");
23+
setIsAnimating(false);
24+
}, 1000);
25+
};
26+
27+
// Reset stack
28+
const reset = () => {
29+
setStack([]);
30+
setMessage("Stack is empty");
31+
setOperation(null);
32+
setIsFull(false);
33+
};
34+
35+
// Effect to update isFull status when stack changes
36+
useEffect(() => {
37+
setIsFull(stack.length >= stackLimit);
38+
}, [stack, stackLimit]);
39+
40+
return (
41+
<main className="container mx-auto px-6 pb-6">
42+
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
43+
Visualize the LIFO (Last In, First Out) principle
44+
</p>
45+
46+
<div className="max-w-md mx-auto">
47+
{/* Use the PushPop component */}
48+
<PushPop
49+
stack={stack}
50+
setStack={setStack}
51+
isAnimating={isAnimating}
52+
setIsAnimating={setIsAnimating}
53+
setMessage={setMessage}
54+
setOperation={setOperation}
55+
stackLimit={stackLimit}
56+
/>
57+
58+
{/* Is Full Check Button */}
59+
<button
60+
onClick={checkIfFull}
61+
disabled={isAnimating}
62+
className="w-full mb-4 duration-300 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
63+
>
64+
Check If Full
65+
</button>
66+
67+
{/* Stack Visualization */}
68+
<div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
69+
<h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
70+
71+
{/* Operation Status */}
72+
{operation && (
73+
<div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
74+
{operation}
75+
</div>
76+
)}
77+
78+
{/* Message Display */}
79+
{message && (
80+
<div
81+
className={`mb-4 p-3 rounded-lg ${
82+
message.includes("pushed")
83+
? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
84+
: message.includes("popped")
85+
? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
86+
: message.includes("Peek")
87+
? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
88+
: message.includes("FULL")
89+
? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
90+
: "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200"
91+
}`}
8292
>
83-
Check If Full
84-
</button>
85-
86-
{/* Stack Visualization */}
87-
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
88-
<h2 className="text-xl font-semibold mb-4">
89-
Stack Visualization
90-
</h2>
91-
92-
{/* Operation Status */}
93-
{operation && (
94-
<div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
95-
{operation}
96-
</div>
97-
)}
93+
{message}
94+
</div>
95+
)}
9896

99-
{/* Message Display */}
100-
{message && (
101-
<div
102-
className={`mb-4 p-3 rounded-lg ${
103-
message.includes("pushed")
104-
? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
105-
: message.includes("popped")
106-
? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
107-
: message.includes("Peek")
108-
? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
109-
: message.includes("FULL")
110-
? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
111-
: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
112-
}`}
113-
>
114-
{message}
115-
</div>
116-
)}
97+
{/* Stack capacity indicator */}
98+
<div className="mb-4 text-center text-sm">
99+
Capacity: {stack.length}/{stackLimit}
100+
</div>
117101

118-
{/* Stack capacity indicator */}
119-
<div className="mb-4 text-center text-sm">
120-
Capacity: {stack.length}/{stackLimit}
121-
</div>
102+
{/* Vertical Stack */}
103+
<div className="flex flex-col items-center min-h-[300px]">
104+
{/* Top indicator */}
105+
<div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
106+
{stack.length > 0 ? "↑ Top" : ""}
107+
</div>
122108

123-
{/* Vertical Stack */}
124-
<div className="flex flex-col items-center min-h-[300px]">
125-
{/* Top indicator */}
126-
<div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
127-
{stack.length > 0 ? "↑ Top" : ""}
109+
{/* Stack elements with full state animation */}
110+
<div className="w-32 relative">
111+
{stack.length === 0 ? (
112+
<div className="text-center py-8 text-gray-500">
113+
Stack is empty
128114
</div>
129-
130-
{/* Stack elements with full state animation */}
131-
<div className="w-32 relative">
132-
{stack.length === 0 ? (
133-
<div className="text-center py-8 text-gray-500">
134-
Stack is empty
135-
</div>
136-
) : (
137-
<div className="space-y-1">
138-
{stack.map((item, index) => (
139-
<div
140-
key={index}
141-
className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
142-
index === 0
143-
? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
144-
: "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
145-
} ${
146-
isAnimating &&
147-
index === 0 &&
148-
operation?.includes("Peek")
149-
? "animate-pulse"
150-
: isAnimating && index === 0
151-
? "animate-bounce"
152-
: ""
153-
} ${
154-
isFull && isAnimating && operation?.includes("full")
155-
? "border-red-500 dark:border-red-500 animate-pulse"
156-
: ""
157-
}`}
158-
>
159-
{item}
160-
{index === 0 && (
161-
<div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
162-
(Top)
163-
</div>
164-
)}
115+
) : (
116+
<div className="space-y-1">
117+
{stack.map((item, index) => (
118+
<div
119+
key={index}
120+
className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
121+
index === 0
122+
? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
123+
: "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
124+
} ${
125+
isAnimating &&
126+
index === 0 &&
127+
operation?.includes("Peek")
128+
? "animate-pulse"
129+
: isAnimating && index === 0
130+
? "animate-bounce"
131+
: ""
132+
} ${
133+
isFull && isAnimating && operation?.includes("full")
134+
? "border-red-500 dark:border-red-500 animate-pulse"
135+
: ""
136+
}`}
137+
>
138+
{item}
139+
{index === 0 && (
140+
<div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
141+
(Top)
165142
</div>
166-
))}
143+
)}
167144
</div>
168-
)}
145+
))}
169146
</div>
147+
)}
148+
</div>
170149

171-
{/* Bottom indicator */}
172-
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
173-
{stack.length > 0 ? "↓ Bottom" : ""}
174-
</div>
175-
</div>
150+
{/* Bottom indicator */}
151+
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
152+
{stack.length > 0 ? "↓ Bottom" : ""}
176153
</div>
177154
</div>
178-
179-
{/* quiz block here */}
180-
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
181-
Test Your Knowledge before moving forward!
182-
</p>
183-
<Quiz />
184-
185-
<CodeBlock />
186-
<ExploreOther
187-
title="Explore other operations"
188-
links={[
189-
{ text: "Peek", url: "/visualizer/stack/peek" },
190-
{ text: "Is Empty", url: "/visualizer/stack/isempty" },
191-
{ text: "Push Pop", url: "/visualizer/stack/push-pop" },
192-
]}
193-
/>
194-
</main>
195-
<div className="bg-gray-700 z-10 h-[1px]"></div>
196-
<BackToTop/>
197-
<Footer />
155+
</div>
198156
</div>
199-
);
157+
</main>
158+
);
200159
};
201160

202-
export default StackVisualizer;
161+
export default StackVisualizer;

‎app/visualizer/stack/isfull/codeBlock.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -390,10 +390,10 @@ int main() {
390390
initial={{ opacity: 0, y: 20 }}
391391
animate={{ opacity: 1, y: 0 }}
392392
transition={{ duration: 0.3 }}
393-
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"
393+
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"
394394
>
395395
{/* Header */}
396-
<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">
396+
<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">
397397
<div className="flex items-center mb-2 sm:mb-0">
398398
<FaCode className="text-blue-500 mr-2 text-lg" />
399399
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">

0 commit comments

Comments
 (0)