improvements

src/styles/sections.css

@@ -109,19 +109,13 @@
 }
 
 .dots {
-    width: 7px;
-    height: 7px;
+    width: 10px;
+    height: 10px;
     position: absolute;
     border-radius: 50%;
-    animation: pulse .75s ease infinite alternate;
+    animation: pulse .5s ease infinite alternate;
 }
 
-.squares {
-    width: 7px;
-    height: 7px;
-    position: absolute;
-    animation: pulse .75s ease infinite alternate;
-}
 
 @keyframes pulse {
     0% { opacity: .5 }

src/template/Sections.jsx

@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { ethers, BigNumber } from 'ethers';
 import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction } from 'wagmi';
-import Typewriter from 'react-ts-typewriter';
-import Slider from 'rc-slider';
 import { Parallax } from 'react-parallax';
 import { animateScroll as scroll } from 'react-scroll'
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { publicProvider } from 'wagmi/providers/public';
-
 import { AwesomeButton } from 'react-awesome-button';
+import Typewriter from 'react-ts-typewriter';
+import Slider from 'rc-slider';
+
 import Boomer from '../img/unaboomer.png';
 import Newspapers from '../img/newspapers.png';
 import Bomb from '../img/bomb.png';
@@ -153,32 +152,37 @@ class GameMap extends React.Component {
         return (
             <>
                 <h1 id="gameMapTitle">Metaverse Map</h1>
-                <div id="gameStats">
-                    <ul>
-                        <li>Active Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}</li>
-                        <li>Dead Unaboomers: {this.state.unaboomersKilled}</li>
-                        <li><p className="dots" style={{backgroundColor: 'white'}}></p> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li>
-                        <li><p className="dots" style={{backgroundColor: '#5BC66E'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li>
-                        <li><p className="dots" style={{backgroundColor: '#c65bb3'}}></p> _ Dud Bombs: {this.state.bombsExploded}</li>
-                    </ul>
-                </div>
-                <div id="killLeader">
-                    <img src={Boomer} width="50px" />
-                    <p className="nopad">
-                        Kill Leader:<br /> 
-                        <a href="https://etherscan.io/address/xxx" target="_blank">
-                            {this.shorten(this.props.leaderAddress)}
-                        </a>
-                    </p>
-                    <p className="nopad">
-                        {this.props.leaderKillCount} kills
-                    </p>
-                </div>
+                {this.state.unaboomerSupply > 0 && (
+                    <div id="gameStats">
+                        <ul>
+                            <li>Active Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}</li>
+                            <li>Dead Unaboomers: {this.state.unaboomersKilled}</li>
+                            <li><p className="dots" style={{backgroundColor: 'white'}}></p> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li>
+                            <li><p className="dots" style={{backgroundColor: '#E0FF4F'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li>
+                            <li><p className="dots" style={{backgroundColor: '#FF2ECC'}}></p> _ Dud Bombs: {this.state.bombsExploded - this.state.unaboomersKilled}</li>
+                        </ul>
+                    </div>
+                )}
+                
+                {this.props.leaderKillCount > 0 && (
+                    <div id="killLeader">
+                        <img src={Boomer} width="50px" />
+                        <p className="nopad">
+                            Kill Leader:<br /> 
+                            <a href={"https://etherscan.io/address/" + this.props.leaderAddress} target="_blank">
+                                {this.shorten(this.props.leaderAddress)}
+                            </a>
+                        </p>
+                        <p className="nopad">
+                            {this.props.leaderKillCount} kills
+                        </p>
+                    </div>
+                )}
                 <div className="map">
                     <img src={Map} />
                     <GenerateBombOverlay amount={this.state.bombSupply - this.state.bombsExploded} color={'white'} type={'dots'} />
-                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'#5BC66E'} type={'dots'} />
-                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'#c65bb3'} type={'dots'} />
+                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'#E0FF4F'} type={'dots'} />
+                    <GenerateBombOverlay amount={this.state.bombsExploded - this.state.unaboomersKilled} color={'#FF2ECC'} type={'dots'} />
                 </div>
             </>
         )
@@ -325,10 +329,7 @@ function Section3() {
         abi: MainABI,
         enabled: isConnected && options.bombBalance > 0,
         functionName: 'sendBombs',
-        args: [options.sendBombAmount],
-        onError(err) {
-            console.log(err);
-        }
+        args: [options.sendBombAmount]
     });
     const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
     useWaitForTransaction({