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

adjust

Browse Source
master
lza_menace 2 years ago
parent 8630bc443c
commit b0f1c22096
5 changed files with 79 additions and 54 deletions
Show Stats Download Patch File Download Diff File

BIN
public/SummerPixel22Regular-jE0W7.ttf
View File

Binary file not shown.

2
src/index.js
Unescape Escape View File

@ -27,7 +27,7 @@ const { connectors } = getDefaultWallets({
});
const wagmiClient = createClient({
autoConnect: false,
autoConnect: true,
connectors,
provider,
webSocketProvider

8
src/styles/main.css
Unescape Escape View File

@ -1,5 +1,11 @@
@font-face {
font-family: 'SummerPixel';
src: url('../../public/SummerPixel22Regular-jE0W7.ttf');
}
* {
font-family: 'Times New Roman', Times, serif;
font-family: 'SummerPixel';
font-weight: 400;
font-style: normal;
}

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

@ -19,8 +19,8 @@
}
#heroText {
padding-top: 12vh;
font-size: 4em;
padding-top: 14vh;
font-size: 3.5em;
width: 80%;
text-align: center;
margin: 0 auto;
@ -28,7 +28,7 @@
#heroImage {
max-width: 240px;
margin: 1em auto;
margin: .5em auto;
animation: fadeIn 4s ease-in;
}

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

@ -86,15 +86,38 @@ class GenerateBombOverlay extends React.Component {
}
bombCoords.push(o);
}
this.state = {coords: bombCoords};
this.state = {coords: bombCoords, color: this.props.color};
}
render() {
return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.props.color}} />)
return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
}
}
export function Section3() {
class GameMap extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<>
<h1 id="gameMapTitle">Game Map</h1>
<div className="map">
<img src={Map} />
{/* show active bombs held by other players */}
<GenerateBombOverlay amount={this.props.bombSupply - this.props.bombBalance - this.props.bombsExploded} color={'white'} />
{/* show bombs that have exploded */}
<GenerateBombOverlay amount={this.props.bombsExploded} color={'red'} />
{/* show player bombs */}
<GenerateBombOverlay amount={this.props.bombBalance} color={'yellow'} />
</div>
</>
)
}
}
function Section3() {
const [boomerAmount, setBoomerAmount] = useState(1);
const [bombAmount, setBombAmount] = useState(1);
const [sendBombAmount, setSendBombAmount] = useState(1);
@ -104,7 +127,7 @@ export function Section3() {
const [bombBalance, setBombBalance] = useState(0);
const [bombSupply, setBombSupply] = useState(0);
const [boomerSupply, setBoomerSupply] = useState(0);
const [bombExploded, setBombExploded] = useState(0);
const [bombsExploded, setBombsExploded] = useState(0);
const [boomerKillCount, setBoomerKillCount] = useState(0);
const { isConnected, address } = useAccount();
useContractReads({
@ -161,7 +184,6 @@ export function Section3() {
}
],
watch: true,
cacheTime: 5000,
onSuccess(data) {
setBoomerPrice(data[0].toString());
setBombPrice(data[1].toString());
@ -169,7 +191,7 @@ export function Section3() {
setBombBalance(data[3].toString());
setBoomerSupply(data[4].toString());
setBombSupply(data[5].toString());
setBombExploded(data[6].toString());
setBombsExploded(data[6].toString());
setBoomerKillCount(data[7].toString());
}
});
@ -208,50 +230,47 @@ export function Section3() {
return (
<section className="section">
{isConnected &&
<div className="mintContainer">
<div className="mintItem">
<h1>Radicalize a Boomer</h1>
<p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
<p>You have {boomerBalance} BOOMR</p>
<img src={Boomer} alt="" width="120px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
{radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
</div>
<div className="mintItem">
<h1>Assemble Bombs</h1>
<p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them.</p>
<p>You have {bombBalance} BOMB</p>
<img src={Bomb} alt="" width="100px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
{assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
</div>
<div className="mintItem">
<h1>Send Bombs</h1>
<p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process.</p>
<p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
<img src={Explosion} alt="" width="120px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
send {sendBombAmount} (~0 Ξ)
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
<>
<div className="mintContainer">
<div className="mintItem">
<h1>Radicalize a Boomer</h1>
<p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
<p>You have {boomerBalance} BOOMR</p>
<img src={Boomer} alt="" width="120px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
{radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
</div>
<div className="mintItem">
<h1>Assemble Bombs</h1>
<p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them.</p>
<p>You have {bombBalance} BOMB</p>
<img src={Bomb} alt="" width="100px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
{assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
</div>
<div className="mintItem">
<h1>Send Bombs</h1>
<p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process.</p>
<p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
<img src={Explosion} alt="" width="120px" />
<p>
<AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
send {sendBombAmount} (~0 Ξ)
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
</div>
</div>
<div className="map">
<img src={Map} />
<GenerateBombOverlay amount={bombSupply - bombBalance - bombExploded} color={'white'} />
<GenerateBombOverlay amount={bombExploded} color={'red'} />
<GenerateBombOverlay amount={bombBalance} color={'yellow'} />
</div>
</div>
<GameMap bombSupply={bombSupply} bombBalance={bombBalance} bombsExploded={bombsExploded} />
</>
||
<div id="heroText">
<h1>connect your wallet to play</h1>

Write Preview
Loading…
Cancel
Save