diff --git a/src/components/mainapp.js b/src/components/mainapp.js
index 9a3a6fc..db6f2ea 100644
--- a/src/components/mainapp.js
+++ b/src/components/mainapp.js
@@ -3,7 +3,7 @@ import { useState } from "react";
import PropTypes from "prop-types";
import Stats from "./stats";
import Quests from "./quests";
-import Quest from "./quest";
+import QuestGen from "./quest";
import AddQuest from "./addquest";
export default (player, quest, sideQuest) => {
@@ -23,6 +23,7 @@ export default (player, quest, sideQuest) => {
const [ display, setDisplay ] = useState({ type: "main"});
const token = localStorage.getItem("token");
+ const Quest = QuestGen(quest, sideQuest);
if (playerStats === null)
player.player(token).then((res) => setPlayerStats(res));
@@ -62,18 +63,38 @@ export default (player, quest, sideQuest) => {
>);
break;
case "quests":
- body =
;
+ body = (
+
);
break;
case "sideQuests":
- body =
;
+ body = (
+
);
break;
case "quest":
case "sideQuest":
- body =
;
+ body = (
+
);
break;
case "addQuest":
case "addSideQuest":
- body =
;
+ body = (
+
);
}
return (
diff --git a/src/components/quest.js b/src/components/quest.js
index e69de29..3e4d70b 100644
--- a/src/components/quest.js
+++ b/src/components/quest.js
@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+function Input(props) {
+ return (
+
+ );
+}
+
+Input.propTypes = {
+ const: PropTypes.number,
+ value: PropTypes.number,
+ name: PropTypes.string,
+ change: PropTypes.func,
+};
+
+export default (quest, sideQuest) => {
+ function Quest(props) {
+ const [ currQuest, setCurrQuest ] = useState(null);
+ const [ name, setName ] = useState("");
+ const [ difficulty, setDifficulty ] = useState(0);
+ const [ priority, setPriority ] = useState(0);
+
+ const type = {
+ quest: "Quest",
+ sideQuest: "Side Quest"
+ }[props.display.type];
+ const token = localStorage.getItem("token");
+
+ if (currQuest === null) {
+ if (props.display.type === "quest")
+ quest.getQuest(token, props.display.id)
+ .then((res) => {
+ setCurrQuest(res);
+ setName(res.name);
+ setDifficulty(res.difficulty);
+ setPriority(res.priority);
+ });
+ else
+ sideQuest.getSideQuest(token, props.display.id)
+ .then((res) => {
+ setCurrQuest(res);
+ setName(res.name);
+ setDifficulty(res.difficulty);
+ setPriority(res.priority);
+ });
+
+ }
+ if (currQuest === null) {
+ return (
+
+
+
+ );
+ }
+ else {
+ return (
+
+
{type}
+
+
+ setName(e.target.value)}
+ />
+
+
+
+
+ {[1, 2, 3].map((cur) =>
+ )}
+
+
+
+
+
+ {[1, 2, 3].map((cur) =>
+ )}
+
+
+
+ );
+ }
+ }
+
+ Quest.propTypes = {
+ display: PropTypes.object,
+ setDisplay: PropTypes.func,
+ };
+
+ return Quest;
+};
diff --git a/src/scss/index.scss b/src/scss/index.scss
index cbaef92..41139a6 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -39,7 +39,7 @@ body {
}
.body {
padding: 0 1em;
- div {
+ .stats {
margin: 1em 0;
box-sizing: border-box;
button {
@@ -48,6 +48,29 @@ body {
box-sizing: border-box;
}
}
+ .quest {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ .quest_element {
+ margin: 1em 0;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ input[type="text"] {
+ width: 80%;
+ }
+ .radios {
+ width: 80%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ }
.quests {
width: 100%;
display: flex;
@@ -107,9 +130,25 @@ body {
margin: 0.25em 1%;
}
}
- .quests {
- .quests_head {
+ .quest {
+ .quest_element {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ label {
+ text-align: left;
+ }
+ input[type="text"] {
+ width: 100%;
+ }
+ .radios {
+ width: 100%;
+ flex-direction: column;
+ justify-content: flex-start;
+ }
}
+ }
+ .quests {
.quest_tile {
width: 95%;
}