Skip to content

Commit fa38e64

Browse files
justinelaijustinelai
committed
initial style work
1 parent ad88c7f commit fa38e64

File tree

14 files changed

+1090
-98
lines changed

14 files changed

+1090
-98
lines changed

‎package-lock.json

Lines changed: 876 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^7.1.2",
99
"axios": "^0.19.2",
1010
"js-sha256": "^0.9.0",
11+
"node-sass": "^4.13.1",
1112
"react": "^16.12.0",
1213
"react-dom": "^16.12.0",
1314
"react-scripts": "3.3.1"

‎public/favicon.ico

-1.95 KB
Binary file not shown.

‎src/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { initGame, playerStatus } from "./actions/general";
44
import { map } from "./util/map";
55
import { collectTreasure } from "./util/autoGold";
66
import { useStateValue } from "./hooks/useStateValue";
7+
import "./styles/main.scss";
78

89
// components
910
import Dashboard from "./components/Dashboard";
@@ -18,8 +19,7 @@ function App() {
1819
}, [dispatch]);
1920

2021
return (
21-
<div className="App">
22-
Treasure Hunt!
22+
<div class="app">
2323
<Dashboard />
2424
</div>
2525
);

‎src/components/Abilities.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,22 @@ import { useStateValue } from "../hooks/useStateValue";
33

44
export const Abilities = () => {
55
const [{ playerState }] = useStateValue();
6+
67
console.log(playerState);
78
return (
8-
<div>
9-
<div>Unlocked Abilities</div>
10-
{playerState.abilities.map((ability, i) => (
11-
<li key={i}>{ability.toUpperCase()}</li>
12-
))}
9+
<div classList="abilities">
10+
<div>Abilities</div>
11+
<ul>
12+
<li>PRAY</li>
13+
<li>FLIGHT</li>
14+
<li>DASH</li>
15+
<li>CARRY</li>
16+
<li>RECALL</li>
17+
<li>WARP</li>
18+
</ul>
19+
1320
</div>
21+
1422
);
1523
};
1624

‎src/components/Dashboard.js

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,31 @@ import { useStateValue } from "../hooks/useStateValue";
33

44
// components
55
import Abilities from "./Abilities";
6+
import Stats from "./Stats";
7+
import RoomInfo from "./RoomInfo";
68
import Wallet from "./Wallet";
79
import Gear from "./Gear";
8-
import Stats from "./Stats";
9-
import Room from "./Room";
10+
11+
1012

1113
const Dashboard = () => {
1214
const [{ playerState, gameState }] = useStateValue();
15+
1316
return (
14-
<div>
15-
<Stats />
16-
<Abilities />
17-
<Wallet />
18-
<Gear />
19-
<Room />
17+
<div className="dashboard">
18+
<section className="top">
19+
<Stats />
20+
<Gear />
21+
<Wallet />
22+
</section>
23+
<section className="middle">
24+
<RoomInfo />
25+
</section>
26+
<section className="bottom">
27+
<p className="mode">[MODE] Switch between different automated modes. dpad for manual directional control, text input for sending request body?</p>
28+
<p className="log">[LOGS]</p>
29+
<Abilities /></section>
30+
2031
</div>
2132
);
2233
};

‎src/components/Gear.js

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
11
import React from "react";
22
import { useStateValue } from "../hooks/useStateValue";
33

4+
45
export const Gear = () => {
56
const [{ playerState }] = useStateValue();
6-
77
return (
8-
<div>
9-
<div>Gear</div>
10-
<div>Bodywear: {playerState.bodywear}</div>
11-
<div>Footwear: {playerState.footwear}</div>
8+
<div className="gear">
9+
<p>
10+
Bodywear:{" "}
11+
{playerState.bodywear ? (
12+
<span className="statValue">{playerState.bodywear}</span>
13+
) : (
14+
"No bodywear."
15+
)}
16+
</p>
17+
<p>
18+
Footwear:{" "}
19+
{playerState.footwear ? (
20+
<span className="statValue">{playerState.footwear}</span>
21+
) : (
22+
"No footwear."
23+
)}
24+
</p>
25+
1226
</div>
1327
);
1428
};

‎src/components/Room.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const Room = () => {
55
const [{ gameState }] = useStateValue();
66

77
return (
8-
<div>
8+
<div className="room">
99
<div>Current Room #: {gameState.room_id}</div>
1010
<div>Coordinates: {gameState.coordinates}</div>
1111
<div>

‎src/components/RoomInfo.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import { useStateValue } from "../hooks/useStateValue";
3+
4+
export const Room = () => {
5+
const [{ gameState }] = useStateValue();
6+
7+
return (
8+
<div>
9+
</div>
10+
);
11+
};
12+
13+
export default Room;

‎src/components/Stats.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ export const Stats = () => {
55
const [{ playerState }] = useStateValue();
66

77
return (
8-
<div>
9-
<div>Name: {playerState.name}</div>
10-
<div>Stats</div>
11-
<div>Strength: {playerState.strength}</div>
12-
<div>Speed: {playerState.speed}</div>
13-
<div>Encumbrance: {playerState.encumbrance}</div>
8+
<div className="stats">
9+
<h1><span className="statValue">{playerState.name ? playerState.name : "Unnamed soul"}</span></h1>
10+
<p>Strength: <span className="statValue">{playerState.strength}</span></p>
11+
<p>Speed: <span className="statValue">{playerState.speed}</span></p>
12+
<p>Encumbrance: <span className={playerState.encumbrance !== 0 ? "statDanger" : "statValue"}>{playerState.encumbrance}</span></p>
1413
</div>
1514
);
1615
};

‎src/components/Wallet.js

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { useStateValue } from "../hooks/useStateValue";
33

44
export const Wallet = () => {
55
const [{ playerState, gameState }] = useStateValue();
6-
console.log(playerState);
6+
const [showInventory, setInventory] = useState(true);
77
return (
8-
<div>
9-
<div>Wallet</div>
10-
<div>Gold: {playerState.gold}</div>
11-
<div>Coins: {gameState.coins}</div>
12-
<div>
13-
Inventory:{" "}
14-
{playerState.inventory.map((item, i) => (
15-
<li key={i}>{item}</li>
16-
))}
17-
</div>
8+
<>
9+
<div className="wallet">
10+
<p>
11+
Gold: <span className="statValue">{playerState.gold}</span>
12+
</p>
13+
<p>
14+
Coins: <span className="statValue">{gameState.coins}</span>
15+
</p>
16+
<p>
17+
Snitches: <span className="statValue">{playerState.snitches}</span>
18+
</p>
19+
<div className="inventory-button" onClick={() => setInventory(!showInventory)}><p>Inventory {showInventory ? "▸" : "▾"}</p></div>
1820
</div>
21+
{showInventory && (
22+
<div classList="inventory">
23+
<h2>Inventory</h2>
24+
{" "}
25+
<ul>
26+
{playerState.inventory.map((item, i) => (
27+
<li key={i}>{item}</li>
28+
))}
29+
</ul>
30+
</div>
31+
)}
32+
</>
1933
);
2034
};
2135

‎src/index.css

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import ReactDOM from "react-dom";
3-
import "./index.css";
43
import App from "./App";
54

65
import { StateProvider } from "./contexts/StateContext";

‎src/styles/main.scss

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans');
2+
3+
$fuschia-dk: #452434;
4+
$royal-dk: #30346d;
5+
$almost-black: #140c1c;
6+
$purple: #597dcf;
7+
$almost-cyan: #6dc3cb;
8+
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
background-color: $almost-black;
13+
}
14+
15+
div {
16+
margin: 0;
17+
padding: 0
18+
}
19+
20+
h1 {
21+
font-family: 'Alegreya', serif;
22+
font-size: 20px;
23+
margin: 0;
24+
color: $purple;
25+
}
26+
27+
h2 {
28+
font-family: 'Alegreya', serif;
29+
font-size: 16px;
30+
margin: 0;
31+
color: $purple;
32+
}
33+
34+
.statValue {
35+
color: $almost-cyan;
36+
}
37+
38+
.statDanger {
39+
color: red
40+
}
41+
42+
p, ul {
43+
font-family: 'Alegreya Sans', sans-serif;
44+
font-size: 16px;
45+
margin: 10px;
46+
color: $purple;
47+
}
48+
49+
50+
ul {
51+
display: flex;
52+
flex-direction: column;
53+
margin: 0
54+
}
55+
56+
57+
li {
58+
font-family: 'Alegreya Sans', sans-serif;
59+
font-size: 16px;
60+
color: $purple;
61+
}
62+
63+
.dashboard {
64+
width: 100vw;
65+
min-height: 100vh;
66+
display: flex;
67+
flex-direction: column;
68+
align-items: space-evenly;
69+
justify-content: space-between
70+
}
71+
72+
.top {
73+
width: 100vw;
74+
min-height: 100px;
75+
display: flex;
76+
flex-direction: row;
77+
align-items: flex-start;
78+
}
79+
80+
.middle {
81+
display: flex;
82+
flex-direction: row;
83+
align-items: flex-start;
84+
}
85+
86+
.bottom {
87+
width: 100vw;
88+
min-height: 100px;
89+
display: flex;
90+
flex-direction: row;
91+
align-items: flex-end;
92+
}
93+
94+
.inventory-button {
95+
font-family: 'Alegreya Sans', sans-serif;
96+
font-size: 16px;
97+
border: 1px solid #333;
98+
border-radius: 2px;
99+
}
100+
101+
.inventory {
102+
display: block;
103+
border: 1px solid #333;
104+
border-radius: 2px;
105+
padding: 5px
106+
107+
}
108+
109+
.stats, .gear, .wallet, .roomInfo {
110+
padding: 10px
111+
}
112+
113+
.abilities {
114+
border: 1px solid magenta
115+
}

0 commit comments

Comments
 (0)