+ )
+}
+
diff --git a/src/components/custom-slider.jsx b/src/components/custom-slider.jsx
new file mode 100644
index 0000000..82bed58
--- /dev/null
+++ b/src/components/custom-slider.jsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import { Slider } from "@/components/ui/slider"
+
+
+export function CustomSlider({ title, onChange, min, max, step, defaultValue }) {
+ const [value, setValue] = React.useState(defaultValue)
+ const onChangeCover = (value) => {
+ setValue(value)
+ onChange(value)
+ }
+
+
+ return (
+
+ {/*
*/}
+ {title}
+ {value}
+
+ )
+}
+
diff --git a/src/components/custom-toggle.jsx b/src/components/custom-toggle.jsx
new file mode 100644
index 0000000..2c2e559
--- /dev/null
+++ b/src/components/custom-toggle.jsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Switch } from "@/components/ui/switch"
+
+// interface CustomToggleProps {
+// title: string
+// checked: boolean
+// onCheckedChange: (checked: boolean) => void
+// }
+
+export function CustomToggle({ title, onCheckedChange }) {
+ const [checked, setChecked] = React.useState(false)
+ const onCheckedChangeCover = (checked) => {
+ setChecked(checked)
+ onCheckedChange(checked)
+ }
+ return (
+
+
+ {title}
+
+
+ )
+}
+
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
new file mode 100644
index 0000000..836ef00
--- /dev/null
+++ b/src/components/navbar.jsx
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import { Button } from "@/components/ui/button"
+import { Github, Home } from 'lucide-react'
+
+export default function Navbar(props) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
new file mode 100644
index 0000000..bf3d2ef
--- /dev/null
+++ b/src/components/ui/button.jsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+ (
)
+ );
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx
new file mode 100644
index 0000000..2985cca
--- /dev/null
+++ b/src/components/ui/card.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..41ec05e
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+ return (
+ (
)
+ );
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
new file mode 100644
index 0000000..28d78ff
--- /dev/null
+++ b/src/components/ui/select.jsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+
span]:line-clamp-1",
+ className
+ )}
+ {...props}>
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
+}
diff --git a/src/components/ui/slider.jsx b/src/components/ui/slider.jsx
new file mode 100644
index 0000000..62048f3
--- /dev/null
+++ b/src/components/ui/slider.jsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+
+
+
+
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/src/components/ui/switch.jsx b/src/components/ui/switch.jsx
new file mode 100644
index 0000000..827b40d
--- /dev/null
+++ b/src/components/ui/switch.jsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+
+
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/convexHullComponents/convexHull.jsx b/src/convexHullComponents/convexHull.jsx
deleted file mode 100644
index 823fbd2..0000000
--- a/src/convexHullComponents/convexHull.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, {Component} from 'react';
-import MyTimer from "./timer";
-import Canvas from "./canvas";
-import Navbar from "./navbar";
-import Menu from "./menu";
-class ConvexHull extends Component {
- state={
- dots:[],
- lines:[],
- isALgoLive:false,
- width:100,
- height:100,
- isRunning:false,
- speed:100,
- number:50
-
- }
- constructor() {
- super();
- this.setState({width:window.innerWidth,height:window.innerHeight-200});
- }
- componentDidMount() {
- this.setState({width:window.innerWidth,height:window.innerHeight-100});
- }
- render() {
- return (
-
-
- );
- }
- handleValueIncease = (value) => {
- this.setState({number:value});
- this.handleRefreshDots();
- }
- changeSpeed = (speed) => {
- //console.log(typeof speed);
- this.setState({speed:600-speed*10});
- }
- handleAlgoStateChanged = (val) => {
- this.setState({isAlgoLive:val});
- }
- handleVisualize = () =>{
- this.setState({isRunning:true});
- }
- handleTurnOff = () =>{
- this.setState({onGoing:false});
- }
- handleRefreshDots = () =>{
- this.setState({isRunning:false});
- this.setState({dots:getNewDots(this.state.number)});
- }
-
- handleMoreDot = () =>{
- const row = Math.floor(Math.random()*400)+10;
- const col = Math.floor(Math.random()*400)+10;
- const dot = {
- row:row,
- col:col
- }
- const dots = this.state.dots;
- dots.push(dot);
- this.setState(dots);
- }
-}
-function getNewDots(number){
- const dots= [];
- for(let i = 0; i
{
- if( a.xx!==b.xx ){
- return a.xx-b.xx;
- } else{
- return a.yy - b.yy;
- }
- } );
- return dots;
-}
-function getDot(){
- const width = window.innerWidth-50;
- const height = window.innerHeight-250;
- const rowpos = Math.floor( Math.random()*height )+25;
- const colpos = Math.floor(Math.random()*width)+25;
- return {
- xx:colpos,
- yy:rowpos,
- }
-}
-export default ConvexHull;
\ No newline at end of file
diff --git a/src/convexHullComponents/menu.jsx b/src/convexHullComponents/menu.jsx
deleted file mode 100644
index d727f38..0000000
--- a/src/convexHullComponents/menu.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, {Component} from 'react';
-import DiscreteSlider from "./slider";
-class Menu extends Component {
- render() {
- return (
-
- Refresh
-
- Visualize Graham Scan
-
-
-
- );
- }
- isClickable = () =>{
- if( this.props.isDisabled ){
- return {cursor: "not-allowed"};
- } else{
- return {};
- }
- }
-}
-
-export default Menu;
\ No newline at end of file
diff --git a/src/convexHullComponents/navbar.jsx b/src/convexHullComponents/navbar.jsx
deleted file mode 100644
index 0058520..0000000
--- a/src/convexHullComponents/navbar.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from "react-router-dom";
-
-
-class Navbar extends Component {
- render() {
- return (
-
- Convex Hull
-
-
-
-
- Home
-
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/convexHullComponents/slider.jsx b/src/convexHullComponents/slider.jsx
deleted file mode 100644
index a62679e..0000000
--- a/src/convexHullComponents/slider.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/core/Slider';
-
-const useStyles = makeStyles({
- root: {
- width: 300,
- },
-});
-
-function valuetext(value) {
- return `${value}`;
-}
-
-
-export default function DiscreteSlider(props) {
- const classes = useStyles();
- const handleChange = (event) =>{
- if( event.target.innerText === "" ){
- return;
- }
- const num = parseInt(event.target.innerText,10);
- props.onChange(num);
- }
- return (
-
-
- {props.title}
-
-
- );
-}
diff --git a/src/convexHullComponents/style.css b/src/convexHullComponents/style.css
deleted file mode 100644
index 900357b..0000000
--- a/src/convexHullComponents/style.css
+++ /dev/null
@@ -1,2 +0,0 @@
-
-.canvas { position: absolute; left:0;top:10 }
\ No newline at end of file
diff --git a/src/homeComponents/about.jsx b/src/homeComponents/about.jsx
deleted file mode 100644
index 419047e..0000000
--- a/src/homeComponents/about.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, {Component} from 'react';
-
-class About extends Component {
- render() {
- return (
-
-
- About Page
-
-
- );
- }
-}
-
-export default About;
\ No newline at end of file
diff --git a/src/homeComponents/card.jsx b/src/homeComponents/card.jsx
deleted file mode 100644
index 98b00d0..0000000
--- a/src/homeComponents/card.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import clsx from 'clsx';
-import Collapse from '@material-ui/core/Collapse';
-import Card from "@material-ui/core/Card";
-import CardActionArea from "@material-ui/core/CardActionArea";
-import CardActions from '@material-ui/core/CardActions';
-import IconButton from '@material-ui/core/IconButton';
-import CardContent from "@material-ui/core/CardContent";
-import CardMedia from "@material-ui/core/CardMedia";
-import Typography from "@material-ui/core/Typography";
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import "./style.css";
-import "./images/graph.png";
-import {ExpandMore} from "@material-ui/icons";
-
-const useStyles = makeStyles({
- card: {
- minWidth: 350,
- maxWidth:350,
- minHeight:250,
- borderRadius: 5,
- '&:hover': {
- boxShadow: `0 6px 12px 0 #000000
- .rotate(-12)
- .darken(0.2)
- .fade(0.5)}`
- ,
- },
- },
- media: {
- height: 140
- },
- actionArea: {
- padding:15,
- transition: '0.2s',
- '&:hover': {
- transform: 'scale(1.1)',
-
- },
- },
-});
-
-export default function ImgMediaCard(props) {
- const classes = useStyles();
-
- return (
-
-
-
-
- {props.card.title}
-
-
- {props.card.description}
-
-
-
-
- );
-}
diff --git a/src/homeComponents/card2.jsx b/src/homeComponents/card2.jsx
deleted file mode 100644
index 8268017..0000000
--- a/src/homeComponents/card2.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import clsx from 'clsx';
-import Collapse from '@material-ui/core/Collapse';
-import Card from "@material-ui/core/Card";
-import CardActionArea from "@material-ui/core/CardActionArea";
-import CardActions from '@material-ui/core/CardActions';
-import IconButton from '@material-ui/core/IconButton';
-import CardContent from "@material-ui/core/CardContent";
-import CardMedia from "@material-ui/core/CardMedia";
-import Typography from "@material-ui/core/Typography";
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import CardHeader from '@material-ui/core/CardHeader';
-import "./style.css";
-import "./images/graph.png";
-import {ExpandMore} from "@material-ui/icons";
-import {Link} from "react-router-dom";
-
-const useStyles = makeStyles((theme) => ({
- card: {
- minWidth: 350,
- maxWidth:350,
- minHeight:200,
- borderRadius: 5,
- '&:hover': {
- boxShadow: `0 6px 12px 0 #000000
- .rotate(-12)
- .darken(0.2)
- .fade(0.5)}`
- ,
- },
- },
- media: {
- height: 100
- },
- expand: {
- transform: 'rotate(0deg)',
- marginLeft: 'auto',
- transition: theme.transitions.create('transform', {
- duration: theme.transitions.duration.shortest,
- }),
- },
- expandOpen: {
- transform: 'rotate(180deg)',
- },
- actionArea: {
- padding:15,
- transition: '0.2s',
- '&:hover': {
- transform: 'scale(1.1)',
-
- },
- },
-}));
-
-export default function ImgMediaCard2(props) {
- const classes = useStyles();
- const [expanded, setExpanded] = React.useState(false);
-
- const handleExpandClick = () => {
- setExpanded(!expanded);
- };
-
- return (
-
-
-
-
-
-
- {props.card.description}
-
-
-
-
-
- );
-}
diff --git a/src/homeComponents/cardDetails.js b/src/homeComponents/cardDetails.js
deleted file mode 100644
index 9ca6cde..0000000
--- a/src/homeComponents/cardDetails.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import graph from "./images/graph.png";
-import primes from "./images/primes.jpg";
-import sort from "./sort.png";
-import queen from "./images/queen.PNG";
-import binSearch from "./images/binaryTree.png";
-import convex from './images/convexHull.png';
-import puzzle from './images/15puzzle.PNG';
-import turing from './images/turing.jpg';
-import Recursion from './images/Recursion.jpg';
-export function getDetails(){
- return [
- {
- id:1,
- title:"Pathfinder",
- description:"Visualize graph algorithms like dijkstra, BFS, DFS",
- route:"/pathfinder",
- img:graph
- },
- {
- id:2,
- title:"Recursion Tree",
- description:"The process in which a function calls itself directly or indirectly is called recursion. Work in progress",
- route:"/graph",
- img:Recursion
- },
- {
- id:3,
- title:"Sorting Algorithm",
- description:"Compare different sorting algorithms",
- route:"/sort",
- img:sort
- },
- {
- id:4,
- title:"Recursive Sorting",
- description:"Compare different recursive sorting algorithms",
- route:"/recursivesort",
- img:sort
- },
- {
- id:5,
- title:"N Queen",
- description:"The N queens puzzle is the problem of placing N chess queens on an N*N chessboard so that no two queens threaten each other",
- route:"/nqueen",
- img:queen
- },
- {
- id:6,
- title:"Turing Machine",
- description:"A Turing machine is a mathematical model of computation that defines an abstract machine that manipulates symbols on a strip of tape according to a table of rules",
- route:"/turing",
- img:turing
- },
- {
- id:7,
- title:"Prime Numbers",
- description:"Visualize how Seive is better than brute force",
- route:"/prime",
- img:primes
- },
- {
- id:8,
- title:"Convex Hull",
- description:"The convex hull of a set of points is the smallest convex polygon that contains all the points of it",
- route:"/convexhull",
- img:convex
- },
- {
- id:9,
- title:"Binary Search",
- description:"Binary search is an efficient algorithm for finding an item from a sorted list of item",
- route:"/binarysearch",
- img:binSearch
- },
- {
- id:10,
- title:"15 Puzzle",
- description:"The 15 puzzle is a sliding puzzle having 15 square tiles numbered 1–15 in a frame that is 4 tiles high and 4 tiles wide, leaving one unoccupied tile position",
- route:"/15puzzle",
- img:puzzle
- }
-
- ]
-}
\ No newline at end of file
diff --git a/src/homeComponents/cards.jsx b/src/homeComponents/cards.jsx
deleted file mode 100644
index b03f3f7..0000000
--- a/src/homeComponents/cards.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, {Component} from 'react';
-import ImgMediaCard from "./card";
-import ImgMediaCard2 from "./card2";
-import "./style.css";
-import {Link} from "react-router-dom";
-import graph from "./images/graph.png";
-import primes from "./images/primes.jpg"
-import sort from "./sort.png"
-import queen from './images/queen.PNG'
-import binSearch from './images/binaryTree.png'
-import {getDetails} from "./cardDetails";
-import TextField from "@material-ui/core/TextField";
-class Cards extends Component {
-
- state = {
- cards:[],
- filter:""
- }
-
- componentDidMount() {
- this.setState({cards:getDetails()});
- }
- getData = (e)=>{
- console.log(e.target.value);
- this.setState({filter:e.target.value});
- }
- render() {
- return (
-
-
-
-
- {
- this.state.cards.filter((card) => card.title.toLowerCase().includes(this.state.filter.toLowerCase())||card.description.toLowerCase().includes(this.state.filter.toLowerCase())).map(card=>(
-
- ))
- }
-
-
- );
- }
-}
-
-export default Cards;
-/*
-
- */
\ No newline at end of file
diff --git a/src/homeComponents/footer.jsx b/src/homeComponents/footer.jsx
deleted file mode 100644
index f6ba635..0000000
--- a/src/homeComponents/footer.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import GitHubButton from 'react-github-btn'
-import "./style.css";
-class Footer extends Component {
- render() {
- return (
-
- );
- }
-}
-
-export default Footer;
\ No newline at end of file
diff --git a/src/homeComponents/greet.jsx b/src/homeComponents/greet.jsx
deleted file mode 100644
index bcfafcd..0000000
--- a/src/homeComponents/greet.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, {Component} from 'react';
-import "./style.css"
-class Greet extends Component {
- render() {
- return (
-
-
- Algorithm Visualizer
-
-
- Visualize algorithms for a better understanding
-
-
- );
- }
-}
-
-export default Greet;
\ No newline at end of file
diff --git a/src/homeComponents/home.jsx b/src/homeComponents/home.jsx
deleted file mode 100644
index 97e9dd4..0000000
--- a/src/homeComponents/home.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, {Component} from 'react';
-import Navbar from "./navbar";
-import Greet from "./greet";
-import TypeWriterC from "./typewriter";
-import Cards from "./cards";
-import Footer from "./footer";
-
-class Home extends Component {
- render() {
- return (
-
-
- );
- }
-}
-
-export default Home;
\ No newline at end of file
diff --git a/src/homeComponents/navbar.jsx b/src/homeComponents/navbar.jsx
deleted file mode 100644
index e168e1d..0000000
--- a/src/homeComponents/navbar.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-
-class Navbar extends Component {
- render() {
- return (
-
- Algorithm Visualizer
-
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/homeComponents/profile.jsx b/src/homeComponents/profile.jsx
deleted file mode 100644
index 8bf5588..0000000
--- a/src/homeComponents/profile.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, {Component} from 'react';
-
-class Profile extends Component {
- render() {
- return (
-
-
- Profile page
-
-
- );
- }
-}
-
-export default Profile;
\ No newline at end of file
diff --git a/src/homeComponents/searchText.jsx b/src/homeComponents/searchText.jsx
deleted file mode 100644
index 9036005..0000000
--- a/src/homeComponents/searchText.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-
-const useStyles = makeStyles((theme) => ({
- root: {
- '& > *': {
- margin: theme.spacing(1),
- width: '25ch',
- },
- },
-}));
-
-export default function BasicTextFields() {
- const classes = useStyles();
-
- return (
-
- );
-}
diff --git a/src/homeComponents/sort.png b/src/homeComponents/sort.png
deleted file mode 100644
index b4405fd..0000000
Binary files a/src/homeComponents/sort.png and /dev/null differ
diff --git a/src/homeComponents/style.css b/src/homeComponents/style.css
deleted file mode 100644
index b70acd1..0000000
--- a/src/homeComponents/style.css
+++ /dev/null
@@ -1,30 +0,0 @@
-
-.type{
- width: 100%;
- align-content: center;
- background-color: #282c34;
- text-align: center;
- font-family: "Roboto Slab ExtraLight";
-}
-
-.Cards{
- background-color: grey;
- align-items: center;
- align-self: center;
- align-content: center;
- position: center;
- child-align: middle;
-}
-.page-footer{
- background-color: #282c34;
-}
-.footer-copyright{
- color:white;
- background-color: black;
-}
-.greet{
- text-align: center;
- background-color: #434445;
- color: white;
- padding: 10px;
-}
diff --git a/src/homeComponents/typewriter.jsx b/src/homeComponents/typewriter.jsx
deleted file mode 100644
index 9a29db7..0000000
--- a/src/homeComponents/typewriter.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, {Component} from 'react';
-import Typewriter from "typewriter-effect";
-import './style.css'
-class TypeWriterC extends Component {
- state = {
-
- }
- render() {
- return (
-
-
-
-
- );
- }
-}
-
-export default TypeWriterC;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 8330e3d..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import 'bootstrap/dist/css/bootstrap.css';
-import 'fontsource-roboto';
-
-ReactDOM.render(
-
- ,
- document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/lib/algorithms/15puzzle.js b/src/lib/algorithms/15puzzle.js
new file mode 100644
index 0000000..d0973e5
--- /dev/null
+++ b/src/lib/algorithms/15puzzle.js
@@ -0,0 +1,127 @@
+/*
+let flag;
+const inf = 1010
+let dir = "LRUD";
+let dx = [0,0,-1,1];
+let dy = [-1,1,0,0];
+let len = [0,0,0,0];
+let str = new Array(60);
+let ar = new Array(4);
+let idx = new Array(4);
+let transpose = new Array(4);
+
+for (let i = 0; i < 4; i++) {
+ ar[i] = new Array(4);
+ idx[i] = new Array(4);
+ transpose[i] = new Array(4);
+}
+
+
+export function isSolvable(){
+
+}
+
+function row_conflict(rc){
+ let i, j, k, x, y, res = 0;
+
+ for (i = 0; i < 4; i++){
+ x = (ar[rc][i] >> 2);
+ if (ar[rc][i] != 16) idx[x][len[x]++] = ar[rc][i];
+ }
+
+ for (i = 0; i < 4; i++){
+ if (len[i] > 1){
+ for (j = 0; j < len[i]; j++){
+ for (k = j + 1; k < len[i]; k++){
+ if (idx[i][j] > idx[i][k]) res += 2;
+ }
+ }
+ }
+ len[i] = 0;
+ }
+ return res;
+}
+
+function column_conflict(rc){
+ let i, j, k, x, y, res = 0;
+
+ for (i = 0; i < 4; i++){
+ x = (ar[i][rc] & 3);
+ if (ar[i][rc] != 16) idx[x][len[x]++] = ar[i][rc];
+ }
+
+ for (i = 0; i < 4; i++){
+ if (len[i] > 1){
+ for (j = 0; j < len[i]; j++){
+ for (k = j + 1; k < len[i]; k++){
+ if (idx[i][j] > idx[i][k]) res += 2;
+ }
+ }
+ }
+ len[i] = 0;
+ }
+ return res;
+}
+
+let heuristic(bx, by){
+ let i, j, k, l, res, linear_conflict = 0, manhattan_distance = 0;
+
+ for (i = 0; i < 4; i++){
+ for (j = 0; j < 4; j++){
+ transpose[j][i] = ar[i][j];
+ if (ar[i][j] != 16){
+ manhattan_distance += F(i, j);
+ }
+ }
+ linear_conflict += row_conflict(i);
+ linear_conflict += column_conflict(i);
+ }
+
+ res = manhattan_distance + linear_conflict;
+ return res;
+}
+
+function ida(bx, by, lx, ly, g, lim, d, h){
+ if (flag) return 0;
+
+ if (!h){
+ if (!flag){
+ flag = true;
+ str[d] = 0;
+ //puts(str);
+ console.log(str);
+ }
+ return g;
+ }
+
+ let f = g + h;
+ if (f > lim) return f;
+
+ let i, k, l, nh, r, res = inf;
+ for (i = 0; i < 4; i++){
+ k = bx + dx[i], l = by + dy[i];
+ if (k >= 0 && k < 4 && l >= 0 && l < 4 && !(k === lx && l === ly)){
+ nh = h;
+ nh -= F(k, l);
+ if (bx !== k) nh -= row_conflict(bx), nh -= row_conflict(k);
+ if (by !== l) nh -= column_conflict(by), nh -= column_conflict(l);
+ swap(ar[bx][by], ar[k][l]);
+ let sw ;
+
+ nh += F(bx, by);
+ if (bx != k) nh += row_conflict(bx), nh += row_conflict(k);
+ if (by != l) nh += column_conflict(by), nh += column_conflict(l);
+
+ str[d] = dir[i];
+ r = ida(k, l, bx, by, g + 1, lim, d + 1, nh);
+ swap(ar[bx][by], ar[k][l]);
+ if (r < res) res = r;
+ if (r <= lim) return r;
+ }
+ }
+
+ return res;
+}
+
+
+ */
\ No newline at end of file
diff --git a/src/lib/algorithms/Astar.js b/src/lib/algorithms/Astar.js
new file mode 100644
index 0000000..1d3348f
--- /dev/null
+++ b/src/lib/algorithms/Astar.js
@@ -0,0 +1,67 @@
+// Performs Dijkstra's algorithm; returns *all* nodes in the order
+// in which they were visited. Also makes nodes point back to their
+// previous node, effectively allowing us to compute the shortest path
+// by backtracking from the finish node.
+export function aStar(grid, startNode, finishNode) {
+ const visitedNodesInOrder = [];
+ startNode.distance = 0;
+ const unvisitedNodes = getAllNodes(grid);
+ while (!!unvisitedNodes.length) {
+ sortNodesByDistance(unvisitedNodes,finishNode);
+ const closestNode = unvisitedNodes.shift();
+ // If we encounter a wall, we skip it.
+ if (closestNode.isWall) continue;
+ // If the closest node is at a distance of infinity,
+ // we must be trapped and should therefore stop.
+ if (closestNode.distance === Infinity) return visitedNodesInOrder;
+ closestNode.isVisited = true;
+ visitedNodesInOrder.push(closestNode);
+ if (closestNode === finishNode) return visitedNodesInOrder;
+ updateUnvisitedNeighbors(closestNode, grid);
+ }
+}
+
+function sortNodesByDistance(unvisitedNodes,finishNode) {
+ unvisitedNodes.sort((nodeA, nodeB) => (nodeA.distance+Math.abs(finishNode.row-nodeA.row)+Math.abs(finishNode.col-nodeA.col))
+ - (nodeB.distance+Math.abs(finishNode.row-nodeB.row)+Math.abs(finishNode.col-nodeB.col)));
+}
+
+function updateUnvisitedNeighbors(node, grid) {
+ const unvisitedNeighbors = getUnvisitedNeighbors(node, grid);
+ for (const neighbor of unvisitedNeighbors) {
+ neighbor.distance = node.distance + 1;
+ neighbor.previousNode = node;
+ }
+}
+
+function getUnvisitedNeighbors(node, grid) {
+ const neighbors = [];
+ const {col, row} = node;
+ if (row > 0) neighbors.push(grid[row - 1][col]);
+ if (row < grid.length - 1) neighbors.push(grid[row + 1][col]);
+ if (col > 0) neighbors.push(grid[row][col - 1]);
+ if (col < grid[0].length - 1) neighbors.push(grid[row][col + 1]);
+ return neighbors.filter(neighbor => !neighbor.isVisited);
+}
+
+function getAllNodes(grid) {
+ const nodes = [];
+ for (const row of grid) {
+ for (const node of row) {
+ nodes.push(node);
+ }
+ }
+ return nodes;
+}
+
+// Backtracks from the finishNode to find the shortest path.
+// Only works when called *after* the dijkstra method above.
+export function getNodesInShortestPathOrder(finishNode) {
+ const nodesInShortestPathOrder = [];
+ let currentNode = finishNode;
+ while (currentNode !== null) {
+ nodesInShortestPathOrder.unshift(currentNode);
+ currentNode = currentNode.previousNode;
+ }
+ return nodesInShortestPathOrder;
+}
diff --git a/src/algorithms/bfs.jsx b/src/lib/algorithms/bfs.jsx
similarity index 100%
rename from src/algorithms/bfs.jsx
rename to src/lib/algorithms/bfs.jsx
diff --git a/src/algorithms/dijkstra.js b/src/lib/algorithms/dijkstra.js
similarity index 100%
rename from src/algorithms/dijkstra.js
rename to src/lib/algorithms/dijkstra.js
diff --git a/src/algorithms/grahamScan.js b/src/lib/algorithms/grahamScan.js
similarity index 100%
rename from src/algorithms/grahamScan.js
rename to src/lib/algorithms/grahamScan.js
diff --git a/src/algorithms/heapSort.js b/src/lib/algorithms/heapSort.js
similarity index 100%
rename from src/algorithms/heapSort.js
rename to src/lib/algorithms/heapSort.js
diff --git a/src/algorithms/mergeSort.js b/src/lib/algorithms/mergeSort.js
similarity index 100%
rename from src/algorithms/mergeSort.js
rename to src/lib/algorithms/mergeSort.js
diff --git a/src/algorithms/prime.js b/src/lib/algorithms/prime.js
similarity index 100%
rename from src/algorithms/prime.js
rename to src/lib/algorithms/prime.js
diff --git a/src/algorithms/quickSort.js b/src/lib/algorithms/quickSort.js
similarity index 100%
rename from src/algorithms/quickSort.js
rename to src/lib/algorithms/quickSort.js
diff --git a/src/algorithms/quickSortRecursive.js b/src/lib/algorithms/quickSortRecursive.js
similarity index 100%
rename from src/algorithms/quickSortRecursive.js
rename to src/lib/algorithms/quickSortRecursive.js
diff --git a/src/algorithms/randomMaze.js b/src/lib/algorithms/randomMaze.js
similarity index 100%
rename from src/algorithms/randomMaze.js
rename to src/lib/algorithms/randomMaze.js
diff --git a/src/algorithms/recursiveMaze.js b/src/lib/algorithms/recursiveMaze.js
similarity index 100%
rename from src/algorithms/recursiveMaze.js
rename to src/lib/algorithms/recursiveMaze.js
diff --git a/src/algorithms/sortingAlgorithms.js b/src/lib/algorithms/sortingAlgorithms.js
similarity index 100%
rename from src/algorithms/sortingAlgorithms.js
rename to src/lib/algorithms/sortingAlgorithms.js
diff --git a/src/algorithms/turing.js b/src/lib/algorithms/turing.js
similarity index 100%
rename from src/algorithms/turing.js
rename to src/lib/algorithms/turing.js
diff --git a/src/helpers/array_helpers.js b/src/lib/helpers/array_helpers.js
similarity index 100%
rename from src/helpers/array_helpers.js
rename to src/lib/helpers/array_helpers.js
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..b20bf01
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
diff --git a/src/pathfinderComponents/menu.jsx b/src/pathfinderComponents/menu.jsx
deleted file mode 100644
index cb49949..0000000
--- a/src/pathfinderComponents/menu.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, {Component} from 'react';
-import SimpleSelect from "./simpleSelect";
-
-class Menu extends Component {
- render() {
- return (
-
-
- Create Maze
-
- Visualize
- Clear Path
- Clear Board
-
- );
- }
-}
-
-export default Menu;
\ No newline at end of file
diff --git a/src/pathfinderComponents/navbar.jsx b/src/pathfinderComponents/navbar.jsx
deleted file mode 100644
index a2c2ba4..0000000
--- a/src/pathfinderComponents/navbar.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, {Component} from 'react';
-import SimpleSelect from "./simpleSelect";
-import {Link} from "react-router-dom";
-
-class Navbar extends Component {
- render() {
- return (
-
- Pathfinder
-
-
-
-
- Home
-
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/pathfinderComponents/pathfinder.jsx b/src/pathfinderComponents/pathfinder.jsx
deleted file mode 100644
index 498dff6..0000000
--- a/src/pathfinderComponents/pathfinder.jsx
+++ /dev/null
@@ -1,304 +0,0 @@
-import React, {Component, Fragment} from 'react';
-import Grid from "./grid";
-import Navbar from "./navbar";
-import Menu from "./menu";
-import {dijkstra,getNodesInShortestPathOrder} from "../algorithms/dijkstra";
-import {getMaze} from "../algorithms/recursiveMaze";
-import {bfsdfs} from "../algorithms/bfs";
-import {randomMaze} from "../algorithms/randomMaze";
-
-class Pathfinder extends Component {
- constructor() {
- super();
- this.state = {
- grid:[],
- mouseIsPressed:false,
- algorithms:[
- "Dijsktra","BFS","DFS"
- ],
- algo:0,
- mazes:[
- "Recursive division","Random","Recursive Horizontal bias(NA)","Recursive Vertical bias(NA)"
- ],
- maze:0
- }
- }
- componentDidMount() {
- const width = window.innerWidth;
- const height = window.innerHeight;
- const row = Math.max(Math.floor(height/25)-7,10);
- const col = Math.floor(width/25);
- const startNode = {
- row:4,
- col:4
- };
- const endNode = {
- row: row-5,
- col: col-5
- }
- // console.log( endNode.row );
- const grid = getInitialGrid(row,col);
- grid[startNode.row][startNode.col].isStartNode = true;
- grid[row-5][col-5].isEndNode = true;
- this.setState({grid,row,col,startNode,endNode});
- }
-
- render() {
- return (
-
-
-
-
- );
- }
-
- handleMouseDown = (row, col) => {
- if((this.state.startNode.row!==row || this.state.startNode.col!==col) && (this.state.endNode.row!==row || this.state.endNode.col!==col) ){
- const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
- this.setState({grid:newGrid});
- }
- this.setState({mouseIsPressed: true});
- }
-
- handleMouseEnter = (row, col) => {
- if (this.state.mouseIsPressed === false) return;
- if((this.state.startNode.row!==row || this.state.startNode.col!==col) && (this.state.endNode.row!==row || this.state.endNode.col!==col) ){
- const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
- this.setState({grid:newGrid});
- }
- }
-
- handleMouseUp = (row,col) => {
- this.setState({mouseIsPressed: false});
- }
-
- handleAlgoChanged = (val) =>{
- this.setState({algo:val});
- }
-
- handleMazeChanged = (val)=>{
- this.setState({maze:val});
- }
-
- handleCreateMaze = () =>{
- let pairs;
- switch (this.state.maze){
- case 1:
- pairs= randomMaze(this.state.grid,this.state.row,this.state.col);
- break;
- default:
- pairs= getMaze(this.state.grid,this.state.row,this.state.col);
- }
- const {startNode,endNode} = this.state;
- for( let i = 0;i{
- if( i === pairs.length-1 ){
- // this.setState({grid:this.state.grid});
- const grid = this.state.grid;
- grid[ startNode.row ][startNode.col]={...grid[ startNode.row ][startNode.col],isWall: false};
- grid[endNode.row][endNode.col]={...grid[endNode.row][endNode.col],isWall: false};
- this.setState({grid});
- }
- if((pairs[i].xx!==startNode.row || pairs[i].yy!==startNode.col) && (pairs[i].xx!==endNode.row || pairs[i].yy!==endNode.col) ){
- document.getElementById(`node-${pairs[i].xx}-${pairs[i].yy}`).className = "node node-wall";
- }
- },i*20);
- }
- }
- handleClearBoard = ()=>{
- const {grid,row,col} = this.state;
- this.setState({grid:clearBoard(grid,row,col)});
- }
- handleClearPath = () =>{
- const {grid,row,col} = this.state;
- this.setState({grid:clearPath(grid,row,col)});
- }
- handleClick = () =>{
- /* for(let i = 0;i<20;i++){
- for(let j = 0; j<50;j++){
- document.getElementById(`node-${i}-${j}`).className = "node";
- }
- }*/
- this.visualizeDijkstra();
- /*for(let i = 0;i{
- const newGrid = toggleVisit(this.state.grid,i,j);
- this.setState({grid:newGrid});
- //document.getElementById(`node-${i}-${j}`).className = "node node-visited";
- },100*(i+j)+j);
- }
- }*/
- }
-
- visualizeDijkstra() {
- const {grid} = this.state;
- const startNode = grid[this.state.startNode.row][this.state.startNode.col];
- const finishNode = grid[this.state.endNode.row][this.state.endNode.col];
- let visitedNodesInOrder;
- switch (this.state.algo){
- case 0:
- visitedNodesInOrder = dijkstra(grid, startNode, finishNode);
- break;
- case 1:
- visitedNodesInOrder = bfsdfs(grid, startNode, finishNode,"bfs");
- break;
- default:
- visitedNodesInOrder = bfsdfs(grid, startNode, finishNode,"dfs");
- }
- const nodesInShortestPathOrder = getNodesInShortestPathOrder(finishNode);
- this.animateDijkstra(visitedNodesInOrder, nodesInShortestPathOrder);
- }
- async animateDijkstra(visitedNodesInOrder, nodesInShortestPathOrder) {
- for (let i = 0; i <= visitedNodesInOrder.length; i++) {
-
- if (i === visitedNodesInOrder.length) {
- // setTimeout(() => {
- await sleep(100);
- await this.animateShortestPath(nodesInShortestPathOrder);
-
- // }, 10 * (i+10));
- return;
- }
- // setTimeout(() => {
- const node = visitedNodesInOrder[i];
- const newGrid = toggleVisit(this.state.grid,node.row,node.col);
- //this.setState({grid:newGrid});
- document.getElementById(`node-${node.row}-${node.col}`).className =
- 'node node-visited';
- await sleep(10);
- // }, 10 * i);
- }
- }
-
- async animateShortestPath(nodesInShortestPathOrder) {
- const grid = this.state.grid;
- const newGrid = grid.slice();
- for (let i = 0; i < nodesInShortestPathOrder.length; i++) {
- // setTimeout(() => {
-
- const node = nodesInShortestPathOrder[i];
- const newNode = {...newGrid[node.row][node.col],ispathNode:true};
- newGrid[node.row][node.col] = newNode;
- if( i === nodesInShortestPathOrder.length-1 ){
- this.setState({grid:newGrid});
- }
- document.getElementById(`node-${node.row}-${node.col}`).className =
- 'node node-shortest-path';
- await sleep(50);
- //}, 50 * i);
- }
- }
-
-}
-
-const clearPath = (grid,row,col)=>{
- const newGrid = grid.slice();
- for(let i = 0;i < row ; i++){
- for( let j = 0;j < col; j++){
- const node = newGrid[i][j];
- const newNode = {
- ...node,
- distance:Infinity,
- visitedNode: false,
- isVisited:false,
- ispathNode:false,
- previousNode:null
-
- };
- newGrid[i][j] = newNode;
- }
- }
- return newGrid;
-}
-const clearBoard = (grid,row,col)=>{
- const newGrid = grid.slice();
- for(let i = 0;i < row ; i++){
- for( let j = 0;j < col; j++){
- const node = newGrid[i][j];
- const newNode = {
- ...node,
- isWall: false,
- distance:Infinity,
- visitedNode: false,
- isVisited:false,
- ispathNode:false,
- previousNode:null
-
- };
- newGrid[i][j] = newNode;
- }
- }
- return newGrid;
-}
-
-const toggleVisit = (grid,row,col) =>{
- const newGrid = grid.slice();
- const node = newGrid[row][col];
- const newNode = {
- ...node,
- visitedNode: !node.visitedNode
- };
- newGrid[row][col] = newNode;
- return newGrid;
-}
-const getNewGridWithWallToggled = (grid, row, col) => {
- const newGrid = grid.slice();
- const node = newGrid[row][col];
- const newNode = {
- ...node,
- isWall: true//!node.isWall,
- };
- newGrid[row][col] = newNode;
- return newGrid;
-};
-const getInitialGrid = (totRow,totCol) => {
- const grid = [];
- for (let row = 0; row < totRow; row++) {
- const currentRow = [];
- for (let col = 0; col < totCol; col++) {
- currentRow.push(createNode(row,col));
- }
- grid.push(currentRow);
- }
- return grid;
-}
-
-const createNode = (row,col)=>{
- return {
- row,
- col,
- isWall: false,
- isStartNode:false,
- isEndNode:false,
- distance:Infinity,
- visitedNode: false,
- isVisited:false,
- ispathNode:false,
- previousNode:null
- };
-}
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export default Pathfinder;
\ No newline at end of file
diff --git a/src/pathfinderComponents/simpleSelect.jsx b/src/pathfinderComponents/simpleSelect.jsx
deleted file mode 100644
index c70c814..0000000
--- a/src/pathfinderComponents/simpleSelect.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-
-const useStyles = makeStyles((theme) => ({
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectEmpty: {
- marginTop: theme.spacing(2),
- },
-}));
-
-const SimpleSelect = (props) => {
- const classes = useStyles();
- const [age, setAge] = React.useState('0');
-
- const handleChange = (event) => {
- setAge(event.target.value);
- props.onAlgoChanged(event.target.value);
- };
-
- return (
-
-
- Algorithm
-
- {props.items.map( (item,itemidx)=>{
- return(
- {item}
- );
- } )}
-
-
-
- );
-}
-
-export default SimpleSelect;
\ No newline at end of file
diff --git a/src/primeComponents/menu.jsx b/src/primeComponents/menu.jsx
deleted file mode 100644
index 23d5cd1..0000000
--- a/src/primeComponents/menu.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, {Component} from 'react';
-import DiscreteSlider from "./slider";
-import SimpleSelect from "./simpleSelect";
-
-class Menu extends Component {
- render() {
- return (
-
- Refresh
- Visualize
-
-
-
- );
- }
- isClickable = () =>{
- if( this.props.isDisabled ){
- return {cursor: "not-allowed"};
- } else{
- return {};
- }
- }
-}
-
-export default Menu;
\ No newline at end of file
diff --git a/src/primeComponents/navbar.jsx b/src/primeComponents/navbar.jsx
deleted file mode 100644
index e99816c..0000000
--- a/src/primeComponents/navbar.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from "react-router-dom";
-
-
-class Navbar extends Component {
- render() {
- return (
-
- Sieve
-
-
-
-
- Home
-
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/primeComponents/seive.jsx b/src/primeComponents/seive.jsx
deleted file mode 100644
index 1e8cd17..0000000
--- a/src/primeComponents/seive.jsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, {Component} from 'react';
-import Cells from "./cells";
-import Navbar from "./navbar";
-import DiscreteSlider from "./slider";
-import Menu from "./menu";
-import {seive} from "../algorithms/prime";
-import Spiral from "./spiral";
-
-class Seive extends Component {
- state = {
- number: 100,
- cells:[],
- isRunning:false,
- speed:500,
- primes:[],
- maxPrime:0,
- algo:0
- }
-
- constructor(props) {
- super(props);
- }
- componentDidMount() {
- const cells = getCells(this.state.number);
- this.setState({cells});
- }
- setAlgo = (pos, val) => {
- if (pos === 0) {
-
- this.setState({algo: val});
- // console.log(this.state.algo);
- }
- }
-
- render() {
- return (
-
-
{
- const speed = this.state.speed;
- this.setState({isRunning:true});
- const prime = [];
- for(let i = 0;i<=this.state.number;i++){
- prime.push(1);
- }
- prime[0] = prime[1] = 0;
- let changedCells = this.state.cells;
- let prevCheck = -1;
- let counter = 0;
- for( let i = 2; i<=this.state.number;i++){
- if( prime[i] === 1 ){
- // setTimeout(()=>{
- changedCells = getNewCellPrimeToggled(changedCells,i-1);
- this.setState({cells:changedCells});
- //},counter*speed);
- await sleep(this.state.speed);
- counter++;
- for(let j = i*i;j<=this.state.number;j+=i){
- //setTimeout(()=>{
- if( prevCheck!=-1 ){
- changedCells = getNewCellVisitingToggled(changedCells,prevCheck);
- }
- prevCheck = j-1;
- changedCells = getNewCellCheckToggled(changedCells,j-1);
- changedCells = getNewCellVisitingToggled(changedCells,prevCheck);
- this.setState({cells:changedCells});
- // },counter*speed);
- await sleep(this.state.speed);
- counter++;
- prime[j] = 0;
- }
- }
- }
- // setTimeout(()=>{
- changedCells = getNewCellVisitingToggled(changedCells,prevCheck);
- this.setState({cells:changedCells,isRunning:false});
- // },counter*speed);
- }
-}
-
-const getNewCellPrimeToggled = (cells,pos) =>{
- const newCells = cells.slice();
- const cell = newCells[pos];
- const newCell = {
- ...cell,
- isPrime:true
- }
- newCells[pos] = newCell;
- return newCells;
-}
-
-const getNewCellVisitingToggled = (cells,pos)=>{
- const newCells = cells.slice();
- const cell = newCells[pos];
- const newCell = {
- ...cell,
- isVisiting:!cell.isVisiting
- }
- newCells[pos] = newCell;
- return newCells;
-}
-
-const getNewCellCheckToggled = (cells,pos) =>{
- const newCells = cells.slice();
- const cell = newCells[pos];
- const newCell = {
- ...cell,
- isChecking:true
- }
- newCells[pos] = newCell;
- return newCells;
-}
-
-const getCells = (rows)=>{
- const cells = [];
- for(let cell = 1;cell<=rows;cell++){
- cells.push(createCell(cell))
- }
- return cells;
-}
-const createCell = (val)=>{
- return {
- val,
- isChecking:false,
- isVisiting:false,
- isPrime:false
- };
-}
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-export default Seive;
\ No newline at end of file
diff --git a/src/primeComponents/simpleSelect.jsx b/src/primeComponents/simpleSelect.jsx
deleted file mode 100644
index 0455e8a..0000000
--- a/src/primeComponents/simpleSelect.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-
-const useStyles = makeStyles((theme) => ({
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectEmpty: {
- marginTop: theme.spacing(2),
- },
-}));
-
-const SimpleSelect = (props) => {
- const classes = useStyles();
- const [age, setAge] = React.useState('0');
- const [state, setState] = React.useState({
- pos: props.pos,
- });
- const handleChange = (event) => {
-
-
- console.log('aa ',event.target.value);
- setAge(event.target.value);
- props.onAlgoChanged(state.pos,event.target.value);
- };
-
- return (
-
-
- Task
-
- Seive
- Archimedes Spiral
- {/*Bitwise AND */}
- {/*Bitwise OR */}
-
-
-
- );
-}
-
-export default SimpleSelect;
\ No newline at end of file
diff --git a/src/primeComponents/slider.jsx b/src/primeComponents/slider.jsx
deleted file mode 100644
index a62679e..0000000
--- a/src/primeComponents/slider.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/core/Slider';
-
-const useStyles = makeStyles({
- root: {
- width: 300,
- },
-});
-
-function valuetext(value) {
- return `${value}`;
-}
-
-
-export default function DiscreteSlider(props) {
- const classes = useStyles();
- const handleChange = (event) =>{
- if( event.target.innerText === "" ){
- return;
- }
- const num = parseInt(event.target.innerText,10);
- props.onChange(num);
- }
- return (
-
-
- {props.title}
-
-
- );
-}
diff --git a/src/primeComponents/spiral.jsx b/src/primeComponents/spiral.jsx
deleted file mode 100644
index d420157..0000000
--- a/src/primeComponents/spiral.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {Component} from 'react';
-import Cell from "./cell";
-
-class Spiral extends Component {
-
- render() {
- let Maxwidth = window.innerWidth;
- let MaxHeight = window.innerHeight;
-
- let width,height;
- let maxPrime = this.props.maxPrime;
- if( Maxwidth>MaxHeight ){
- let ratio = Maxwidth/MaxHeight;
- height = maxPrime;
- width = ratio*height;
- }else{
- let ratio = MaxHeight/Maxwidth;
- width = maxPrime;
- height = ratio*width;
-
- }
-
- // console.log(width,height);
- let radius = (Math.min(width,height))/300;
- return (
-
- {/*sdfsdfsdfsdfsdfsdf*/}
-
- {this.props.primes.map( (cell,cellidx)=>{
- return (
-
-
- );
- }
-}
-
-export default Spiral;
\ No newline at end of file
diff --git a/src/queenComponents/doubleSlider.jsx b/src/queenComponents/doubleSlider.jsx
deleted file mode 100644
index 0ef4295..0000000
--- a/src/queenComponents/doubleSlider.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import {makeStyles, withStyles} from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/core/Slider';
-
-const useStyles = makeStyles({
- root: {
- width: 200,
- },
-});
-
-
-const CSlider = withStyles({
- root: {
- // color: "#ffffff",
- height: 3,
- padding: "13px 0",
- },
- track: {
- height: 4,
- borderRadius: 2,
- },
- thumb: {
- backgroundColor: "#fff",
- //color: "#fff",
- },
-})(Slider);
-
-function valuetext(value) {
- return `${value}`;
-}
-
-
-
-export default function RangeSlider(props) {
- const classes = useStyles();
- const [value, setValue] = React.useState([20, 37]);
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
-
- };
- const handleCommit = (event, newValue) => {
- console.log(newValue);
- };
-
- return (
-
-
- Value range
-
-
- );
-}
diff --git a/src/queenComponents/formControlLabel.jsx b/src/queenComponents/formControlLabel.jsx
deleted file mode 100644
index f438eb4..0000000
--- a/src/queenComponents/formControlLabel.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-
-export default function SwitchLabels(props) {
- const [state, setState] = React.useState({
- checkedA: false,
- });
-
- const handleChange = (event) => {
- setState({ ...state, [event.target.name]: event.target.checked });
- props.onDoubleChange(event.target.checked);
- };
-
- return (
-
-
- );
-}
diff --git a/src/queenComponents/navbar.jsx b/src/queenComponents/navbar.jsx
deleted file mode 100644
index 258c3d3..0000000
--- a/src/queenComponents/navbar.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from "react-router-dom";
-
-class Navbar extends Component {
- render() {
- return (
-
- N Queen
-
-
-
-
- Home
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/queenComponents/queen.jpg b/src/queenComponents/queen.jpg
deleted file mode 100644
index 18e8327..0000000
Binary files a/src/queenComponents/queen.jpg and /dev/null differ
diff --git a/src/queenComponents/queen.jsx b/src/queenComponents/queen.jsx
deleted file mode 100644
index 254d2b9..0000000
--- a/src/queenComponents/queen.jsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, {Component} from 'react';
-import Cells from "./cells";
-import Navbar from "./navbar";
-import Menu from "./menu";
-
-class Queen extends Component {
- state={
- board:[],
- number:4,
- speed:490,
- isRunning:false
- }
-
- constructor(props) {
- super(props);
- }
- componentDidMount() {
- const board = getBoard(this.state.number);
- // board[3][3].isPresent = true;
- this.setState({board});
- }
-
- render() {
- return (
-
- );
- }
-
- handleStop =() =>{
- this.setState({isRunning:false});
- }
-
- handleSpeedChange = (val)=>{
- const speed = (100-val)*10;
- this.setState({speed});
- }
- handleQueenChange = (number)=>{
- this.setState({number});
- const board = getBoard(this.state.number);
- this.setState({board});
- }
- handleClear = () => {
- const board = getBoard(this.state.number);
- this.setState({board});
- }
- handleTurnOff = () => {
- const newBoard = turnOffAttack(this.state.board,this.state.number);
- this.setState({board:newBoard});
- }
- startAlgo = async ()=>{
- this.setState({isRunning:true});
- const newBoard = this.state.board.slice();
- await this.queensAlgo(newBoard,0);
- const newBoard2 = turnOffAttack(this.state.board,this.state.number);
- this.setState({board:newBoard2,isRunning:false});
- }
- queensAlgo = async (board,col) => {
-
- if( col>=this.state.number ){
- return true;
- }
-
- let newBoard = board.slice();
- for( let i = 0; i < this.state.number;i++ ){
-
-
- newBoard = turnOffAttack(newBoard,this.state.number);
- const result = getChecked(newBoard,i,col,this.state.number);
- newBoard = result[0];
-
- this.setState({board:newBoard});
- await sleep(this.state.speed);
- if( result[1] ){
- const res = await this.queensAlgo(newBoard,col+1)
- if( res === true){
- return true;
- }
- newBoard[i][col] = {...newBoard[i][col],isPresent:true,isCurrent:true};
- this.setState({board:newBoard});
- await sleep(this.state.speed);
- newBoard[i][col] = {...newBoard[i][col],isPresent:false,isCurrent:false};
- this.setState({board:newBoard});
-
- }
- newBoard[i][col] = {...newBoard[i][col],isPresent:false,isCurrent:false};
- newBoard = turnOffAttack(newBoard,this.state.number);
- this.setState({board:newBoard});
- await sleep(this.state.speed);
- }
- return false;
- }
-
-}
-
-export default Queen;
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-const turnOffAttack = (board,N) =>{
- const newBoard = board.slice();
- for( let i = 0;i{
- const newBoard = board.slice();
- let pos = true;
- // same col
- for( let i = 0;i < N;i++ ){
- if( newBoard[row][i].isPresent ){
- newBoard[row][i] = {...newBoard[row][i],isAttacked:true};
- pos = false;
- } else{
- newBoard[row][i] = {...newBoard[row][i],isChecked:true};
- }
- }
- // same row
- for( let i = 0;i < N;i++ ){
- if( newBoard[i][col].isPresent ){
- newBoard[i][col] = {...newBoard[i][col],isAttacked:true};
- pos = false;
- } else{
- newBoard[i][col] = {...newBoard[i][col],isChecked:true};
- }
- }
- for( let i = row,j = col; i >= 0 && j >= 0; i--, j--){
- if( newBoard[i][j].isPresent ){
- newBoard[i][j] = {...newBoard[i][j],isAttacked:true};
- pos = false;
- } else{
- newBoard[i][j] = {...newBoard[i][j],isChecked:true};
- }
- }
- for( let i = row,j = col; i = 0; i++, j--){
- if( newBoard[i][j].isPresent ){
- newBoard[i][j] = {...newBoard[i][j],isAttacked:true};
- pos = false;
- } else{
- newBoard[i][j] = {...newBoard[i][j],isChecked:true};
- }
- }
- for( let i = row,j = col; i =0 && j < N; i--, j++){
- if( newBoard[i][j].isPresent ){
- newBoard[i][j] = {...newBoard[i][j],isAttacked:true};
- pos = false;
- } else{
- newBoard[i][j] = {...newBoard[i][j],isChecked:true};
- }
- }
-
- newBoard[row][col] = {...newBoard[row][col],isPresent:true,isCurrent:true};
-
- return [newBoard,pos];
-}
-const getBoard = (N) =>{
- const rows = [];
- for( let i = 0;i{
- return{
- row,
- col,
- isPresent:false,
- isChecked:false,
- isAttacked:false,
- isCurrent:false
- }
-}
\ No newline at end of file
diff --git a/src/queenComponents/simpleSelect.jsx b/src/queenComponents/simpleSelect.jsx
deleted file mode 100644
index c94b8fe..0000000
--- a/src/queenComponents/simpleSelect.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-
-const useStyles = makeStyles((theme) => ({
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectEmpty: {
- marginTop: theme.spacing(2),
- },
-}));
-
-const SimpleSelect = (props) => {
- const classes = useStyles();
- const [age, setAge] = React.useState('0');
- const [state, setState] = React.useState({
- pos: props.pos,
- });
- const handleChange = (event) => {
- console.log(state.pos);
- setAge(event.target.value);
- props.onAlgoChanged(state.pos,event.target.value);
- };
-
- return (
-
-
- Algorithm
-
- Bubble Sort
- Selection Sort
- Insertion Sort
-
-
-
- );
-}
-
-export default SimpleSelect;
\ No newline at end of file
diff --git a/src/queenComponents/slider.jsx b/src/queenComponents/slider.jsx
deleted file mode 100644
index 32f2ff2..0000000
--- a/src/queenComponents/slider.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/core/Slider';
-
-const useStyles = makeStyles({
- root: {
- width: 200,
- },
-});
-
-function valuetext(value) {
- return `${value}`;
-}
-
-
-export default function DiscreteSlider(props) {
- const classes = useStyles();
- const handleChange = (event) =>{
- if( event.target.innerText === "" ){
- return;
- }
- const num = parseInt(event.target.innerText,10);
- props.onCountChange(num);
- }
- return (
-
-
-
- {props.title}
-
-
- );
-}
diff --git a/src/recursiveSortComponents/airBnbSlider.jsx b/src/recursiveSortComponents/airBnbSlider.jsx
deleted file mode 100644
index 3c34705..0000000
--- a/src/recursiveSortComponents/airBnbSlider.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
-
-const useStyles = makeStyles((theme) => ({
- root: {
- width: 300 + theme.spacing(3) * 2,
- },
- margin: {
- height: theme.spacing(3),
- },
-}));
-
-function ValueLabelComponent(props) {
- const { children, open, value } = props;
-
- return (
-
- {children}
-
- );
-}
-
-ValueLabelComponent.propTypes = {
- children: PropTypes.element.isRequired,
- open: PropTypes.bool.isRequired,
- value: PropTypes.number.isRequired,
-};
-
-
-
-
-const AirbnbSlider = withStyles({
- root: {
- color: '#3a8589',
- height: 3,
- padding: '13px 0',
- },
- thumb: {
- height: 27,
- width: 27,
- backgroundColor: '#fff',
- border: '1px solid currentColor',
- marginTop: -12,
- marginLeft: -13,
- boxShadow: '#ebebeb 0 2px 2px',
- '&:focus, &:hover, &$active': {
- boxShadow: '#ccc 0 2px 3px 1px',
- },
- '& .bar': {
- // display: inline-block !important;
- height: 9,
- width: 1,
- backgroundColor: 'currentColor',
- marginLeft: 1,
- marginRight: 1,
- },
- },
- active: {},
- track: {
- height: 3,
- },
- rail: {
- color: '#ffffff',
- opacity: 1,
- height: 3,
- },
-})(Slider);
-
-function AirbnbThumbComponent(props) {
- return (
-
-
- );
-}
-
-export default function CustomizedSlider() {
- const classes = useStyles();
-
- return (
-
-
Airbnb
-
(index === 0 ? 'Minimum price' : 'Maximum price')}
- defaultValue={[20, 40]}
- valueLabelDisplay="on"
- />
-
-
- Value range
-
-
- );
-}
diff --git a/src/recursiveSortComponents/formControlLabel.jsx b/src/recursiveSortComponents/formControlLabel.jsx
deleted file mode 100644
index f438eb4..0000000
--- a/src/recursiveSortComponents/formControlLabel.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-
-export default function SwitchLabels(props) {
- const [state, setState] = React.useState({
- checkedA: false,
- });
-
- const handleChange = (event) => {
- setState({ ...state, [event.target.name]: event.target.checked });
- props.onDoubleChange(event.target.checked);
- };
-
- return (
-
-
- );
-}
diff --git a/src/recursiveSortComponents/navbar.jsx b/src/recursiveSortComponents/navbar.jsx
deleted file mode 100644
index bbd929a..0000000
--- a/src/recursiveSortComponents/navbar.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from "react-router-dom";
-
-class Navbar extends Component {
- render() {
- return (
-
- Recursive Sorting Visualizer
-
-
-
-
- Home
-
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/recursiveSortComponents/rects.jsx b/src/recursiveSortComponents/rects.jsx
deleted file mode 100644
index 88eba3e..0000000
--- a/src/recursiveSortComponents/rects.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, {Component} from 'react';
-import Rect from "./rect";
-
-class Rects extends Component {
- render() {
- let margin = 5;
- if( this.props.rects.length>50 ){
- margin=1;
- }
- return (
-
- {this.props.rects.map( (rect,rectidx)=>{
- return (
-
- );
- }
-}
-
-export default Rects;
\ No newline at end of file
diff --git a/src/recursiveSortComponents/recursiveSort.js b/src/recursiveSortComponents/recursiveSort.js
deleted file mode 100644
index 7baba0e..0000000
--- a/src/recursiveSortComponents/recursiveSort.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, {Component} from 'react';
-import Rect from "./rect";
-import Rects from "./rects";
-import mergeSort from '../algorithms/mergeSort';
-import heapSort from "../algorithms/heapSort";
-import {quickSortRecursive} from "../algorithms/quickSortRecursive";
-import Navbar from "./navbar";
-import Menu from "./menu";
-
-class RecursiveSort extends Component {
- state = {
- count: 20,
- rects: [],
- speed: 50,
- isRunning: false,
- algo: 0
- }
-
- constructor() {
- super();
- }
-
- componentDidMount() {
- var rects = getInitialRects(this.state.count);
- this.setState({rects});
- /* var rects2 = rects.slice();
- console.log(rects2);
- rects = mergeSort(rects);
- console.log(rects);*/
-
- }
-
- render() {
- return (
-
-
-
-
- );
- }
-
- handleRandomize = () => {
- const rect = getInitialRects(this.state.count);
- this.setState({rects: rect});
- }
- handleRefresh = () => {
- const rects = this.state.rects;
- for (let i = 0; i < rects.length; i++) {
- const rect = {...rects[i], isSorted: false, isSorting: false}
- rects[i] = rect;
- }
- this.setState({rects});
- }
- handleCountChange = (val) => {
- this.setState({count: val});
- this.handleRandomize();
- }
- handleAlgoChanged = (pos, val) => {
- if (pos === 0) {
- // console.log("sup 0");
- this.setState({algo: val});
- }
- }
- handleSpeedChanged = (val) => {
- const speed = (110 - val);
- this.setState({speed});
- }
-
- handleSort = () => {
-
- this.setState({isRunning: true});
- let steps;
- let rects2;
- switch (this.state.algo) {
-
- case 0:
- steps = mergeSort(this.state.rects);
- this.handleMerge(steps);
- break;
- case 1:
- rects2 = this.state.rects.slice();
- steps = heapSort(rects2);
- this.handleHeap(steps);
- break;
- case 2:
- rects2 = this.state.rects.slice();
- steps = quickSortRecursive(rects2);
- this.handleQuick(steps);
- break;
- default:
- }
-
-
- }
-
- handleQuick = async (steps) =>{
- this.setState({isRunning: true});
- let prevRect = this.state.rects;
- for (let j = 0; j < this.state.count; j++) {
- prevRect[j] = {...prevRect[j], isLeft: false,isSorting: false,isRight:false,isRange:false,isSorted: false};
- }
- this.setState({rects: prevRect});
- let hasChanged = -1;
- let changed;
- for(let i=0;i{
- this.setState({isRunning: true});
- let prevRect = this.state.rects;
- for (let j = 0; j < this.state.count; j++) {
- prevRect[j] = {...prevRect[j], isLeft: false,isSorting: false,isRight:false,isRange:false,isSorted: false};
- }
- this.setState({rects: prevRect});
-
- for(let i = 0;i {
- this.setState({isRunning1: true});
-
- const {speed} = this.state;
-
- let prevRect = this.state.rects;
- for (let j = 0; j < this.state.count; j++) {
- prevRect[j] = {...prevRect[j], isLeft: false,isSorting: false,isRight:false,isRange:false,isSorted: false};
- }
- this.setState({rects: prevRect});
- await sleep(this.state.speed);
- // console.log("steps ", steps.length);
- for (let ii = 0; ii < steps.length; ii++) {
- let step = steps[ii];
- for (let i = 0; i < this.state.count; i++) {
- prevRect[i] = {...prevRect[i], isLeft: false,isSorting: false,isRight:false};
- }
- // console.log(step.left," ",step.mid," ",step.right);
- for (let i = step.left; i <= step.mid; i++) {
- prevRect[i] = {...prevRect[i], isLeft: true,isSorting: false};
- }
- for (let i = step.mid + 1; i <= step.right; i++) {
- prevRect[i] = {...prevRect[i], isRight: true,isLeft:false,isSorting: false};
- }
- this.setState({rects: prevRect});
- await sleep(this.state.speed);await sleep(this.state.speed);await sleep(this.state.speed);
- // console.log(step);
- for(let i= step.left;i<=step.right;i++){
- prevRect[i] = {...prevRect[i],width:step.val[i-step.left].width,isSorting: true };
- this.setState({rects: prevRect});
- await sleep(this.state.speed);
- }
-
- if (ii === steps.length - 1) {
-
- for (let i = 0; i < this.state.count; i++) {
- prevRect[i] = {...prevRect[i], isLeft: false,isSorting: false,isRight:false,isSorted: true};
- this.setState({rects: prevRect});
- await sleep(this.state.speed);
- }
- this.setState({isRunning: false});
- }
-
- this.setState({rects: prevRect});
- await sleep(this.state.speed);
- prevRect = this.state.rects;
- /* for (let i = 0; i < this.state.count; i++) {
- prevRect[i] = {...prevRect[i], isLeft: false,isSorting: false,isRight:false,isSorted: false};
- }*/
- this.setState({rects: prevRect});
- }
- }
-
-}
-
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-const getInitialRects = (tot) => {
- const rects = [];
- for (let i = 0; i < tot; i++) {
- rects.push(getRect());
- }
- return rects;
-}
-const getRect = () => {
- return {
- width: Math.floor(Math.random() * 200) + 50,
- isSorted: false,
- isSorting: false,
- isLeft: false,
- isRight: false
- }
-}
-
-export default RecursiveSort;
\ No newline at end of file
diff --git a/src/recursiveSortComponents/simpleSelect.jsx b/src/recursiveSortComponents/simpleSelect.jsx
deleted file mode 100644
index 9f5a290..0000000
--- a/src/recursiveSortComponents/simpleSelect.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-
-const useStyles = makeStyles((theme) => ({
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectEmpty: {
- marginTop: theme.spacing(2),
- },
-}));
-
-const SimpleSelect = (props) => {
- const classes = useStyles();
- const [age, setAge] = React.useState('0');
- const [state, setState] = React.useState({
- pos: props.pos,
- });
- const handleChange = (event) => {
- console.log(state.pos);
- setAge(event.target.value);
- props.onAlgoChanged(state.pos,event.target.value);
- };
-
- return (
-
-
- Algorithm
-
- Merge Sort
- Heap Sort
- Quick Sort
-
-
-
- );
-}
-
-export default SimpleSelect;
\ No newline at end of file
diff --git a/src/recursiveSortComponents/slider.jsx b/src/recursiveSortComponents/slider.jsx
deleted file mode 100644
index 32f2ff2..0000000
--- a/src/recursiveSortComponents/slider.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/core/Slider';
-
-const useStyles = makeStyles({
- root: {
- width: 200,
- },
-});
-
-function valuetext(value) {
- return `${value}`;
-}
-
-
-export default function DiscreteSlider(props) {
- const classes = useStyles();
- const handleChange = (event) =>{
- if( event.target.innerText === "" ){
- return;
- }
- const num = parseInt(event.target.innerText,10);
- props.onCountChange(num);
- }
- return (
-
-
-
- {props.title}
-
-
- );
-}
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/src/sortComponents/airBnbSlider.jsx b/src/sortComponents/airBnbSlider.jsx
deleted file mode 100644
index 3c34705..0000000
--- a/src/sortComponents/airBnbSlider.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
-
-const useStyles = makeStyles((theme) => ({
- root: {
- width: 300 + theme.spacing(3) * 2,
- },
- margin: {
- height: theme.spacing(3),
- },
-}));
-
-function ValueLabelComponent(props) {
- const { children, open, value } = props;
-
- return (
-
- {children}
-
- );
-}
-
-ValueLabelComponent.propTypes = {
- children: PropTypes.element.isRequired,
- open: PropTypes.bool.isRequired,
- value: PropTypes.number.isRequired,
-};
-
-
-
-
-const AirbnbSlider = withStyles({
- root: {
- color: '#3a8589',
- height: 3,
- padding: '13px 0',
- },
- thumb: {
- height: 27,
- width: 27,
- backgroundColor: '#fff',
- border: '1px solid currentColor',
- marginTop: -12,
- marginLeft: -13,
- boxShadow: '#ebebeb 0 2px 2px',
- '&:focus, &:hover, &$active': {
- boxShadow: '#ccc 0 2px 3px 1px',
- },
- '& .bar': {
- // display: inline-block !important;
- height: 9,
- width: 1,
- backgroundColor: 'currentColor',
- marginLeft: 1,
- marginRight: 1,
- },
- },
- active: {},
- track: {
- height: 3,
- },
- rail: {
- color: '#ffffff',
- opacity: 1,
- height: 3,
- },
-})(Slider);
-
-function AirbnbThumbComponent(props) {
- return (
-
-
- );
-}
-
-export default function CustomizedSlider() {
- const classes = useStyles();
-
- return (
-
-
Airbnb
-
(index === 0 ? 'Minimum price' : 'Maximum price')}
- defaultValue={[20, 40]}
- valueLabelDisplay="on"
- />
-
-
- Value range
-
-
- );
-}
diff --git a/src/sortComponents/formControlLabel.jsx b/src/sortComponents/formControlLabel.jsx
deleted file mode 100644
index f438eb4..0000000
--- a/src/sortComponents/formControlLabel.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-
-export default function SwitchLabels(props) {
- const [state, setState] = React.useState({
- checkedA: false,
- });
-
- const handleChange = (event) => {
- setState({ ...state, [event.target.name]: event.target.checked });
- props.onDoubleChange(event.target.checked);
- };
-
- return (
-
-
- );
-}
diff --git a/src/sortComponents/menu.jsx b/src/sortComponents/menu.jsx
deleted file mode 100644
index f1b00eb..0000000
--- a/src/sortComponents/menu.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, {Component} from 'react';
-import DiscreteSlider from "./slider";
-import SimpleSelect from "./simpleSelect";
-import CustomizedSlider from "./airBnbSlider";
-import RangeSlider from "./doubleSlider";
-import SwitchLabels from "./formControlLabel";
-
-
-class Menu extends Component {
- render() {
- return (
-
-
- Randomize
-
-
-
- Visualize
-
-
-
- );
- }
- isClickable = () =>{
- if( this.props.disable ){
- return {cursor: "not-allowed"};
- } else{
- return {};
- }
- }
-}
-
-
-export default Menu;
\ No newline at end of file
diff --git a/src/sortComponents/navbar.jsx b/src/sortComponents/navbar.jsx
deleted file mode 100644
index bc20b94..0000000
--- a/src/sortComponents/navbar.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from "react-router-dom";
-
-class Navbar extends Component {
- render() {
- return (
-
- Sorting Visualizer
-
-
-
-
- Home
-
-
-
-
-
- );
- }
-}
-
-export default Navbar;
\ No newline at end of file
diff --git a/src/sortComponents/rect.jsx b/src/sortComponents/rect.jsx
deleted file mode 100644
index 5b49fae..0000000
--- a/src/sortComponents/rect.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, {Component} from 'react';
-import './style.css';
-class Rect extends Component {
-
- render() {
- return (
-
-
-
- );
- }
- checkColor = () => {
- if( this.props.rect.isSorted ){
- return "green";
- } else if( this.props.rect.isSorting ){
- return "red";
- } else{
- return "black"
- }
- }
-}
-
-export default Rect;
\ No newline at end of file
diff --git a/src/sortComponents/rects.jsx b/src/sortComponents/rects.jsx
deleted file mode 100644
index c7757bc..0000000
--- a/src/sortComponents/rects.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, {Component} from 'react';
-import Rect from "./rect";
-import FlipMove from 'react-flip-move';
-
-class Rects extends Component {
- render() {
- let margin = 5;
- if( this.props.rects.length>50 ){
- margin=1;
- }
- return (
-
-
- {this.props.rects.map( (rect,rectidx)=>{
- return (
-
-
- );
- }
-}
-
-export default Rects;
\ No newline at end of file
diff --git a/src/sortComponents/simpleSelect.jsx b/src/sortComponents/simpleSelect.jsx
deleted file mode 100644
index 7da3d99..0000000
--- a/src/sortComponents/simpleSelect.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-
-const useStyles = makeStyles((theme) => ({
- formControl: {
- margin: theme.spacing(1),
- minWidth: 120,
- },
- selectEmpty: {
- marginTop: theme.spacing(2),
- },
-}));
-
-const SimpleSelect = (props) => {
- const classes = useStyles();
- const [age, setAge] = React.useState('0');
- const [state, setState] = React.useState({
- pos: props.pos,
- });
- const handleChange = (event) => {
- console.log(state.pos);
- setAge(event.target.value);
- props.onAlgoChanged(state.pos,event.target.value);
- };
-
- return (
-
-
- Algorithm
-
- Bubble Sort
- Selection Sort
- Insertion Sort
- Quick Sort
-
-
-
- );
-}
-
-export default SimpleSelect;
\ No newline at end of file
diff --git a/src/sortComponents/slider.jsx b/src/sortComponents/slider.jsx
deleted file mode 100644
index 32f2ff2..0000000
--- a/src/sortComponents/slider.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Slider from '@material-ui/core/Slider';
-
-const useStyles = makeStyles({
- root: {
- width: 200,
- },
-});
-
-function valuetext(value) {
- return `${value}`;
-}
-
-
-export default function DiscreteSlider(props) {
- const classes = useStyles();
- const handleChange = (event) =>{
- if( event.target.innerText === "" ){
- return;
- }
- const num = parseInt(event.target.innerText,10);
- props.onCountChange(num);
- }
- return (
-
-
-
- {props.title}
-
-
- );
-}
diff --git a/src/sortComponents/sort.js b/src/sortComponents/sort.js
deleted file mode 100644
index 9427659..0000000
--- a/src/sortComponents/sort.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import React, {Component} from 'react';
-
-import Rects from "./rects";
-import {bubbleSort,selectionSort,insertionSort} from "../algorithms/sortingAlgorithms";
-import {quickSort} from "../algorithms/quickSort";
-import Navbar from "./navbar";
-import Menu from "./menu";
-
-class Sort extends Component {
- state = {
- count:20,
- rects: [],
- rects2: [],
- doubles:false,
- speed:50,
- isRunning:false,
- isRunning1:false,
- isRunning2:false,
- algo1:0,
- algo2:0
- }
-
- componentDidMount() {
- const rect = getInitialRects(this.state.count);
- const rect2 = rect.slice();
- this.setState({rects:rect,rects2:rect2});
- }
-
- render() {
- return (
-
-
-
-
- );
- }
- handleRandomize = () => {
- const rect = getInitialRects(this.state.count);
- const rect2 = rect.slice();
- this.setState({rects:rect,rects2:rect2});
- }
- handleRefresh = () =>{
- const rects = this.state.rects;
- for(let i=0;i{
- this.setState({doubles:val});
- }
- handleCountChange = (val) => {
- this.setState({count:val});
- this.handleRandomize();
- }
- handleAlgoChanged = (pos,val) =>{
- if( pos === 0 ){
- this.setState({algo1:val});
- } else{
- this.setState({algo2:val});
- }
- }
- handleSpeedChanged = (val) =>{
- const speed = (760-val*7.5);
- this.setState({speed});
- }
- handleSort = () =>{
-
- this.setState({isRunning:true});
- let steps1;
- switch (this.state.algo1){
- case 0:
- steps1 = bubbleSort(this.state.rects);
- break;
- case 1:
- steps1 = selectionSort(this.state.rects);
- break;
- case 2:
- steps1 = insertionSort(this.state.rects);
- break;
- case 3:
- steps1 = quickSort(this.state.rects2);
- console.log(steps1)
- break;
- default:
- steps1 = bubbleSort(this.state.rects);
- break;
- }
- let steps2;
- if( this.state.doubles ){
-
- switch (this.state.algo2){
- case 0:
- steps2 = bubbleSort(this.state.rects2);
- break;
- case 1:
- steps2 = selectionSort(this.state.rects2);
- break;
- case 2:
- steps2 = insertionSort(this.state.rects2);
- break;
- case 3:
- steps2 = quickSort(this.state.rects2);
- break;
- default:
- steps2 = bubbleSort(this.state.rects2);
- break;
- }
-
- }
- this.handleFirst(steps1);
- if( this.state.doubles ) this.handleSecond(steps2);
- }
- handleFirst = async (steps) =>{
- // console.log("fsdfsdfsdfasdf");
- this.setState({isRunning1:true});
-
- // const steps = bubbleSort(this.state.rects);
- // console.log(steps.length);
- const prevRect = this.state.rects;
- for(let i = 0;i{
- if( i!==0 ){
- prevRect[steps[i-1].xx] = { ...prevRect[steps[i-1].xx],isSorting:false };
- prevRect[steps[i-1].yy] = { ...prevRect[steps[i-1].yy],isSorting:false };
- }
- if(steps[i].xx===steps[i].yy){
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorted:true,isSorting:false};
- }else if( steps[i].changed ){
- const recti = {...prevRect[steps[i].xx],isSorting:true};
- const rectj = {...prevRect[steps[i].yy],isSorting:true};
- prevRect[steps[i].yy] = recti;
- prevRect[steps[i].xx] = rectj;
- } else{
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorting:true};
- prevRect[steps[i].yy] = {...prevRect[steps[i].yy],isSorting:true};
- }
- if(i === steps.length-1){
- this.setState({isRunning1:false});
- if( this.state.isRunning2 === false ){
- this.setState({isRunning:false});
- }
- }
- /* if( i === (steps.length)-2 ){
- this.setState({isRunning1:false});
- if( this.state.isRunning2 === false ){
- this.setState({isRunning:false});
- }
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorting:false,isSorted:true};
- prevRect[steps[i].yy] = {...prevRect[steps[i].yy],isSorting:false,isSorted:true};
- }*/
- this.setState({rects:prevRect});
- await sleep(this.state.speed);
- // },i*speed);
- }
- }
- handleSecond = async (steps) =>{
- this.setState({isRunning2:true});
- const prevRect = this.state.rects2;
- for(let i = 0;i{
- if( i!==0 ){
- prevRect[steps[i-1].xx] = { ...prevRect[steps[i-1].xx],isSorting:false };
- prevRect[steps[i-1].yy] = { ...prevRect[steps[i-1].yy],isSorting:false };
- }
- if(steps[i].xx===steps[i].yy){
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorted:true,isSorting:false};
- }else if( steps[i].changed ){
- const recti = {...prevRect[steps[i].xx],isSorting:true};
- const rectj = {...prevRect[steps[i].yy],isSorting:true};
- prevRect[steps[i].yy] = recti;
- prevRect[steps[i].xx] = rectj;
- } else{
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorting:true};
- prevRect[steps[i].yy] = {...prevRect[steps[i].yy],isSorting:true};
- }
- if( i === steps.length-1 ){
- this.setState({isRunning2:false});
- if( this.state.isRunning1 === false ){
- this.setState({isRunning:false});
- }
- }
- /* if( i === (steps.length)-2 ){
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorting:false,isSorted:true};
- prevRect[steps[i].yy] = {...prevRect[steps[i].yy],isSorting:false,isSorted:true};
- this.setState({isRunning2:false});
- if( this.state.isRunning1 === false ){
- this.setState({isRunning:false});
- }
- }*/
- this.setState({rects2:prevRect});
- await sleep(this.state.speed);
- // },i*speed);
- }
- }
-
-
-}
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-const getInitialRects = (tot) => {
- const rects = [];
- for(let i = 0;i {
- return {
- width: Math.floor(Math.random() * 200)+50,
- isSorted:false,
- isSorting:false,
- kk:kk
- }
-}
-export default Sort;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..9420524
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))'
+ },
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ chart: {
+ '1': 'hsl(var(--chart-1))',
+ '2': 'hsl(var(--chart-2))',
+ '3': 'hsl(var(--chart-3))',
+ '4': 'hsl(var(--chart-4))',
+ '5': 'hsl(var(--chart-5))'
+ }
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)'
+ }
+ }
+ },
+ plugins: [require("tailwindcss-animate")],
+};
\ No newline at end of file
}
+ { this.props.cell.isPresent && ![]({"/AlgorithmVisualizer/images/queen-cell.png"})
}