From 0ab423cb9591f9f6da4682459ab5ba4c32aa18a0 Mon Sep 17 00:00:00 2001 From: victorN Date: Thu, 9 Jan 2020 13:27:26 -0500 Subject: [PATCH 1/6] frontend mapping starting out --- island-traversal/src/App.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/island-traversal/src/App.js b/island-traversal/src/App.js index 2d929b2..68b53b1 100644 --- a/island-traversal/src/App.js +++ b/island-traversal/src/App.js @@ -31,29 +31,29 @@ function App() { // we are in into the db (or not if exists) let rmRes = await util.info.createRm(currRm); // console.log('rmRes',rmRes) - if(rmRes.status === 304) { - // console.log('update room') + if (rmRes.status === 304) { + // console.log('update room') rmRes = await util.info.updateRoom(currRm); } - - //mine function - // miner.mineCoins() + + //mine function + // miner.mineCoins() // move if there are open rooms // for(let i = 0; i < 1; i++){ - while(true) { + while (true) { //update current room currRm = await util.info.getCurrRm(); cooldown = currRm.cooldown * 1000; await util.delay(cooldown); cooldown = await traversal_helpers.movePlayer(currRm); - console.log("COOLDOWN:", cooldown/1000); + console.log("COOLDOWN:", cooldown / 1000); await util.delay(cooldown); } } - - traverseMap(); + + // traverseMap(); return (
From 95520196a0c533cb17a85c1a271339f4fa552d55 Mon Sep 17 00:00:00 2001 From: victorN Date: Thu, 9 Jan 2020 14:13:06 -0500 Subject: [PATCH 2/6] edit env file --- island-traversal/.env | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/island-traversal/.env b/island-traversal/.env index d245899..47d3eb7 100644 --- a/island-traversal/.env +++ b/island-traversal/.env @@ -1,2 +1 @@ -REACT_APP_API_KEY = 3547480e7afe9c21b68f3bad7e9d76ada756baf8 -REACT_APP_MY_NAME = RORMUR +REACT_APP_API_KEY = 3c34f02345928b8856323cd7ed3efd2b4a9b94ee \ No newline at end of file From bf5eb1115a2afe3dc0e67092cce8d344f9896037 Mon Sep 17 00:00:00 2001 From: victorN Date: Thu, 9 Jan 2020 14:24:01 -0500 Subject: [PATCH 3/6] initial rooms.js --- island-traversal/src/App.js | 5 ++++- island-traversal/src/components/rooms.js | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 island-traversal/src/components/rooms.js diff --git a/island-traversal/src/App.js b/island-traversal/src/App.js index 37dd5b2..1b633ad 100644 --- a/island-traversal/src/App.js +++ b/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(); @@ -60,12 +62,13 @@ function App() { // } } - traverseMap(); + // traverseMap(); return (

Welcome

+ {Rooms}
); diff --git a/island-traversal/src/components/rooms.js b/island-traversal/src/components/rooms.js new file mode 100644 index 0000000..a9cba46 --- /dev/null +++ b/island-traversal/src/components/rooms.js @@ -0,0 +1,14 @@ +import React, { useState, useEffect } from 'react'; +import * as util from '../utils'; + +function Rooms() { + + let getAllRm = util.info.getAllRm() + console.log(getAllRm) + + return ( +
+ ) +} + +export default Rooms \ No newline at end of file From 2b3f5daf918d888d39f77df4af8c6d1baee7b1b1 Mon Sep 17 00:00:00 2001 From: victorN Date: Thu, 9 Jan 2020 14:41:31 -0500 Subject: [PATCH 4/6] mapping title --- island-traversal/src/App.js | 2 +- island-traversal/src/components/rooms.js | 17 ++++++++++++++--- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/island-traversal/src/App.js b/island-traversal/src/App.js index 1b633ad..15c4cdb 100644 --- a/island-traversal/src/App.js +++ b/island-traversal/src/App.js @@ -68,7 +68,7 @@ function App() {

Welcome

- {Rooms} +
); diff --git a/island-traversal/src/components/rooms.js b/island-traversal/src/components/rooms.js index a9cba46..1fad29b 100644 --- a/island-traversal/src/components/rooms.js +++ b/island-traversal/src/components/rooms.js @@ -2,12 +2,23 @@ import React, { useState, useEffect } from 'react'; import * as util from '../utils'; function Rooms() { + const [allRooms, setAllRooms] = useState([]) - let getAllRm = util.info.getAllRm() - console.log(getAllRm) + + useEffect(async () => { + let getAllRm = await util.info.getAllRm() + setAllRooms(getAllRm) + }, []) + + console.log(allRooms, 'all Rooms') return ( -
+
+ { + allRooms.map(room => +
{room.title}
) + } +
) } From 3c9bd7f8c5b95cdccbdea29920434e194cadc6cb Mon Sep 17 00:00:00 2001 From: victorN Date: Thu, 9 Jan 2020 18:32:05 -0500 Subject: [PATCH 5/6] finished mapping, need styling --- island-traversal/package.json | 1 + island-traversal/src/App.js | 2 +- island-traversal/src/components/rooms.js | 92 ++++++++++++++++++++---- island-traversal/src/scss/App.scss | 7 +- island-traversal/src/scss/Rooms.scss | 83 +++++++++++++++++++++ island-traversal/yarn.lock | 5 ++ 6 files changed, 175 insertions(+), 15 deletions(-) create mode 100644 island-traversal/src/scss/Rooms.scss diff --git a/island-traversal/package.json b/island-traversal/package.json index 1a2e53f..c03ac8e 100644 --- a/island-traversal/package.json +++ b/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" }, diff --git a/island-traversal/src/App.js b/island-traversal/src/App.js index 15c4cdb..31c8d38 100644 --- a/island-traversal/src/App.js +++ b/island-traversal/src/App.js @@ -40,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) diff --git a/island-traversal/src/components/rooms.js b/island-traversal/src/components/rooms.js index 1fad29b..23aeaaf 100644 --- a/island-traversal/src/components/rooms.js +++ b/island-traversal/src/components/rooms.js @@ -1,25 +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 [allRooms, setAllRooms] = useState() + const config = { + nodeHighlightBehavior: true, + staticGraph: true, + node: { + color: "white", + size: 300, + highlightStrokeColor: "blue", + renderLabel: true, + }, + link: { + highlightColor: "lightblue", + }, + }; - useEffect(async () => { - let getAllRm = await util.info.getAllRm() - setAllRooms(getAllRm) - }, []) - console.log(allRooms, 'all Rooms') + 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(',') - return ( -
- { - allRooms.map(room => -
{room.title}
) + data.nodes.push({ + id: String(value.room_id), + x: parseInt(coordArray[0] * 10), + y: parseInt(coordArray[1] * 10) + }) + // 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 ( +
+ {console.log('all Rooms', allRooms)} + {allRooms ? + : null}
) } -export default Rooms \ No newline at end of file +export default Rooms + diff --git a/island-traversal/src/scss/App.scss b/island-traversal/src/scss/App.scss index e994711..558f97a 100644 --- a/island-traversal/src/scss/App.scss +++ b/island-traversal/src/scss/App.scss @@ -1,3 +1,6 @@ .App { - text-align: center; -} \ No newline at end of file + width: 100vw; + height: 100vh; + background: white; + background-size: 200% 200%; +} diff --git a/island-traversal/src/scss/Rooms.scss b/island-traversal/src/scss/Rooms.scss new file mode 100644 index 0000000..573cdac --- /dev/null +++ b/island-traversal/src/scss/Rooms.scss @@ -0,0 +1,83 @@ +.map-container { + width: 100%; + height: 400px; + background: rgba(0, 0, 0, 0.85); + border: 1px solid #ddd; + // @include border-radius(12); + display: block; + overflow: hidden; + &.loading { + display: flex; + align-items: center; + justify-content: center; + h4 { + margin-top: -40px; + color: #fff; + color: rgba(255, 255, 255, 0.8); + letter-spacing: 0.5px; + font-size: 1.25rem; + display: block; + animation: blinker 1s linear infinite; + } + @keyframes blinker { + 50% { + opacity: 0; + } + } + } + #graph-id-graph-wrapper { + width: 100%; + height: calc(100% - 40px); + svg { + width: 100% !important; + height: 100% !important; + } + } + #graph-id-graph-container-zoomable { + transform: translate(420px, 165px) scale(1.1); + // transform: translate(410px, 255px) scale(0.6); + } + .mv-btns { + width: 100%; + height: 100%; + background: #eee; + border-top: 1px solid #ccc; + button { + width: 100px; + height: 40px; + background: #fff; + font-weight: bold; + font-size: 0.875rem; + appearance: none; + border: none; + border-right: 2px solid #eee; + &:hover { + background: rgba(179, 103, 214, 0.5); + color: #fff; + color: rgba(255, 255, 255, 0.85); + text-shadow: 0 0 4px rgba(179, 103, 214, 0.85); + } + } + } + // div { + // svg { + // g { + // border: 1px solid blue + // } + // } + // } +} +@media only screen and (max-width: 800px) { + .map-container { + height: calc(40vh - 40px); + } +} +@media only screen and (max-width: 400px) { + .map-container { + .mv-btns { + button { + width: 25%; + } + } + } +} diff --git a/island-traversal/yarn.lock b/island-traversal/yarn.lock index 6e45417..5de59ae 100644 --- a/island-traversal/yarn.lock +++ b/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" From 48f23b0425881395a6f22b78249267620ce0505c Mon Sep 17 00:00:00 2001 From: victorN Date: Thu, 9 Jan 2020 18:40:56 -0500 Subject: [PATCH 6/6] restarted styling --- island-traversal/src/components/rooms.js | 8 +-- island-traversal/src/scss/App.scss | 4 -- island-traversal/src/scss/Rooms.scss | 81 +----------------------- island-traversal/src/scss/index.scss | 10 +-- 4 files changed, 6 insertions(+), 97 deletions(-) diff --git a/island-traversal/src/components/rooms.js b/island-traversal/src/components/rooms.js index 23aeaaf..e10bc51 100644 --- a/island-traversal/src/components/rooms.js +++ b/island-traversal/src/components/rooms.js @@ -12,8 +12,8 @@ function Rooms() { nodeHighlightBehavior: true, staticGraph: true, node: { - color: "white", - size: 300, + color: "black", + size: 200, highlightStrokeColor: "blue", renderLabel: true, }, @@ -39,8 +39,8 @@ function Rooms() { data.nodes.push({ id: String(value.room_id), - x: parseInt(coordArray[0] * 10), - y: parseInt(coordArray[1] * 10) + x: parseInt(coordArray[0] * 40), + y: parseInt(coordArray[1] * 40) }) // console.log('key', key) // console.log('value', value) diff --git a/island-traversal/src/scss/App.scss b/island-traversal/src/scss/App.scss index 558f97a..748abd5 100644 --- a/island-traversal/src/scss/App.scss +++ b/island-traversal/src/scss/App.scss @@ -1,6 +1,2 @@ .App { - width: 100vw; - height: 100vh; - background: white; - background-size: 200% 200%; } diff --git a/island-traversal/src/scss/Rooms.scss b/island-traversal/src/scss/Rooms.scss index 573cdac..fd3faec 100644 --- a/island-traversal/src/scss/Rooms.scss +++ b/island-traversal/src/scss/Rooms.scss @@ -1,83 +1,4 @@ .map-container { width: 100%; - height: 400px; - background: rgba(0, 0, 0, 0.85); - border: 1px solid #ddd; - // @include border-radius(12); - display: block; - overflow: hidden; - &.loading { - display: flex; - align-items: center; - justify-content: center; - h4 { - margin-top: -40px; - color: #fff; - color: rgba(255, 255, 255, 0.8); - letter-spacing: 0.5px; - font-size: 1.25rem; - display: block; - animation: blinker 1s linear infinite; - } - @keyframes blinker { - 50% { - opacity: 0; - } - } - } - #graph-id-graph-wrapper { - width: 100%; - height: calc(100% - 40px); - svg { - width: 100% !important; - height: 100% !important; - } - } - #graph-id-graph-container-zoomable { - transform: translate(420px, 165px) scale(1.1); - // transform: translate(410px, 255px) scale(0.6); - } - .mv-btns { - width: 100%; - height: 100%; - background: #eee; - border-top: 1px solid #ccc; - button { - width: 100px; - height: 40px; - background: #fff; - font-weight: bold; - font-size: 0.875rem; - appearance: none; - border: none; - border-right: 2px solid #eee; - &:hover { - background: rgba(179, 103, 214, 0.5); - color: #fff; - color: rgba(255, 255, 255, 0.85); - text-shadow: 0 0 4px rgba(179, 103, 214, 0.85); - } - } - } - // div { - // svg { - // g { - // border: 1px solid blue - // } - // } - // } -} -@media only screen and (max-width: 800px) { - .map-container { - height: calc(40vh - 40px); - } -} -@media only screen and (max-width: 400px) { - .map-container { - .mv-btns { - button { - width: 25%; - } - } - } + height: 600px; } diff --git a/island-traversal/src/scss/index.scss b/island-traversal/src/scss/index.scss index b68ff71..fb01fb2 100644 --- a/island-traversal/src/scss/index.scss +++ b/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'; \ No newline at end of file +@import "./App";