@ -8,6 +8,8 @@ import { AwesomeButton } from 'react-awesome-button';
import Typewriter from 'react-ts-typewriter' ; import Typewriter from 'react-ts-typewriter' ;
import Slider from 'rc-slider' ; import Slider from 'rc-slider' ;
import LZA from '../img/lza_menace.jpg' ;
import Carty from '../img/cartyisme.png' ;
import Boomer from '../img/unaboomer.png' ; import Boomer from '../img/unaboomer.png' ;
import Newspapers from '../img/newspapers.png' ; import Newspapers from '../img/newspapers.png' ;
import Bomb from '../img/bomb.png' ; import Bomb from '../img/bomb.png' ;
@ -21,8 +23,6 @@ import 'rc-slider/assets/index.css';
import '../styles/sections.css' ; import '../styles/sections.css' ;
const contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3' ;
export class Section1 extends React . Component { export class Section1 extends React . Component {
constructor ( props ) {
constructor ( props ) {
super ( props ) ;
super ( props ) ;
@ -123,7 +123,7 @@ class GameMap extends React.Component {
< h1 id = "gameMapTitle" > Metaverse Map < / h1 >
< h1 id = "gameMapTitle" > Metaverse Map < / h1 >
< p id = "gameMapText" >
< p id = "gameMapText" >
{ this . props . unaboomersRadicalized } / { this . props . unaboomerMaxSupply } Unaboomers radicalized and ready to terrorize the metaverse . < br / >
{ this . props . unaboomersRadicalized } / { this . props . unaboomerMaxSupply } Unaboomers radicalized and ready to terrorize the metaverse . < br / >
{ this . props . unaboomersRadicalized - this . props . unaboomersKilled } Unaboomers active . Th e project will fully begin when less tha n { this . props . unaboomerMaxSurvivorCount } Unaboomers remain standing . < br / >
{ this . props . unaboomersRadicalized - this . props . unaboomersKilled } Unaboomers active . Th is round will end and th e project will fully start whe n { this . props . unaboomerMaxSurvivorCount } or less Unaboomers remain standing . < br / >
< / p >
< / p >
{ this . props . unaboomersRadicalized > 0 && (
{ this . props . unaboomersRadicalized > 0 && (
< div id = "gameStats" >
< div id = "gameStats" >
@ -161,7 +161,8 @@ class GameMap extends React.Component {
}
}
} }
function Section3 ( ) { function Section3 ( props ) {
const contractAddress = props . contractAddress ;
const [ options , setOptions ] = useState ( {
const [ options , setOptions ] = useState ( {
unaboomerAmount : 1 ,
unaboomerAmount : 1 ,
bombAmount : 1 ,
bombAmount : 1 ,
@ -182,7 +183,8 @@ function Section3() {
leaderKillCount : 0 ,
leaderKillCount : 0 ,
unaboomerMaxSupply : 0 ,
unaboomerMaxSupply : 0 ,
unaboomerMaxSurvivorCount : 0 ,
unaboomerMaxSurvivorCount : 0 ,
unaboomerMaxMintPerWallet : 0
unaboomerMaxMintPerWallet : 0 ,
readWTF : false
} ) ;
} ) ;
function handleStateChange ( obj ) {
function handleStateChange ( obj ) {
setOptions ( preState => ( { ... preState , ... obj } ) ) ;
setOptions ( preState => ( { ... preState , ... obj } ) ) ;
@ -217,15 +219,15 @@ function Section3() {
functionName : 'unaboomerMaxMintPerWallet'
functionName : 'unaboomerMaxMintPerWallet'
}
}
] ,
] ,
watch : fals e,
watch : tru e,
cacheTime : 30 _000 ,
cacheTime : 30 _000 ,
onSuccess ( data ) {
onSuccess ( data ) {
handleStateChange ( {
handleStateChange ( {
unaboomerPrice : data [ 0 ] . toString ( ) ,
unaboomerPrice : data [ 0 ] . toString ( ) ,
bombPrice : data [ 1 ] . toString ( ) ,
bombPrice : data [ 1 ] . toString ( ) ,
unaboomerMaxSupply : data [ 2 ] . toString ( ) ,
unaboomerMaxSupply : Number ( data [ 2 ] ) ,
unaboomerMaxSurvivorCount : data [ 3 ] . toString ( ) ,
unaboomerMaxSurvivorCount : Number ( data [ 3 ] ) ,
unaboomerMaxMintPerWallet : data [ 4 ] . toString ( )
unaboomerMaxMintPerWallet : Number ( data [ 4 ] )
} ) ;
} ) ;
}
}
} ) ;
} ) ;
@ -267,13 +269,13 @@ function Section3() {
cacheTime : 6 _000 ,
cacheTime : 6 _000 ,
onSuccess ( data ) {
onSuccess ( data ) {
handleStateChange ( {
handleStateChange ( {
unaboomerBalance : data [ 0 ] . toString ( ) ,
unaboomerBalance : Number ( data [ 0 ] ) ,
bombBalance : data [ 1 ] . toString ( ) ,
bombBalance : Number ( data [ 1 ] ) ,
unaboomersRadicalized : data [ 2 ] . toString ( ) ,
unaboomersRadicalized : Number ( data [ 2 ] ) ,
bombsAssembled : data [ 3 ] . toString ( ) ,
bombsAssembled : Number ( data [ 3 ] ) ,
bombsExploded : data [ 4 ] . toString ( ) ,
bombsExploded : Number ( data [ 4 ] ) ,
unaboomersKilled : data [ 5 ] . toString ( ) ,
unaboomersKilled : Number ( data [ 5 ] ) ,
leaderboardPointer : data [ 6 ] .toString ( ),
leaderboardPointer : Number ( data [ 6 ]
} ) ;
} ) ;
}
}
} ) ;
} ) ;
@ -301,7 +303,7 @@ function Section3() {
cacheTime : 8 _000 ,
cacheTime : 8 _000 ,
onSuccess ( data ) {
onSuccess ( data ) {
handleStateChange ( {
handleStateChange ( {
leaderKillCount : data . toString ( ) ,
leaderKillCount : Number ( data ) ,
} ) ;
} ) ;
}
}
} ) ;
} ) ;
@ -332,7 +334,7 @@ function Section3() {
const sendBombsPrepare = usePrepareContractWrite ( {
const sendBombsPrepare = usePrepareContractWrite ( {
address : contractAddress ,
address : contractAddress ,
abi : MainABI ,
abi : MainABI ,
enabled : isConnected ,
enabled : isConnected && options . bombBalance > 0 ,
staleTime : 2 _000 ,
staleTime : 2 _000 ,
functionName : 'sendBombs' ,
functionName : 'sendBombs' ,
args : [ options . sendBombAmount ]
args : [ options . sendBombAmount ]
@ -349,12 +351,12 @@ function Section3() {
const res = iface . decodeEventLog ( "SentBomb" , log . data , log . topics ) ;
const res = iface . decodeEventLog ( "SentBomb" , log . data , log . topics ) ;
if ( res . hit ) {
if ( res . hit ) {
if ( res . owned ) {
if ( res . owned ) {
NotificationManager . error ( ` Your bomb exploded during assembly and killed your Unaboomer ${ res . tokenId . toString ( ) } ` , 'oof' , 10 000) ;
NotificationManager . error ( ` Your bomb exploded during assembly and killed your Unaboomer ${ res . tokenId . toString ( ) } ` , 'oof' , 8 000) ;
} else {
} else {
NotificationManager . success ( ` Your bomb killed Unaboomer ${ res . tokenId . toString ( ) } ` , 'Got em!' , 10 000) ;
NotificationManager . success ( ` Your bomb killed Unaboomer ${ res . tokenId . toString ( ) } ` , 'Got em!' , 8 000) ;
}
}
} else {
} else {
NotificationManager . warning ( ` Your bomb for Unaboomer ${ res . tokenId . toString ( ) } was a dud ` , 'oof' , 10 000) ;
NotificationManager . warning ( ` Your bomb for Unaboomer ${ res . tokenId . toString ( ) } was a dud ` , 'oof' , 8 000) ;
}
}
} )
} )
@ -362,79 +364,139 @@ function Section3() {
} ) ;
} ) ;
return (
return (
< section className = "section" id = "mintSection" >
< section className = "section" id = "mintSection" >
{ isConnected &&
{ ! isConnected && (
< div id = "heroText" >
< h1 > connect your web3 wallet < / h1 >
< / div >
) }
{ isConnected && options . unaboomersKilled >= options . unaboomerMaxSupply - options . unaboomerMaxSurvivorCount && options . unaboomerMaxSupply > 0 && (
< div id = "heroText" >
< h4 style = { { margin : 0 } } > the culling of weak warriors has completed < / h4 >
< p >
{ options . unaboomersRadicalized - options . unaboomersKilled } Unaboomers remain standing . < br / > < br / >
These warriors will advance to the next round of the game where they will work together
to continue to terrorize the metaverse in order to lead a revolution .
< / p >
< p style = { { fontSize : '.8em' , color : '#FF3E41' } } > We will not rest until our objective is complete . < / p >
< / div >
) }
{ isConnected && options . unaboomersKilled < options . unaboomerMaxSupply - options . unaboomerMaxSurvivorCount &&
< >
< >
< h1 id = "mintTitle" >
{ ! options . readWTF && (
WTF
< >
< / h1 >
< h1 id = "mintTitle" >
< p id = "mintText" >
Web3 Community and Its Future
The degens are taking us all on an utterly reckless ride into the unknown . < br / > < br / >
< / h1 >
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 / >
< p id = "mintText" >
But we don ’ t think it is inevitable . We think it can be stopped . < br / > < br / >
The degens are taking us all on an utterly reckless ride into the unknown . < 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 / >
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 / >
JOIN US .
But we don ’ t think it is inevitable . We think it can be stopped . < br / > < br / >
< / p >
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 / >
< div className = "mintContainer" >
< / p >
< div className = "mintItem" >
< AwesomeButton ripple = { true } onPress = { ( ) => handleStateChange ( { readWTF : true } ) } >
< h1 > Radicalize a Boomer < / h1 >
join us
< p > Radicalizing a boomer will mint ERC - 721 BOOMR tokens with images of a pixel art Web3 Unaboomers . < / p >
< / AwesomeButton >
< p > You have { options . unaboomerBalance } BOOMR < / p >
< / >
< img src = { Boomer } alt = "" width = "120px" / >
) || (
{ options . unaboomerBalance < options . unaboomerMaxMintPerWallet && ( < >
< >
< p >
< h1 id = "mintTitle" >
< AwesomeButton type = "secondary" ripple = { true } disabled = { radicalizeBoomersPrepare . status == 'error' } onPress = { ( ) => radicalizeBoomersWrite . write ? . ( ) } >
WTF
{ radicalizeBoomersWrite . isLoading && < > minting { options . unaboomerAmount } < / > }
< / h1 >
{ radicalizeBoomersWrite . isIdle && < > mint { options . unaboomerPreviewAmount } ( { ethers . utils . formatEther ( ( options . unaboomerPrice * options . unaboomerPreviewAmount ) . toString ( ) ) } Ξ ) < / > }
< p id = "mintText" >
{ radicalizeBoomersWrite . isSuccess && < > sent < / > }
This is a chain based game . There is a max supply of { options . unaboomerMaxSupply } Unaboomer tokens ( BOOMR ) and an infinite supply of Mailbomb tokens ( BOMB ) .
{ radicalizeBoomersWrite . isError && < > error < / > }
Players will mint BOOMR and send BOMB to kill the other players . There is a pseudo - random element which may cause your bomb to malfuction , killing your own token . < br / > < br / >
< / AwesomeButton >
This is the first round of the game in which we select the fiercest warriors to lead the decentralized revolution .
< / p >
There will be up to { options . unaboomerMaxSurvivorCount } survivors . The round will conclude when the survivor count has been reached . < br / > < br / >
< Slider className = "slider" min = { 1 } max = { options . unaboomerMaxMintPerWallet - options . unaboomerBalance } onAfterChange = { ( v ) => handleStateChange ( { unaboomerAmount : v } ) } onChange = { ( v ) => {
< / p >
handleStateChange ( { unaboomerPreviewAmount : v } ) ;
radicalizeBoomersWrite . reset ( ) ;
} } / >
< / > ) || < h2 > max reached < / h2 > }
< / div >
< div className = "mintItem" >
< h1 > Assemble Bombs < / h1 >
< p > Assembling bombs will mint ERC - 1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them . < / p >
< p > You have { options . bombBalance } BOMB < / p >
< img src = { Bomb } alt = "" width = "100px" / >
< p >
< p >
< AwesomeButton type = "secondary" ripple = { true } disabled = { assembleBombsPrepare . status == 'error' } onPress = { ( ) => assembleBombsWrite . write ? . ( ) } >
Godspeed .
{ assembleBombsWrite . isLoading && < > minting { options . bombAmount } < / > }
{ assembleBombsWrite . isIdle && < > mint { options . bombPreviewAmount } ( { ethers . utils . formatEther ( ( options . bombPrice * options . bombPreviewAmount ) . toString ( ) ) } Ξ ) < / > }
{ assembleBombsWrite . isSuccess && < > sent < / > }
{ assembleBombsWrite . isError && < > error < / > }
< / AwesomeButton >
< / p >
< / p >
< Slider className = "slider" min = { 1 } max = { 50 } onAfterChange = { ( v ) => handleStateChange ( { bombAmount : v } ) } onChange = { ( v ) => {
< span id = "team" >
handleStateChange ( { bombPreviewAmount : v } ) ;
< span className = "teamMember" >
assembleBombsWrite . reset ( ) ;
< img src = { LZA } width = "150px" / >
} } / >
< p className = "nopad" > < a href = "https://twitter.com/lza_menace" target = "_blank" > lza _menace < / a > - dev < / p >
< / div >
< / span >
< div className = "mintItem" >
< span className = "teamMember" >
< h1 > Send Bombs < / h1 >
< img src = { Carty } width = "150px" / >
< p > Sending bombs will burn your BOMB token and kill a BOOMR token at random . Be careful not to kill yourself in the process . < / p >
< p className = "nopad" > < a href = "https://twitter.com/cartyisme" target = "_blank" > cartyisme < / a > - artist < / p >
< p > There are { options . unaboomersRadicalized - options . unaboomersKilled } BOOMR available to kill < / p >
< / span >
< img src = { Explosion } alt = "" width = "120px" / >
< / span >
{ options . bombBalance > 0 && ( < >
< p >
< AwesomeButton type = "secondary" ripple = { true } disabled = { sendBombsPrepare . status == 'error' } onPress = { ( ) => sendBombsWrite . write ? . ( ) } >
< div className = "mintContainer" >
{ sendBombsWrite . isLoading && < > sending { options . sendBombAmount } < / > }
< div className = "mintItem" >
{ sendBombsWrite . isIdle && < > send { options . sendBombPreviewAmount } ( ~ 0 Ξ ) < / > }
< h1 > Radicalize a Boomer < / h1 >
{ sendBombsWrite . isSuccess && < > sent < / > }
< p > Radicalizing a boomer will mint ERC - 721 BOOMR tokens with images of a pixel art Web3 Unaboomers . < / p >
{ sendBombsWrite . isError && < > error < / > }
< p > You have { options . unaboomerBalance } / { options . unaboomerMaxMintPerWallet } BOOMR < / p >
< / AwesomeButton >
< img src = { Boomer } alt = "" width = "120px" / >
< / p >
{ options . unaboomerBalance < options . unaboomerMaxMintPerWallet && options . unaboomersKilled + options . unaboomersRadicalized < options . unaboomerMaxSupply && (
< Slider className = "slider" min = { 1 } max = { options . bombBalance } onAfterChange = { ( v ) => handleStateChange ( { sendBombAmount : v } ) } onChange = { ( v ) => {
< >
handleStateChange ( { sendBombPreviewAmount : v } ) ;
< p >
sendBombsWrite . reset ( ) ;
< AwesomeButton type = "secondary" ripple = { true } disabled = { radicalizeBoomersPrepare . status == 'error' } onPress = { ( ) => radicalizeBoomersWrite . write ? . ( ) } >
} } / >
{ radicalizeBoomersWrite . isLoading && < > minting { options . unaboomerAmount } < / > }
< / > ) || < h2 > no bombs < / h2 > }
{ radicalizeBoomersWrite . isIdle && < > mint { options . unaboomerPreviewAmount } ( { ethers . utils . formatEther ( ( options . unaboomerPrice * options . unaboomerPreviewAmount ) . toString ( ) ) } Ξ ) < / > }
< / div >
{ radicalizeBoomersWrite . isSuccess && < > sent < / > }
< / div >
{ radicalizeBoomersWrite . isError && < > error < / > }
< / AwesomeButton >
< / p >
< Slider className = "slider" min = { 1 } max = { options . unaboomerMaxMintPerWallet - options . unaboomerBalance } onAfterChange = { ( v ) => handleStateChange ( { unaboomerAmount : v } ) } onChange = { ( v ) => {
handleStateChange ( { unaboomerPreviewAmount : v } ) ;
radicalizeBoomersWrite . reset ( ) ;
} } / >
< / >
) || options . unaboomerBalance < options . unaboomerMaxMintPerWallet && options . unaboomersKilled + options . unaboomersRadicalized < options . unaboomerMaxSupply && (
< h2 > max per wallet reached < / h2 >
) || (
< h2 > max supply reached < / h2 >
) }
< / div >
< div className = "mintItem" >
< h1 > Assemble Bombs < / h1 >
< p > Assembling bombs will mint ERC - 1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them . < / p >
< p > You have { options . bombBalance } BOMB < / p >
< img src = { Bomb } alt = "" width = "100px" / >
< p >
< AwesomeButton type = "secondary" ripple = { true } disabled = { assembleBombsPrepare . status == 'error' } onPress = { ( ) => assembleBombsWrite . write ? . ( ) } >
{ assembleBombsWrite . isLoading && < > minting { options . bombAmount } < / > }
{ assembleBombsWrite . isIdle && < > mint { options . bombPreviewAmount } ( { ethers . utils . formatEther ( ( options . bombPrice * options . bombPreviewAmount ) . toString ( ) ) } Ξ ) < / > }
{ assembleBombsWrite . isSuccess && < > sent < / > }
{ assembleBombsWrite . isError && < > error < / > }
< / AwesomeButton >
< / p >
< Slider className = "slider" min = { 1 } max = { 50 } onAfterChange = { ( v ) => handleStateChange ( { bombAmount : v } ) } onChange = { ( v ) => {
handleStateChange ( { bombPreviewAmount : v } ) ;
assembleBombsWrite . reset ( ) ;
} } / >
< / div >
< div className = "mintItem" >
< h1 > Send Bombs < / h1 >
< p > Sending bombs will burn your BOMB token and kill a BOOMR token at random . Try not to kill yourself in the process . < / p >
< p > There are { options . unaboomersRadicalized - options . unaboomersKilled } BOOMR available to kill < / p >
< img src = { Explosion } alt = "" width = "120px" / >
{ options . bombBalance > 0 && ( < >
< p >
< AwesomeButton type = "secondary" ripple = { true } disabled = { sendBombsPrepare . status == 'error' } onPress = { ( ) => sendBombsWrite . write ? . ( ) } >
{ sendBombsWrite . isLoading && < > sending { options . sendBombAmount } < / > }
{ sendBombsWrite . isIdle && < > send { options . sendBombPreviewAmount } ( ~ 0 Ξ ) < / > }
{ sendBombsWrite . isSuccess && < > sent < / > }
{ sendBombsWrite . isError && < > error < / > }
< / AwesomeButton >
< / p >
< Slider className = "slider" min = { 1 } max = { options . bombBalance } onAfterChange = { ( v ) => handleStateChange ( { sendBombAmount : v } ) } onChange = { ( v ) => {
handleStateChange ( { sendBombPreviewAmount : v } ) ;
sendBombsWrite . reset ( ) ;
} } / >
< / > ) || < h2 > no bombs < / h2 > }
< / div >
< / div >
< / >
) }
< NotificationContainer / >
< NotificationContainer / >
< / > }
{ options . unaboomerMaxSupply > 0 && (
< GameMap
< GameMap
bombsAssembled = { options . bombsAssembled }
bombsAssembled = { options . bombsAssembled }
bombBalance = { options . bombBalance }
bombBalance = { options . bombBalance }
@ -446,22 +508,22 @@ function Section3() {
unaboomerMaxSupply = { options . unaboomerMaxSupply }
unaboomerMaxSupply = { options . unaboomerMaxSupply }
unaboomerMaxSurvivorCount = { options . unaboomerMaxSurvivorCount }
unaboomerMaxSurvivorCount = { options . unaboomerMaxSurvivorCount }
/ >
/ >
</ >
) || (
||
< div id = "heroText" >
< div id = "heroText" >
< h1 > loading ... < / h1 >
< h1 > connect your wallet to play < / h1 >
< / div >
</ div >
)}
}
< / section >
< / section >
)
)
} }
export function AllSections ( ) { export function AllSections ( props ) {
return (
return (
< >
< >
< Section1 / >
< Section1 / >
< Section2 / >
< Section2 / >
< Section3 / >
< Section3 contractAddress = { props . contractAddress } / >
< / >
< / >
)
)
} }
