diff --git a/package-lock.json b/package-lock.json
index ce6d931..8e5bc48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"ethers": "^5.7.2",
+ "lodash": "^4.17.21",
"rc-slider": "^10.1.0",
"react": "^18.2.0",
"react-awesome-button": "^7.0.4",
diff --git a/package.json b/package.json
index 487d53b..83b9d5f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"ethers": "^5.7.2",
+ "lodash": "^4.17.21",
"rc-slider": "^10.1.0",
"react": "^18.2.0",
"react-awesome-button": "^7.0.4",
diff --git a/src/styles/sections.css b/src/styles/sections.css
index 9767f63..e687807 100644
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -72,7 +72,12 @@
}
#gameMapTitle {
- margin: 1em 0 1em 0;
+ margin: 1em 0 0 0;
+}
+
+#gameMapText {
+ padding: 0em;
+ margin: 0 0 .5em 0;
}
#gameStats {
diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx
index 1dc4bb8..95aede4 100644
--- a/src/template/Sections.jsx
+++ b/src/template/Sections.jsx
@@ -7,6 +7,7 @@ import { NotificationContainer, NotificationManager } from 'react-notifications'
import { AwesomeButton } from 'react-awesome-button';
import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider';
+import { debounce } from "lodash";
import Boomer from '../img/unaboomer.png';
import Newspapers from '../img/newspapers.png';
@@ -22,14 +23,6 @@ import '../styles/sections.css';
const contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
-function debounce(callback, wait) {
- let timeout;
- return (...args) => {
- const context = this;
- clearTimeout(timeout);
- timeout = setTimeout(() => callback.apply(context, args), wait);
- };
-}
export class Section1 extends React.Component {
constructor(props) {
@@ -81,8 +74,8 @@ class GenerateBombOverlay extends React.Component {
}
ifOver(amt) {
- if (amt > 100) {
- return 100;
+ if (amt > 200) {
+ return 200;
} else {
return amt;
}
@@ -91,8 +84,8 @@ class GenerateBombOverlay extends React.Component {
generateCoords(amt) {
let bombCoords = [];
for (let i = 0; i < amt; i++) {
- let randX = Math.floor(Math.random() * 100);
- let randY = Math.floor(Math.random() * 100);
+ let randX = Math.floor(Math.random() * 99);
+ let randY = Math.floor(Math.random() * 99);
let o = {
x: `${randX}%`,
y: `${randY}%`
@@ -112,7 +105,7 @@ class GenerateBombOverlay extends React.Component {
}
render() {
- return this.state.coords.map((obj) => )
+ return this.state.coords.map((obj, idx) => )
}
}
@@ -152,14 +145,18 @@ class GameMap extends React.Component {
return (
<>
Metaverse Map
+
+ {this.state.unaboomerSupply} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and terrorizing the metaverse.
+ The game will stop when 1000 Unaboomers remain standing.
+
{this.state.unaboomerSupply > 0 && (
- Active Unaboomers: {this.state.unaboomerSupply - this.state.unaboomersKilled}
- Dead Unaboomers: {this.state.unaboomersKilled}
- - _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}
- - _ Exploded Bombs: {this.state.bombsExploded}
- - _ Dud Bombs: {this.state.bombsExploded - this.state.unaboomersKilled}
+ - _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}
+ - _ Exploded Bombs: {this.state.bombsExploded}
+ - _ Dud Bombs: {this.state.bombsExploded - this.state.unaboomersKilled}
)}
@@ -180,9 +177,9 @@ class GameMap extends React.Component {
)}
-
-
-
+
+
+
)
@@ -194,6 +191,9 @@ function Section3() {
unaboomerAmount: 1,
bombAmount: 1,
sendBombAmount: 1,
+ unaboomerPreviewAmount: 1,
+ bombPreviewAmount: 1,
+ sendBombPreviewAmount: 1,
unaboomerPrice: ethers.utils.parseEther('.01'),
bombPrice: ethers.utils.parseEther('.01'),
unaboomerBalance: 0,
@@ -204,10 +204,11 @@ function Section3() {
unaboomersKilled: 0,
leaderboardPointer: 0,
leaderAddress: '',
- leaderKillCount: 0
+ leaderKillCount: 0,
+ unaboomerMaxSupply: 0
});
- const handleStateChange = (obj) =>{
- setOptions(preState => ({...preState , ...obj}))
+ function handleStateChange(obj) {
+ setOptions(preState => ({...preState , ...obj}));
}
const { isConnected, address } = useAccount();
const defOpt = {
@@ -254,10 +255,14 @@ function Section3() {
{
...defOpt,
functionName: 'leaderboardPointer'
+ },
+ {
+ ...defOpt,
+ functionName: 'unaboomerMaxSupply'
}
],
watch: true,
- cacheTime: 10_000,
+ cacheTime: 3_000,
onSuccess(data) {
handleStateChange({
unaboomerPrice: data[0].toString(),
@@ -269,6 +274,7 @@ function Section3() {
bombsExploded: data[6].toString(),
unaboomersKilled: data[7].toString(),
leaderboardPointer: data[8].toString(),
+ unaboomerMaxSupply: data[9].toString()
});
}
});
@@ -279,7 +285,7 @@ function Section3() {
functionName: 'leaderboard',
args: [options.leaderboardPointer],
watch: true,
- cacheTime: 10_000,
+ cacheTime: 3_000,
onSuccess: async (data) => {
handleStateChange({
leaderAddress: data,
@@ -293,7 +299,7 @@ function Section3() {
functionName: 'killCount',
args: [options.leaderAddress],
watch: true,
- cacheTime: 10_000,
+ cacheTime: 3_000,
onSuccess(data) {
handleStateChange({
leaderKillCount: data.toString(),
@@ -328,8 +334,15 @@ function Section3() {
address: contractAddress,
abi: MainABI,
enabled: isConnected && options.bombBalance > 0,
+ staleTime: 2_000,
functionName: 'sendBombs',
- args: [options.sendBombAmount]
+ args: [options.sendBombAmount],
+ onError(err) {
+ // console.log(err.message);
+ const iface = new ethers.utils.Interface(MainABI);
+ const res = iface.decodeFunctionData(err.message)
+ console.log(res);
+ }
});
const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
useWaitForTransaction({
@@ -364,12 +377,16 @@ function Section3() {
Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.
You have {options.unaboomerBalance} BOOMR
-
- radicalizeBoomersWrite.write?.()}>
- {radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount} || <>mint {options.unaboomerAmount} ({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} Ξ)}
-
-
- handleStateChange({unaboomerAmount: v})} />
+ {options.unaboomerSupply < options.unaboomerMaxSupply && (
+ <>
+
+ radicalizeBoomersWrite.write?.()}>
+ {radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount} || <>mint {options.unaboomerPreviewAmount} ({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerPreviewAmount).toString())} Ξ)}
+
+
+ handleStateChange({unaboomerAmount: v})} onChange={(v) => handleStateChange({unaboomerPreviewAmount: v})} />
+
+ )}
Assemble Bombs
@@ -377,11 +394,11 @@ function Section3() {
You have {options.bombBalance} BOMB
- assembleBombsWrite.write?.()}>
- {assembleBombsWrite.isLoading && <>minting {options.bombAmount} || <>mint {options.bombAmount} ({ethers.utils.formatEther((options.bombPrice * options.bombAmount).toString())} Ξ)}
+ assembleBombsWrite.write?.()}>
+ {assembleBombsWrite.isLoading && <>minting {options.bombAmount} || <>mint {options.bombPreviewAmount} ({ethers.utils.formatEther((options.bombPrice * options.bombPreviewAmount).toString())} Ξ)}
-
handleStateChange({bombAmount: v})} />
+ handleStateChange({bombAmount: v})} onChange={(v) => handleStateChange({bombPreviewAmount: v})} />
Send Bombs
@@ -389,11 +406,11 @@ function Section3() {
There are {options.unaboomerSupply - options.unaboomersKilled} BOOMR available to kill
- sendBombsWrite.write?.()}>
- send {options.sendBombAmount} (~0 Ξ)
+ sendBombsWrite.write?.()}>
+ send {options.sendBombPreviewAmount} (~0 Ξ)
-
handleStateChange({sendBombAmount: v})} />
+ handleStateChange({sendBombAmount: v})} onChange={(v) => handleStateChange({sendBombPreviewAmount: v})} />
@@ -405,6 +422,7 @@ function Section3() {
unaboomersKilled={options.unaboomersKilled}
leaderAddress={options.leaderAddress}
leaderKillCount={options.leaderKillCount}
+ unaboomerMaxSupply={options.unaboomerMaxSupply}
/>
||