revamping map

src/abi/main.json

@@ -81,6 +81,19 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [],
+    "name": "bombsExploded",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [
       {

src/styles/sections.css

@@ -87,12 +87,11 @@
 }
 
 .dots {
-    width: 10px;
-    height: 10px;
+    width: 6px;
+    height: 6px;
     position: absolute;
-    background-color: red;
     border-radius: 50%;
-    filter: drop-shadow(0 0 4px crimson);
+    filter: drop-shadow(0 0 4px rgb(255, 230, 0, .5));
     animation: pulse .75s ease-out infinite alternate;
 }
 

src/template/Sections.jsx

@@ -90,7 +90,7 @@ class GenerateBombOverlay extends React.Component {
     }
 
     render() {
-        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x}} />)
+        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.props.color}} />)
     }
 }
 
@@ -104,6 +104,8 @@ export function Section3() {
     const [bombBalance, setBombBalance] = useState(0);
     const [bombSupply, setBombSupply] = useState(0);
     const [boomerSupply, setBoomerSupply] = useState(0);
+    const [bombExploded, setBombExploded] = useState(0);
+    const [boomerKillCount, setBoomerKillCount] = useState(0);
     const { isConnected, address } = useAccount();
     useContractReads({
         contracts: [
@@ -144,10 +146,22 @@ export function Section3() {
                 abi: MainABI,
                 enabled: isConnected,
                 functionName: 'bombSupply'
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'bombsExploded'
+            },
+            {
+                address: contractAddress,
+                abi: MainABI,
+                enabled: isConnected,
+                functionName: 'boomerKillCount'
             }
         ],
         watch: true,
-        cacheTime: 4_000,
+        cacheTime: 5000,
         onSuccess(data) {
             setBoomerPrice(data[0].toString());
             setBombPrice(data[1].toString());
@@ -155,6 +169,8 @@ export function Section3() {
             setBombBalance(data[3].toString());
             setBoomerSupply(data[4].toString());
             setBombSupply(data[5].toString());
+            setBombExploded(data[6].toString());
+            setBoomerKillCount(data[7].toString());
         }
     });
     const radicalizeBoomersPrepare = usePrepareContractWrite({
@@ -181,6 +197,14 @@ export function Section3() {
         }
     });
     const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config);
+    const sendBombsPrepare = usePrepareContractWrite({
+        address: contractAddress,
+        abi: MainABI,
+        enabled: isConnected,
+        functionName: 'sendBombs',
+        args: [sendBombAmount]
+    });
+    const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
     return (
         <section className="section">
             {isConnected &&
@@ -195,10 +219,7 @@ export function Section3() {
                             {radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
                         </AwesomeButton>
                     </p>
-                    <Slider className="slider" min={1} max={30} trackStyle={{
-                        backgroundColor:'rgba(125, 46, 104, .8)', 
-                        borderColor:'rgba(37, 19, 81, .8)'
-                    }} onChange={v => debounce(setBoomerAmount(v), 500)} />
+                    <Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
                 </div>
                 <div className="mintItem">
                     <h1>Assemble Bombs</h1>
@@ -210,29 +231,25 @@ export function Section3() {
                             {assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
                         </AwesomeButton>
                     </p>
-                    <Slider className="slider" min={1} max={30} trackStyle={{
-                        backgroundColor:'rgba(125, 46, 104, .8)', 
-                        borderColor:'rgba(37, 19, 81, .8)'
-                    }} onChange={v => setBombAmount(v)} />
+                    <Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
                 </div>
                 <div className="mintItem">
                     <h1>Send Bombs</h1>
                     <p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process.</p>
-                    <p>There are {boomerSupply} BOOMR available to kill</p>
+                    <p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
                     <img src={Explosion} alt="" width="120px" />
                     <p>
-                        <AwesomeButton type="secondary" ripple={true} disabled={bombAmount}>
+                        <AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
                             send {sendBombAmount} (~0 Ξ)
                         </AwesomeButton>
                     </p>
-                    <Slider className="slider" min={1} max={30} trackStyle={{
-                        backgroundColor:'rgba(125, 46, 104, .8)', 
-                        borderColor:'rgba(37, 19, 81, .8)'
-                    }} onChange={v => setSendBombAmount(v)} />
+                    <Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
                 </div>
                 <div className="map">
                     <img src={Map} />
-                    <GenerateBombOverlay amount={bombSupply} />
+                    <GenerateBombOverlay amount={bombSupply - bombBalance - bombExploded} color={'white'} />
+                    <GenerateBombOverlay amount={bombExploded} color={'red'} />
+                    <GenerateBombOverlay amount={bombBalance} color={'yellow'} />
                 </div>
             </div>
             ||