diff --git a/src/components/mainapp.js b/src/components/mainapp.js
index 70eebfa..5b2fcfd 100644
--- a/src/components/mainapp.js
+++ b/src/components/mainapp.js
@@ -6,9 +6,28 @@ import Stats from "./stats";
export default (player) => {
function MainApp(props) {
const [ playerStats, setPlayerStats ] = useState(null);
+ // Possible values of display
+ // main: The main display with stats, buttons for list/add
+ const [ display ] = useState("main");
const token = localStorage.getItem("token");
if (playerStats === null)
player.player(token).then((res) => setPlayerStats(res));
+
+ let body;
+ if (display === "main")
+ body = (<>
+
+
+
Quests
+
+
+
+
+
Side Quests
+
+
+
+ >);
return (
@@ -20,7 +39,7 @@ export default (player) => {
}}>Logout
-
+ {body}
);
diff --git a/src/components/stats.js b/src/components/stats.js
index 95e4f84..2fe0982 100644
--- a/src/components/stats.js
+++ b/src/components/stats.js
@@ -2,11 +2,12 @@ import React from "react";
export default function Stats(props) {
if (props.playerStats === null) {
- return ;
+ return ;
} else {
const { xp, quests_completed, total_quests, side_quests_completed, total_side_quests } = props.playerStats;
return (
-
+
+
Player Stats
- XP: {xp}
- Quests: {quests_completed}/{total_quests}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 8a4da1b..a084cbb 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,7 +1,7 @@
body {
margin: 0;
padding: 0;
- background-color: #383838;
+ background-color: #303030;
color: #FFF;
font-family: "Press Start 2P";
}
@@ -34,16 +34,48 @@ body {
padding: 1em 3em;
display: flex;
justify-content: space-between;
- background-color: #000;
- h1 {
- font-family: "Ubuntu";
- }
}
.body {
padding: 1em;
+ div {
+ margin: 1em 0;
+ box-sizing: border-box;
+ button {
+ width: 48%;
+ margin: 0 1%;
+ box-sizing: border-box;
+ }
+ }
}
}
.nes-list.is-circle li::before {
color: #FFF;
}
+
+.loader {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+}
+
+.full_screen {
+ height: 100vh;
+}
+
+@media (max-width: 600px) {
+ .main {
+ header {
+ padding: 1em 1em;
+ }
+ .body {
+ div {
+ button {
+ width: 98%;
+ margin: 0.25em 1%;
+ }
+ }
+ }
+ }
+}