|
|
@ -75,18 +75,32 @@ export function Section2() {
|
|
|
|
class GenerateBombOverlay extends React.Component {
|
|
|
|
class GenerateBombOverlay extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
let bombCoords = this.generateCoords(props.amount);
|
|
|
|
|
|
|
|
this.state = {coords: bombCoords, color: props.color};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generateCoords(amt) {
|
|
|
|
let bombCoords = [];
|
|
|
|
let bombCoords = [];
|
|
|
|
for (let i = 0; i < props.amount; i++) {
|
|
|
|
for (let i = 0; i < amt; i++) {
|
|
|
|
let min = Math.ceil(0);
|
|
|
|
let randX = Math.floor(Math.random() * 100);
|
|
|
|
let randX = Math.floor(Math.random() * (Math.floor(100) - min) + min);
|
|
|
|
let randY = Math.floor(Math.random() * 100);
|
|
|
|
let randY = Math.floor(Math.random() * (Math.floor(100) - min) + min);
|
|
|
|
|
|
|
|
let o = {
|
|
|
|
let o = {
|
|
|
|
x: `${randX}%`,
|
|
|
|
x: `${randX}%`,
|
|
|
|
y: `${randY}%`
|
|
|
|
y: `${randY}%`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bombCoords.push(o);
|
|
|
|
bombCoords.push(o);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.state = {coords: bombCoords, color: this.props.color};
|
|
|
|
return bombCoords;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
|
|
|
|
if (this.props.amount !== prevProps.amount) {
|
|
|
|
|
|
|
|
console.log('updating game map');
|
|
|
|
|
|
|
|
let bombCoords = this.generateCoords(this.props.amount);
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
coords: bombCoords
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
@ -97,6 +111,24 @@ class GenerateBombOverlay extends React.Component {
|
|
|
|
class GameMap extends React.Component {
|
|
|
|
class GameMap extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
|
|
|
|
bombSupply: 0,
|
|
|
|
|
|
|
|
bombBalance: 0,
|
|
|
|
|
|
|
|
bombsExploded: 0
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
@ -106,11 +138,11 @@ class GameMap extends React.Component {
|
|
|
|
<div className="map">
|
|
|
|
<div className="map">
|
|
|
|
<img src={Map} />
|
|
|
|
<img src={Map} />
|
|
|
|
{/* show active bombs held by other players */}
|
|
|
|
{/* show active bombs held by other players */}
|
|
|
|
<GenerateBombOverlay amount={this.props.bombSupply - this.props.bombBalance - this.props.bombsExploded} color={'white'} />
|
|
|
|
<GenerateBombOverlay amount={this.state.bombSupply - this.state.bombBalance - this.state.bombsExploded} color={'white'} />
|
|
|
|
{/* show bombs that have exploded */}
|
|
|
|
{/* show bombs that have exploded */}
|
|
|
|
<GenerateBombOverlay amount={this.props.bombsExploded} color={'red'} />
|
|
|
|
<GenerateBombOverlay amount={this.state.bombsExploded} color={'red'} />
|
|
|
|
{/* show player bombs */}
|
|
|
|
{/* show player bombs */}
|
|
|
|
<GenerateBombOverlay amount={this.props.bombBalance} color={'yellow'} />
|
|
|
|
<GenerateBombOverlay amount={this.state.bombBalance} color={'yellow'} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
)
|
|
|
@ -132,7 +164,7 @@ function Section3() {
|
|
|
|
unaboomersKilled: 0
|
|
|
|
unaboomersKilled: 0
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const handleStateChange = (obj) =>{
|
|
|
|
const handleStateChange = (obj) =>{
|
|
|
|
setOptions(preState => ({...preState , obj}))
|
|
|
|
setOptions(preState => ({...preState , ...obj}))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const { isConnected, address } = useAccount();
|
|
|
|
const { isConnected, address } = useAccount();
|
|
|
|
useContractReads({
|
|
|
|
useContractReads({
|
|
|
@ -189,7 +221,7 @@ function Section3() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
],
|
|
|
|
watch: true,
|
|
|
|
watch: true,
|
|
|
|
cacheTime: 5000,
|
|
|
|
cacheTime: 5,
|
|
|
|
onSuccess(data) {
|
|
|
|
onSuccess(data) {
|
|
|
|
handleStateChange({
|
|
|
|
handleStateChange({
|
|
|
|
unaboomerPrice: data[0].toString(),
|
|
|
|
unaboomerPrice: data[0].toString(),
|
|
|
@ -201,7 +233,6 @@ function Section3() {
|
|
|
|
bombsExploded: data[6].toString(),
|
|
|
|
bombsExploded: data[6].toString(),
|
|
|
|
unaboomersKilled: data[7].toString(),
|
|
|
|
unaboomersKilled: data[7].toString(),
|
|
|
|
});
|
|
|
|
});
|
|
|
|
console.log(options)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const radicalizeBoomersPrepare = usePrepareContractWrite({
|
|
|
|
const radicalizeBoomersPrepare = usePrepareContractWrite({
|
|
|
|