From f0467b499c9cbcc52121a2b25a5393aab9fac5e2 Mon Sep 17 00:00:00 2001 From: lza_menace Date: Tue, 3 Jan 2023 15:07:46 -0800 Subject: [PATCH] ux --- package-lock.json | 1 + package.json | 1 + src/styles/sections.css | 7 ++- src/template/Sections.jsx | 94 +++++++++++++++++++++++---------------- 4 files changed, 64 insertions(+), 39 deletions(-) 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} /> ||