Add list (side) quest UI and scss.

src/components/login.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 export default (player, swal) => {
 	function Login(props) {
-		const [input, setInput] = useState(localStorage.getItem("token") ? localStorage.getItem("token"): "" );
+		const [input, setInput] = useState("");
 		return (
 			<div className="login">
 				<div className="wrapper">

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 = <Quests display={display} quests={quests} setDisplay={setDisplay} />;
+			body = (
+				<Quests
+					display={display}
+					quests={quests}
+					setDisplay={setDisplay}
+				/>);
 			break;
 		case "sideQuests":
-			body = <Quests display={display} quests={sideQuests} setDisplay={setDisplay} />;
+			body = (
+				<Quests
+					display={display}
+					quests={sideQuests}
+					setDisplay={setDisplay}
+				/>);
 			break;
 		case "quest":
 		case "sideQuest":
-			body = <Quest display={display} setDisplay={setDisplay} />;
+			body = (
+				<Quest
+					display={display}
+					setDisplay={setDisplay}
+					quest={quest}
+					sideQuest={sideQuest}
+				/>);
 			break;
 		case "addQuest":
 		case "addSideQuest":
-			body = <AddQuest display={display} setDisplay={setDisplay} />;
+			body = (
+				<AddQuest
+					display={display}
+					setDisplay={setDisplay}
+				/>);
 		}
 		return (
 			<div className="main">

src/components/quest.js

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+function Input(props) {
+	return (
+		<label>
+			<input
+				checked={props.const === props.value}
+				type="radio"
+				name={props.name}
+				value={props.value}
+				className="nes-radio is-dark"
+				onClick={() => props.change(props.value)}
+			/>
+			<span>{["Low", "Medium", "High"][props.value - 1]}</span>
+		</label>
+	);
+}
+
+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 (
+				<div className="loader">
+					<img alt="loader" src="./loader.svg"></img>
+				</div>
+			);
+		}
+		else {
+			return (
+				<div className="quest nes-container with-title is-dark">
+					<p className="title">{type}</p>
+					<div className="quest_element">
+						<label>Name</label>
+						<input
+							type="text"
+							className="nes-input is-dark"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</div>
+					<div className="quest_element">
+						<label>Priority</label>
+						<div className="radios">
+							{[1, 2, 3].map((cur) =>
+								<Input
+									name="priority"
+									value={cur}
+									const={priority}
+									key={cur}
+									change={setPriority}
+								/>)}
+						</div>
+					</div>
+					<div className="quest_element">
+						<label>Difficulty</label>
+						<div className="radios">
+							{[1, 2, 3].map((cur) =>
+								<Input
+									name="difficulty"
+									value={cur}
+									const={difficulty}
+									key={cur}
+									change={setDifficulty}
+								/>)}
+						</div>
+					</div>
+				</div>
+			);
+		}
+	}
+
+	Quest.propTypes = {
+		display: PropTypes.object,
+		setDisplay: PropTypes.func,
+	};
+
+	return Quest;
+};

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%;
 				}