initial style work

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "js-sha256": "^0.9.0",
+    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1"

src/App.js

@@ -4,6 +4,7 @@ import { initGame, playerStatus } from "./actions/general";
 import { map } from "./util/map";
 import { collectTreasure } from "./util/autoGold";
 import { useStateValue } from "./hooks/useStateValue";
+import "./styles/main.scss";
 
 // components
 import Dashboard from "./components/Dashboard";
@@ -18,8 +19,7 @@ function App() {
   }, [dispatch]);
 
   return (
-    <div className="App">
-      Treasure Hunt!
+    <div class="app">
       <Dashboard />
     </div>
   );

src/components/Abilities.js

@@ -3,14 +3,22 @@ import { useStateValue } from "../hooks/useStateValue";
 
 export const Abilities = () => {
   const [{ playerState }] = useStateValue();
+
   console.log(playerState);
   return (
-    <div>
-      <div>Unlocked Abilities</div>
-      {playerState.abilities.map((ability, i) => (
-        <li key={i}>{ability.toUpperCase()}</li>
-      ))}
+    <div classList="abilities">
+      <div>Abilities</div>
+      <ul>
+        <li>PRAY</li>
+        <li>FLIGHT</li>
+        <li>DASH</li>
+        <li>CARRY</li>
+        <li>RECALL</li>
+        <li>WARP</li>
+      </ul>
+
     </div>
+
   );
 };
 

src/components/Dashboard.js

@@ -3,20 +3,31 @@ import { useStateValue } from "../hooks/useStateValue";
 
 // components
 import Abilities from "./Abilities";
+import Stats from "./Stats";
+import RoomInfo from "./RoomInfo";
 import Wallet from "./Wallet";
 import Gear from "./Gear";
-import Stats from "./Stats";
-import Room from "./Room";
+
+
 
 const Dashboard = () => {
   const [{ playerState, gameState }] = useStateValue();
+
   return (
-    <div>
-      <Stats />
-      <Abilities />
-      <Wallet />
-      <Gear />
-      <Room />
+    <div className="dashboard">
+      <section className="top">
+        <Stats />
+        <Gear />
+        <Wallet />
+      </section>
+      <section className="middle">
+      <RoomInfo />
+      </section>
+      <section className="bottom">
+      <p className="mode">[MODE] Switch between different automated modes. dpad for manual directional control, text input for sending request body?</p>
+      <p className="log">[LOGS]</p>
+      <Abilities /></section>
+
     </div>
   );
 };

src/components/Gear.js

@@ -1,14 +1,28 @@
 import React from "react";
 import { useStateValue } from "../hooks/useStateValue";
 
+
 export const Gear = () => {
   const [{ playerState }] = useStateValue();
-
   return (
-    <div>
-      <div>Gear</div>
-      <div>Bodywear: {playerState.bodywear}</div>
-      <div>Footwear: {playerState.footwear}</div>
+    <div className="gear">
+      <p>
+        Bodywear:{" "}
+        {playerState.bodywear ? (
+          <span className="statValue">{playerState.bodywear}</span>
+        ) : (
+          "No bodywear."
+        )}
+      </p>
+      <p>
+        Footwear:{" "}
+        {playerState.footwear ? (
+          <span className="statValue">{playerState.footwear}</span>
+        ) : (
+          "No footwear."
+        )}
+      </p>
+
     </div>
   );
 };

src/components/Room.js

@@ -5,7 +5,7 @@ export const Room = () => {
   const [{ gameState }] = useStateValue();
 
   return (
-    <div>
+    <div className="room">
       <div>Current Room #: {gameState.room_id}</div>
       <div>Coordinates: {gameState.coordinates}</div>
       <div>

src/components/RoomInfo.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useStateValue } from "../hooks/useStateValue";
+
+export const Room = () => {
+  const [{ gameState }] = useStateValue();
+
+  return (
+    <div>
+    </div>
+  );
+};
+
+export default Room;

src/components/Stats.js

@@ -5,12 +5,11 @@ export const Stats = () => {
   const [{ playerState }] = useStateValue();
 
   return (
-    <div>
-      <div>Name: {playerState.name}</div>
-      <div>Stats</div>
-      <div>Strength: {playerState.strength}</div>
-      <div>Speed: {playerState.speed}</div>
-      <div>Encumbrance: {playerState.encumbrance}</div>
+    <div className="stats">
+      <h1><span className="statValue">{playerState.name ? playerState.name : "Unnamed soul"}</span></h1>
+      <p>Strength: <span className="statValue">{playerState.strength}</span></p>
+      <p>Speed: <span className="statValue">{playerState.speed}</span></p>
+      <p>Encumbrance: <span className={playerState.encumbrance !== 0 ? "statDanger" : "statValue"}>{playerState.encumbrance}</span></p>
     </div>
   );
 };

src/components/Wallet.js

@@ -1,21 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
 import { useStateValue } from "../hooks/useStateValue";
 
 export const Wallet = () => {
   const [{ playerState, gameState }] = useStateValue();
-  console.log(playerState);
+  const [showInventory, setInventory] = useState(true);
   return (
-    <div>
-      <div>Wallet</div>
-      <div>Gold: {playerState.gold}</div>
-      <div>Coins: {gameState.coins}</div>
-      <div>
-        Inventory:{" "}
-        {playerState.inventory.map((item, i) => (
-          <li key={i}>{item}</li>
-        ))}
-      </div>
+    <>
+    <div className="wallet">
+      <p>
+        Gold: <span className="statValue">{playerState.gold}</span>
+      </p>
+      <p>
+        Coins: <span className="statValue">{gameState.coins}</span>
+      </p>
+      <p>
+        Snitches: <span className="statValue">{playerState.snitches}</span>
+      </p>
+    <div className="inventory-button" onClick={() => setInventory(!showInventory)}><p>Inventory {showInventory ? "▸" : "▾"}</p></div>
     </div>
+    {showInventory && (
+        <div classList="inventory">
+          <h2>Inventory</h2>
+          {" "}
+          <ul>
+            {playerState.inventory.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </>
   );
 };
 

src/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import App from "./App";
 
 import { StateProvider } from "./contexts/StateContext";

src/styles/main.scss

@@ -0,0 +1,115 @@
+@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans');
+
+$fuschia-dk: #452434;
+$royal-dk: #30346d;
+$almost-black: #140c1c;
+$purple: #597dcf;
+$almost-cyan: #6dc3cb;
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: $almost-black;
+}
+
+div {
+    margin: 0;
+    padding: 0
+}
+
+h1 {
+    font-family: 'Alegreya', serif;
+    font-size: 20px;
+    margin: 0;
+    color: $purple;
+}
+
+h2 {
+    font-family: 'Alegreya', serif;
+    font-size: 16px;
+    margin: 0;
+    color: $purple;
+}
+
+.statValue {
+    color: $almost-cyan;
+}
+
+.statDanger {
+    color: red
+}
+
+p, ul {
+    font-family: 'Alegreya Sans', sans-serif;
+    font-size: 16px;
+    margin: 10px;
+    color: $purple;
+}
+
+
+ul {
+    display: flex;
+    flex-direction: column;
+    margin: 0
+}
+
+
+li {  
+    font-family: 'Alegreya Sans', sans-serif;
+    font-size: 16px;
+    color: $purple;
+}
+
+.dashboard {
+    width: 100vw;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: space-evenly;
+    justify-content: space-between
+}
+
+.top {
+    width: 100vw;
+    min-height: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+.middle {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+.bottom {
+    width: 100vw;
+    min-height: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+}
+
+.inventory-button {
+    font-family: 'Alegreya Sans', sans-serif;
+    font-size: 16px;
+    border: 1px solid #333;
+    border-radius: 2px;
+}
+
+.inventory {
+    display: block;
+    border: 1px solid #333;
+    border-radius: 2px;
+    padding: 5px
+
+}
+
+.stats, .gear, .wallet, .roomInfo {
+    padding: 10px
+}
+
+.abilities {
+    border: 1px solid magenta
+}