more styling

public/electron.js

@@ -7,16 +7,17 @@ function createWindow() {
  const win = new BrowserWindow({
  width: 1280,
  height: 720,
- minWidth: 1280,
- minHeight: 720,
- frame: false,
+ resizable: false,
  webPreferences: {
  nodeIntegration: true
  },
  // Hide the titlebar from MacOS applications while keeping the stop lights
  titleBarStyle: "hidden" // or 'customButtonsOnHover',
  });
 
+ // remove the shitty menu
+ win.setMenu(null);
+
  // and load the index.html of the app.
  win.loadURL(
  isDev

src/App.js

@@ -1,9 +1,8 @@
 import React, { Component } from "react";
-import "bootswatch/dist/united/bootstrap.min.css";
 import axios from "axios";
+import { Button } from "react-bootstrap";
 
 import Population from "./components/Population.jsx";
-import Header from "./components/Header.jsx";
 import Invasions from "./components/Invasions.jsx";
 import ServerStatus from "./components/ServerStatus.jsx";
 import SillyMeter from "./components/SillyMeter.jsx";
@@ -13,7 +12,8 @@ class App extends Component {
  invData: [],
  popData: [],
  sillyData: [],
- lastUpdate: "Never"
+ lastUpdate: "Updating...",
+ mode: "Light"
  };
 
  loadData = async () => {
@@ -22,6 +22,11 @@ class App extends Component {
  var sillyData;
  var invData;
 
+ // tell the boys that we are updating
+ this.setState({
+ lastUpdate: "Updating..."
+ });
+
  // start with population
  await axios({
  method: "get",
@@ -53,7 +58,7 @@ class App extends Component {
  invData: invData,
  sillyData: sillyData,
  // also update the current time
- lastUpdate: time.toLocaleTimeString()
+ lastUpdate: "Last updated: " + time.toLocaleTimeString()
  });
  };
 
@@ -72,24 +77,30 @@ class App extends Component {
 
  render() {
  return (
- <div>
- <Header lastUpdate={this.state.lastUpdate} refresh={this.loadData} />
- <div className="px-5 py-3">
- <div className="row">
- <div className="col-4 text-left">
- <Invasions invData={this.state.invData} />
- </div>
- <div className="col-8 text-right">
- <Population popData={this.state.popData} />
- </div>
- <div className="w-100 py-3" />
- <div className="col-4 text-left">
- <ServerStatus />
- </div>
- <div className="col-8 text-right">
- <SillyMeter sillyData={this.state.sillyData} />
- </div>
+ <div className="container py-2">
+ <div className="row">
+ <div className="col-5 text-left">
+ <Invasions invData={this.state.invData} />
  </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">
+ <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
+ </Button>
  </div>
  </div>
  );

src/components/Population.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Pie } from "react-chartjs-2";
+import { Doughnut } from "react-chartjs-2";
 import AnimatedNumber from "react-animated-number";
 
 class Population extends Component {
@@ -92,18 +92,18 @@ class Population extends Component {
  }
  ],
  labels: [
- ["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"]]
+ ["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"]
  ]
  };
 
@@ -125,17 +125,16 @@ class Population extends Component {
  />{" "}
  total toons
  </h4>
- <Pie
+ <Doughnut
  data={this.getPopulationChartData()}
  legend={{
  position: "right",
- align: "end",
+ align: "center",
  rtl: true,
  labels: {
  boxWidth: 20
  }
  }}
- height={80}
  options={{
  tooltips: {
  mode: "nearest",

src/components/SillyMeter.jsx

@@ -17,9 +17,9 @@ class SillyMeter extends Component {
 
  return (
  sillyData.rewards[0] +
- ", " +
+ "\n" +
  sillyData.rewards[1] +
- " & " +
+ "\n" +
  sillyData.rewards[2]
  );
  }
@@ -100,13 +100,13 @@ class SillyMeter extends Component {
  render() {
  return (
  <div>
- <h1>
-  Silly Meter{" "}
+ <h1>Silly Meter</h1>
+ <h5>
  <span className={this.getStatus("status")}>
  {this.getStatus("text")} {this.getPercentage()}%
- </span>
- </h1>
- {this.getDate()}
+ </span>{" "}
+  {this.getDate()}
+ </h5>
  <Line percent={this.getPercentage()} strokeColor={this.getColour()} />
  <br />
  {this.getTeams()}