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({ const wagmiClient = createClient({
autoConnect: false, autoConnect: true,
connectors, connectors,
provider, provider,
webSocketProvider 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-weight: 400;
font-style: normal; font-style: normal;
} }

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

@ -19,8 +19,8 @@
} }
#heroText { #heroText {
padding-top: 12vh; padding-top: 14vh;
font-size: 4em; font-size: 3.5em;
width: 80%; width: 80%;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
@ -28,7 +28,7 @@
#heroImage { #heroImage {
max-width: 240px; max-width: 240px;
margin: 1em auto; margin: .5em auto;
animation: fadeIn 4s ease-in; 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); bombCoords.push(o);
} }
this.state = {coords: bombCoords}; this.state = {coords: bombCoords, color: this.props.color};
} }
render() { 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 [boomerAmount, setBoomerAmount] = useState(1);
const [bombAmount, setBombAmount] = useState(1); const [bombAmount, setBombAmount] = useState(1);
const [sendBombAmount, setSendBombAmount] = useState(1); const [sendBombAmount, setSendBombAmount] = useState(1);
@ -104,7 +127,7 @@ export function Section3() {
const [bombBalance, setBombBalance] = useState(0); const [bombBalance, setBombBalance] = useState(0);
const [bombSupply, setBombSupply] = useState(0); const [bombSupply, setBombSupply] = useState(0);
const [boomerSupply, setBoomerSupply] = useState(0); const [boomerSupply, setBoomerSupply] = useState(0);
const [bombExploded, setBombExploded] = useState(0); const [bombsExploded, setBombsExploded] = useState(0);
const [boomerKillCount, setBoomerKillCount] = useState(0); const [boomerKillCount, setBoomerKillCount] = useState(0);
const { isConnected, address } = useAccount(); const { isConnected, address } = useAccount();
useContractReads({ useContractReads({
@ -161,7 +184,6 @@ export function Section3() {
} }
], ],
watch: true, watch: true,
cacheTime: 5000,
onSuccess(data) { onSuccess(data) {
setBoomerPrice(data[0].toString()); setBoomerPrice(data[0].toString());
setBombPrice(data[1].toString()); setBombPrice(data[1].toString());
@ -169,7 +191,7 @@ export function Section3() {
setBombBalance(data[3].toString()); setBombBalance(data[3].toString());
setBoomerSupply(data[4].toString()); setBoomerSupply(data[4].toString());
setBombSupply(data[5].toString()); setBombSupply(data[5].toString());
setBombExploded(data[6].toString()); setBombsExploded(data[6].toString());
setBoomerKillCount(data[7].toString()); setBoomerKillCount(data[7].toString());
} }
}); });
@ -208,50 +230,47 @@ export function Section3() {
return ( return (
<section className="section"> <section className="section">
{isConnected && {isConnected &&
<div className="mintContainer"> <>
<div className="mintItem"> <div className="mintContainer">
<h1>Radicalize a Boomer</h1> <div className="mintItem">
<p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p> <h1>Radicalize a Boomer</h1>
<p>You have {boomerBalance} BOOMR</p> <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
<img src={Boomer} alt="" width="120px" /> <p>You have {boomerBalance} BOOMR</p>
<p> <img src={Boomer} alt="" width="120px" />
<AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}> <p>
{radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>} <AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
</AwesomeButton> {radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
</p> </AwesomeButton>
<Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} /> </p>
</div> <Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
<div className="mintItem"> </div>
<h1>Assemble Bombs</h1> <div className="mintItem">
<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> <h1>Assemble Bombs</h1>
<p>You have {bombBalance} BOMB</p> <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>
<img src={Bomb} alt="" width="100px" /> <p>You have {bombBalance} BOMB</p>
<p> <img src={Bomb} alt="" width="100px" />
<AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}> <p>
{assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>} <AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
</AwesomeButton> {assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
</p> </AwesomeButton>
<Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} /> </p>
</div> <Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
<div className="mintItem"> </div>
<h1>Send Bombs</h1> <div className="mintItem">
<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> <h1>Send Bombs</h1>
<p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p> <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>
<img src={Explosion} alt="" width="120px" /> <p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
<p> <img src={Explosion} alt="" width="120px" />
<AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}> <p>
send {sendBombAmount} (~0 Ξ) <AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
</AwesomeButton> send {sendBombAmount} (~0 Ξ)
</p> </AwesomeButton>
<Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} /> </p>
<Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
</div>
</div> </div>
<div className="map"> <GameMap bombSupply={bombSupply} bombBalance={bombBalance} bombsExploded={bombsExploded} />
<img src={Map} /> </>
<GenerateBombOverlay amount={bombSupply - bombBalance - bombExploded} color={'white'} />
<GenerateBombOverlay amount={bombExploded} color={'red'} />
<GenerateBombOverlay amount={bombBalance} color={'yellow'} />
</div>
</div>
|| ||
<div id="heroText"> <div id="heroText">
<h1>connect your wallet to play</h1> <h1>connect your wallet to play</h1>

Write Preview
Loading…
Cancel
Save