some improvements

src/template/Sections.jsx

@@ -75,10 +75,18 @@ export function Section2() {
 class GenerateBombOverlay extends React.Component {
     constructor(props) {
         super(props);
-        let bombCoords = this.generateCoords(props.amount);
+        let bombCoords = this.generateCoords(this.ifOver(props.amount));
         this.state = {coords: bombCoords, color: props.color};
     }
 
+    ifOver(amt) {
+        if (amt > 100) {
+            return 100;
+        } else {
+            return amt;
+        }
+    }
+
     generateCoords(amt) {
         let bombCoords = [];
         for (let i = 0; i < amt; i++) {
@@ -95,7 +103,7 @@ class GenerateBombOverlay extends React.Component {
 
     componentDidUpdate(prevProps) {
         if (this.props.amount !== prevProps.amount) {
-            let bombCoords = this.generateCoords(this.props.amount);
+            let bombCoords = this.generateCoords(this.ifOver(this.props.amount));
             this.setState({
                 coords: bombCoords
             });
@@ -137,13 +145,13 @@ class GameMap extends React.Component {
     render() {
         return (
             <>
-                <h1 id="gameMapTitle">Game Map</h1>
+                <h1 id="gameMapTitle">Metaverse Map</h1>
                 <div id="gameStats">
                     <ul>
                         <li><span className="squares" style={{backgroundColor: 'white'}}></span> _ Alive Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}</li>
                         <li><span className="squares" style={{backgroundColor: 'black'}}></span> _ Dead Unaboomers: {this.state.unaboomersKilled}</li>
                         <li><span className="dots" style={{backgroundColor: 'yellow'}}></span> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li>
-                        <li><span className="dots" style={{backgroundColor: 'green'}}></span> _ Exploded Bombs: {this.state.bombsExploded}</li>
+                        <li><span className="dots" style={{backgroundColor: 'cyan'}}></span> _ Exploded Bombs: {this.state.bombsExploded}</li>
                         <li><span className="dots" style={{backgroundColor: 'red'}}></span> _ Dud Bombs: {this.state.bombsExploded}</li>
                     </ul>
                 </div>
@@ -152,7 +160,7 @@ class GameMap extends React.Component {
                     <GenerateBombOverlay amount={this.state.unaboomerSupply - this.state.unaboomersKilled} color={'white'} type={'squares'} /> 
                     <GenerateBombOverlay amount={this.state.unaboomersKilled} color={'black'} type={'squares'} />
                     <GenerateBombOverlay amount={this.state.bombSupply - this.state.bombsExploded} color={'yellow'} type={'dots'} />
-                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'green'} type={'dots'} />
+                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'cyan'} type={'dots'} />
                     <GenerateBombOverlay amount={this.state.bombsExploded} color={'red'} type={'dots'} />
                 </div>
             </>