adjust

src/index.js

@@ -27,7 +27,7 @@ const { connectors } = getDefaultWallets({
 });
 
 const wagmiClient = createClient({
-  autoConnect: false,
+  autoConnect: true,
   connectors,
   provider,
   webSocketProvider

src/styles/main.css

@@ -1,5 +1,11 @@
+@font-face {
+    font-family: 'SummerPixel';
+    src: url('../../public/SummerPixel22Regular-jE0W7.ttf');
+}
+
+
 * {
-    font-family: 'Times New Roman', Times, serif;
+    font-family: 'SummerPixel';
     font-weight: 400;
     font-style: normal;
 }

src/styles/sections.css

@@ -19,8 +19,8 @@
 }
   
 #heroText {
-    padding-top: 12vh;
-    font-size: 4em;
+    padding-top: 14vh;
+    font-size: 3.5em;
     width: 80%;
     text-align: center;
     margin: 0 auto;
@@ -28,7 +28,7 @@
 
 #heroImage {
     max-width: 240px;
-    margin: 1em auto;
+    margin: .5em auto;
     animation: fadeIn 4s ease-in;
 }
 

src/template/Sections.jsx

@@ -86,15 +86,38 @@ class GenerateBombOverlay extends React.Component {
             }
             bombCoords.push(o);
         }
-        this.state = {coords: bombCoords};
+        this.state = {coords: bombCoords, color: this.props.color};
     }
 
     render() {
-        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.props.color}} />)
+        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
     }
 }
 
-export function Section3() {
+class GameMap extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <>
+                <h1 id="gameMapTitle">Game Map</h1>
+                <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'} />
+                    {/* show bombs that have exploded */}
+                    <GenerateBombOverlay amount={this.props.bombsExploded} color={'red'} />
+                    {/* show player bombs */}
+                    <GenerateBombOverlay amount={this.props.bombBalance} color={'yellow'} />
+                </div>
+            </>
+        )
+    }
+}
+
+function Section3() {
     const [boomerAmount, setBoomerAmount] = useState(1);
     const [bombAmount, setBombAmount] = useState(1);
     const [sendBombAmount, setSendBombAmount] = useState(1);
@@ -104,7 +127,7 @@ export function Section3() {
     const [bombBalance, setBombBalance] = useState(0);
     const [bombSupply, setBombSupply] = useState(0);
     const [boomerSupply, setBoomerSupply] = useState(0);
-    const [bombExploded, setBombExploded] = useState(0);
+    const [bombsExploded, setBombsExploded] = useState(0);
     const [boomerKillCount, setBoomerKillCount] = useState(0);
     const { isConnected, address } = useAccount();
     useContractReads({
@@ -161,7 +184,6 @@ export function Section3() {
             }
         ],
         watch: true,
-        cacheTime: 5000,
         onSuccess(data) {
             setBoomerPrice(data[0].toString());
             setBombPrice(data[1].toString());
@@ -169,7 +191,7 @@ export function Section3() {
             setBombBalance(data[3].toString());
             setBoomerSupply(data[4].toString());
             setBombSupply(data[5].toString());
-            setBombExploded(data[6].toString());
+            setBombsExploded(data[6].toString());
             setBoomerKillCount(data[7].toString());
         }
     });
@@ -208,6 +230,7 @@ export function Section3() {
     return (
         <section className="section">
             {isConnected &&
+            <>
                 <div className="mintContainer">
                     <div className="mintItem">
                         <h1>Radicalize a Boomer</h1>
@@ -245,13 +268,9 @@ export function Section3() {
                         </p>
                         <Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
                     </div>
-                <div className="map">
-                    <img src={Map} />
-                    <GenerateBombOverlay amount={bombSupply - bombBalance - bombExploded} color={'white'} />
-                    <GenerateBombOverlay amount={bombExploded} color={'red'} />
-                    <GenerateBombOverlay amount={bombBalance} color={'yellow'} />
-                </div>
                 </div>
+                <GameMap bombSupply={bombSupply} bombBalance={bombBalance} bombsExploded={bombsExploded} />
+            </>
             ||
             <div id="heroText">
                 <h1>connect your wallet to play</h1>