improvements

master
lza_menace 2 years ago
parent be4b71652d
commit 855a40379b

@ -109,19 +109,13 @@
} }
.dots { .dots {
width: 7px; width: 10px;
height: 7px; height: 10px;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
animation: pulse .75s ease infinite alternate; animation: pulse .5s ease infinite alternate;
} }
.squares {
width: 7px;
height: 7px;
position: absolute;
animation: pulse .75s ease infinite alternate;
}
@keyframes pulse { @keyframes pulse {
0% { opacity: .5 } 0% { opacity: .5 }

@ -1,14 +1,13 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ethers, BigNumber } from 'ethers'; import { ethers, BigNumber } from 'ethers';
import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction } from 'wagmi'; import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction } from 'wagmi';
import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider';
import { Parallax } from 'react-parallax'; import { Parallax } from 'react-parallax';
import { animateScroll as scroll } from 'react-scroll' import { animateScroll as scroll } from 'react-scroll'
import { NotificationContainer, NotificationManager } from 'react-notifications'; import { NotificationContainer, NotificationManager } from 'react-notifications';
import { publicProvider } from 'wagmi/providers/public';
import { AwesomeButton } from 'react-awesome-button'; import { AwesomeButton } from 'react-awesome-button';
import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider';
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';
@ -153,32 +152,37 @@ class GameMap extends React.Component {
return ( return (
<> <>
<h1 id="gameMapTitle">Metaverse Map</h1> <h1 id="gameMapTitle">Metaverse Map</h1>
<div id="gameStats"> {this.state.unaboomerSupply > 0 && (
<ul> <div id="gameStats">
<li>Active Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}</li> <ul>
<li>Dead Unaboomers: {this.state.unaboomersKilled}</li> <li>Active Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}</li>
<li><p className="dots" style={{backgroundColor: 'white'}}></p> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li> <li>Dead Unaboomers: {this.state.unaboomersKilled}</li>
<li><p className="dots" style={{backgroundColor: '#5BC66E'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li> <li><p className="dots" style={{backgroundColor: 'white'}}></p> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li>
<li><p className="dots" style={{backgroundColor: '#c65bb3'}}></p> _ Dud Bombs: {this.state.bombsExploded}</li> <li><p className="dots" style={{backgroundColor: '#E0FF4F'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li>
</ul> <li><p className="dots" style={{backgroundColor: '#FF2ECC'}}></p> _ Dud Bombs: {this.state.bombsExploded - this.state.unaboomersKilled}</li>
</div> </ul>
<div id="killLeader"> </div>
<img src={Boomer} width="50px" /> )}
<p className="nopad">
Kill Leader:<br /> {this.props.leaderKillCount > 0 && (
<a href="https://etherscan.io/address/xxx" target="_blank"> <div id="killLeader">
{this.shorten(this.props.leaderAddress)} <img src={Boomer} width="50px" />
</a> <p className="nopad">
</p> Kill Leader:<br />
<p className="nopad"> <a href={"https://etherscan.io/address/" + this.props.leaderAddress} target="_blank">
{this.props.leaderKillCount} kills {this.shorten(this.props.leaderAddress)}
</p> </a>
</div> </p>
<p className="nopad">
{this.props.leaderKillCount} kills
</p>
</div>
)}
<div className="map"> <div className="map">
<img src={Map} /> <img src={Map} />
<GenerateBombOverlay amount={this.state.bombSupply - this.state.bombsExploded} color={'white'} type={'dots'} /> <GenerateBombOverlay amount={this.state.bombSupply - this.state.bombsExploded} color={'white'} type={'dots'} />
<GenerateBombOverlay amount={this.state.bombsExploded} color={'#5BC66E'} type={'dots'} /> <GenerateBombOverlay amount={this.state.bombsExploded} color={'#E0FF4F'} type={'dots'} />
<GenerateBombOverlay amount={this.state.bombsExploded} color={'#c65bb3'} type={'dots'} /> <GenerateBombOverlay amount={this.state.bombsExploded - this.state.unaboomersKilled} color={'#FF2ECC'} type={'dots'} />
</div> </div>
</> </>
) )
@ -325,10 +329,7 @@ function Section3() {
abi: MainABI, abi: MainABI,
enabled: isConnected && options.bombBalance > 0, enabled: isConnected && options.bombBalance > 0,
functionName: 'sendBombs', functionName: 'sendBombs',
args: [options.sendBombAmount], args: [options.sendBombAmount]
onError(err) {
console.log(err);
}
}); });
const sendBombsWrite = useContractWrite(sendBombsPrepare.config); const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
useWaitForTransaction({ useWaitForTransaction({

Loading…
Cancel
Save