added seive alogrithm visualization

Author: TamimEhsan

src/App.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import Pathfinder from "./pathfinderComponents/pathfinder";
 import Home from "./homeComponents/home";
+import Seive from "./primeComponents/seive";
 
 class App extends Component {
     constructor() {
@@ -17,6 +18,7 @@ class App extends Component {
                 <Switch>
                     <Route path='/Pathfinder-2.0/' exact component={Home}/>
                     <Route path='/Pathfinder-2.0/pathfinder'  component={Pathfinder}/>
+                    <Route path='/Pathfinder-2.0/prime' component={Seive}/>
                 </Switch>
             </Router>
         );

src/homeComponents/cards.jsx

@@ -13,24 +13,24 @@ class Cards extends Component {
             },
             {
                 id:2,
-                title:"Sorting Algorithm",
-                description:"Coming soon...",
-                route:"/Pathfinder-2.0/"
+                title:"Prime Numbers",
+                description:"Visulaize how Seive is better than brute force",
+                route:"/Pathfinder-2.0/prime"
             },
             {
                 id:3,
-                title:"8 Queen",
+                title:"Sorting Algorithm",
                 description:"Coming soon...",
                 route:"/Pathfinder-2.0/"
             },
             {
                 id:3,
-                title:"Prime Numbers",
+                title:"8 Queen",
                 description:"Coming soon...",
                 route:"/Pathfinder-2.0/"
             },
             {
-                id:3,
+                id:4,
                 title:"Backtracking",
                 description:"Coming soon...",
                 route:"/Pathfinder-2.0/"

src/pathfinderComponents/menu.jsx

@@ -10,7 +10,7 @@ class Menu extends Component {
                 />
                 <button
                     onClick={this.props.onVisualize}
-                    className="btn btn-warning ">Visualize</button>
+                    className="btn btn-warning m-2">Visualize</button>
 
             </nav>
         );

src/primeComponents/cell.css

@@ -0,0 +1,59 @@
+.cell{
+    height:50px;
+    width:50px;
+    background-color: white;
+    outline:1px solid rgb(175, 216, 248);
+    display: inline-block;
+    font-size: 25px;
+    text-align: center;
+    color: black;
+    border-radius: 5px 20px;
+}
+
+.cell-prime{
+    background-color: #00f51d;
+    animation-name: isPrime;
+    animation-duration: 1s;
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+
+}
+@keyframes isPrime {
+    0% {
+        transform: rotate(90deg);
+        background-color: rgba(0, 0, 66, 0.75);
+        border-radius: 100%;
+    }
+
+    50% {
+        background-color: rgba(17, 104, 217, 0.75);
+        transform: scale(1.5);
+
+    }
+
+    75% {
+        background-color: rgba(0, 217, 159, 0.75);
+        transform: rotate(270deg);
+
+    }
+
+    100% {
+
+        background-color: rgba(0, 190, 218, 0.75);
+        transform: rotate(360deg);
+    }
+}
+.cell-check{
+    background-color: grey;
+}
+.cell-visiting{
+    outline:3px solid rgb(175, 216, 248);
+    animation-name: isVisiting;
+    animation-duration: 1s;
+}
+@keyframes isVisiting {
+    50%{
+        transform: scale(1.5);
+    }
+}

src/primeComponents/cell.jsx

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import './cell.css';
+class Cell extends Component {
+    render() {
+        return (
+            <div className={this.getClass()}>
+                <span >
+                    {this.props.cell.val}
+                </span>
+            </div>
+        );
+    }
+    getClass = () =>{
+        const { val, isVisiting,isChecking,isPrime} = this.props.cell;
+        if(isPrime){
+            return "cell cell-prime m-2";
+        }else if( isVisiting ){
+            return "cell cell-visiting m-2";
+        } else if( isChecking ){
+            return "cell cell-check m-2";
+        } else{
+            return "cell m-2";
+        }
+    }
+}
+
+export default Cell;

src/primeComponents/cells.css

@@ -0,0 +1,3 @@
+.Cells{
+    font-size: 0px;
+}

src/primeComponents/cells.jsx

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import Cell from "./cell";
+import './cells.css'
+class Cells extends Component {
+
+    render() {
+        return (
+            <div className="Cells">
+                {this.props.cells.map( (cell,cellidx)=>{
+                    return (
+                        <Cell
+                            key={cellidx}
+                            cell={cell}
+                        />
+                    );
+                } )}
+            </div>
+        );
+    }
+}
+
+export default Cells;

src/primeComponents/menu.jsx

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import DiscreteSlider from "./slider";
+import SimpleSelect from "./simpleSelect";
+
+class Menu extends Component {
+    render() {
+        return (
+            <nav className="nav alert-dark">
+                <button className="btn btn-primary btn-lg m-2" onClick={this.props.onRefresh} disabled={this.props.isDisabled} style={this.isClickable()}>Refresh</button>
+                <SimpleSelect/>
+                <DiscreteSlider
+                    onChange={this.props.onChangeSpeed}
+                    title="speed"
+                    marks={true}
+                    default={10}
+                    step={10}
+                    min={10}
+                    max={50}
+                    isDisabled={this.props.isDisabled}
+                />
+                <DiscreteSlider
+                    onChange={this.props.onChangeValues}
+                    title="Total Number"
+                    marks={false}
+                    default={100}
+                    step={1}
+                    min={10}
+                    max={500}
+                    isDisabled={this.props.isDisabled}
+                />
+                <button className="btn btn-warning btn-lg m-2" onClick={this.props.onVisualize} disabled={this.props.isDisabled} style={this.isClickable()}>Visualize</button>
+
+
+            </nav>
+        );
+    }
+    isClickable = () =>{
+        if( this.props.isDisabled ){
+            return {cursor: "not-allowed"};
+        } else{
+            return {};
+        }
+    }
+}
+
+export default Menu;

src/primeComponents/navbar.jsx

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+
+
+class Navbar extends Component {
+    render() {
+        return (
+            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+                <span className="navbar-brand">Sieve</span>
+                <button className="navbar-toggler" type="button" data-toggle="collapse"
+                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+                <div className="collapse navbar-collapse" id="navbarSupportedContent" >
+                        <Link to={"/Pathfinder-2.0/"}>
+                            <span style={{color:"white"}}>
+                                Home
+                            </span>
+                        </Link>
+                </div>
+
+            </nav>
+        );
+    }
+}
+
+export default Navbar;

src/primeComponents/seive.jsx

@@ -0,0 +1,144 @@
+import React, {Component} from 'react';
+import Cells from "./cells";
+import Navbar from "./navbar";
+import DiscreteSlider from "./slider";
+import Menu from "./menu";
+
+class Seive extends Component {
+    state = {
+        number: 100,
+        cells:[],
+        isRunning:false,
+        speed:500
+    }
+
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        const cells = getCells(this.state.number);
+        this.setState({cells});
+    }
+
+    render() {
+        return (
+            <div>
+                <Navbar/>
+                <Menu
+                    onChangeSpeed={this.changeSpeed}
+                    onChangeValues={this.handleValueIncease}
+                    onVisualize = {this.startSeive}
+                    onRefresh = {this.handleRefresh}
+                    isDisabled = {this.state.isRunning}
+                />
+                <Cells
+                    num={this.state.number}
+                    cells={this.state.cells}
+                />
+
+            </div>
+        );
+    }
+
+    changeSpeed = (speed) => {
+        //console.log(typeof speed);
+        this.setState({speed:600-speed*10});
+    }
+    handleValueIncease = (value) => {
+        this.setState({number:value});
+        this.setState({cells:getCells(value),isRunning:false});
+        console.log(value);
+    }
+    handleRefresh = () => {
+        this.setState({cells:getCells(this.state.number),isRunning:false});
+    }
+    startSeive = () => {
+        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);
+                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);
+                    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
+    };
+}
+
+export default Seive;