ethshit
/
unaboomer-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ux improvements

Browse Source
master
lza_menace 2 years ago
parent fa03c95307
commit 1acc51eb8c
4 changed files with 18 additions and 31 deletions
Show Stats Download Patch File Download Diff File

32
src/components/Hero.jsx
Unescape Escape View File

@ -251,7 +251,7 @@ export function Hero(props) {
<div className="progress">
<p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p>
<div className="progress-value" style={{
width: (options.unaboomersMinted / options.unaboomerMaxSupply * 100) + '%'
width: (options.unaboomersRadicalized / options.unaboomerMaxSupply * 100) + '%'
}}>
</div>
</div>
@ -273,17 +273,14 @@ export function Hero(props) {
Now they're on a war path to disrupt the metaverse.
<br /><br />
(Warning: your BOOMER may explode!)
<br /><br />
</p>
{options.unaboomersMinted > 0 && (
<p>
<br />
You have minted {options.unaboomersMinted} Unaboomers.
{options.unaboomersKilled > 0 && <>{options.unaboomersKilled} are dead.</>}
</p>
)}
<br />
{isConnected
&& options.unaboomersMinted < options.unaboomerMaxMintPerWallet
{options.unaboomersMinted < options.unaboomerMaxMintPerWallet
&& options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply
&& (
<>
@ -299,10 +296,6 @@ export function Hero(props) {
</button>
<p>({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} ETH)</p>
</>
) || options.unaboomersMinted == options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
<h2>max per wallet reached</h2>
) || options.unaboomersRadicalized == options.unaboomerMaxSupply && options.unaboomerMaxSupply > 0 && (
<h2>max supply reached</h2>
)}
</div>
<div className='heroFlexArrow'>
@ -312,16 +305,15 @@ export function Hero(props) {
<img src={Mailbomb} width='280px' alt='Pixelated mail bomb image - handle with caution.' />
<p>
Don't let the Boomers win! Assemble mail bombs and blow 'em to smithereens. <br /><br />
(Warning: Some bombs are duds!)<br /><br />
(Warning: Some bombs are duds!)
</p>
{options.bombBalance > 0 && (
<p>
<br />
You have {options.bombBalance} Mail bombs.
</p>
)}
<br />
{isConnected
&& options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
{options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
&& (
<>
<input type='number' step='1' defaultValue={1} min={1} onChange={(v) => {
@ -347,8 +339,7 @@ export function Hero(props) {
Ready for mayhem? Mail a bomb to blow up a random BOOMER. <br /><br />
(Warning: Your Boomer might explode!)
</p>
{isConnected
&& options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
{options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
&& options.bombBalance > 0
&& (
<>
@ -364,8 +355,7 @@ export function Hero(props) {
</button>
<p>(tx fee)</p>
</>
) || options.bombBalance == 0 && <h2>no bombs</h2>
}
)}
</div>
</div>
@ -392,7 +382,7 @@ export function Hero(props) {
<div id="mintInfo" className="section">
<h1>WTF!?</h1>
<p>
UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 10,000 pixel Boomers with 190 unique traits.
UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 5,000 pixel Boomers with 190 unique traits.
</p>
<p>
Assemble a mail bomb and burn it to destroy a random Boomer in the collection. Destroyed Boomers will explode, lose their traits, and get burned.
@ -401,7 +391,7 @@ export function Hero(props) {
Mail bomb assembly is open to all. But be careful! Your Boomer can blow itself up in the process.
</p>
<p>
The more Boomers destroyed, the more likely your bomb is a dud. Shipments begin 24HRS post-mint. Round one ends when 5,000 boomers are left standing.
The more Boomers destroyed, the more likely your bomb is a dud. Shipments begin 24HRS post-mint. Round one ends when 2,500 boomers are left standing.
</p>
</div>
<div id="teamInfo" className="section">
@ -433,6 +423,7 @@ export function Hero(props) {
{isConnected && address && (
<>
{options.boomerMaxSupply > 0 && (
<StatsPanel
leaderKillCount={options.leaderKillCount}
leaderAddress={options.leaderAddress}
@ -441,6 +432,7 @@ export function Hero(props) {
bombsAssembled={options.bombsAssembled}
bombsExploded={options.bombsExploded}
/>
)}
<TrollboxPanel
ws={props.ws}
address={address}

6
src/index.js
Unescape Escape View File

@ -37,10 +37,10 @@ const wagmiClient = createClient({
ReactDOM.createRoot(document.getElementById("root")).render(
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains} initialChain={5}>
<RainbowKitProvider chains={chains} initialChain={1}>
<Navbar />
<Hero
contractAddress={'0xF15D0e633EAD13f28e207BDc2423766810D28247'}
contractAddress={''}
ws={'wss://lzahq.tech/ws'}
/>
<Footer />
@ -48,6 +48,6 @@ ReactDOM.createRoot(document.getElementById("root")).render(
</WagmiConfig>
);
// 0x3ecb24754a8ba06f79f0d6b1764809ef4b4ab03a - goerli
// 0xF15D0e633EAD13f28e207BDc2423766810D28247 - goerli
// 0x5FbDB2315678afecb367f032d93F642f64180aa3 - local
// wss://lzahq.tech/ws

6
src/styles/footer.css
Unescape Escape View File

@ -5,9 +5,3 @@ footer {
padding: 0;
margin: 0;
}
@media (max-width: 800px) {
footer {
height: 350px;
}
}

5
src/styles/hero.css
Unescape Escape View File

@ -24,7 +24,7 @@
.progress-value {
animation: load 3s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
box-shadow: 0 10px 20px -10px #fff;
border-radius: 100px;
background: #fff;
height: 30px;
@ -34,6 +34,7 @@
width: 100%;
text-align: center;
position: absolute;
color: black;
}
.section {
@ -264,5 +265,5 @@ button.doThing:disabled {
#boomerPreviewBanner {
width: 100%;
padding-top: 1em;
margin-top: 4em;
}
Write Preview
Loading…
Cancel
Save