├── .eslintrc ├── .flowconfig ├── .gitignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── flow-typed └── types.js ├── images ├── flow.jpg ├── react.svg ├── sass.png └── visualizer.gif ├── jsconfig.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── App.scss ├── Provider.jsx ├── algorithms │ ├── AStar.js │ ├── Timer.js │ ├── bellmanFord.js │ ├── bfs.js │ ├── dfs.js │ ├── dijkstra.js │ ├── index.js │ └── pathFinder.js ├── components │ ├── Board │ │ ├── Board.jsx │ │ └── Board.scss │ ├── Container │ │ ├── Container.jsx │ │ └── Container.scss │ ├── Header │ │ ├── Header.jsx │ │ └── Header.scss │ ├── Item │ │ ├── Item.jsx │ │ └── Item.scss │ ├── ModalError │ │ ├── ModalError.jsx │ │ └── ModalError.scss │ └── ModalInfo │ │ ├── ModalInfo.jsx │ │ └── ModalInfo.scss ├── constants.js ├── index.js └── styles │ ├── _mixins.scss │ ├── _placeholders.scss │ └── _variables.scss └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["airbnb", "plugin:prettier/recommended", "plugin:flowtype/recommended"], 4 | "plugins": ["flowtype"], 5 | "rules": { 6 | "prettier/prettier": "error", 7 | "no-unused-vars": "warn", 8 | "no-console": "off", 9 | "func-names": "off", 10 | "no-process-exit": "off", 11 | "object-shorthand": "off", 12 | "class-methods-use-this": "off", 13 | "no-plusplus": "off", 14 | "jsx-a11y/click-events-have-key-events": "off", 15 | "no-continue": "off", 16 | "no-underscore-dangle": "off", 17 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] 18 | }, 19 | "env": { 20 | "browser": true 21 | }, 22 | "settings": { 23 | "import/resolver": { 24 | "node": { 25 | "paths": ["src"], 26 | "extensions": [".js", ".jsx", ".scss"] 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | ./flow-typed/ 7 | 8 | [lints] 9 | 10 | [options] 11 | module.system.node.resolve_dirname=node_modules 12 | module.system.node.resolve_dirname=src 13 | ; Extensions 14 | module.file_ext=.js 15 | module.file_ext=.jsx 16 | module.file_ext=.json 17 | module.file_ext=.css 18 | module.file_ext=.scss 19 | 20 | [strict] 21 | 22 | [version] 23 | ^0.117.0 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": true, 4 | "useTabs": false, 5 | "tabWidth": 2, 6 | "trailingComma": "all", 7 | "printWidth": 80 8 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 baeharam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pathfinding Visualizer 2 | 3 | ### [LIVE DEMO](https://baeharam.github.io/Pathfinding-Visualizer/) 4 | 5 | 6 | 7 |
8 | 9 | ## Algorithms 10 | 11 | * Dijkstra 12 | * Bellman-Ford 13 | * DFS 14 | * 0-1 BFS 15 | * A* with manhatten distance heuristic 16 | 17 |
18 | 19 | ## Technical Stack 20 | 21 | | UI Library | Styling | Typing | 22 | | :-------------------------------------------: | :------------------------------------------: | :------------------------------------------: | 23 | | | | | 24 | 25 |
26 | 27 | ## Build Guide 28 | 29 | ```bash 30 | git clone https://github.com/baeharam/Pathfinding-Visualizer 31 | cd Pathfinding-Visualizer 32 | yarn install 33 | yarn start 34 | ``` 35 | 36 |
37 | 38 | ## LICENSE 39 | 40 | [MIT]('./LICENSE.md') -------------------------------------------------------------------------------- /flow-typed/types.js: -------------------------------------------------------------------------------- 1 | declare type ElementEvent = { 2 | target: E, 3 | } & Event; 4 | -------------------------------------------------------------------------------- /images/flow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/925b588902381054ee3a9a908d34831cc41cf068/images/flow.jpg -------------------------------------------------------------------------------- /images/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /images/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/925b588902381054ee3a9a908d34831cc41cf068/images/sass.png -------------------------------------------------------------------------------- /images/visualizer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/925b588902381054ee3a9a908d34831cc41cf068/images/visualizer.gif -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pathfinding-visualizer", 3 | "homepage": "http://baeharam.github.io/Pathfinding-Visualizer", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "private": true, 7 | "dependencies": { 8 | "@testing-library/jest-dom": "^4.2.4", 9 | "@testing-library/react": "^9.3.2", 10 | "@testing-library/user-event": "^7.1.2", 11 | "flow-bin": "^0.117.0", 12 | "js-priority-queue": "^0.1.5", 13 | "node-sass": "^4.13.1", 14 | "open-color": "^1.7.0", 15 | "queue-fifo": "^0.2.6", 16 | "react": "^16.12.0", 17 | "react-dom": "^16.12.0", 18 | "react-helmet": "5.2.1", 19 | "react-icons": "^3.9.0", 20 | "react-modal": "^3.11.1", 21 | "react-scripts": "3.3.0", 22 | "reset-css": "^5.0.1", 23 | "uuid": "^3.4.0" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject", 30 | "flow": "flow", 31 | "predeploy": "yarn build", 32 | "deploy": "gh-pages -d build" 33 | }, 34 | "eslintConfig": { 35 | "extends": "react-app" 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | }, 49 | "devDependencies": { 50 | "babel-eslint": "^10.0.3", 51 | "eslint": "^6.8.0", 52 | "eslint-config-airbnb": "^18.0.1", 53 | "eslint-config-prettier": "^6.10.0", 54 | "eslint-plugin-flowtype": "^4.6.0", 55 | "eslint-plugin-import": "^2.20.0", 56 | "eslint-plugin-jsx-a11y": "^6.2.3", 57 | "eslint-plugin-prettier": "^3.1.2", 58 | "eslint-plugin-react": "^7.18.0", 59 | "gh-pages": "^2.2.0", 60 | "prettier": "^1.19.1", 61 | "serialize-javascript": "^2.1.2" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/925b588902381054ee3a9a908d34831cc41cf068/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/925b588902381054ee3a9a908d34831cc41cf068/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/925b588902381054ee3a9a908d34831cc41cf068/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'Provider'; 3 | import Container from 'components/Container/Container'; 4 | import 'reset-css'; 5 | import './App.scss'; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Julius+Sans+One&display=swap'); 2 | 3 | body,html { 4 | height: 100%; 5 | } 6 | 7 | body { 8 | font-family: 'Julius Sans One', sans-serif; 9 | user-select: none; 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | } -------------------------------------------------------------------------------- /src/Provider.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React, { createContext, useRef, useState, type Node } from 'react'; 4 | import Timer from 'algorithms/Timer'; 5 | import { 6 | BOARD, 7 | KEYS, 8 | DELAY_NORMAL, 9 | ITEM_INITIAL, 10 | ITEM_FIXED, 11 | ITEM_CLICKED, 12 | BOARD_ROW, 13 | BOARD_COL, 14 | } from './constants'; 15 | 16 | type PositionType = {| x: number, y: number |}; 17 | type SetItemCacheType = { [key: string]: (string) => void }; 18 | 19 | export type ContextType = {| 20 | isPathExist: boolean, 21 | isVisualized: boolean, 22 | isHelped: boolean, 23 | 24 | begin: { current: PositionType }, 25 | end: { current: PositionType }, 26 | board: { current: Array> }, 27 | setItemCache: { current: SetItemCacheType }, 28 | pathFinder: { current: any }, 29 | delay: { current: number }, 30 | 31 | clear: void => void, 32 | clearPath: void => void, 33 | updateItem: (number, number, string, number) => void, 34 | 35 | setIsPathExist: boolean => void, 36 | setIsVisualized: boolean => void, 37 | setIsHelped: boolean => void, 38 | |}; 39 | 40 | const Context = createContext(); 41 | 42 | const Provider = ({ children }: Node) => { 43 | const [isPathExist, setIsPathExist] = useState(true); 44 | const [isVisualized, setIsVisualized] = useState(false); 45 | const [isHelped, setIsHelped] = useState(false); 46 | 47 | const begin = useRef({ x: Math.round(BOARD_ROW / 2), y: 2 }); 48 | const end = useRef({ 49 | x: Math.round(BOARD_ROW / 2), 50 | y: BOARD_COL - 3, 51 | }); 52 | const board = useRef>>(JSON.parse(JSON.stringify(BOARD))); 53 | const setItemCache = useRef({}); 54 | const pathFinder = useRef(null); 55 | const delay = useRef(DELAY_NORMAL); 56 | 57 | const updateItem = ( 58 | ridx, 59 | cidx, 60 | type: string = ITEM_FIXED, 61 | timeFactor: number = 0, 62 | ) => { 63 | board.current[ridx][cidx] = type; 64 | const setItem = setItemCache.current[KEYS[ridx][cidx]]; 65 | 66 | if (timeFactor) { 67 | const timer = new Timer({ 68 | callback: () => setItem(type), 69 | delay: timeFactor * delay.current, 70 | }); 71 | pathFinder.current.timers.push(timer); 72 | } else { 73 | setItem(type); 74 | } 75 | }; 76 | 77 | const clear = () => { 78 | if (!isPathExist) setIsPathExist(true); 79 | if (isVisualized) setIsVisualized(false); 80 | const currentBoard = board.current; 81 | currentBoard.forEach((row, ridx) => { 82 | row.forEach((item, cidx) => { 83 | updateItem(ridx, cidx, ITEM_INITIAL); 84 | }); 85 | }); 86 | }; 87 | 88 | const clearPath = () => { 89 | board.current.forEach((row, ridx) => { 90 | row.forEach((item, cidx) => { 91 | if (board.current[ridx][cidx] !== ITEM_CLICKED) { 92 | updateItem(ridx, cidx, ITEM_INITIAL); 93 | } 94 | }); 95 | }); 96 | }; 97 | 98 | return ( 99 | 123 | {children} 124 | 125 | ); 126 | }; 127 | 128 | export { Context, Provider }; 129 | -------------------------------------------------------------------------------- /src/algorithms/AStar.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import PriorityQueue from 'js-priority-queue'; 4 | import { BOARD_ROW, BOARD_COL, ITEM_CLICKED, ITEM_VISITED } from 'constants.js'; 5 | import PathFinder, { type ConstructorType } from './pathFinder'; 6 | 7 | export default class AStar extends PathFinder { 8 | opened: Array>; 9 | 10 | constructor(args: ConstructorType) { 11 | super(args); 12 | this.opened = new Array(BOARD_ROW); 13 | for (let i = 0; i < BOARD_ROW; i++) { 14 | this.opened[i] = new Array(BOARD_COL).fill(false); 15 | } 16 | this.pq = new PriorityQueue({ comparator: (a, b) => a.f - b.f }); 17 | } 18 | 19 | _h = (start: {| x: number, y: number |}): number => { 20 | return Math.abs(start.x - this.end.x) + Math.abs(start.y - this.end.y); 21 | }; 22 | 23 | execute = (): boolean => { 24 | const { dist, pq, opened, board, updateItem, prev, begin, _h, end } = this; 25 | const fBegin = _h(begin); 26 | pq.queue({ x: begin.x, y: begin.y, f: fBegin }); 27 | dist[begin.x][begin.y] = 0; 28 | opened[begin.x][begin.y] = true; 29 | console.log(this.opened); 30 | 31 | let find = false; 32 | let timeFactor = 1; 33 | 34 | while (pq.length) { 35 | const current: {| x: number, y: number, f: number |} = pq.peek(); 36 | const currentX = current.x; 37 | const currentY = current.y; 38 | 39 | if (currentX === end.x && currentY === end.y) { 40 | pq.clear(); 41 | find = true; 42 | break; 43 | } 44 | 45 | opened[currentX][currentY] = false; 46 | pq.dequeue(); 47 | 48 | for (let i = 0; i < PathFinder.dx.length; i++) { 49 | const nextX: number = currentX + PathFinder.dx[i]; 50 | const nextY: number = currentY + PathFinder.dy[i]; 51 | 52 | if (nextX < 0 || nextX >= BOARD_ROW || nextY < 0 || nextY >= BOARD_COL) 53 | continue; 54 | if (board[nextX][nextY] === ITEM_CLICKED) continue; 55 | 56 | const g = dist[currentX][currentY] + 1; 57 | const nextF = g + _h({ x: nextX, y: nextY }); 58 | 59 | if (g < dist[nextX][nextY]) { 60 | prev[nextX][nextY] = { x: currentX, y: currentY }; 61 | dist[nextX][nextY] = g; 62 | 63 | updateItem(nextX, nextY, ITEM_VISITED, timeFactor); 64 | timeFactor++; 65 | 66 | if (opened[nextX][nextY] === false) { 67 | pq.queue({ x: nextX, y: nextY, f: nextF }); 68 | opened[nextX][nextY] = true; 69 | } 70 | } 71 | } 72 | } 73 | if (!find) this.clearTimers(); 74 | return find; 75 | }; 76 | } 77 | -------------------------------------------------------------------------------- /src/algorithms/Timer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | type TimerConstructorType = { 4 | callback: () => void, 5 | delay: number, 6 | }; 7 | 8 | export default class Timer { 9 | id: TimeoutID; 10 | 11 | callback: () => void; 12 | 13 | delay: number; 14 | 15 | remain: number; 16 | 17 | start: number; 18 | 19 | constructor({ callback, delay }: TimerConstructorType) { 20 | this.id = setTimeout(callback, delay); 21 | this.callback = callback; 22 | this.delay = delay; 23 | this.remain = delay; 24 | this.start = Date.now(); 25 | } 26 | 27 | pause = () => { 28 | clearTimeout(this.id); 29 | this.remain -= Date.now() - this.start; 30 | }; 31 | 32 | resume = () => { 33 | this.start = Date.now(); 34 | clearTimeout(this.id); 35 | this.id = setTimeout(this.callback, this.remain); 36 | }; 37 | 38 | destroy = () => { 39 | clearTimeout(this.id); 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /src/algorithms/bellmanFord.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { BOARD_ROW, BOARD_COL, ITEM_CLICKED, ITEM_VISITED } from 'constants.js'; 4 | import PathFinder from './pathFinder'; 5 | 6 | export default class BellmanFord extends PathFinder { 7 | _relax = (timeFactor: number): {| time: number, find: boolean |} => { 8 | const { dist, prev, end, updateItem, board } = this; 9 | let find = false; 10 | let time = timeFactor; 11 | for (let i = 0; i < BOARD_ROW; i++) { 12 | for (let j = 0; j < BOARD_COL; j++) { 13 | for (let k = 0; k < PathFinder.dx.length; k++) { 14 | const nextX = i + PathFinder.dx[k]; 15 | const nextY = j + PathFinder.dy[k]; 16 | 17 | if ( 18 | nextX < 0 || 19 | nextX >= BOARD_ROW || 20 | nextY < 0 || 21 | nextY >= BOARD_COL 22 | ) 23 | continue; 24 | if (dist[i][j] === Infinity || dist[i][j] + 1 >= dist[nextX][nextY]) 25 | continue; 26 | if (board[nextX][nextY] === ITEM_CLICKED) continue; 27 | 28 | dist[nextX][nextY] = dist[i][j] + 1; 29 | prev[nextX][nextY] = { x: i, y: j }; 30 | 31 | if (nextX === end.x && nextY === end.y) { 32 | find = true; 33 | break; 34 | } 35 | 36 | updateItem(nextX, nextY, ITEM_VISITED, time); 37 | time++; 38 | } 39 | if (find) break; 40 | } 41 | } 42 | return { time, find }; 43 | }; 44 | 45 | execute = (): boolean => { 46 | const { _relax, updateItem, end } = this; 47 | 48 | let timeFactor = 1; 49 | let find = false; 50 | const vertex = BOARD_ROW * BOARD_COL; 51 | for (let i = 1; i <= vertex - 1; i++) { 52 | const relaxedResult = _relax(timeFactor); 53 | timeFactor = relaxedResult.time; 54 | timeFactor++; 55 | if (relaxedResult.find) { 56 | find = true; 57 | break; 58 | } 59 | } 60 | updateItem(end.x, end.y, ITEM_VISITED, timeFactor); 61 | if (!find) this.clearTimers(); 62 | return find; 63 | }; 64 | } 65 | -------------------------------------------------------------------------------- /src/algorithms/bfs.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import Queue from 'queue-fifo'; 4 | import { BOARD_ROW, BOARD_COL, ITEM_CLICKED, ITEM_VISITED } from 'constants.js'; 5 | import PathFinder, { type ConstructorType } from './pathFinder'; 6 | 7 | export default class Bfs extends PathFinder { 8 | visited: Array>; 9 | 10 | queue: any; 11 | 12 | constructor(args: ConstructorType) { 13 | super(args); 14 | this.visited = []; 15 | this.q = new Queue(); 16 | for (let i = 0; i < BOARD_ROW; i++) { 17 | this.visited[i] = Array(BOARD_COL).fill(false); 18 | } 19 | } 20 | 21 | execute = (): boolean => { 22 | const { q, begin, end, visited, board, prev, updateItem } = this; 23 | q.enqueue({ x: begin.x, y: begin.y }); 24 | visited[begin.x][begin.y] = true; 25 | let find = false; 26 | let timeFactor = 1; 27 | 28 | while (!q.isEmpty()) { 29 | const current = q.peek(); 30 | q.dequeue(); 31 | 32 | if (current.x === end.x && current.y === end.y) { 33 | break; 34 | } 35 | 36 | for (let i = 0; i < PathFinder.dx.length; i++) { 37 | const nextX = current.x + PathFinder.dx[i]; 38 | const nextY = current.y + PathFinder.dy[i]; 39 | 40 | if (nextX < 0 || nextX >= BOARD_ROW || nextY < 0 || nextY >= BOARD_COL) 41 | continue; 42 | if (visited[nextX][nextY] || board[nextX][nextY] === ITEM_CLICKED) 43 | continue; 44 | 45 | visited[nextX][nextY] = true; 46 | prev[nextX][nextY] = { x: current.x, y: current.y }; 47 | updateItem(nextX, nextY, ITEM_VISITED, timeFactor); 48 | timeFactor++; 49 | q.enqueue({ x: nextX, y: nextY }); 50 | 51 | if (nextX === end.x && nextY === end.y) { 52 | find = true; 53 | break; 54 | } 55 | } 56 | } 57 | 58 | if (!find) this.clearTimers(); 59 | return find; 60 | }; 61 | } 62 | -------------------------------------------------------------------------------- /src/algorithms/dfs.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { BOARD_ROW, BOARD_COL, ITEM_CLICKED, ITEM_VISITED } from 'constants.js'; 4 | import PathFinder, { type ConstructorType } from './pathFinder'; 5 | 6 | export default class Dfs extends PathFinder { 7 | find: boolean; 8 | 9 | visited: Array>; 10 | 11 | constructor(args: ConstructorType) { 12 | super(args); 13 | this.find = false; 14 | this.visited = []; 15 | for (let i = 0; i < BOARD_ROW; i++) { 16 | this.visited[i] = Array(BOARD_COL).fill(false); 17 | } 18 | } 19 | 20 | _dfs = (x: number, y: number, timeFactor: number) => { 21 | const { prev, end, visited, board, updateItem, _dfs } = this; 22 | visited[x][y] = true; 23 | 24 | for (let i = 0; i < PathFinder.dx.length; i++) { 25 | const nextX = x + PathFinder.dx[i]; 26 | const nextY = y + PathFinder.dy[i]; 27 | 28 | if (nextX < 0 || nextX >= BOARD_ROW || nextY < 0 || nextY >= BOARD_COL) 29 | continue; 30 | if (visited[nextX][nextY] || board[nextX][nextY] === ITEM_CLICKED) 31 | continue; 32 | 33 | prev[nextX][nextY] = { x, y }; 34 | updateItem(nextX, nextY, ITEM_VISITED, timeFactor); 35 | 36 | if (nextX === end.x && nextY === end.y) { 37 | this.find = true; 38 | return; 39 | } 40 | _dfs(nextX, nextY, timeFactor + 1); 41 | 42 | if (this.find) return; 43 | } 44 | }; 45 | 46 | execute = (): boolean => { 47 | this._dfs(this.begin.x, this.begin.y, 1); 48 | if (!this.find) this.clearTimers(); 49 | return this.find; 50 | }; 51 | } 52 | -------------------------------------------------------------------------------- /src/algorithms/dijkstra.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import PriorityQueue from 'js-priority-queue'; 4 | import { BOARD_ROW, BOARD_COL, ITEM_CLICKED, ITEM_VISITED } from 'constants.js'; 5 | import PathFinder, { type ConstructorType } from './pathFinder'; 6 | 7 | export default class Dijkstra extends PathFinder { 8 | constructor(args: ConstructorType) { 9 | super(args); 10 | this.pq = new PriorityQueue({ comparator: (a, b) => a.d - b.d }); 11 | } 12 | 13 | execute = (): boolean => { 14 | const { pq, dist, prev, board, begin, end, updateItem } = this; 15 | 16 | pq.queue({ x: begin.x, y: begin.y, d: 0 }); 17 | let find = false; 18 | 19 | while (pq.length) { 20 | const current: {| x: number, y: number, d: number |} = pq.peek(); 21 | pq.dequeue(); 22 | const currentX: number = current.x; 23 | const currentY: number = current.y; 24 | const currentD: number = current.d; 25 | 26 | for (let i = 0; i < PathFinder.dx.length; i++) { 27 | const nextX = currentX + PathFinder.dx[i]; 28 | const nextY = currentY + PathFinder.dy[i]; 29 | 30 | if (nextX < 0 || nextX >= BOARD_ROW || nextY < 0 || nextY >= BOARD_COL) 31 | continue; 32 | if ( 33 | dist[currentX][currentY] === Infinity || 34 | dist[currentX][currentY] + 1 >= dist[nextX][nextY] 35 | ) 36 | continue; 37 | if (board[nextX][nextY] === ITEM_CLICKED) continue; 38 | 39 | board[nextX][nextY] = ITEM_VISITED; 40 | updateItem(nextX, nextY, ITEM_VISITED, currentD); 41 | prev[nextX][nextY] = { x: currentX, y: currentY }; 42 | 43 | if (nextX === end.x && nextY === end.y) { 44 | find = true; 45 | break; 46 | } 47 | 48 | dist[nextX][nextY] = dist[currentX][currentY] + 1; 49 | pq.queue({ x: nextX, y: nextY, d: dist[nextX][nextY] }); 50 | } 51 | 52 | if (find) { 53 | pq.clear(); 54 | return true; 55 | } 56 | } 57 | this.clearTimers(); 58 | return false; 59 | }; 60 | } 61 | -------------------------------------------------------------------------------- /src/algorithms/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { DIJKSTRA, BELLMAN_FORD, A_STAR, DFS, BFS } from 'constants.js'; 4 | import Dijkstra from './dijkstra'; 5 | import BellmanFord from './bellmanFord'; 6 | import AStar from './AStar'; 7 | import Dfs from './dfs'; 8 | import Bfs from './bfs'; 9 | 10 | type PathfinderType = { 11 | [key: string]: | typeof Dijkstra 12 | | typeof BellmanFord 13 | | typeof AStar 14 | | typeof Dfs, 15 | }; 16 | 17 | const Pathfinder: PathfinderType = { 18 | [DIJKSTRA]: Dijkstra, 19 | [BELLMAN_FORD]: BellmanFord, 20 | [A_STAR]: AStar, 21 | [DFS]: Dfs, 22 | [BFS]: Bfs, 23 | }; 24 | 25 | export default Pathfinder; 26 | -------------------------------------------------------------------------------- /src/algorithms/pathFinder.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { BOARD_ROW, BOARD_COL, ITEM_SHORTEST } from 'constants.js'; 4 | import Timer from './Timer'; 5 | 6 | export type ConstructorType = { 7 | begin: {| x: number, y: number |}, 8 | end: {| x: number, y: number |}, 9 | updateItem: (number, number, string, ?number) => void, 10 | board: Array>, 11 | }; 12 | 13 | export default class PathFinder { 14 | begin: {| x: number, y: number |}; 15 | 16 | end: {| x: number, y: number |}; 17 | 18 | updateItem: (number, number, string, ?number) => void; 19 | 20 | board: Array>; 21 | 22 | timers: Array; 23 | 24 | dist: Array>; 25 | 26 | prev: Array>; 27 | 28 | static dx: Array; 29 | 30 | static dy: Array; 31 | 32 | constructor({ begin, end, updateItem, board }: ConstructorType) { 33 | this.begin = begin; 34 | this.end = end; 35 | this.updateItem = updateItem; 36 | this._init(); 37 | this.board = board; 38 | this.timers = []; 39 | } 40 | 41 | static dx = [-1, 1, 0, 0]; 42 | 43 | static dy = [0, 0, -1, 1]; 44 | 45 | _init = () => { 46 | this.dist = new Array(BOARD_ROW); 47 | this.prev = new Array(BOARD_ROW); 48 | for (let i = 0; i < BOARD_ROW; i++) { 49 | this.dist[i] = []; 50 | this.prev[i] = []; 51 | for (let j = 0; j < BOARD_COL; j++) { 52 | this.dist[i][j] = Infinity; 53 | this.prev[i][j] = { x: -1, y: -1 }; 54 | } 55 | } 56 | this.dist[this.begin.x][this.begin.y] = 0; 57 | }; 58 | 59 | clearTimers() { 60 | this.timers.forEach((timer: Timer) => { 61 | timer.destroy(); 62 | }); 63 | this.timers = []; 64 | } 65 | 66 | stopTimers() { 67 | this.timers.forEach(timer => timer.pause()); 68 | } 69 | 70 | resumeTimers() { 71 | this.timers.forEach(timer => timer.resume()); 72 | } 73 | 74 | paintShortestPath = () => { 75 | const { begin, end, prev, updateItem } = this; 76 | 77 | const path: Array<{| x: number, y: number |}> = []; 78 | let { x } = end; 79 | let { y } = end; 80 | 81 | while (prev[x][y].x !== -1 && prev[x][y].y !== -1) { 82 | path.push({ x, y }); 83 | const tempX = x; 84 | const tempY = y; 85 | x = prev[tempX][tempY].x; 86 | y = prev[tempX][tempY].y; 87 | } 88 | path.push({ x: begin.x, y: begin.y }); 89 | 90 | for (let i = path.length - 1; i >= 0; i--) { 91 | x = path[i].x; 92 | y = path[i].y; 93 | updateItem(x, y, ITEM_SHORTEST, path.length - i); 94 | } 95 | }; 96 | } 97 | -------------------------------------------------------------------------------- /src/components/Board/Board.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React, { useContext, useState, useRef } from 'react'; 4 | import { Context, type ContextType } from 'Provider'; 5 | import { KEYS, BOARD, ITEM_CLICKED, ITEM_INITIAL } from 'constants.js'; 6 | import './Board.scss'; 7 | import Item from '../Item/Item'; 8 | 9 | const Board = () => { 10 | const context = useContext(Context); 11 | const { updateItem, begin, end, isVisualized } = context; 12 | const [clicking, setClicking] = useState(false); 13 | const [dragging, setDragging] = useState<{| begin: boolean, end: boolean |}>({ 14 | begin: false, 15 | end: false, 16 | }); 17 | const clickPos = useRef<{|x: number, y: number|}>({ x: -1, y: -1 }); 18 | 19 | const onMouseDown = (e: ElementEvent) => { 20 | const ridx = Number(e.target.dataset.ridx); 21 | const cidx = Number(e.target.dataset.cidx); 22 | 23 | if (ridx === begin.current.x && cidx === begin.current.y) { 24 | setDragging({ begin: true, end: false }); 25 | } else if (ridx === end.current.x && cidx === end.current.y) { 26 | setDragging({ begin: false, end: true }); 27 | } else { 28 | clickPos.current = { x: ridx, y: cidx }; 29 | setClicking(true); 30 | } 31 | }; 32 | const onMouseUp = () => { 33 | setClicking(false); 34 | setDragging({ begin: false, end: false }); 35 | }; 36 | 37 | const changeColor = (e: ElementEvent, mouseMove: boolean) => { 38 | if (e.target.className !== 'board__item') return; 39 | const { type } = e.target.dataset; 40 | if (type !== ITEM_INITIAL && type !== ITEM_CLICKED) return; 41 | 42 | const ridx = Number(e.target.dataset.ridx); 43 | const cidx = Number(e.target.dataset.cidx); 44 | 45 | const itemType = 46 | type === ITEM_CLICKED && !mouseMove ? ITEM_INITIAL : ITEM_CLICKED; 47 | updateItem(ridx, cidx, itemType); 48 | }; 49 | 50 | const onClick = (e: ElementEvent) => { 51 | if (isVisualized) return; 52 | changeColor(e, false); 53 | }; 54 | 55 | const onMouseMove = (e: ElementEvent) => { 56 | if (isVisualized) return; 57 | if (e.target.className !== 'board__item') return; 58 | const ridx = Number(e.target.dataset.ridx); 59 | const cidx = Number(e.target.dataset.cidx); 60 | 61 | if (dragging.begin || dragging.end) { 62 | const formerX = dragging.begin ? begin.current.x : end.current.x; 63 | const formerY = dragging.begin ? begin.current.y : end.current.y; 64 | 65 | updateItem(formerX, formerY, ITEM_INITIAL); 66 | 67 | const next = { x: ridx, y: cidx }; 68 | 69 | if (dragging.begin) { 70 | begin.current = next; 71 | } else { 72 | end.current = next; 73 | } 74 | 75 | updateItem(next.x, next.y); 76 | } else { 77 | if (!clicking) return; 78 | if (clickPos.current.x === ridx && clickPos.current.y === cidx) return; 79 | changeColor(e, true); 80 | } 81 | }; 82 | 83 | return ( 84 |
93 | {BOARD.map((row, ridx) => ( 94 | // eslint-disable-next-line react/no-array-index-key 95 |
96 | {row.map((col, cidx) => ( 97 | 98 | ))} 99 |
100 |
101 | ))} 102 |
103 | ); 104 | }; 105 | 106 | export default Board; 107 | -------------------------------------------------------------------------------- /src/components/Board/Board.scss: -------------------------------------------------------------------------------- 1 | @import 'styles/_variables'; 2 | 3 | .board { 4 | display: flex; 5 | flex-direction: column; 6 | outline: none; 7 | height: $board-height; 8 | margin: 0 auto; 9 | 10 | &__row { 11 | display: flex; 12 | flex-direction: row; 13 | justify-content: center; 14 | } 15 | } -------------------------------------------------------------------------------- /src/components/Container/Container.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React, { useEffect, useContext, useState } from 'react'; 4 | import Modal from 'react-modal'; 5 | import { FaGithub } from 'react-icons/fa'; 6 | import Header from 'components/Header/Header'; 7 | import Board from 'components/Board/Board'; 8 | import ModalInfo from 'components/ModalInfo/ModalInfo'; 9 | import ModalError from 'components/ModalError/ModalError'; 10 | import { Context, type ContextType } from 'Provider'; 11 | import Helmet from 'react-helmet'; 12 | import './Container.scss'; 13 | 14 | Modal.setAppElement('#root'); 15 | 16 | const Container = () => { 17 | const context = useContext(Context); 18 | const { isPathExist, clear, isHelped, setIsHelped }: ContextType = context; 19 | const [isErrorOpen, setIsErrorOpen] = useState(false); 20 | 21 | useEffect(() => { 22 | if (!isPathExist) { 23 | clear(); 24 | setIsErrorOpen(true); 25 | } 26 | }, [isPathExist, clear]); 27 | 28 | const onErrorClose = () => { 29 | setIsErrorOpen(false); 30 | }; 31 | const onHelpClose = () => { 32 | setIsHelped(false); 33 | }; 34 | 35 | return ( 36 | <> 37 | 38 | Pathfinding Visualizer 39 | 40 | 41 | 45 | 49 | 50 |
51 |

Pathfinding Visualizer

52 |
53 | 54 | 55 |
56 | 57 | 67 | 68 | ); 69 | }; 70 | 71 | export default Container; 72 | -------------------------------------------------------------------------------- /src/components/Container/Container.scss: -------------------------------------------------------------------------------- 1 | @import 'styles/_variables.scss'; 2 | @import 'open-color/open-color'; 3 | 4 | .header { 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: $header-height; 9 | 10 | &__title { 11 | font-size: 60px; 12 | } 13 | } 14 | 15 | .footer { 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | height: $footer-height; 20 | font-size: 20px; 21 | 22 | &__author { 23 | margin-right: 20px; 24 | } 25 | 26 | &__github { 27 | color: black; 28 | } 29 | } -------------------------------------------------------------------------------- /src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React, { useState, useContext } from 'react'; 4 | import { 5 | DIJKSTRA, 6 | BELLMAN_FORD, 7 | A_STAR, 8 | DFS, 9 | BFS, 10 | DELAY_SLOWEST, 11 | DELAY_SLOW, 12 | DELAY_NORMAL, 13 | DELAY_FAST, 14 | DELAY_FASTEST, 15 | } from 'constants.js'; 16 | import { Context, type ContextType } from 'Provider'; 17 | import PathFinder from 'algorithms/index'; 18 | import { FaPause, FaPlay } from 'react-icons/fa'; 19 | import './Header.scss'; 20 | 21 | const Header = () => { 22 | const [type, setType] = useState(DIJKSTRA); 23 | const [pause, setPause] = useState(false); 24 | const context = useContext(Context); 25 | const { 26 | begin, 27 | end, 28 | updateItem, 29 | delay, 30 | pathFinder, 31 | clear, 32 | clearPath, 33 | board, 34 | isVisualized, 35 | setIsPathExist, 36 | setIsVisualized, 37 | setIsHelped, 38 | } = context; 39 | 40 | const onAlgoChange = (e: ElementEvent) => { 41 | setType(e.target.value); 42 | }; 43 | 44 | const onDelayChange = (e: ElementEvent) => { 45 | delay.current = Number(e.target.value); 46 | }; 47 | 48 | const onVisualize = () => { 49 | if (isVisualized) return; 50 | clearPath(); 51 | setIsVisualized(true); 52 | 53 | pathFinder.current = new PathFinder[type]({ 54 | begin: begin.current, 55 | end: end.current, 56 | updateItem, 57 | board: board.current, 58 | }); 59 | const isPossiblePath = pathFinder.current.execute(); 60 | setIsPathExist(isPossiblePath); 61 | }; 62 | 63 | const onClearAll = () => { 64 | if (isVisualized && !pause) return; 65 | if (pause) setPause(false); 66 | setIsVisualized(false); 67 | 68 | clear(); 69 | }; 70 | 71 | const onClearPath = () => { 72 | if (isVisualized && !pause) return; 73 | if (pause) setPause(false); 74 | setIsVisualized(false); 75 | 76 | clearPath(); 77 | }; 78 | 79 | const onPause = () => { 80 | if (pause) { 81 | setPause(false); 82 | pathFinder.current.resumeTimers(); 83 | } else { 84 | setPause(true); 85 | pathFinder.current.stopTimers(); 86 | } 87 | }; 88 | 89 | const onHelp = () => { 90 | setIsHelped(true); 91 | }; 92 | 93 | return ( 94 |
95 | 109 | 121 | 129 | 137 | 145 | 153 | 161 |
162 | ); 163 | }; 164 | 165 | export default Header; 166 | -------------------------------------------------------------------------------- /src/components/Header/Header.scss: -------------------------------------------------------------------------------- 1 | @import 'open-color/open-color'; 2 | @import 'styles/_placeholders'; 3 | @import 'styles/_variables'; 4 | 5 | .content-header { 6 | display: flex; 7 | flex-direction: row; 8 | justify-content: center; 9 | height: calc(#{$content-header-height} - 20px); 10 | margin-bottom: 20px; 11 | padding: 10px 0; 12 | box-sizing: border-box; 13 | font-size: 20px; 14 | color: white; 15 | 16 | &__select { 17 | height: 100%; 18 | width: 200px; 19 | margin-right: 20px; 20 | border-radius: none; 21 | font-family: inherit; 22 | font-size: inherit; 23 | color: inherit; 24 | border: none; 25 | outline: none; 26 | cursor: pointer; 27 | -webkit-appearance: none; 28 | appearance: none; 29 | background: $oc-indigo-5; 30 | background-image: url("data:image/svg+xml;utf8,"); 31 | background-repeat: no-repeat; 32 | background-position-x: 100%; 33 | background-position-y: 5px; 34 | padding-left: 10px; 35 | 36 | &:disabled { 37 | @extend %disabled; 38 | } 39 | } 40 | 41 | &__button { 42 | $button: &; 43 | display: flex; 44 | font-family: inherit; 45 | font-weight: bold; 46 | font-size: inherit; 47 | cursor: pointer; 48 | background: $oc-blue-5; 49 | appearance: none; 50 | -webkit-appearance: none; 51 | border: none; 52 | padding: 0 10px; 53 | margin-right: 20px; 54 | box-shadow: 0 3px 3px 0 $oc-blue-3; 55 | color: inherit; 56 | transition: transform 0.2s linear; 57 | outline: none; 58 | 59 | &--pause { 60 | @extend #{$button}; 61 | background-color: $oc-teal-5; 62 | } 63 | 64 | &--usage { 65 | @extend #{$button}; 66 | background-color: $oc-green-6; 67 | box-shadow: 0 3px 3px 0 $oc-green-3; 68 | } 69 | 70 | &:last-child { 71 | margin-right: 0; 72 | } 73 | 74 | &:hover:enabled { 75 | transform: translateY(-10%); 76 | } 77 | 78 | &:disabled { 79 | @extend %disabled; 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /src/components/Item/Item.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React, { useState, useContext, useEffect } from 'react'; 4 | import { Context } from 'Provider'; 5 | import { 6 | INITIAL_COLOR, 7 | VISITED_COLOR, 8 | KEYS, 9 | FIXED_COLOR, 10 | ITEM_INITIAL, 11 | ITEM_VISITED, 12 | ITEM_CLICKED, 13 | CLICKED_COLOR, 14 | ITEM_SHORTEST, 15 | SHORTEST_COLOR, 16 | } from 'constants.js'; 17 | import './Item.scss'; 18 | 19 | const Item = ({ ridx, cidx }: { ridx: number, cidx: number }) => { 20 | const [type, setType] = useState(ITEM_INITIAL); 21 | const { setItemCache, begin, end, pathFinder, setIsVisualized } = useContext( 22 | Context, 23 | ); 24 | 25 | setItemCache.current[KEYS[ridx][cidx]] = setType; 26 | 27 | useEffect(() => { 28 | if ( 29 | type === ITEM_VISITED && 30 | ridx === end.current.x && 31 | cidx === end.current.y 32 | ) { 33 | pathFinder.current.paintShortestPath(); 34 | } 35 | }, [type, end, pathFinder, ridx, cidx]); 36 | 37 | useEffect(() => { 38 | if ( 39 | type === ITEM_SHORTEST && 40 | ridx === end.current.x && 41 | cidx === end.current.y 42 | ) { 43 | pathFinder.current.clearTimers(); 44 | setIsVisualized(false); 45 | } 46 | }, [type, end, pathFinder, ridx, cidx, setIsVisualized]); 47 | 48 | const getColor = () => { 49 | if ( 50 | (ridx === begin.current.x && cidx === begin.current.y) || 51 | (ridx === end.current.x && cidx === end.current.y) 52 | ) { 53 | return FIXED_COLOR; 54 | } 55 | if (type === ITEM_VISITED) { 56 | return VISITED_COLOR; 57 | } 58 | if (type === ITEM_CLICKED) { 59 | return CLICKED_COLOR; 60 | } 61 | if (type === ITEM_SHORTEST) { 62 | return SHORTEST_COLOR; 63 | } 64 | return INITIAL_COLOR; 65 | }; 66 | 67 | return ( 68 |
77 | ); 78 | }; 79 | 80 | export default Item; 81 | -------------------------------------------------------------------------------- /src/components/Item/Item.scss: -------------------------------------------------------------------------------- 1 | @import 'styles/_variables'; 2 | 3 | .board__item { 4 | width: $border-item-size; 5 | height: $border-item-size; 6 | margin: 3px; 7 | border-radius: 3px; 8 | box-shadow: 0 2px 0 #bbb; 9 | cursor: pointer; 10 | transition: background-color 0.3s ease-out; 11 | } -------------------------------------------------------------------------------- /src/components/ModalError/ModalError.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React from 'react'; 4 | import Modal from 'react-modal'; 5 | import './ModalError.scss'; 6 | 7 | type ModalErrorPropTypes = { 8 | isErrorOpen: boolean, 9 | onErrorClose: any => void, 10 | }; 11 | 12 | const ModalError = ({ isErrorOpen, onErrorClose }: ModalErrorPropTypes) => { 13 | return ( 14 | 20 |

Error!

21 |

Cannot find path to the goal

22 | 29 | 30 | ); 31 | }; 32 | 33 | export default ModalError; 34 | -------------------------------------------------------------------------------- /src/components/ModalError/ModalError.scss: -------------------------------------------------------------------------------- 1 | @import 'open-color/open-color'; 2 | @import 'styles/_mixins'; 3 | @import 'styles/_placeholders'; 4 | 5 | .modal-error { 6 | @include modal($oc-red-7); 7 | 8 | &__title { 9 | @include modal-title($oc-red-7); 10 | } 11 | 12 | &__content { 13 | @extend %modal-content; 14 | } 15 | 16 | &__close { 17 | @include modal-close($oc-red-7); 18 | } 19 | } -------------------------------------------------------------------------------- /src/components/ModalInfo/ModalInfo.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React from 'react'; 4 | import Modal from 'react-modal'; 5 | import './ModalInfo.scss'; 6 | 7 | type ModalInfoPropTypes = { 8 | isHelped: boolean, 9 | onHelpClose: any => void, 10 | }; 11 | 12 | const ModalInfo = ({ isHelped, onHelpClose }: ModalInfoPropTypes) => { 13 | return ( 14 | 20 |

How to use?

21 |

22 |

23 |

24 | 25 |

intiial

26 |

27 |

28 | 29 |

visited

30 |

31 |
32 |
33 |

34 | 35 |

clicked

36 |

37 |

38 | 39 |

fixed

40 |

41 |
42 |
43 |

44 | 45 |

shortest

46 |

47 |
48 |

49 |

50 |

51 |

1. You can make wall by clicking any block

52 |
53 |
54 |

2. You can move

55 | 56 |

by dragging

57 |
58 |
59 |

3. You can choose algorithm and speed from select box

60 |
61 |

62 | 65 | 66 | ); 67 | }; 68 | 69 | export default ModalInfo; 70 | -------------------------------------------------------------------------------- /src/components/ModalInfo/ModalInfo.scss: -------------------------------------------------------------------------------- 1 | @import 'open-color/open-color'; 2 | @import 'styles/_mixins'; 3 | @import 'styles/_placeholders'; 4 | @import 'styles/_variables'; 5 | 6 | .modal-info { 7 | $self: &; 8 | @include modal($oc-indigo-7); 9 | width: 700px; 10 | height: 350px; 11 | padding: 20px; 12 | align-items: center; 13 | 14 | &__title { 15 | @include modal-title($oc-indigo-7); 16 | } 17 | 18 | &__color { 19 | margin-bottom: 20px; 20 | } 21 | 22 | &__usage { 23 | #{$self}__row { 24 | margin-bottom: 20px; 25 | } 26 | 27 | #{$self}__square { 28 | margin-right: 10px; 29 | } 30 | 31 | h2 { 32 | margin-right: 10px; 33 | font-size: 20px; 34 | } 35 | } 36 | 37 | &__row { 38 | display: flex; 39 | align-items: center; 40 | } 41 | 42 | &__content { 43 | @extend %modal-content; 44 | width: 150px; 45 | display: flex; 46 | flex-direction: row; 47 | align-items: center; 48 | margin-bottom: 20px; 49 | } 50 | 51 | &__square { 52 | display: block; 53 | width: 24px; 54 | height: 24px; 55 | margin-right: 20px; 56 | 57 | &--initial { 58 | @extend #{$self}__square; 59 | background-color: $initial-color; 60 | } 61 | 62 | &--visited { 63 | @extend #{$self}__square; 64 | background-color: $visited-color; 65 | } 66 | 67 | &--clicked { 68 | @extend #{$self}__square; 69 | background-color: $clicked-color; 70 | } 71 | 72 | &--fixed { 73 | @extend #{$self}__square; 74 | background-color: $fixed-color; 75 | } 76 | 77 | &--shortest { 78 | @extend #{$self}__square; 79 | background-color: $shortest-color; 80 | } 81 | } 82 | 83 | &__close { 84 | @include modal-close($oc-indigo-7); 85 | } 86 | } -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | import uuidv4 from 'uuid/v4'; 2 | import Styles from 'styles/_variables.scss'; 3 | 4 | // Board Size 5 | export const BOARD_ROW = Number(Styles.boardRow); 6 | export const BOARD_COL = Number(Styles.boardCol); 7 | 8 | // Color 9 | export const INITIAL_COLOR = Styles.initialColor; 10 | export const VISITED_COLOR = Styles.visitedColor; 11 | export const CLICKED_COLOR = Styles.clickedColor; 12 | export const FIXED_COLOR = Styles.fixedColor; 13 | export const SHORTEST_COLOR = Styles.shortestColor; 14 | export const COLOR_TYPES = [ 15 | 'initial', 16 | 'visited', 17 | 'clicked', 18 | 'fixed', 19 | 'shortest', 20 | ]; 21 | 22 | // algorithm 23 | export const DIJKSTRA = 'dijkstra'; 24 | export const BELLMAN_FORD = 'bellman-ford'; 25 | export const A_STAR = 'A-star'; 26 | export const DFS = 'DFS'; 27 | export const BFS = 'BFS'; 28 | 29 | // uuid 30 | export const KEYS = []; 31 | for (let i = 0; i < BOARD_ROW; i++) { 32 | KEYS[i] = []; 33 | for (let j = 0; j < BOARD_COL; j++) { 34 | KEYS[i][j] = uuidv4(); 35 | } 36 | } 37 | 38 | // Item state 39 | export const ITEM_FIXED = 'ITEM_FIXED'; 40 | export const ITEM_INITIAL = 'ITEM_INITIAL'; 41 | export const ITEM_VISITED = 'ITEM_VISITED'; 42 | export const ITEM_CLICKED = 'ITEM_CLICKED'; 43 | export const ITEM_SHORTEST = 'ITEM_SHORTEST'; 44 | 45 | // Delay 46 | export const DELAY_SLOWEST = 550; 47 | export const DELAY_SLOW = 450; 48 | export const DELAY_NORMAL = 300; 49 | export const DELAY_FAST = 150; 50 | export const DELAY_FASTEST = 50; 51 | 52 | // Board 53 | export const BOARD = []; 54 | for (let i = 0; i < BOARD_ROW; i++) { 55 | BOARD[i] = []; 56 | for (let j = 0; j < BOARD_COL; j++) { 57 | BOARD[i][j] = { 58 | color: INITIAL_COLOR, 59 | visit: false, 60 | }; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /src/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin modal($color) { 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | transform: translate(-50%, -50%); 6 | width: 400px; 7 | height: 200px; 8 | background-color: white; 9 | border-radius: 5px; 10 | outline: none; 11 | box-shadow: 0 3px 0 0 rgba(0,0,0,0.4); 12 | text-align: center; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | font-weight: bold; 17 | border-top: 7px solid $color; 18 | } 19 | 20 | @mixin modal-title($color) { 21 | font-family: inherit; 22 | font-size: 36px; 23 | margin-bottom: 20px; 24 | color: $color; 25 | } 26 | 27 | @mixin modal-close($color) { 28 | position: absolute; 29 | right: 10px; 30 | top: 10px; 31 | border-radius: 50%; 32 | width: 25px; 33 | height: 25px; 34 | border: none; 35 | background-color: $color; 36 | color: white; 37 | cursor: pointer; 38 | transition: opacity 0.3s linear; 39 | opacity: 0.5; 40 | outline: none; 41 | 42 | &:hover { 43 | opacity: 1; 44 | } 45 | } -------------------------------------------------------------------------------- /src/styles/_placeholders.scss: -------------------------------------------------------------------------------- 1 | %modal-content { 2 | font-size: 20px; 3 | } 4 | 5 | %disabled { 6 | background-color: $oc-gray-5; 7 | box-shadow: none; 8 | } -------------------------------------------------------------------------------- /src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $visited-color: #75e1ff; 2 | $shortest-color: #cf2541; 3 | $fixed-color: #000000; 4 | $clicked-color: #fcba03; 5 | $initial-color: #a1a6a3; 6 | 7 | $header-height: 10vh; 8 | $content-header-height: 9vh; 9 | $footer-height: 10vh; 10 | $board-height: calc(100vh - (#{$header-height} + #{$content-header-height} + #{$footer-height})); 11 | 12 | $board-row: 16; 13 | $board-col: 30; 14 | 15 | $border-item-size: calc(calc(#{$board-height} / #{$board-row}) - 5px); 16 | 17 | :export { 18 | visitedColor: $visited-color; 19 | shortestColor: $shortest-color; 20 | fixedColor: $fixed-color; 21 | clickedColor: $clicked-color; 22 | initialColor: $initial-color; 23 | 24 | boardRow: $board-row; 25 | boardCol: $board-col; 26 | } --------------------------------------------------------------------------------