ceda_ei/questable-web-ui
1
0
Fork 0
mirror of https://gitlab.com/questable/questable-web-ui synced 2025-11-04 12:30:06 +01:00
Code Issues Releases Wiki Activity

Add loader, move stats to seperate file

Browse Source
This commit is contained in:
Ceda EI
2019-03-29 17:08:44 +05:30
parent cf1d58d6fd
commit b378ea545e
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/loader.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ball2" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;"><g ng-attr-transform="translate(0,{{config.dy}})" transform="translate(0,-7.5)"><circle cx="50" ng-attr-cy="{{config.cy}}" r="10" ng-attr-fill="{{config.c1}}" cy="41" fill="#f05125"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="r" calcMode="spline" values="0;15;0" keyTimes="0;0.5;1" dur="1" keySplines="0.2 0 0.8 1;0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle><circle cx="50" ng-attr-cy="{{config.cy}}" r="10" ng-attr-fill="{{config.c2}}" cy="41" fill="#fdb813"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="180 50 50;540 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="r" calcMode="spline" values="15;0;15" keyTimes="0;0.5;1" dur="1" keySplines="0.2 0 0.8 1;0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

11
src/components/mainapp.js
View File

@@ -1,6 +1,7 @@
import React from "react";
import { useState } from "react";
import PropTypes from "prop-types";
import Stats from "./stats";
export default (player) => {
function MainApp(props) {
@@ -19,15 +20,7 @@ export default (player) => {
}}>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>
<Stats playerStats={playerStats} />
</div>
</div>
);

18
src/components/stats.js Normal file
View File

@@ -0,0 +1,18 @@
import React from "react";
export default function Stats(props) {
if (props.playerStats === null) {
return <img src="./loader.svg"></img>;
} else {
const { xp, quests_completed, total_quests, side_quests_completed, total_side_quests } = props.playerStats;
return (
<div className="stats lists">
<ul className="nes-list is-circle">
<li> XP: {xp} </li>
<li> Quests: {quests_completed}/{total_quests} </li>
<li> Side Quests: {side_quests_completed}/{total_side_quests} </li>
</ul>
</div>
);
}
}