updating map

src/styles/sections.css

@@ -71,9 +71,31 @@
     margin: 0 auto 1em auto;
 }
 
+#gameMapTitle {
+    margin: 1em 0 0 0;
+}
+
+#gameStats {
+    margin: .5em 0 .5em 0;
+    position: absolute;
+    z-index: 99;
+    background-color: rgba(0,0,0,.6);
+    padding: 2px;
+    border-radius: 4px;
+    text-align: left;
+}
+
+#gameStats ul {
+    padding: 0 .5em;
+}
+#gameStats ul li {
+    list-style: none;
+    font-size: 1.25em;
+}
+
 .map {
     cursor: crosshair;
-    margin: 2em 0 0 0;
+    /* margin: 2em 0 0 0; */
     position: relative;
     overflow: hidden;
     width: 100%;
@@ -91,7 +113,13 @@
     height: 7px;
     position: absolute;
     border-radius: 50%;
-    filter: drop-shadow(0 0 4px rgb(255, 230, 0, .5));
+    animation: pulse .75s ease infinite alternate;
+}
+
+.squares {
+    width: 7px;
+    height: 7px;
+    position: absolute;
     animation: pulse .75s ease infinite alternate;
 }
 

src/template/Sections.jsx

@@ -50,7 +50,7 @@ export class Section1 extends React.Component {
                 </h1>
                 <img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} alt="Pixelated police sketch of the Unabomber suspect." />
                 <div className={this.state.showImage || "hidden" }>
-                    <AwesomeButton type="secondary" ripple={true} onPress={() => scroll.scrollToBottom({duration: 4500})} className="fadeIn">
+                    <AwesomeButton type="secondary" ripple={true} onPress={() => scroll.scrollTo(window.scrollMaxY - '450', {duration: 5000})} className="fadeIn">
                         continue
                     </AwesomeButton>
                 </div>
@@ -95,7 +95,6 @@ class GenerateBombOverlay extends React.Component {
 
     componentDidUpdate(prevProps) {
         if (this.props.amount !== prevProps.amount) {
-            console.log('updating game map');
             let bombCoords = this.generateCoords(this.props.amount);
             this.setState({
                 coords: bombCoords
@@ -104,7 +103,7 @@ class GenerateBombOverlay extends React.Component {
     }
 
     render() {
-        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
+        return this.state.coords.map((obj) => <div className={this.props.type} style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
     }
 }
 
@@ -114,7 +113,9 @@ class GameMap extends React.Component {
         this.state = {
             bombSupply: 0,
             bombBalance: 0,
-            bombsExploded: 0
+            bombsExploded: 0,
+            unaboomerSupply: 0,
+            unaboomersKilled: 0
         }
     }
 
@@ -126,7 +127,9 @@ class GameMap extends React.Component {
             this.setState({
                 bombSupply: this.props.bombSupply,
                 bombBalance: this.props.bombBalance,
-                bombsExploded: this.props.bombsExploded
+                bombsExploded: this.props.bombsExploded,
+                unaboomerSupply: this.props.unaboomerSupply,
+                unaboomersKilled: this.props.unaboomersKilled
             });
         }
     }
@@ -135,14 +138,22 @@ class GameMap extends React.Component {
         return (
             <>
                 <h1 id="gameMapTitle">Game 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: 'red'}}></span> _ Dud Bombs: {this.state.bombsExploded}</li>
+                    </ul>
+                </div>
                 <div className="map">
                     <img src={Map} />
-                    {/* show active bombs held by other players */}
-                    <GenerateBombOverlay amount={this.state.bombSupply - this.state.bombBalance - this.state.bombsExploded} color={'white'} />
-                    {/* show bombs that have exploded */}
-                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'red'} />
-                    {/* show player bombs */}
-                    <GenerateBombOverlay amount={this.state.bombBalance} color={'yellow'} />
+                    <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={'red'} type={'dots'} />
                 </div>
             </>
         )
@@ -268,7 +279,7 @@ function Section3() {
     });
     const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
     return (
-        <section className="section">
+        <section className="section" id="mintSection">
             {isConnected &&
             <>
                 <div className="mintContainer">
@@ -309,7 +320,13 @@ function Section3() {
                         <Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({sendBombAmount: v})} />
                     </div>
                 </div>
-                <GameMap bombSupply={options.bombSupply} bombBalance={options.bombBalance} bombsExploded={options.bombsExploded} />
+                <GameMap 
+                    bombSupply={options.bombSupply} 
+                    bombBalance={options.bombBalance} 
+                    bombsExploded={options.bombsExploded} 
+                    unaboomerSupply={options.unaboomerSupply}
+                    unaboomersKilled={options.unaboomersKilled}
+                />
             </>
             ||
             <div id="heroText">
@@ -328,28 +345,4 @@ export function AllSections() {
             <Section3 />
         </>
     )
-}
-
-// export function Panel({ opacity, panelText, mintButtonText }) {
-//     const { isConnected } = useAccount();
-//     const { config } = usePrepareSendTransaction({
-//         request: {
-//           to: '0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395',
-//           value: ethers.utils.parseEther('.1'),
-//         }
-//     });
-//     const { isLoading, isSuccess, sendTransaction } = useSendTransaction(config);
-//     return (
-//         <Card elevation={Elevation.FOUR} className="mainPanel" style={{opacity: opacity}}>
-//             <p className="wrap">
-//                 {panelText}
-//             </p>
-//             <p>
-//                 <AwesomeButton ripple={true} disabled={!sendTransaction} onReleased={() => sendTransaction?.()}>
-//                     {isConnected && !isLoading && (<>{mintButtonText}</>)}
-//                 </AwesomeButton>
-//             </p>
-//             {isConnected && !isLoading && isSuccess && (<p>Thanks, nerd!</p>)}
-//         </Card>
-//     )
-// }
+}