ethshit
/
unaboomer-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ux

Browse Source
master
lza_menace 2 years ago
parent 855a40379b
commit f0467b499c
4 changed files with 64 additions and 39 deletions
Show Stats Download Patch File Download Diff File

1
package-lock.json generated
Unescape Escape View File

@ -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",

1
package.json
Unescape Escape View File

@ -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",

7
src/styles/sections.css
Unescape Escape View File

@ -72,7 +72,12 @@
}
#gameMapTitle {
margin: 1em 0 1em 0;
margin: 1em 0 0 0;
}
#gameMapText {
padding: 0em;
margin: 0 0 .5em 0;
}
#gameStats {

88
src/template/Sections.jsx
Unescape Escape View File

@ -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) => <div className={this.props.type} style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
return this.state.coords.map((obj, idx) => <div key={idx} className={this.props.type} style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
}
}
@ -152,14 +145,18 @@ class GameMap extends React.Component {
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.
</p>
{this.state.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: 'white'}}></p> _ Active Bombs: {this.state.bombSupply - this.state.bombsExploded}</li>
<li><p className="dots" style={{backgroundColor: '#E0FF4F'}}></p> _ Exploded Bombs: {this.state.bombsExploded}</li>
<li><p className="dots" style={{backgroundColor: '#FF2ECC'}}></p> _ Dud Bombs: {this.state.bombsExploded - 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>
</ul>
</div>
)}
@ -180,9 +177,9 @@ class GameMap extends React.Component {
)}
<div className="map">
<img src={Map} />
<GenerateBombOverlay amount={this.state.bombSupply - this.state.bombsExploded} color={'white'} type={'dots'} />
<GenerateBombOverlay amount={this.state.bombsExploded} color={'#E0FF4F'} type={'dots'} />
<GenerateBombOverlay amount={this.state.bombsExploded - this.state.unaboomersKilled} color={'#FF2ECC'} type={'dots'} />
<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'} />
</div>
</>
)
@ -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() {
<p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
<p>You have {options.unaboomerBalance} BOOMR</p>
<img src={Boomer} alt="" width="120px" />
{options.unaboomerSupply < options.unaboomerMaxSupply && (
<>
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
{radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</> || <>mint {options.unaboomerAmount} ({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} Ξ)</>}
<AwesomeButton type="secondary" ripple={true} disabled={radicalizeBoomersPrepare.status == 'error'} onPress={() => radicalizeBoomersWrite.write?.()}>
{radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</> || <>mint {options.unaboomerPreviewAmount} ({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerPreviewAmount).toString())} Ξ)</>}
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({unaboomerAmount: v})} />
<Slider className="slider" min={1} max={30} onAfterChange={(v) => handleStateChange({unaboomerAmount: v})} onChange={(v) => handleStateChange({unaboomerPreviewAmount: v})} />
</>
)}
</div>
<div className="mintItem">
<h1>Assemble Bombs</h1>
@ -377,11 +394,11 @@ function Section3() {
<p>You have {options.bombBalance} BOMB</p>
<img src={Bomb} alt="" width="100px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
{assembleBombsWrite.isLoading && <>minting {options.bombAmount}</> || <>mint {options.bombAmount} ({ethers.utils.formatEther((options.bombPrice * options.bombAmount).toString())} Ξ)</>}
<AwesomeButton type="secondary" ripple={true} disabled={assembleBombsPrepare.status == 'error'} onPress={() => assembleBombsWrite.write?.()}>
{assembleBombsWrite.isLoading && <>minting {options.bombAmount}</> || <>mint {options.bombPreviewAmount} ({ethers.utils.formatEther((options.bombPrice * options.bombPreviewAmount).toString())} Ξ)</>}
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({bombAmount: v})} />
<Slider className="slider" min={1} max={30} onAfterChange={(v) => handleStateChange({bombAmount: v})} onChange={(v) => handleStateChange({bombPreviewAmount: v})} />
</div>
<div className="mintItem">
<h1>Send Bombs</h1>
@ -389,11 +406,11 @@ function Section3() {
<p>There are {options.unaboomerSupply - options.unaboomersKilled} BOOMR available to kill</p>
<img src={Explosion} alt="" width="120px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
send {options.sendBombAmount} (~0 Ξ)
<AwesomeButton type="secondary" ripple={true} disabled={sendBombsPrepare.status == 'error'} onPress={() => sendBombsWrite.write?.()}>
send {options.sendBombPreviewAmount} (~0 Ξ)
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({sendBombAmount: v})} />
<Slider className="slider" min={1} max={30} onAfterChange={(v) => handleStateChange({sendBombAmount: v})} onChange={(v) => handleStateChange({sendBombPreviewAmount: v})} />
</div>
</div>
<NotificationContainer/>
@ -405,6 +422,7 @@ function Section3() {
unaboomersKilled={options.unaboomersKilled}
leaderAddress={options.leaderAddress}
leaderKillCount={options.leaderKillCount}
unaboomerMaxSupply={options.unaboomerMaxSupply}
/>
</>
||

Write Preview
Loading…
Cancel
Save