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"> <div className="progress">
<p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p> <p>{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted</p>
<div className="progress-value" style={{ <div className="progress-value" style={{
width: (options.unaboomersMinted / options.unaboomerMaxSupply * 100) + '%' width: (options.unaboomersRadicalized / options.unaboomerMaxSupply * 100) + '%'
}}> }}>
</div> </div>
</div> </div>
@ -273,17 +273,14 @@ export function Hero(props) {
Now they're on a war path to disrupt the metaverse. Now they're on a war path to disrupt the metaverse.
<br /><br /> <br /><br />
(Warning: your BOOMER may explode!) (Warning: your BOOMER may explode!)
<br /><br />
</p> </p>
{options.unaboomersMinted > 0 && ( {options.unaboomersMinted > 0 && (
<p> <p>
<br />
You have minted {options.unaboomersMinted} Unaboomers. You have minted {options.unaboomersMinted} Unaboomers.
{options.unaboomersKilled > 0 && <>{options.unaboomersKilled} are dead.</>}
</p> </p>
)} )}
<br /> {options.unaboomersMinted < options.unaboomerMaxMintPerWallet
{isConnected
&& options.unaboomersMinted < options.unaboomerMaxMintPerWallet
&& options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply
&& ( && (
<> <>
@ -299,10 +296,6 @@ export function Hero(props) {
</button> </button>
<p>({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} ETH)</p> <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>
<div className='heroFlexArrow'> <div className='heroFlexArrow'>
@ -312,16 +305,15 @@ export function Hero(props) {
<img src={Mailbomb} width='280px' alt='Pixelated mail bomb image - handle with caution.' /> <img src={Mailbomb} width='280px' alt='Pixelated mail bomb image - handle with caution.' />
<p> <p>
Don't let the Boomers win! Assemble mail bombs and blow 'em to smithereens. <br /><br /> 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> </p>
{options.bombBalance > 0 && ( {options.bombBalance > 0 && (
<p> <p>
<br />
You have {options.bombBalance} Mail bombs. You have {options.bombBalance} Mail bombs.
</p> </p>
)} )}
<br /> {options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
{isConnected
&& options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
&& ( && (
<> <>
<input type='number' step='1' defaultValue={1} min={1} onChange={(v) => { <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 /> Ready for mayhem? Mail a bomb to blow up a random BOOMER. <br /><br />
(Warning: Your Boomer might explode!) (Warning: Your Boomer might explode!)
</p> </p>
{isConnected {options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
&& options.unaboomersKilled < options.unaboomerMaxSupply - options.unaboomerMaxSurvivorCount
&& options.bombBalance > 0 && options.bombBalance > 0
&& ( && (
<> <>
@ -364,8 +355,7 @@ export function Hero(props) {
</button> </button>
<p>(tx fee)</p> <p>(tx fee)</p>
</> </>
) || options.bombBalance == 0 && <h2>no bombs</h2> )}
}
</div> </div>
</div> </div>
@ -392,7 +382,7 @@ export function Hero(props) {
<div id="mintInfo" className="section"> <div id="mintInfo" className="section">
<h1>WTF!?</h1> <h1>WTF!?</h1>
<p> <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>
<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. 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. Mail bomb assembly is open to all. But be careful! Your Boomer can blow itself up in the process.
</p> </p>
<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> </p>
</div> </div>
<div id="teamInfo" className="section"> <div id="teamInfo" className="section">
@ -433,6 +423,7 @@ export function Hero(props) {
{isConnected && address && ( {isConnected && address && (
<> <>
{options.boomerMaxSupply > 0 && (
<StatsPanel <StatsPanel
leaderKillCount={options.leaderKillCount} leaderKillCount={options.leaderKillCount}
leaderAddress={options.leaderAddress} leaderAddress={options.leaderAddress}
@ -441,6 +432,7 @@ export function Hero(props) {
bombsAssembled={options.bombsAssembled} bombsAssembled={options.bombsAssembled}
bombsExploded={options.bombsExploded} bombsExploded={options.bombsExploded}
/> />
)}
<TrollboxPanel <TrollboxPanel
ws={props.ws} ws={props.ws}
address={address} address={address}

6
src/index.js
Unescape Escape View File

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

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

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