styling; ready for deploy

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

public/electron.js

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

src/App.js

@@ -4,7 +4,6 @@ import { Button } from "react-bootstrap";
 
 import Population from "./components/Population.jsx";
 import Invasions from "./components/Invasions.jsx";
-import ServerStatus from "./components/ServerStatus.jsx";
 import SillyMeter from "./components/SillyMeter.jsx";
 
 class App extends Component {
@@ -84,22 +83,13 @@ class App extends Component {
  </div>
  <div className="col-7 text-right">
  <Population popData={this.state.popData} />
- </div>
- </div>
- <br />
- <br />
- <div className="row">
- <div className="col-8 text-left">
+ <hr />
  <SillyMeter sillyData={this.state.sillyData} />
  </div>
- <div className="col-4 text-right">
- <ServerStatus />
- </div>
  </div>
-
  <div className="fixed-bottom text-center text-muted py-3">
  <Button variant="outline-info" size="sm" onClick={this.loadData}>
- {this.state.lastUpdate} | Version 1.00
+ {this.state.lastUpdate}
  </Button>
  </div>
  </div>

src/components/Invasions.jsx

@@ -1,7 +1,14 @@
 import React, { Component } from "react";
 import { Circle } from "rc-progress";
+import AnimatedNumber from "react-animated-number/build/AnimatedNumber";
 
 function Districts(props) {
+ const formatValue = value => value.toFixed(0);
+ const duration = 800;
+
+ if (props.data === null) {
+ return "Loading invasions";
+ }
  return (
  <ul className="list-group list-group-flush">
  {props.data.map(item => (
@@ -21,7 +28,17 @@ function Districts(props) {
  />
  </div>
  <div className="col-2 text-right">
- <span className="">{item.progress}</span>
+ <AnimatedNumber
+ value={item.progress}
+ formatValue={formatValue}
+ duration={duration}
+ />
+ /
+ <AnimatedNumber
+ value={item.max}
+ formatValue={formatValue}
+ duration={duration}
+ />
  </div>
  </div>
  </li>
@@ -47,26 +64,26 @@ class Invasions extends Component {
  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
+ ? "#ffc107" // 50-75% done
  : "4caf50"; // 0-50% done
 
+ const invCog = invasion[1].Type.replace(/[^-.()0-9a-z& ]/gi, "") + "s";
+
  data.push({
  district: invasion[1].District,
- cog: invasion[1].Type + "s",
+ cog: invCog,
  started: invDate,
- progress: progress,
+ progress: invasion[1].CurrentProgress,
+ max: invasion[1].MaxProgress,
  percent: percent,
  colour: invColour
  });

src/components/Population.jsx

@@ -92,18 +92,18 @@ class Population extends Component {
  }
  ],
  labels: [
- ["Blam Canyon: " + districts["Blam Canyon"] + " toons"],
- ["Boingbury: " + districts["Boingbury"] + " toons"],
- ["Bounceboro: " + districts["Bounceboro"] + " toons"],
- ["Fizzlefield: " + districts["Fizzlefield"] + " toons"],
- ["Gulp Gulch: " + districts["Gulp Gulch"] + " toons"],
- ["Hiccup Hills: " + districts["Hiccup Hills"] + " toons"],
- ["Kaboom Cliffs: " + districts["Kaboom Cliffs"] + " toons"],
- ["Splashport: " + districts["Splashport"] + " toons"],
- ["Splat Summit: " + districts["Splat Summit"] + " toons"],
- ["Thwackville: " + districts["Thwackville"] + " toons"],
- ["Whoosh Rapids: " + districts["Whoosh Rapids"] + " toons"],
- ["Zoink Falls: " + districts["Zoink Falls"] + " toons"]
+ ["Blam Canyon: " + districts["Blam Canyon"]],
+ ["Boingbury: " + districts["Boingbury"]],
+ ["Bounceboro: " + districts["Bounceboro"]],
+ ["Fizzlefield: " + districts["Fizzlefield"]],
+ ["Gulp Gulch: " + districts["Gulp Gulch"]],
+ ["Hiccup Hills: " + districts["Hiccup Hills"]],
+ ["Kaboom Cliffs: " + districts["Kaboom Cliffs"]],
+ ["Splashport: " + districts["Splashport"]],
+ ["Splat Summit: " + districts["Splat Summit"]],
+ ["Thwackville: " + districts["Thwackville"]],
+ ["Whoosh Rapids: " + districts["Whoosh Rapids"]],
+ ["Zoink Falls: " + districts["Zoink Falls"]]
  ]
  };
 

src/components/SillyMeter.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Line } from "rc-progress";
+import AnimatedNumber from "react-animated-number/build/AnimatedNumber";
 
 class SillyMeter extends Component {
  getTeams() {
@@ -12,15 +13,17 @@ class SillyMeter extends Component {
 
  // if there's a winner, return the winner instead
  if (sillyData.winner !== null) {
- return "Reward: " + sillyData.winner;
+ return <h5>{sillyData.winner}</h5>;
  }
 
  return (
- sillyData.rewards[0] +
- "\n" +
- sillyData.rewards[1] +
- "\n" +
- sillyData.rewards[2]
+ <p>
+ {sillyData.rewards[0]}
+ <br />
+ {sillyData.rewards[1]}
+ <br />
+ {sillyData.rewards[2]}
+ </p>
  );
  }
 
@@ -97,13 +100,22 @@ class SillyMeter extends Component {
  return Math.floor(hp / 50000);
  }
 
+ formatValue = value => value.toFixed(0);
+ duration = 500;
+
  render() {
  return (
  <div>
  <h1>Silly Meter</h1>
  <h5>
  <span className={this.getStatus("status")}>
- {this.getStatus("text")} {this.getPercentage()}%
+ {this.getStatus("text")}{" "}
+ <AnimatedNumber
+ value={this.getPercentage()}
+ formatValue={this.formatValue}
+ duration={this.duration}
+ />
+ %
  </span>{" "}
  {this.getDate()}
  </h5>