Merge pull request #5 from CSBeastMode/move-init

arvagas · web-flow · commit 5851cadcf9e8 · 2020-01-09T11:03:44.000-05:00
Move init
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.1",
+    "dotenv": "^8.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
diff --git a/src/App/index.js b/src/App/index.js
@@ -3,8 +3,8 @@ import { BrowserRouter, } from "react-router-dom";
 import Routes from './routes'
 
 import { Main } from './styles'
-import Nav from '../Nav'
 
+import Nav from '../Nav'
 import { RouteContext } from "../Contexts/routeContext";
 
 const App = (props) => {
diff --git a/src/App/styles.js b/src/App/styles.js
@@ -3,9 +3,17 @@ import img from '../Images/jeremy-thomas-4dpAqfTbvKA-unsplash.jpg'
 // adding comment
 export const Main = styled.main`
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-evenly;
   align-items: center;
-  flex-flow: column;
+
+  main {
+    width: 99%
+    height: 99%
+  }
+  
+  
+  // flex-flow: column;
   background-image: url(${img});
   background-color: #D4C7DC; /* Used if the image is unavailable */
   height: -webkit-fill-available; /* You must set a specified height */
diff --git a/src/Game/index.js b/src/Game/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import { 
     Main,
+    Bridge,
+    Container
 } from "./styles";
 
 import Terminal from '../Terminal' 
@@ -9,8 +11,11 @@ import Map from '../Map'
 const Game = () => {
     return (
         <Main>
-            <Terminal />
-            <Map /> 
+            <Container>
+                <Bridge id='bridge' />
+                <Terminal id='term' />
+                <Map id='map' />
+            </Container> 
         </Main>
     )
 }
diff --git a/src/Game/styles.js b/src/Game/styles.js
@@ -1,7 +1,79 @@
 import styled from 'styled-components'
+import bridge from '../Images/humanbridge.png'
 
 export const Main = styled.main`
-    display: flex;
-    justify-content: center;
-    align-items: center; 
-`
+    // display: flex;
+    // flex-direction: row;
+    // justify-content: center;
+    // align-items: space-evenly;
+    height: 95vh:
+    width: 95vw;
+    display: grid;
+    grid-template-columns: repeat(20, 1fr);
+    grid-template-rows: repeat(20, 1fr);
+    
+    #bridge {
+        grid-column: 1 / span
+        grid-column-end: ; 
+        // max-width: 50vw;
+    }
+
+    #term {
+        // max-width: 50vw;
+    }
+
+
+`
+export const Container = styled.section`
+    
+`
+
+export const Bridge = styled.div`
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+    border: 4px solid white;
+    background-image: url(${bridge});
+    // background-color: #D4C7DC; /* Used if the image is unavailable */
+    height: 500px; /* You must set a specified height */
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    background-size: cover; /* Resize the background image to cover the entire container */
+`
+
+//FROM MAIN
+// display: grid;
+//     grid-template-rows: repeat(20, 5vw)
+//     grid-template-columns: repeat(20, 5vw)
+    
+
+//     @media(min-width: 500px){
+//         div{
+//             grid-row: 0 / span 20
+//             grid-column: 0 / span 20
+//         }
+//     }
+    
+
+//FROM CONTAINER
+// display: grid
+//     grid-template-rows: 20% 20% 20% 20% 20%
+//     grid-template-columns: 20% 20% 20% 20% 20%
+//     width: 100vw;
+//     height: 95vh;
+//     margin-top: 5px;
+//     padding: 0px;
+
+//     #bridge {
+//         grid-column: 1 / span 2;
+//         grid-row: 1 / span 2;
+//     }
+
+//     #term {
+//         width: 100vw;
+//         grid-columm: 1 / span 2;
+//         grid-row: 4 / span 2;
+//     }
+//     #map{
+//         grid-row: 4;
+//     }
diff --git a/src/Images/Starship.png b/src/Images/Starship.png
diff --git a/src/Images/humanbridge.png b/src/Images/humanbridge.png
diff --git a/src/Landing/index.js b/src/Landing/index.js
@@ -7,7 +7,7 @@ import {
     MyImage,
 } from "./styles";
 import { Link } from "react-router-dom";
-import img from '../Images/ship.png'
+import img from '../Images/Starship.png'
 
 
 const Landing = () => {
diff --git a/src/Map/index.js b/src/Map/index.js
@@ -1,10 +1,11 @@
 import React from 'react'
+import { Map } from "./styles";
 
 const index = () => {
     return (
-        <div>
+        <Map>
             
-        </div>
+        </Map>
     )
 }
 
diff --git a/src/Map/styles.js b/src/Map/styles.js
@@ -1,11 +1,34 @@
 import styled from 'styled-components'
 
-export const Map = styled.section`
-    display: grid:
-    grid-template-rows: repeat(8, 12.5vh);
-    grid-template-colums: repeat(8, 12.5vh);
-
-    @media (min-width: 768px){
-        display:flex;
-    }
+import starship from '../Images/Starship.png'
+
+// const mapObj = {
+//     rows: 10,
+//     columns: 10,
+// }
+
+// display: grid:
+// grid-template-rows: repeat(${mapObj.rows}, 100/${mapObj.rows}vh);
+// grid-template-columns: repeat(${mapObj.columns}, 100/${mapObj.columns}vw);
+
+
+export const Map = styled.div`
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+
+    background-image: url(${starship});
+    // background-color: #D4C7DC; /* Used if the image is unavailable */
+    height: 1200px; /* You must set a specified height */
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    background-size: contain; /* Resize the background image to cover the entire container */
+
+    // @media (min-width: 768px){
+    //     display:flex;
+    // }
+`
+
+export const Room = styled.div`
+    
 `
diff --git a/src/Terminal/commands.js b/src/Terminal/commands.js
@@ -0,0 +1,85 @@
+import axios from 'axios'           
+
+const registeredUser = `{"username":"CapKirk", "password1":"asswerd1", "password2":"asswerd1"}`
+const loginUser = `{"username":"CapKirk", "password":"asswerd1"}`
+const url = `https://lambda-beastmode.herokuapp.com`
+// const token = '284c818834f7c8c56561c73f840fc234a14e819b'
+
+export const commands = {
+    register: () => {
+        try {
+            const key = axios.post(
+                `${url}/api/register/`, 
+                `${registeredUser}`
+            )
+            console.log(key)
+        } catch (err) {
+            console.log(err)
+        }
+    },
+    login: () => {
+        try {
+            const key = axios.post(
+                `${url}/api/login/`, 
+                `${loginUser}`
+            )
+            console.log(key)
+        } catch (err) {
+            console.log(err)
+        }
+    },
+    initialize: () => {
+        try {
+            const token = localStorage.getItem("token")
+            axios.get(
+                `${url}/api/adv/init/`,
+                { headers: { Authorization: `Token ${token}`} }
+            ).then((res) => {
+                const room = res.data;
+                console.log(`WELCOME TO SPACE ${room.name}`)
+                console.log(`You are currently located at: ${room.x_coord}, ${room.y_coord} - ${room.title}`)
+                console.log(`You see: ${room.description}`)
+                const numPlayers = room.players.length
+                if (numPlayers > 0) {
+                    if (numPlayers === 1) {
+                        console.log(`You see a person: ${room.players[0]}`)
+                    } else {
+                        console.log(`You see ${numPlayers}: ${room.players.reduce((player, players) => `${player}, ${players}`)}`)
+                    }
+                } else {
+                    console.log("You see no one")
+                }
+                localStorage.setItem("room", room);
+            })
+        } catch (err) {
+            console.log(err.stack)
+        }
+    },
+    move: (args) => {
+        const direction = args[1]
+        if (!["n", "e", "s", "w"].includes(direction)) {
+            console.log("You must choose one of 4 directions: n s e w")
+            return
+        }
+        try {
+            const token = localStorage.getItem("token")
+            axios.post(
+                `${url}/api/adv/move/`, 
+                {"direction": `${direction}`},
+                { headers: {
+                    Authorization: `Token ${token}`,
+                    "Content-Type": "application/json"
+                }}
+            ).then((res) => {
+                const room = res.data
+                console.log(room)
+                localStorage.setItem("room", room);
+            })
+        } catch (err) {
+            console.log(err.stack)
+        }
+    },
+    // say, 
+}
+
+// export default commands
diff --git a/src/Terminal/index.js b/src/Terminal/index.js
@@ -1,27 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Terminal from 'terminal-in-react'
+import { commands } from './commands'
+
+import { Container } from "./styles";
 
 const index = () => {
+
     return (
-      <div>
+      <Container id="term" >
         <Terminal
           color='green'
           backgroundColor='black'
           barColor='black'
           style={{ fontWeight: "bold", fontSize: "1em" }}
+          watchConsoleLogging
           commands={{
             'open-google': () => window.open('https://www.google.com/', '_blank'),
             showmsg: () => "What's really hood",
-            popup: () => alert('Terminal in React')
+            popup: () => alert('Terminal in React'),
+            register: () => commands.register(),
+            login: () => commands.login(),
+            initialize: () => commands.initialize(),
+            move: (args) => commands.move(args)
           }}
           descriptions={{
             'open-google': 'opens google.com',
             showmsg: 'shows a message',
             alert: 'alert', popup: 'alert'
           }}
-          msg='You can write anything here. Example - Hello! My name is Foo and I like Bar.'
+          msg='Welcome to the Adventure.. Press help to see the command pallete'
         />
-      </div>
+      </Container>
     )
   }
   
diff --git a/src/Terminal/styles.js b/src/Terminal/styles.js
@@ -1,7 +1,7 @@
-import  styled  from "styled-components ";
+import  styled  from 'styled-components'
 
 
-export const Section = styled.section`
-    display: flex; 
-    
+export const Container = styled.div`
+    // display: flex; 
+    border: 5px solid white;
 `
diff --git a/src/index.js b/src/index.js
@@ -16,4 +16,4 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,11 @@`
`1`	`1`	`import React from 'react'`
	`2`	`+import { Map } from "./styles";`
`2`	`3`
`3`	`4`	`const index = () => {`
`4`	`5`	`return (`
`5`		`- <div>`
	`6`	`+ <Map>`
`6`	`7`
`7`		`- </div>`
	`8`	`+ </Map>`
`8`	`9`	`)`
`9`	`10`	`}`
`10`	`11`