move bars, fix count for survivors

src/components/Hero.jsx

@@ -248,25 +248,6 @@ export function Hero(props) {
         <div id='hero'>
             <NotificationContainer />
             <h1 id='heroTitle'>the web3 revolution & its consequences have been a disaster for the human race.</h1>
-            {isConnected && options.unaboomersRadicalized > 0 && (
-                <>
-                <div className="progress">
-                    <p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p>
-                    <div className="progress-value" style={{ 
-                        width: (options.unaboomersRadicalized / options.unaboomerMaxSupply * 100) + '%'
-                    }}>
-                    </div>
-                </div>
-                <div className="progress">
-                    <p>{options.unaboomersKilled} / {options.unaboomerMaxSurvivorCount} killed</p>
-                    <div className="progress-value" style={{ 
-                        width: (options.unaboomersKilled / options.unaboomerMaxSurvivorCount * 100) + '%',
-                        backgroundColor: 'red'
-                    }}>
-                    </div>
-                </div>
-                </>
-            )}
             <div id='heroFlex'>
                 <div className='heroFlexItem'>
                     <img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
@@ -355,6 +336,25 @@ export function Hero(props) {
                     <p>(tx fee)</p>
                 </div>
             </div>
+            {isConnected && options.unaboomersRadicalized > 0 && (
+                <>
+                <div className="progress">
+                    <p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p>
+                    <div className="progress-value" style={{ 
+                        width: (options.unaboomersRadicalized / options.unaboomerMaxSupply * 100) + '%'
+                    }}>
+                    </div>
+                </div>
+                <div className="progress">
+                    <p>{options.unaboomersKilled} / {options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount} killed</p>
+                    <div className="progress-value" style={{ 
+                        width: (options.unaboomersKilled / (options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount) * 100) + '%',
+                        backgroundColor: 'red'
+                    }}>
+                    </div>
+                </div>
+                </>
+            )}
             
             {isConnected && JSON.parse(tokensMinted).length > 0 && (
                 <div id="userInventory">