fix my components

src/abi/main.json

@@ -94,90 +94,6 @@
     "stateMutability": "view",
     "type": "function"
   },
-  {
-    "inputs": [
-      {
-        "internalType": "address",
-        "name": "_address",
-        "type": "address"
-      }
-    ],
-    "name": "boomerBalance",
-    "outputs": [
-      {
-        "internalType": "uint256",
-        "name": "",
-        "type": "uint256"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "inputs": [],
-    "name": "boomerKillCount",
-    "outputs": [
-      {
-        "internalType": "uint256",
-        "name": "",
-        "type": "uint256"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "inputs": [],
-    "name": "boomerMaxSupply",
-    "outputs": [
-      {
-        "internalType": "uint256",
-        "name": "",
-        "type": "uint256"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "inputs": [],
-    "name": "boomerPrice",
-    "outputs": [
-      {
-        "internalType": "uint256",
-        "name": "",
-        "type": "uint256"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "inputs": [],
-    "name": "boomerSupply",
-    "outputs": [
-      {
-        "internalType": "uint256",
-        "name": "",
-        "type": "uint256"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
-  {
-    "inputs": [],
-    "name": "boomerSurvivorCount",
-    "outputs": [
-      {
-        "internalType": "uint256",
-        "name": "",
-        "type": "uint256"
-      }
-    ],
-    "stateMutability": "view",
-    "type": "function"
-  },
   {
     "inputs": [],
     "name": "mailbomb",
@@ -319,6 +235,90 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_address",
+        "type": "address"
+      }
+    ],
+    "name": "unaboomerBalance",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "unaboomerMaxSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "unaboomerPrice",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "unaboomerSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "unaboomerSurvivorCount",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "unaboomersKilled",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [],
     "name": "withdraw",

src/styles/sections.css

@@ -87,17 +87,17 @@
 }
 
 .dots {
-    width: 6px;
-    height: 6px;
+    width: 7px;
+    height: 7px;
     position: absolute;
     border-radius: 50%;
     filter: drop-shadow(0 0 4px rgb(255, 230, 0, .5));
-    animation: pulse .75s ease-out infinite alternate;
+    animation: pulse .75s ease infinite alternate;
 }
 
 @keyframes pulse {
-    0% { opacity: .3 }
-    25% { opacity: .5}
+    0% { opacity: .5 }
+    25% { opacity: .65}
     50% { opacity: .7 }
     75% { opacity: .9 }
     100% { opacity: 1 }

src/template/Sections.jsx

@@ -75,18 +75,32 @@ export function Section2() {
 class GenerateBombOverlay extends React.Component {
     constructor(props) {
         super(props);
+        let bombCoords = this.generateCoords(props.amount);
+        this.state = {coords: bombCoords, color: props.color};
+    }
+
+    generateCoords(amt) {
         let bombCoords = [];
-        for (let i = 0; i < props.amount; i++) {
-            let min = Math.ceil(0);
-            let randX = Math.floor(Math.random() * (Math.floor(100) - min) + min);
-            let randY = Math.floor(Math.random() * (Math.floor(100) - min) + min);
+        for (let i = 0; i < amt; i++) {
+            let randX = Math.floor(Math.random() * 100);
+            let randY = Math.floor(Math.random() * 100);
             let o = {
                 x: `${randX}%`,
                 y: `${randY}%`
             }
             bombCoords.push(o);
         }
-        this.state = {coords: bombCoords, color: this.props.color};
+        return bombCoords;
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.amount !== prevProps.amount) {
+            console.log('updating game map');
+            let bombCoords = this.generateCoords(this.props.amount);
+            this.setState({
+                coords: bombCoords
+            });
+        }
     }
 
     render() {
@@ -97,6 +111,24 @@ class GenerateBombOverlay extends React.Component {
 class GameMap extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {
+            bombSupply: 0,
+            bombBalance: 0,
+            bombsExploded: 0
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (
+            (this.props.bombSupply !== prevProps.bombSupply) ||
+            (this.props.bombBalance !== prevProps.bombBalance)
+        ) {
+            this.setState({
+                bombSupply: this.props.bombSupply,
+                bombBalance: this.props.bombBalance,
+                bombsExploded: this.props.bombsExploded
+            });
+        }
     }
 
     render() {
@@ -106,11 +138,11 @@ class GameMap extends React.Component {
                 <div className="map">
                     <img src={Map} />
                     {/* show active bombs held by other players */}
-                    <GenerateBombOverlay amount={this.props.bombSupply - this.props.bombBalance - this.props.bombsExploded} color={'white'} />
+                    <GenerateBombOverlay amount={this.state.bombSupply - this.state.bombBalance - this.state.bombsExploded} color={'white'} />
                     {/* show bombs that have exploded */}
-                    <GenerateBombOverlay amount={this.props.bombsExploded} color={'red'} />
+                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'red'} />
                     {/* show player bombs */}
-                    <GenerateBombOverlay amount={this.props.bombBalance} color={'yellow'} />
+                    <GenerateBombOverlay amount={this.state.bombBalance} color={'yellow'} />
                 </div>
             </>
         )
@@ -132,7 +164,7 @@ function Section3() {
         unaboomersKilled: 0
     });
     const handleStateChange = (obj) =>{
-        setOptions(preState => ({...preState , obj}))
+        setOptions(preState => ({...preState , ...obj}))
     }
     const { isConnected, address } = useAccount();
     useContractReads({
@@ -189,7 +221,7 @@ function Section3() {
             }
         ],
         watch: true,
-        cacheTime: 5000,
+        cacheTime: 5,
         onSuccess(data) {
             handleStateChange({
                 unaboomerPrice: data[0].toString(),
@@ -201,7 +233,6 @@ function Section3() {
                 bombsExploded: data[6].toString(),
                 unaboomersKilled: data[7].toString(),
             });
-            console.log(options)
         }
     });
     const radicalizeBoomersPrepare = usePrepareContractWrite({