master
lza_menace 2 years ago
parent 2eb0002094
commit af68061775

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

@ -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 {

@ -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.
The game will stop when 1000 Unaboomers remain standing.
{this.props.unaboomerSupply} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and ready to terrorize the metaverse. <br />
{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>Dead Unaboomers: {this.state.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: '#D01500'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li>
<li><p className="dots" style={{backgroundColor: '#0095FF'}}></p> _ Dud Bombs: {this.state.bombsExploded - this.state.unaboomersKilled}</li>
<li>Active Unaboomers: {this.props.unaboomerSupply - this.props.unaboomersKilled}</li>
<li>Dead Unaboomers: {this.props.unaboomersKilled}</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.props.bombsExploded}</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.state.bombsExploded} color={'#D01500'} type={'dots'} />
<GenerateBombOverlay amount={this.state.bombsExploded - this.state.unaboomersKilled} color={'#0095FF'} type={'dots'} />
<GenerateBombOverlay amount={this.props.bombSupply - this.props.bombsExploded} color={'#E3B505'} type={'dots'} />
<GenerateBombOverlay amount={this.props.bombsExploded} color={'#D01500'} 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 dont 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}
/>
</>
||

Loading…
Cancel
Save