ETA added

README.md

@@ -10,11 +10,10 @@ A modern electron application which shows you the current status of [Toontown Re
 
 - **Population Chart:** View the current population of each district with a nice pie chart. Labels are toggleable by simply clicking on their label in the legend.
 - **Silly Meter Status:** View the progress of the Silly Meter, along with the current/winning/future teams and the time until the next update/expiration of the boost/start of the next cycle.
-- **Invasions List:** A list of all active invasions.
+- **Invasions List:** A list of all active invasions, with an accurate ETA thanks to [Toon Plus](https://toon.plus/invasions).
 
 ## Planned features
 
-- **Estimated Invasion End:** List the time of when an invasion will end.
 - **Icons:** Minimal icons for invasions (cog type) and silly meter (teams) as well as an icon for the app itself (currently using the default electron one).
 - **Notifications:** Notifications for new invasions.
 - **Customization:** Customize the auto-refresh time, dark mode, etc.

package.json

@@ -26,7 +26,9 @@
  "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",
+ "react-tooltip": "^4.0.3",
+ "timeago.js": "^4.0.2"
  },
  "scripts": {
  "react-start": "react-scripts start",

src/components/Invasions.jsx

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import { Circle } from "rc-progress";
 import AnimatedNumber from "react-animated-number/build/AnimatedNumber";
+import * as timeago from "timeago.js";
+import ReactTooltip from "react-tooltip";
 
 function Districts(props) {
  const formatValue = value => value.toFixed(0);
@@ -14,10 +16,12 @@ function Districts(props) {
  {props.data.map(item => (
  <li key={item.district} className="list-group-item">
  <div className="row">
- <div className="col-8">
- <h6>{item.cog}</h6>
+ <div className="col-9">
+ <b data-tip={"started " + item.started}>{item.cog}</b>
+ <br />
+ <ReactTooltip place="right" type="dark" effect="solid" />
  <span className="text-muted">
- in {item.district} since {item.started}
+ in {item.district}, ending {item.eta}
  </span>
  </div>
  <div className="col-2">
@@ -27,7 +31,7 @@ function Districts(props) {
  strokeColor={item.colour}
  />
  </div>
- <div className="col-2 text-right">
+ <div className="col-1 text-right">
  <AnimatedNumber
  value={item.progress}
  formatValue={formatValue}
@@ -63,7 +67,7 @@ class Invasions extends Component {
  Object.entries(invData).forEach(function(invasion) {
  console.log(invasion);
  // variables
- const invDate = new Date(invasion[1].FirstSeen).toLocaleTimeString();
+ const invDate = timeago.format(new Date(invasion[1].FirstSeen));
  const percent = Math.floor(
  (invasion[1].CurrentProgress / invasion[1].MaxProgress) * 100
  );
@@ -77,11 +81,13 @@ class Invasions extends Component {
  : "4caf50"; // 0-50% done
 
  const invCog = invasion[1].Type.replace(/[^-.()0-9a-z& ]/gi, "");
+ const eta = timeago.format(new Date(invasion[1].EstimatedCompletion));
 
  data.push({
  district: invasion[1].District,
  cog: invCog,
  started: invDate,
+ eta: eta,
  progress: invasion[1].CurrentProgress,
  max: invasion[1].MaxProgress,
  percent: percent,

yarn.lock

@@ -9874,7 +9874,7 @@ prop-types-extra@^1.1.0:
  react-is "^16.3.2"
  warning "^4.0.0"
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10240,6 +10240,13 @@ [email protected]:
  optionalDependencies:
  fsevents "2.1.2"
 
+react-tooltip@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.0.3.tgz#2c1f97bb8c4edec0c11e40d39e2c97b7c2bab72b"
+ integrity sha512-xEM+fr8tr/KJP5PZEOg/fc5bZ7ZkC658iMDgCq5DfTqHVyuIOOd5loyxQD0eAJiZ6jWdEd18owbRqd3stHtEDg==
+ dependencies:
+ prop-types "^15.6.0"
+
 react-transition-group@^4.0.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
@@ -11718,6 +11725,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"