diff --git a/src/img/map.png b/src/img/map.png new file mode 100644 index 0000000..5a57fdf Binary files /dev/null and b/src/img/map.png differ diff --git a/src/index.js b/src/index.js index 39e3ea1..c751882 100644 --- a/src/index.js +++ b/src/index.js @@ -36,7 +36,7 @@ const wagmiClient = createClient({ ReactDOM.createRoot(document.getElementById("root")).render( - +
diff --git a/src/styles/sections.css b/src/styles/sections.css index 1e44881..a0958b3 100644 --- a/src/styles/sections.css +++ b/src/styles/sections.css @@ -51,7 +51,6 @@ .mintContainer { padding-top: 6em; - margin: 2em auto; display: flex; flex-wrap: wrap; justify-content: space-between; @@ -70,4 +69,28 @@ max-width: 40vh; text-align: center; margin: 0 auto 1em auto; +} + +.map { + cursor: crosshair; + margin: 2em 0 0 0; + position: relative; + overflow: hidden; + width: 100%; +} + +.map img { + margin: 0 auto; + width: 100%; + position: relative; + overflow: hidden; +} + +.dots { + width: 10px; + height: 10px; + position: absolute; + background-color: red; + border-radius: 50%; + filter: drop-shadow(0 0 4px crimson); } \ No newline at end of file diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx index fff83ec..9597fa9 100644 --- a/src/template/Sections.jsx +++ b/src/template/Sections.jsx @@ -13,6 +13,7 @@ import Newspapers from '../img/newspapers.png'; import Bomb from '../img/bomb.png'; import Explosion from '../img/explosion.png'; import SeizedItems from '../img/seizeditems.png'; +import Map from '../img/map.png'; import MainABI from '../abi/main.json'; import 'rc-slider/assets/index.css'; @@ -71,14 +72,37 @@ export function Section2() { ) } +class GenerateBombOverlay extends React.Component { + constructor(props) { + super(props); + let bombCoords = []; + for (let i = 0; i < props.amount; i++) { + let min = Math.ceil(0); + let randX = Math.floor(Math.random() * (Math.floor(window.innerWidth) - min) + min); + let randY = Math.floor(Math.random() * (Math.floor(window.innerHeight) - min) + min); + let o = { + x: `${randX}px`, + y: `${randY}px` + } + bombCoords.push(o); + } + this.state = {coords: bombCoords}; + } + + render() { + return this.state.coords.map((obj) =>
) + } +} + export function Section3() { const [boomerAmount, setBoomerAmount] = useState(1); const [bombAmount, setBombAmount] = useState(1); const [sendBombAmount, setSendBombAmount] = useState(1); - const [boomerPrice, setBoomerPrice] = useState(0); - const [bombPrice, setBombPrice] = useState(0); + const [boomerPrice, setBoomerPrice] = useState(ethers.utils.parseEther('.01')); + const [bombPrice, setBombPrice] = useState(ethers.utils.parseEther('.01')); const [boomerBalance, setBoomerBalance] = useState(0); const [bombBalance, setBombBalance] = useState(0); + const [bombSupply, setBombSupply] = useState(100); const { isConnected, address } = useAccount(); useContractReads({ contracts: [ @@ -142,6 +166,7 @@ export function Section3() { } }); const assembleBombsWrite = useContractWrite(assembleBombsPrepare.config); + return (
{isConnected && @@ -191,6 +216,10 @@ export function Section3() { borderColor:'rgba(37, 19, 81, .8)' }} onChange={v => setSendBombAmount(v)} />
+
+ + +
||