navigation to inverted fountain, adding final backgrounds from figma

src/Components/Map/InvertedFountain.js

@@ -0,0 +1,76 @@
+import React, {useContext} from 'react';
+import Scene from './Scene'
+import {UsernameContext} from '../../UsernameContext'
+import Draggable from 'react-draggable';
+import Chat from '../ChatApp'
+import {useHistory} from 'react-router-dom'
+import NavComponent from '../NavComponent';
+
+
+export default function InvertedFountain() {
+  const {user} = useContext(UsernameContext)
+  const history = useHistory()
+  return (
+            <div className="map"
+              style={{
+                overflow: 'none'
+              }}
+            >
+                <Scene username = {user}/>
+                <Draggable
+                  // axis="x"
+                  handle=".handle"
+                  defaultPosition={{x:0, y: -450}}
+                  position={null}
+                  grid={[25, 25]}
+                  scale={1}
+                  >
+                  <div style={{
+                    position: 'absolute'
+                  }}>
+                    {/* <div className="handle" style={{
+                      width: '400px',
+                      background: 'white'
+                    }}>Drag from here</div> */}
+                    {/* <div style={{color: 'white'}}>This readme is really dragging on...</div> */}
+                    {/* <Chat/> */}
+                  </div>
+                </Draggable>
+                <div style={{
+                  position: 'absolute',
+                  zIndex: 50,
+                  right: 50,
+                  bottom: 0,
+                  width: 250,
+                  height: 0}}>
+                    <NavComponent />
+                </div>
+                {/* <button style={{
+                  position: 'absolute',
+                  zIndex: 50,
+                  right: 50,
+                  bottom: 50,
+                  width: 250,
+                  height: 100
+                }} onClick={() => {
+                  history.push('/fishgame')
+                }}>
+                  Play the fish game
+                </button> */}
+
+                <button style={{
+                  position: 'absolute',
+                  zIndex: 50,
+                  right: 50,
+                  top: 50,
+                  width: 250,
+                  height: 100
+                }} onClick={() => {
+                  history.push('/fishgame')
+                }}>
+                  Play the fish game
+                </button>
+            </div>
+  );
+}
+

src/Components/Map/Scene.css

@@ -1,7 +1,18 @@
-#canvas {
-	background-image: url('../../../src/Images/Royce_mockup.svg');
+#default {
+	/* background-image: url('../../../src/Images/Royce_mockup.svg'); */
+	background-image: url('../../../src/Images/thequad.png');
 	height: 100vh;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
+
+#fountain {
+	/* background-image: url('../../../src/Images/Royce_mockup.svg'); */
+	background-image: url('../../../src/Images/InvertedFountain.png');
+	height: 100vh;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+

src/Components/Map/Scene.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import * as THREE from 'three';
 import { Canvas } from 'react-three-fiber';
 import Player from './Player';
@@ -26,10 +26,21 @@ const Scene = ({username}) => {
         setPlayers(players.concat(<Player color={'skyblue'} x_position={0.2} y_position={0}/>))
     }
 
+    const [setting, updateSetting] = useState();
+
+    useEffect(() => {
+        if (window.location.pathname === "/map/fountain") {
+            updateSetting("fountain")
+        }
+        else {
+            updateSetting("default")
+        }
+    }, [])
+
     return (
         <scene ref={scene}>
             {/* <div className="map" onClick={addPlayers}> */}
-                <Canvas id="canvas">
+                <Canvas id={setting}>
                     <PositionContext.Provider value={location}>
                     <Light />
                     {/* {players} */}

src/Components/Map/index.js

@@ -66,9 +66,10 @@ export default function Map() {
                   width: 250,
                   height: 100
                 }} onClick={() => {
-                  history.push('/fishgame')
+                  // history.push('/map/fountain')
+                  document.location.href = ('google.com','map/fountain');
                 }}>
-                  Play the fish game
+                  Visit the Inverted Fountain!
                 </button>
             </div>
   );

src/Components/NavComponent.js

@@ -1,7 +1,7 @@
 import { React, useRef, useState } from 'react';
 import { MdMailOutline, MdSettingsInputSvideo } from "react-icons/md";
 import {CgProfile} from "react-icons/cg"
-import Chat from '../Components/ChatApp';
+import Chat from './ChatApp';
 
 import '../App.css'
 

src/index.js

@@ -13,6 +13,7 @@ import reportWebVitals from './reportWebVitals';
 //import Home from './Components/Home'
 import Login from './Components/Login'
 import Chat from './Components/ChatApp'
+import InvertedFountain from './Components/Map/InvertedFountain';
 //import {UsernameContext} from './UsernameContext'
 import {Provider} from './UsernameContext'
 
@@ -28,6 +29,7 @@ ReactDOM.render(
 
                   <Route exact path="/" render = {() => <Provider><Login></Login></Provider>} />
                   <Route exact path="/chat" render = {() => <Provider><Chat></Chat></Provider>} />
+                  <Route exact path="/map/fountain" render = {() => <Provider><InvertedFountain></InvertedFountain></Provider>} />
                   <Route exact path="/map" render = {() => <Provider><Map></Map></Provider>} />
                   <Route exact path="/fishgame" render = {() => <Provider><FishGame></FishGame></Provider>} />
                   {/* <Route exact path="/chat" component={Chat} /> */}