add map with plotted points

src/index.js

@@ -36,7 +36,7 @@ const wagmiClient = createClient({
 ReactDOM.createRoot(document.getElementById("root")).render(
   <ParallaxProvider>
     <WagmiConfig client={wagmiClient}>
-        <RainbowKitProvider chains={chains} initialChain={1337}>
+        <RainbowKitProvider chains={chains} initialChain={5}>
             <Wallet />
             <div className="scrollContainer">
               <AllSections />

src/styles/sections.css

@@ -51,7 +51,6 @@
 
 .mintContainer {
     padding-top: 6em;
-    margin: 2em auto;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -71,3 +70,27 @@
     text-align: center;
     margin: 0 auto 1em auto;
 }
+
+.map {
+    cursor: crosshair;
+    margin: 2em 0 0 0;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}
+
+.map img {
+    margin: 0 auto;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.dots {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    background-color: red;
+    border-radius: 50%;
+    filter: drop-shadow(0 0 4px crimson);
+}

src/template/Sections.jsx

@@ -13,6 +13,7 @@ import Newspapers from '../img/newspapers.png';
 import Bomb from '../img/bomb.png';
 import Explosion from '../img/explosion.png';
 import SeizedItems from '../img/seizeditems.png';
+import Map from '../img/map.png';
 import MainABI from '../abi/main.json';
 
 import 'rc-slider/assets/index.css';
@@ -71,14 +72,37 @@ export function Section2() {
     )
 }
 
+class GenerateBombOverlay extends React.Component {
+    constructor(props) {
+        super(props);
+        let bombCoords = [];
+        for (let i = 0; i < props.amount; i++) {
+            let min = Math.ceil(0);
+            let randX = Math.floor(Math.random() * (Math.floor(window.innerWidth) - min) + min);
+            let randY = Math.floor(Math.random() * (Math.floor(window.innerHeight) - min) + min);
+            let o = {
+                x: `${randX}px`,
+                y: `${randY}px`
+            }
+            bombCoords.push(o);
+        }
+        this.state = {coords: bombCoords};
+    }
+
+    render() {
+        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x}} />)
+    }
+}
+
 export function Section3() {
     const [boomerAmount, setBoomerAmount] = useState(1);
     const [bombAmount, setBombAmount] = useState(1);
     const [sendBombAmount, setSendBombAmount] = useState(1);
-    const [boomerPrice, setBoomerPrice] = useState(0);
+    const [boomerPrice, setBoomerPrice] = useState(ethers.utils.parseEther('.01'));
-    const [bombPrice, setBombPrice] = useState(0);
+    const [bombPrice, setBombPrice] = useState(ethers.utils.parseEther('.01'));
     const [boomerBalance, setBoomerBalance] = useState(0);
     const [bombBalance, setBombBalance] = useState(0);
+    const [bombSupply, setBombSupply] = useState(100);
     const { isConnected, address } = useAccount();
     useContractReads({
         contracts: [
@@ -142,6 +166,7 @@ export function Section3() {
         }
     });
     const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config);
+
     return (
         <section className="section">
             {isConnected &&
@@ -191,6 +216,10 @@ export function Section3() {
                         borderColor:'rgba(37, 19, 81, .8)'
                     }} onChange={v => setSendBombAmount(v)} />
                 </div>
+                <div className="map">
+                    <img src={Map} />
+                    <GenerateBombOverlay amount={bombSupply} />
+                </div>
             </div>
             ||
             <div id="heroText">