ceda_ei
/
questable-web-ui
mirror of https://gitlab.com/questable/questable-web-ui
1
0
Fork 0
Code Issues Releases Wiki Activity

Add stats to MainApp, dark theme, new font.

This commit is contained in:
Ceda EI 2019-03-29 15:35:14 +05:30
parent 005cb2172a
commit 27033c5a99
6 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"

2
src/components/login.js
View File

@ -7,7 +7,7 @@ export default (player) => {
return (
<div className="login">
<div className="wrapper">
<input type="text" placeholder="Token ID" value={input} className="nes-input"
<input type="text" placeholder="Token ID" value={input} className="nes-input is-dark"
onChange={evt => setInput(evt.target.value)} />
<button className="nes-btn is-primary"
onClick={

22
src/components/mainapp.js
View File

@ -1,18 +1,34 @@
import React from "react";
import { useState } from "react";
import PropTypes from "prop-types";
export default () => {
export default (player) => {
function MainApp(props) {
const [ playerStats, setPlayerStats ] = useState(null);
const token = localStorage.getItem("token");
if (playerStats === null)
player.player(token).then((res) => setPlayerStats(res));
return (
<div className="main">
<header>
<p>Questable</p>
<button
<h1 className="nes-text is-primary">Questable</h1>
<button className="nes-btn is-error"
onClick={() => {
props.setLoggedIn(false);
localStorage.removeItem("token");
}}>Logout</button>
</header>
<div className="body">
<div className="stats lists">
{ playerStats === null ? "Loading" :
<ul className="nes-list is-circle">
<li> XP: {playerStats.xp} </li>
<li> Quests: {playerStats.quests_completed}/{playerStats.total_quests} </li>
<li> Side Quests: {playerStats.side_quests_completed}/{playerStats.total_side_quests} </li>
</ul>
}
</div>
</div>
</div>
);
}

4
src/index.js
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./scss/index.scss";
import "nes.css/css/nes.min.css";
import "./scss/index.scss";
import { config } from "./config";
import axios from "axios";
import login from "./components/login";
@ -11,7 +11,7 @@ import models from "./models";
const { player } = models(config, axios);
const Login = login(player);
const MainApp = mainapp();
const MainApp = mainapp(player);
function App(){
const [loggedIn, setLoggedIn] = useState(false);

10
src/models/player.js
View File

@ -3,4 +3,14 @@ export default (config, axios) => {return {
return axios.get(`${config.apiUrl}/auth?token=${encodeURIComponent(token)}`)
.then((res) => res.data.success);
},
player: (token) => {
return axios.get(`${config.apiUrl}/player?token=${encodeURIComponent(token)}`)
.then((res) => {
if (res.status !== 200) {
return false;
} else {
return res.data;
}
});
},
};};

28
src/scss/index.scss
View File

@ -1,3 +1,11 @@
body {
margin: 0;
padding: 0;
background-color: #383838;
color: #FFF;
font-family: "Press Start 2P";
}
.login {
padding: 15%;
display: flex;
@ -19,3 +27,23 @@
}
}
}
.main {
header {
width: 100%;
padding: 1em 3em;
display: flex;
justify-content: space-between;
background-color: #000;
h1 {
font-family: "Ubuntu";
}
}
.body {
padding: 1em;
}
}
.nes-list.is-circle li::before {
color: #FFF;
}