Frontend visualization

island-traversal/.env

@@ -1,2 +1 @@
-REACT_APP_API_KEY = 3547480e7afe9c21b68f3bad7e9d76ada756baf8
-REACT_APP_MY_NAME = RORMUR
+REACT_APP_API_KEY = 3c34f02345928b8856323cd7ed3efd2b4a9b94ee

island-traversal/package.json

@@ -10,6 +10,7 @@
     "js-sha256": "^0.9.0",
     "node-sass": "^4.13.0",
     "react": "^16.12.0",
+    "react-d3-graph": "^2.3.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0"
   },

island-traversal/src/App.js

@@ -4,6 +4,8 @@ import * as traversal_helpers from './utils/traversal_helpers';
 import * as bsf_move from './utils/bfs_move'
 import * as miner from './utils/miner'
 
+import Rooms from './components/rooms'
+
 
 function App() {
     const [inputText, setInputText] = useState();
@@ -38,7 +40,7 @@ function App() {
         }
         console.log('bfs path')
         // Traversal to Given Destination
-        let bfsPath = await bsf_move.bfs(currRm.room_id, 337)
+        let bfsPath = await bsf_move.bfs(currRm.room_id, 53)
         console.log(bfsPath, 'path for bfs')
 
         traversal_helpers.moveDestination(bfsPath)
@@ -60,12 +62,13 @@ function App() {
         // }
     }
 
-    traverseMap();
+    // traverseMap();
 
     return (
         <div className="App">
             <header className="App-header">
                 <h1> Welcome </h1>
+                <Rooms />
             </header>
         </div>
     );

island-traversal/src/components/rooms.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import { Graph } from "react-d3-graph";
+import * as util from '../utils';
+
+import '../scss/App.scss'
+import '../scss/Rooms.scss'
+
+function Rooms() {
+    const [allRooms, setAllRooms] = useState()
+
+    const config = {
+        nodeHighlightBehavior: true,
+        staticGraph: true,
+        node: {
+            color: "black",
+            size: 200,
+            highlightStrokeColor: "blue",
+            renderLabel: true,
+        },
+        link: {
+            highlightColor: "lightblue",
+        },
+    };
+
+
+    useEffect(() => {
+        async function getRooms() {
+            try {
+                let getAllRm = await util.info.getAllRm()
+                console.log('get All Room', getAllRm)
+                const arr = []
+                const data = {
+                    nodes: [],
+                    links: []
+                }
+                for (let [key, value] of Object.entries(getAllRm)) {
+                    arr.push(value)
+                    let coordArray = value.coordinates.slice(1, value.coordinates.length - 1).split(',')
+
+                    data.nodes.push({
+                        id: String(value.room_id),
+                        x: parseInt(coordArray[0] * 40),
+                        y: parseInt(coordArray[1] * 40)
+                    })
+                    // console.log('key', key)
+                    // console.log('value', value)
+
+
+                    if (value.dir['south']) {
+                        data.links.push({ source: String(value.room_id), target: String(value.dir['south']) })
+                    }
+
+                    if (value.dir['north']) {
+                        data.links.push({ source: String(value.room_id), target: String(value.dir['north']) })
+                    }
+
+                    if (value.dir['east']) {
+                        data.links.push({ source: String(value.room_id), target: String(value.dir['east']) })
+                    }
+
+                    if (value.dir['west']) {
+                        data.links.push({ source: String(value.room_id), target: String(value.dir['west']) })
+                    }
+
+                }
+                setAllRooms(data)
+            }
+
+            catch (err) {
+                console.log(err)
+            }
+        }
+        getRooms()
+
+
+    }, [])
+
+    return (
+        <div className='map-container'>
+            {console.log('all Rooms', allRooms)}
+            {allRooms ? <Graph
+                style={{ border: "1px solid red" }}
+                id="graph-id"
+                data={allRooms}
+                config={config}
+            />
+                : null}
+        </div>
+    )
+}
+
+export default Rooms
+

island-traversal/src/scss/App.scss

@@ -1,3 +1,2 @@
 .App {
-  text-align: center;
-}
+}

island-traversal/src/scss/Rooms.scss

@@ -0,0 +1,4 @@
+.map-container {
+  width: 100%;
+  height: 600px;
+}

island-traversal/src/scss/index.scss

@@ -1,15 +1,7 @@
 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;
 }
 
-@import './App';
+@import "./App";

island-traversal/yarn.lock

@@ -8611,6 +8611,11 @@ react-app-polyfill@^1.0.5:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-d3-graph@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-d3-graph/-/react-d3-graph-2.3.0.tgz#7f387d838033dc1fb1e6d81ab910a3062a49fdc2"
+  integrity sha512-KjWr53wZt6gbHf4CREFSR9NGuo7P+7nxaj5OXKFna/RclZogxWgCsQne+jYd9bNqEWAg08Qn+xNDh74mqtJHHw==
+
 react-dev-utils@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.0.0.tgz#bd2d16426c7e4cbfed1b46fb9e2ac98ec06fcdfa"