added turing machine and 15 puzzle skeleton codes

Author: TamimEhsan

README.md

@@ -17,6 +17,7 @@ So far there are 6 segments
 - N Queen
 - Convex Hull
 - Binary Search Game
+- Turing Machine
 
 I have implemented a total of `14 algorithms` so far. And will try to add more later.  
 
@@ -36,6 +37,7 @@ I have implemented a total of `14 algorithms` so far. And will try to add more l
 - N Queen Backtracking
 - Graham Scan for Convex Hull
 - Binary Search
+- Turing Machine
 
 
 
@@ -55,3 +57,10 @@ npm run build
 npm run deploy
 ```
 
+
+
+### Inspiration for next sections
+
+- [University of San Francisco Site](https://www.cs.usfca.edu/~galles/visualization/Algorithms.html) 
+- ​    [algorithm-visualizer](https://github.com/algorithm-visualizer)    /      [algorithm-visualizer](https://github.com/algorithm-visualizer/algorithm-visualizer)     
+

package-lock.json

@@ -10,11 +10,16 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^4.5.3",
+    "firebase": "^9.6.7",
     "fontsource-roboto": "^3.0.3",
+    "lodash": "^4.17.21",
+    "query-string": "^7.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-flip-move": "^3.0.4",
     "react-github-btn": "^1.2.0",
+    "react-mt-svg-lines": "^0.9.1",
+    "react-router": "^6.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-spring": "^8.0.27",

package.json

@@ -0,0 +1,27 @@
+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">15 Puzzle Game</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={"/"}>
+                        <span style={{color:"white"}}>
+                            Home
+                        </span>
+                    </Link>
+                </div>
+
+            </nav>
+        );
+    }
+}
+
+export default Navbar;

src/15puzzleComponents/navbar.jsx

@@ -0,0 +1,91 @@
+import React, {Component} from 'react';
+import Navbar from "./navbar";
+import FlipMove from 'react-flip-move';
+import SvgLines from 'react-mt-svg-lines';
+import '../helpers/array_helpers';
+import './style.css';
+import {times} from 'lodash';
+
+const FLIP_DURATION = 750;
+
+class Puzzle extends Component {
+    constructor() {
+        super();
+        this.state = {
+            squares: times(16, i => ({
+                value: i
+            })),
+        };
+    }
+
+    balsal = async () => {
+        for (let i = 0; i < 15; i++) {
+            this.setState({
+                squares: this.state.squares.slice().swap(i, i + 1)
+            });
+            await sleep(500);
+        }
+
+    }
+
+    render() {
+        let classNames;
+        return (
+            <div style={{backgroundColor: "#57407c", height: '100'}}
+                 className={'full-height'}
+            >
+                <Navbar/>
+                <center className={'justify-content-around '}
+                     style={{textAlign: "Center"}}>
+                    <div style={{textAlign: "center", height: "440px", width: "440px", margin: 'auto'}}
+                         className={"m-5"}>
+                        <FlipMove
+                            duration={FLIP_DURATION}
+                            easing="cubic-bezier(.12,.36,.14,1.2)"
+                        >
+                            {this.state.squares.map((stt) =>
+                                <div key={stt.value}
+                                     className={stt.value === 0 ? "square " : stt.value % 2 === 0 ? 'square shadow correct pt-1' : 'square shadow painted pt-1'}
+                                >
+                                    {stt.value === 0 ? "" : stt.value}
+                                </div>
+                            )}
+                            <br/>
+                        </FlipMove>
+                        <button className={"btn btn-secondary"} onClick={this.balsal}>Animate</button>
+                    </div>
+
+                    {/*<FlipMove*/}
+                    {/*    duration={FLIP_DURATION}*/}
+                    {/*          easing="cubic-bezier(.12,.36,.14,1.2)" >*/}
+                    {/*    <line key={5464} style={{strokeWidth: "3px", stroke: '#999'}} x2={299} y2={186}*/}
+                    {/*          x1={(this.state.squares[0].value + 1) * 50}*/}
+                    {/*          y1={(this.state.squares[0].value + 1) * 50}></line>*/}
+                    {/*    <div key={this.state.squares[0].value}*/}
+                    {/*         className={'square shadow correct pt-1'}>*/}
+                    {/*        {this.state.squares[0].value}*/}
+                    {/*    </div>*/}
+                    {/*    <div key={this.state.squares[1].value}*/}
+                    {/*         className={'square shadow correct pt-1'}>*/}
+                    {/*        {this.state.squares[1].value}*/}
+                    {/*    </div>*/}
+                    {/*</FlipMove>*/}
+                    {/*/!*<SvgLines animate={true} duration={1000}>*!/*/}
+                    {/*/!*    <svg viewBox="0 0 960 500">*!/*/}
+                    {/*/!*        <line key={5464} style={{strokeWidth: "3px", stroke: '#999'}} x2={299} y2={186}*!/*/}
+                    {/*/!*              x1={(this.state.squares[0].value + 1) * 50}*!/*/}
+                    {/*/!*              y1={(this.state.squares[0].value + 1) * 50}></line>*!/*/}
+                    {/*/!*    </svg>*!/*/}
+                    {/*/!*</SvgLines>*!/*/}
+                </center>
+
+            </div>
+        );
+    }
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export default Puzzle;

src/15puzzleComponents/puzzle.jsx

@@ -0,0 +1,23 @@
+.square{
+    height: 100px;
+    width: 100px;
+    margin: 5px;
+    float: left;
+    border-radius: 10px;
+    font-size: 60px;
+    font-weight: 700;
+    color: white;
+    font-family: "Pacifico", cursive;
+}
+
+.painted{
+    background-color: rgb(106, 198, 184)
+}
+
+.correct{
+    background-color: #e88a45;
+}
+
+.full-height {
+    height: calc(100vh);
+}

src/15puzzleComponents/style.css

@@ -1,4 +1,6 @@
 import React, {Component} from 'react';
+import './TrialPathFinder/firebaseConfig';
+
 import {HashRouter as Router, Switch, Route} from 'react-router-dom';
 import Pathfinder from "./pathfinderComponents/pathfinder";
 import Home from "./homeComponents/home";
@@ -8,12 +10,20 @@ import Queen from "./queenComponents/queen";
 import ConvexHull from "./convexHullComponents/convexHull";
 import BinarySearch from "./binarySearchComponent/binarySearch";
 import RecursiveSort from "./recursiveSortComponents/recursiveSort";
+import Puzzle from "./15puzzleComponents/puzzle";
+import TrialPath from "./TrialPathFinder/pathfinder";
+import TrialPathEdit from "./TrialPathFinderEdit/pathfinder";
+import TuringMachine from "./Turing Machine/turingMachine";
+
+
+
 class App extends Component {
+
     constructor() {
         super();
     }
     componentDidMount() {
-        console.log(window.innerHeight,"  ",window.innerWidth);
+        // console.log(window.innerHeight,"  ",window.innerWidth);
     }
 
     render() {
@@ -27,7 +37,12 @@ class App extends Component {
                     <Route path='/convexhull' component={ConvexHull}/>
                     <Route path='/binarysearch' component={BinarySearch}/>
                     <Route path='/recursivesort' component={RecursiveSort}/>
+                    <Route path='/turing' component={TuringMachine}/>
+                    <Route path='/15puzzle' component={Puzzle}/>
+                    {/*<Route path='/trial' component={TrialPath}/>*/}
+                    {/*<Route path='/trialedit' component={TrialPathEdit}/>*/}
                     <Route path='/' component={Home}/>
+
                 </Switch>
             </Router>
         );

src/App.js

@@ -0,0 +1,11 @@
+.turing-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;*/
+}

src/Turing Machine/cell.css

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import './cell.css';
+class Cell extends Component {
+    render() {
+        return (
+            <div className={'turing-cell'}>
+                {this.props.val}
+            </div>
+        );
+    }
+}
+
+export default Cell;

src/Turing Machine/cell.jsx

@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import DiscreteSlider from "./slider";
+import SimpleSelect from "./simpleSelect";
+
+
+class Menu extends Component {
+    render() {
+        return (
+            <nav className="nav alert-dark">
+
+
+                <DiscreteSlider
+                    default={50}
+                    min={10}
+                    max={100}
+                    step={1}
+                    title="Speed"
+                    onCountChange={this.props.onSpeedChange}
+                    disable={false}
+                />
+                <SimpleSelect
+                    pos={0}
+                    onAlgoChanged={this.props.onAlgoChanged}
+                />
+
+                <button
+                    className='btn btn-warning btn-lg m-2'
+                    // onClick={this.props.onViusalize}
+                    disabled={this.props.disable}
+                >Reset</button>
+
+                <button
+                    className='btn btn-warning btn-lg '
+                    onClick={this.props.visualize}
+                    disabled={this.props.disable}
+                >Visualize</button>
+
+            </nav>
+    );
+    }
+    isClickable = () =>
+        {
+            if (this.props.disable) {
+                return {cursor: "not-allowed"};
+            } else {
+                return {};
+            }
+        }
+    }
+
+
+    export default Menu;