diff --git a/public/depixelschmal.otf b/public/depixelschmal.otf new file mode 100644 index 0000000..8a94b16 Binary files /dev/null and b/public/depixelschmal.otf differ diff --git a/src/Wallet.jsx b/src/Wallet.jsx index 50b1a1c..e69de29 100644 --- a/src/Wallet.jsx +++ b/src/Wallet.jsx @@ -1,133 +0,0 @@ -import { ConnectButton } from '@rainbow-me/rainbowkit'; -import { AwesomeButton } from 'react-awesome-button'; - -import './styles/buttons.css'; - - -export function Wallet() { - return ( - - ); -}; diff --git a/src/img/arrow_down.png b/src/img/arrow_down.png new file mode 100644 index 0000000..f895238 Binary files /dev/null and b/src/img/arrow_down.png differ diff --git a/src/img/arrow_right.png b/src/img/arrow_right.png new file mode 100644 index 0000000..fc2cea3 Binary files /dev/null and b/src/img/arrow_right.png differ diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 0000000..b2b480f Binary files /dev/null and b/src/img/logo.png differ diff --git a/src/img/bomb.png b/src/img/mailbomb.png similarity index 100% rename from src/img/bomb.png rename to src/img/mailbomb.png diff --git a/src/index.js b/src/index.js index b294a06..538926c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import '@rainbow-me/rainbowkit/styles.css'; -import 'react-awesome-button/dist/styles.css'; +// import 'react-awesome-button/dist/styles.css'; import "./styles/main.css"; import ReactDOM from "react-dom/client"; @@ -11,11 +11,8 @@ import { mainnet, goerli, localhost } from 'wagmi/chains'; import { infuraProvider } from 'wagmi/providers/infura' import { publicProvider } from 'wagmi/providers/public'; -import { ParallaxProvider } from 'react-scroll-parallax'; - -import { Wallet } from "./Wallet"; -import { AllSections } from './template/Sections'; - +import { Navbar } from "./sections/Navbar"; +import { Hero } from "./sections/Hero"; const { chains, provider, webSocketProvider } = configureChains( [mainnet, goerli, localhost], @@ -38,20 +35,16 @@ const wagmiClient = createClient({ }); ReactDOM.createRoot(document.getElementById("root")).render( - -
- + +
- ); // 0x97a8a91563a9c6a9fbdb5d37656d4022f2838928 - goerli -// 0x5FbDB2315678afecb367f032d93F642f64180aa3 - local \ No newline at end of file +// 0x5FbDB2315678afecb367f032d93F642f64180aa3 - local +// wss://lzahq.tech/ws \ No newline at end of file diff --git a/src/sections/Hero.jsx b/src/sections/Hero.jsx new file mode 100644 index 0000000..497152e --- /dev/null +++ b/src/sections/Hero.jsx @@ -0,0 +1,55 @@ +import React from 'react'; + +import '../styles/hero.css'; +import Unaboomer from '../img/unaboomer.png'; +import Mailbomb from '../img/mailbomb.png'; +import Explosion from '../img/explosion.png'; +import Arrow from '../img/arrow_right.png'; + +export class Hero extends React.Component { + render() { + return ( +
+

the web3 revolution & its consequences have been a disaster for the human race.

+
+
+ Pixelated Unaboomer profile picture - a hooded man with dark sunglasses. +

+ Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin, + and expensive JPEGs have made them angry.

+ They've begun to radicalize. 35,000 Boomers have joined forces + to lash out at the system. +

+ +

(0 ETH)

+
+
+ Arrow pointing to the next step. +
+
+ Pixelated Mailbomb image - handle with caution. +

+ Don't let the Boomers win, fight back! Assemble a mailbomb and blow 'em to smithereens.

+ (Warning: Some bombs are duds!) +

+ +

(.01 ETH)

+
+
+ Arrow pointing to the next step. +
+
+ Pixelated explosion image. +

+ Ready for mayhem? Burn your mailrooms to blow up a random boomer.

+ If your bomb is live it will destroy a Boomer PFP forever.

+ (Warning: Your Boomer might explode!) +

+ +

(0 ETH)

+
+
+
+ ) + } +} diff --git a/src/sections/Navbar.jsx b/src/sections/Navbar.jsx new file mode 100644 index 0000000..7088941 --- /dev/null +++ b/src/sections/Navbar.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { ConnectButton } from '@rainbow-me/rainbowkit'; + +import '../styles/navbar.css'; +import Logo from '../img/logo.png'; + +export class Navbar extends React.Component { + render() { + return ( + + ) + } +} diff --git a/src/styles/hero.css b/src/styles/hero.css new file mode 100644 index 0000000..b88753e --- /dev/null +++ b/src/styles/hero.css @@ -0,0 +1,36 @@ +#hero { + width: 100%; +} + +#hero h1 { + width: 80%; + text-transform: uppercase; + margin: 1em auto; +} + +#heroFlex { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 auto; +} + +.heroFlexItem { + flex: 0 25%; + height: 100%; + width: 200px; + text-align: center; +} + +.heroFlexItem p { + width: 90%; + margin: 0 auto; +} + +.heroFlexArrow { + height: 100%; +} + +button.doThing { + margin: 1em; +} \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css index eaf3a81..466a36f 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,110 +1,66 @@ @font-face { - font-family: 'SummerPixel'; - src: url('../../public/SummerPixel22Regular-jE0W7.ttf'); + font-family: 'Depixel'; + src: url('../../public/depixelschmal.otf'); } - * { - font-family: 'SummerPixel'; - /* font-weight: 400; */ + font-family: 'Depixel'; font-style: normal; } body { - --black: #000000; - --ash-black: #222; - --white: #fafafa; - --sky: #00ccff; - --green: #22dddd; - --blue: #1300ff; - --dusk: #6600ff; - --purple: #9900ff; - --pink: #ff0066; - --red: #fe0222; - --orange: #fd7702; - --yellow: #ffbb00; - - --background: var(--black); - --accent: var(--white); - - margin: 0; - padding: 0; - background-color: var(--background); - color: var(--accent); -} - -h1 { - font-size: 36px; - font-weight: 700; - letter-spacing: -1px; - line-height: 1.2; - text-align: center; - margin: 100px 0 40px; -} - -h2 { - font-weight: 400; + background-color: #231f20; + color: #f9f9f9; } -p { - margin: 0 0 30px 0; - font-size: 18px; -} - -nav { - position: fixed; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 40px; - background-image: radial-gradient( - rgba(0, 0, 0, 0) 1px, - var(--background) 1px +button { + background-color: #ef3b39; + color: #f9f9f9; + text-transform: uppercase; + padding: 1em; + border-radius: 0; + border: 0; + box-shadow: 0 5px #f9f9f9; + clip-path: polygon( + 0px 20px, + 4px 20px, + 4px 12px, + 8px 12px, + 8px 8px, + 12px 8px, + 12px 4px, + 16px 4px, + 20px 4px, + 20px 0px, + calc(100% - 20px) 0px, + calc(100% - 20px) 4px, + calc(100% - 12px) 4px, + calc(100% - 12px) 8px, + calc(100% - 8px) 8px, + calc(100% - 8px) 12px, + calc(100% - 4px) 12px, + calc(100% - 4px) 16px, + calc(100% - 4px) 20px, + 100% 20px, + 100% calc(100% - 20px), + calc(100% - 4px) calc(100% - 20px), + calc(100% - 4px) calc(100% - 12px), + calc(100% - 8px) calc(100% - 12px), + calc(100% - 8px) calc(100% - 8px), + calc(100% - 12px) calc(100% - 8px), + calc(100% - 12px) calc(100% - 4px), + calc(100% - 16px) calc(100% - 4px), + calc(100% - 20px) calc(100% - 4px), + calc(100% - 20px) 100%, + 20px 100%, + 20px calc(100% - 4px), + 12px calc(100% - 4px), + 12px calc(100% - 8px), + 8px calc(100% - 8px), + 8px calc(100% - 12px), + 4px calc(100% - 12px), + 4px calc(100% - 16px), + 4px calc(100% - 20px), + 0px calc(100% - 20px) ); - background-size: 4px 4px; - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - -moz-backdrop-filter: blur(3px); - font-size: 14px; - line-height: 14px; - z-index: 10; -} - -nav::before { - display: block; - content: ""; - position: absolute; - top: -1px; - left: 0; - right: 0; - height: 1px; - background: var(--accent); - opacity: 0.2; } - -::-webkit-scrollbar { - height: 12px; - width: 5px; - background: var(--background); -} - -::-webkit-scrollbar-thumb { - background: var(--accent); - -webkit-border-radius: 1ex; - border-radius: 1ex; -} - -::-webkit-scrollbar-corner { - background: var(--background); -} - -.wrap { - word-break: break-word; -} - -.hidden { - display: none; -} \ No newline at end of file diff --git a/src/styles/navbar.css b/src/styles/navbar.css new file mode 100644 index 0000000..e81161c --- /dev/null +++ b/src/styles/navbar.css @@ -0,0 +1,26 @@ +#primaryNav { + display: inline; +} + +#logo { + width: 250px; +} + +#logo img { + width: 100%; + padding: 1em; +} + +#wallet { + position: absolute; + top: 0; + right: 0; + padding: 2em; +} + +#wallet button { + font-family: 'Depixel'; + background-color: #ef3b39; + border-radius: 0; + box-shadow: 0 5px #fff; +} \ No newline at end of file diff --git a/src/styles/sections.css b/src/styles/sections.css index 9d0bb0f..e676c11 100644 --- a/src/styles/sections.css +++ b/src/styles/sections.css @@ -188,13 +188,17 @@ margin: 10px; } +#gameMap button { + width: 30%; +} + #statsbox { position: fixed; bottom: 0; left: 0; background-color: black; text-align: left; - width: 49%; + width: 30%; margin: 0; max-height: 400px; overflow-y: auto; @@ -211,7 +215,7 @@ right: 0; background-color: black; text-align: left; - width: 49%; + width: 30%; margin: 0; max-height: 400px; overflow-y: auto; diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx index cbbed61..ff1f616 100644 --- a/src/template/Sections.jsx +++ b/src/template/Sections.jsx @@ -114,7 +114,7 @@ class GenerateBombOverlay extends React.Component { class GameMap extends React.Component { constructor(props) { super(props); - this.state = {showStats: false} + this.state = {showStats: false, showMap: false} } shorten(s) { @@ -124,30 +124,48 @@ class GameMap extends React.Component { render() { return ( <> -

Metaverse Map

-

- {this.props.unaboomersRadicalized} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and ready to terrorize the metaverse. {this.props.unaboomersKilled} killed.
- This round will end and the project will fully start when {this.props.unaboomerMaxSurvivorCount} or less Unaboomers remain standing.
-

-
- - - - +
+ {this.state.showMap && ( + <> +

Metaverse Map

+

+ {this.props.unaboomersRadicalized} / {this.props.unaboomerMaxSupply} Unaboomers radicalized and ready to terrorize the metaverse. {this.props.unaboomersKilled} killed.
+ This round will end and the project will fully start when {this.props.unaboomerMaxSurvivorCount} or less Unaboomers remain standing.
+

+
+ + + + +
+ + )} + +
{this.state.showStats && (

- Kill Leader:
- - {this.shorten(this.props.leaderAddress)} - -

-

- {this.props.leaderKillCount} kills + Kill Leader:
+ {this.props.leaderKillCount > 0 && ( + + {this.shorten(this.props.leaderAddress)} + + ) || "?"} +

+ {this.props.leaderKillCount > 0 && ( +

+ {this.props.leaderKillCount} kills +

+ )} +

Active Unaboomers: {this.props.unaboomersRadicalized - this.props.unaboomersKilled}
@@ -464,10 +482,11 @@ function Section3(props) { WTF

- This is a chain based game. There is a max supply of {options.unaboomerMaxSupply} Unaboomer tokens (BOOMR) and an infinite supply of Mailbomb tokens (BOMB). - Players will mint BOOMR and send BOMB to kill the other players. There is a pseudo-random element which may cause your bomb to malfuction, killing your own token.

- This is the first round of the game in which we select the fiercest warriors to lead the decentralized revolution. - There will be up to {options.unaboomerMaxSurvivorCount} survivors. The round will conclude when the survivor count has been reached.

+ This is a community-focused project with the first round being a chain based game to determine the entrants. There is a max supply of {options.unaboomerMaxSupply} Unaboomer tokens (BOOMR) and an infinite supply of Mailbomb tokens (BOMB). + Players will mint BOOMR and send BOMB to kill competing players. There is an element of randomness which may cause your bomb to be a dud, or worse, an accidental explosion, killing your token in the process.

+ + This is the first round of the game in which we select the entrants to lead the decentralized revolution. + There will be no more than {options.unaboomerMaxSurvivorCount} survivors. The round will conclude when the survivor count has been reached.

Godspeed.