add stats box

src/components/Hero.jsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-
 import { ethers, BigNumber } from 'ethers';
 import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction, erc721ABI } from 'wagmi';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import debounce from 'lodash';
+import { StatsPanel } from './Panels';
 
 import MainABI from '../abi/main.json';
 import '../styles/hero.css';
+import 'react-notifications/lib/notifications.css';
 import Unaboomer from '../img/unaboomer.png';
 import Mailbomb from '../img/mailbomb.png';
 import Explosion from '../img/explosion.png';
@@ -226,6 +227,7 @@ export function Hero(props) {
 
     return (
         <div id='hero'>
+            <NotificationContainer />
             <h1>the web3 revolution & its consequences have been a disaster for the human race.</h1>
             <p>
                 Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin, 
@@ -347,6 +349,14 @@ export function Hero(props) {
                     </>
                 )}
             </div>
+            <StatsPanel 
+                leaderKillCount={options.leaderKillCount}
+                leaderAddress={options.leaderAddress}
+                unaboomersRadicalized={options.unaboomersRadicalized}
+                unaboomersKilled={options.unaboomersKilled}
+                bombsAssembled={options.bombsAssembled}
+                bombsExploded={options.bombsExploded}
+            />
         </div>
     )
 }

src/components/Panels.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import Unaboomer from '../img/unaboomer.png';
+
+export class StatsPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {showStats: false}
+    }
+
+    shorten(s) {
+        return s.slice(0, 6) + '...' + s.slice(-4)
+    }
+
+    render() {
+        return (
+            <>
+                <div id="statsbox">
+                    {this.state.showStats && (
+                        <div className="m2">
+                            <img src={Unaboomer} width="50px" />
+                            <p className="nopad">
+                                Kill Leader:<br />
+                                {this.props.leaderKillCount > 0 && (
+                                    <a href={"https://etherscan.io/address/" + this.props.leaderAddress} target="_blank">
+                                        {this.shorten(this.props.leaderAddress)}
+                                    </a>
+                                ) || "?"}
+                                
+                            </p>
+                            {this.props.leaderKillCount > 0 && (
+                                <p className="nopad">
+                                    {this.props.leaderKillCount} kills
+                                </p>
+                            )}
+                            
+                            <hr />
+                            <p className="nopad">
+                                Active Unaboomers: {this.props.unaboomersRadicalized - this.props.unaboomersKilled} <br />
+                                Dead Unaboomers: {this.props.unaboomersKilled} <br />
+                                Active Bombs: {this.props.bombsAssembled - this.props.bombsExploded} <br />
+                                Exploded Bombs: {this.props.bombsExploded} <br />
+                                Dud Bombs: {this.props.bombsExploded - this.props.unaboomersKilled} <br />
+                            </p>
+                        </div>
+                    )}
+                    <button className="button" onClick={() => {
+                        this.setState({showStats: !this.state.showStats})
+                    }}>
+                        {this.state.showStats && (<>∨ hide stats</>) || <>^ show stats</>}
+                    </button>
+                </div>
+            </>
+        )
+    }
+}

src/styles/hero.css

@@ -58,10 +58,39 @@ button.doThing:disabled {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    /* justify-content: center; */
 }
 
 .ownedToken {
     height: 100%;
     flex: 0 10%;
 }
+
+.nopad {
+    padding: 0;
+    margin: 0;
+}
+
+.nopad a {
+    color: #ff00ea;
+}
+
+.m2 {
+    margin: 10px;
+}
+#statsbox {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #231f20;
+    text-align: left;
+    width: 30%;
+    margin: 0;
+    max-height: 400px;
+    overflow-y: auto;
+    word-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    border-right: 4px solid #f9f9f9;
+    border-top: 4px solid #f9f9f9;
+}