diff --git a/src/components/mainapp.js b/src/components/mainapp.js
index fb22571..9a3a6fc 100644
--- a/src/components/mainapp.js
+++ b/src/components/mainapp.js
@@ -33,7 +33,8 @@ export default (player, quest, sideQuest) => {
sideQuest.getSideQuests(token).then((res) => setSideQuests(res));
let body;
- if (display.type === "main")
+ switch(display.type) {
+ case "main":
body = (<>
@@ -58,13 +59,22 @@ export default (player, quest, sideQuest) => {
className="nes-btn is-primary"
>List Side Quests
- >);
- else if (display.type === "quests" || display.type === "sideQuests")
- body = ;
- else if (display.type === "quest" || display.type === "sideQuest")
- body = ;
- else if (display.type === "addQuest" || display.type === "addSideQuest")
- body = ;
+ >);
+ break;
+ case "quests":
+ body = ;
+ break;
+ case "sideQuests":
+ body = ;
+ break;
+ case "quest":
+ case "sideQuest":
+ body = ;
+ break;
+ case "addQuest":
+ case "addSideQuest":
+ body = ;
+ }
return (
diff --git a/src/components/quests.js b/src/components/quests.js
index e69de29..c5a2b25 100644
--- a/src/components/quests.js
+++ b/src/components/quests.js
@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function QuestTile(props) {
+ return (
+
{props.quest.name}
+
Difficulty: {["Low", "Medium", "High"][props.quest.difficulty - 1]}
+
Priority: {["Low", "Medium", "High"][props.quest.priority - 1]}
+
State: {props.quest.state ? "Complete": "Incomplete"}
+
+
+ );
+}
+
+QuestTile.propTypes = {
+ quest: PropTypes.object,
+ setDisplay: PropTypes.func,
+};
+
+function Quests(props) {
+ const name = {
+ quests: "Quests",
+ sideQuests: "Side Quests"
+ }[props.display.type];
+ return (
+
+
+
{name}
+
+
+ {props.quests.map((cur) =>
)}
+
+ );
+}
+
+Quests.propTypes = {
+ quests: PropTypes.array,
+ display: PropTypes.object,
+ setDisplay: PropTypes.func,
+};
+
+export default Quests;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 52cd0c8..cbaef92 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -48,6 +48,35 @@ body {
box-sizing: border-box;
}
}
+ .quests {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ .quests_head {
+ margin: 0 2.5%;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ h2 {
+ text-align: left;
+ }
+ .back {
+ border: none;
+ color: #FFF;
+ background-color: rgba(0,0,0,0);
+ text-align: right;
+ width: 30px;
+ margin: 0;
+ padding: 0;
+ }
+ }
+ .quest_tile {
+ width: 45%;
+ text-align: center;
+ margin: 2.5%;
+ }
+ }
}
}
@@ -78,6 +107,13 @@ body {
margin: 0.25em 1%;
}
}
+ .quests {
+ .quests_head {
+ }
+ .quest_tile {
+ width: 95%;
+ }
+ }
}
}
}