fucking finished invasions

package.json

@@ -26,7 +26,8 @@
  "react-bootstrap": "^1.0.0-beta.16",
  "react-chartjs-2": "^2.9.0",
  "react-dom": "^16.12.0",
- "react-scripts": "3.4.0"
+ "react-scripts": "3.4.0",
+ "timeago.js": "^4.0.2"
  },
  "scripts": {
  "react-start": "react-scripts start",

public/electron.js

@@ -16,7 +16,6 @@ function createWindow() {
  });
 
  // remove the shitty menu
- win.setMenu(null);
 
  // and load the index.html of the app.
  win.loadURL(

src/App.js

@@ -45,7 +45,7 @@ class App extends Component {
  // quick stop at the invasions
  await axios({
  method: "get",
- url: "https://www.toontownrewritten.com/api/invasions"
+ url: "https://api.toon.plus/invasions/"
  }).then(resp => {
  invData = resp.data;
  });

src/components/Invasions.jsx

@@ -1,11 +1,88 @@
 import React, { Component } from "react";
+import { Circle } from "rc-progress";
+
+function Districts(props) {
+ return (
+ <ul className="list-group list-group-flush">
+ {props.data.map(item => (
+ <li key={item.district} className="list-group-item">
+ <div className="row">
+ <div className="col-8">
+ <h6>{item.cog}</h6>
+ <span className="text-muted">
+ in {item.district} since {item.started}
+ </span>
+ </div>
+ <div className="col-2">
+ <Circle
+ percent={item.percent}
+ strokeWidth={10}
+ strokeColor={item.colour}
+ />
+ </div>
+ <div className="col-2 text-right">
+ <span className="">{item.progress}</span>
+ </div>
+ </div>
+ </li>
+ ))}
+ </ul>
+ );
+}
 
 class Invasions extends Component {
+ InvasionData() {
+ // first we need to get the data
+ const { invData } = this.props;
+ // if we're still loading, slap a loading
+ if (invData === []) {
+ return [];
+ }
+
+ console.log(invData);
+
+ // build the array
+ var data = [];
+ Object.entries(invData).forEach(function(invasion) {
+ console.log(invasion);
+ // variables
+ const invDate = new Date(invasion[1].FirstSeen).toLocaleTimeString();
+ const progress =
+ invasion[1].CurrentProgress + "/" + invasion[1].MaxProgress;
+ const percent = Math.floor(
+ (invasion[1].CurrentProgress / invasion[1].MaxProgress) * 100
+ );
+
+ const invColour =
+ percent >= 90
+ ? "#ff5722" // 90-100% done
+ : percent >= 75
+ ? "#ff9800" // 75-90% done
+ : percent >= 50
+ ? "#ffeb3b" // 50-75% done
+ : "4caf50"; // 0-50% done
+
+ data.push({
+ district: invasion[1].District,
+ cog: invasion[1].Type + "s",
+ started: invDate,
+ progress: progress,
+ percent: percent,
+ colour: invColour
+ });
+ });
+
+ // now push that to the state
+ return data;
+ }
+
  render() {
+ const items = this.InvasionData();
+
  return (
  <>
  <h1>Invasions</h1>
- <p>List of active invasions.</p>
+ <Districts data={items} />
  </>
  );
  }

yarn.lock

@@ -11718,6 +11718,11 @@ thunky@^1.0.2:
  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+timeago.js@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+ integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
+
 timers-browserify@^2.0.4:
  version "2.0.11"
  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"