add copy

src/styles/main.css

@@ -6,7 +6,7 @@
 
 * {
     font-family: 'SummerPixel';
-    font-weight: 400;
+    /* font-weight: 400; */
     font-style: normal;
 }
 

src/styles/sections.css

@@ -26,6 +26,12 @@
     margin: 0 auto;
 }
 
+@media (max-width: 600px) {
+    #heroText {
+        font-size: 2.5em;
+    }
+}
+
 #heroImage {
     max-width: 240px;
     margin: .5em auto;
@@ -49,8 +55,24 @@
     margin: 0 auto;
 }
 
+#mintTitle {
+    font-size: 6em;
+    padding: 0;
+    margin: .5em 0 0 0;
+}
+
+#mintText {
+    width: 80%;
+    margin: 0 auto;
+    font-size: 1.1em;
+}
+
+.strong {
+    color: #ff00ea;
+}
+
 .mintContainer {
-    padding-top: 6em;
+    padding: 2em 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -77,7 +99,7 @@
 
 #gameMapText {
     padding: 0em;
-    margin: 0 0 .5em 0;
+    margin: 0 0 1em 0;
 }
 
 #gameStats {

src/template/Sections.jsx

@@ -30,7 +30,7 @@ export class Section1 extends React.Component {
         this.state = {title: '', showImage: false};
         setInterval(() => {
             this.setState({
-                title: 'The Web3 Revolution and it\'s consequences have been a disaster for the human race.',
+                title: 'The Web3 Revolution and its consequences have been a disaster for the human race.',
                 showImage: true
             });
         }, 1200);
@@ -44,7 +44,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.scrollTo(window.scrollMaxY - '450', {duration: 5000})} className="fadeIn">
+                    <AwesomeButton type="secondary" ripple={true} onPress={() => scroll.scrollTo(window.scrollMaxY - '800', {duration: 5000})} className="fadeIn">
                         continue
                     </AwesomeButton>
                 </div>
@@ -112,55 +112,31 @@ class GenerateBombOverlay extends React.Component {
 class GameMap extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-            bombSupply: 0,
-            bombBalance: 0,
-            bombsExploded: 0,
-            unaboomerSupply: 0,
-            unaboomersKilled: 0
-        }
     }
 
     shorten(s) {
         return s.slice(0, 6) + '...' + s.slice(-4)
     }
 
-
-    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,
-                unaboomerSupply: this.props.unaboomerSupply,
-                unaboomersKilled: this.props.unaboomersKilled
-            });
-        }
-    }
-
     render() {
         return (
             <>
                 <h1 id="gameMapTitle">Metaverse Map</h1>
                 <p id="gameMapText">
-                    {this.state.unaboomerSupply} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and terrorizing the metaverse.
+                    {this.props.unaboomerSupply} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and ready to terrorize the metaverse. <br />
-                    The game will stop when 1000 Unaboomers remain standing.
+                    {this.props.unaboomerSupply - this.props.unaboomersKilled} Unaboomers active. The project will fully begin when less than {this.props.unaboomerSurvivorCount} Unaboomers remain standing.<br />
                 </p>
-                {this.state.unaboomerSupply > 0 && (
+                {this.props.unaboomerSupply > 0 && (
                     <div id="gameStats">
                         <ul>
-                            <li>Active Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}</li>
+                            <li>Active Unaboomers: {this.props.unaboomerSupply - this.props.unaboomersKilled}</li>
-                            <li>Dead Unaboomers: {this.state.unaboomersKilled}</li>
+                            <li>Dead Unaboomers: {this.props.unaboomersKilled}</li>
-                            <li><p className="dots" style={{backgroundColor: '#E3B505'}}></p> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li>
+                            <li><p className="dots" style={{backgroundColor: '#E3B505'}}></p> _ Active Bombs: {this.props.bombSupply - this.props.bombsExploded}</li>
-                            <li><p className="dots" style={{backgroundColor: '#D01500'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li>
+                            <li><p className="dots" style={{backgroundColor: '#D01500'}}></p> _ Exploded Bombs: {this.props.bombsExploded}</li>
-                            <li><p className="dots" style={{backgroundColor: '#0095FF'}}></p> _ Dud Bombs: {this.state.bombsExploded - this.state.unaboomersKilled}</li>
+                            <li><p className="dots" style={{backgroundColor: '#0095FF'}}></p> _ Dud Bombs: {this.props.bombsExploded - this.props.unaboomersKilled}</li>
                         </ul>
                     </div>
                 )}
-                
                 {this.props.leaderKillCount > 0 && (
                     <div id="killLeader">
                         <img src={Boomer} width="50px" />
@@ -177,9 +153,9 @@ class GameMap extends React.Component {
                 )}
                 <div className="map">
                     <img src={Map} />
-                    <GenerateBombOverlay amount={this.state.bombSupply - this.state.bombsExploded} color={'#E3B505'} type={'dots'} />
+                    <GenerateBombOverlay amount={this.props.bombSupply - this.props.bombsExploded} color={'#E3B505'} type={'dots'} />
-                    <GenerateBombOverlay amount={this.state.bombsExploded} color={'#D01500'} type={'dots'} />
+                    <GenerateBombOverlay amount={this.props.bombsExploded} color={'#D01500'} type={'dots'} />
-                    <GenerateBombOverlay amount={this.state.bombsExploded - this.state.unaboomersKilled} color={'#0095FF'} type={'dots'} />
+                    <GenerateBombOverlay amount={this.props.bombsExploded - this.props.unaboomersKilled} color={'#0095FF'} type={'dots'} />
                 </div>
             </>
         )
@@ -205,7 +181,8 @@ function Section3() {
         leaderboardPointer: 0,
         leaderAddress: '',
         leaderKillCount: 0,
-        unaboomerMaxSupply: 0
+        unaboomerMaxSupply: 0,
+        unaboomerSurvivorCount: 0
     });
     function handleStateChange(obj) {
         setOptions(preState => ({...preState , ...obj}));
@@ -259,6 +236,10 @@ function Section3() {
             {
                 ...defOpt,
                 functionName: 'unaboomerMaxSupply'
+            },
+            {
+                ...defOpt,
+                functionName: 'unaboomerSurvivorCount'
             }
         ],
         watch: true,
@@ -274,7 +255,8 @@ function Section3() {
                 bombsExploded: data[6].toString(),
                 unaboomersKilled: data[7].toString(),
                 leaderboardPointer: data[8].toString(),
-                unaboomerMaxSupply: data[9].toString()
+                unaboomerMaxSupply: data[9].toString(),
+                unaboomerSurvivorCount: data[10].toString()
             });
         }
     });
@@ -365,6 +347,16 @@ function Section3() {
         <section className="section" id="mintSection">
             {isConnected &&
             <>
+                <h1 id="mintTitle">
+                    WTF
+                </h1>
+                <p id="mintText">
+                    The degens are taking us all on an utterly reckless ride into the unknown.<br /><br />
+                    Many people understand something of what Web3 progress is doing to us yet take a passive attitude toward degeneracy because they think it is inevitable.<br /><br />
+                    But we don’t think it is inevitable. We think it can be stopped. <br /><br />
+                    The two main tasks for the present are to <span className="strong">promote social stress and instability in the Web3 community</span> and <span className="strong">to develop and propagate an ideology that opposes degeneracy and the corporate venture capital system</span>. When the system becomes sufficiently stressed and unstable, a revolution against rent seekers, scammers, and sociopaths may be possible.<br /><br />
+                    JOIN US.
+                </p>
                 <div className="mintContainer">
                     <div className="mintItem">
                         <h1>Radicalize a Boomer</h1>
@@ -413,6 +405,7 @@ function Section3() {
                     leaderAddress={options.leaderAddress}
                     leaderKillCount={options.leaderKillCount}
                     unaboomerMaxSupply={options.unaboomerMaxSupply}
+                    unaboomerSurvivorCount={options.unaboomerSurvivorCount}
                 />
             </>
             ||