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> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" 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 ( return (
<div className="login"> <div className="login">
<div className="wrapper"> <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)} /> onChange={evt => setInput(evt.target.value)} />
<button className="nes-btn is-primary" <button className="nes-btn is-primary"
onClick={ onClick={

22
src/components/mainapp.js
View File

@ -1,18 +1,34 @@
import React from "react"; import React from "react";
import { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default () => { export default (player) => {
function MainApp(props) { function MainApp(props) {
const [ playerStats, setPlayerStats ] = useState(null);
const token = localStorage.getItem("token");
if (playerStats === null)
player.player(token).then((res) => setPlayerStats(res));
return ( return (
<div className="main"> <div className="main">
<header> <header>
<p>Questable</p> <h1 className="nes-text is-primary">Questable</h1>
<button <button className="nes-btn is-error"
onClick={() => { onClick={() => {
props.setLoggedIn(false); props.setLoggedIn(false);
localStorage.removeItem("token"); localStorage.removeItem("token");
}}>Logout</button> }}>Logout</button>
</header> </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> </div>
); );
} }

4
src/index.js
View File

@ -1,7 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import "./scss/index.scss";
import "nes.css/css/nes.min.css"; import "nes.css/css/nes.min.css";
import "./scss/index.scss";
import { config } from "./config"; import { config } from "./config";
import axios from "axios"; import axios from "axios";
import login from "./components/login"; import login from "./components/login";
@ -11,7 +11,7 @@ import models from "./models";
const { player } = models(config, axios); const { player } = models(config, axios);
const Login = login(player); const Login = login(player);
const MainApp = mainapp(); const MainApp = mainapp(player);
function App(){ function App(){
const [loggedIn, setLoggedIn] = useState(false); 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)}`) return axios.get(`${config.apiUrl}/auth?token=${encodeURIComponent(token)}`)
.then((res) => res.data.success); .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 { .login {
padding: 15%; padding: 15%;
display: flex; 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;
}