master
lza_menace 1 year ago
commit 549692d1bd

23
.gitignore vendored

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

@ -0,0 +1,70 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

17247
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,42 @@
{
"name": "Punk Hunt",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"jquery": "^3.6.3",
"nes.css": "^2.3.0",
"popper.js": "^1.16.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<head>
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="PunkHunt.gg">
<meta name="twitter:description" content="PunkHunt.gg - An open edition PvP NFT game inspired by Nintendo's Duck Hunt.">
<meta name="twitter:creator" content="@cartyisme">
<meta name="twitter:image" content="%PUBLIC_URL%/discord.png">
<meta name="twitter:domain" content="https://PunkHunt.gg">
<meta property="og:type" content="PunkHunt.gg">
<meta property="og:title" content="PunkHunt.gg - An open edition PvP NFT game inspired by Nintendo's Duck Hunt." />
<meta property="og:description" content="PunkHunt.gg - An open edition PvP NFT game inspired by Nintendo's Duck Hunt." />
<meta property="og:url" content="https://PunkHunt.gg" />
<meta property="og:image" content="%PUBLIC_URL%/discord.png" />
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>PunkHunt.gg - An open edition PvP NFT game inspired by Nintendo's Duck Hunt.</title>
<meta name="Punk Hunt - An open edition PvP NFT game inspired by Nintendo's Duck Hunt." co>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Punk Hunt</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

@ -0,0 +1,4 @@
.shoot {
margin-top: 30em;
}

@ -0,0 +1,41 @@
import './Ded.css';
import pepe from './img/pepe.png'
function App() {
return (
<body>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<h2 className="p-2" style={{ transform: 'rotate(90deg)' }}>>></h2>
</div>
</div>
</div>
<div className=" d-none d-lg-block"><div className="shoot"></div></div>
<div className="pt-2" id="burn"></div>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<h1 className="p-2" style={{ color: '#231f20' }}>Shoot <input type="text" style={{ width: '2.5em' }} id="inline_field" class="nes-input default_select" placeholder="5"></input> Ducks!</h1>
<button type="button" className="nes-btn is-disabled">Shoot Ducks</button>
<p>TX fee</p>
<progress className="w-75 nes-progress" value="90" max="100"></progress>
<h1 className="p-2" style={{ color: '#231f20' }}>XXXX/XXXX Ded Ducks!</h1>
<p>The game ends wen one duck remains.</p>
<img src={pepe} className="img-fluid w-100" />
</div>
</div>
</div>
</body>
);
}
export default App;

@ -0,0 +1,16 @@
.fence {
margin-top: -16em;
}
@media only screen and (max-width: 1152px) {
/* Style adjustments for viewports that meet the condition */
.fence {
margin-top: 0em;
}
}

@ -0,0 +1,33 @@
import './Ducks.css';
import duck from './img/duck.png'
import fence from './img/fence.png'
function App() {
return (
<body>
<div className="pt-4" id="duckmint"></div>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<div className="d-none d-lg-block col-6 offset-6 p-2"><img src={duck} style={{ height: '12em' }} className="img-fluid" /></div>
<div className="d-lg-none col-6 offset-6 p-2"><img src={duck} style={{ height: '4em' }} className="img-fluid" /></div>
<h1 className="p-4" style={{ color: '#231f20' }}>Mint <input type="text" style={{ width: '2.5em' }} id="inline_field" class="nes-input default_select" placeholder="5"></input> Ducks!</h1>
<button type="button" className="nes-btn is-disabled">Mint Ducks</button>
<p>0.01E</p>
<h1 className="" style={{ color: '#231f20' }}>69:42:00 TBA</h1>
<h1 className="pb-2" style={{ color: '#231f20' }}>XXXX Minted!</h1>
<p><a href="#stats" className="underlinelink" style={{ color: '#ea6126' }} >last duck standing</a> wins 25% of the contract funds!</p>
<img src={fence} className="img-fluid w-100 fence" />
</div>
</div>
</div>
</body>
);
}
export default App;

@ -0,0 +1,21 @@
.faq {
background-color: #97E500;
color: #231f20;
}
a {
font-size: 1.25em;
color: #ea6126;
text-decoration: none;
}
.stats {
font-size: 1.5em!important;
}
@media only screen and (max-width: 1152px) {
/* Style adjustments for viewports that meet the condition */
.stats {
font-size: .75em!important;
}
}

@ -0,0 +1,361 @@
import './Faq.css';
function App() {
return (
<div className="faq pt-2 pb-4" id="faq">
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 text-center">
<h1 className="pt-4 pb-4">Frequently Asked Questions</h1>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Wen mint?</h1>
<br></br>
<p>Mint is TBA.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>What is a PvP NFT Game?</h1>
<br></br>
<p>"PvP" stands for "Player versus Player." Punk Hunt is an analog NFT game, inspired by <a className="underlinelink" href="https://en.wikipedia.org/wiki/Duck_Hunt" style={{ color: '#f9f9f9' }}>Nintendo's Duck Hunt</a>, where players compete to be the last duck standing.</p>
<p>The objective is to shoot other players' NFT ducks with <a className="underlinelink" href="#zappmint" style={{ color: '#f9f9f9' }}>zappers</a>, Ruining their NFT. The game ends when one duck remains. The last address hodling a live duck and the address whom kills the most ducks each win 25% of the total contract funds.</p>
<p>It's like "<a className="underlinelink" href="https://en.wikipedia.org/wiki/King_of_the_hill_(game)" style={{ color: '#f9f9f9' }}>king-of-the-hill</a>" with a non-fungible twist.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>So it's not a collectible?</h1>
<br></br>
<p>No, Punk Hunt is anti-collectible. It's a digital experience, a game, not static digital art.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Discord?</h1>
<br></br>
<p>No Discord. If you'd like to reach out to us on Discord, feel free to join the <a className="underlinelink" href="https://discord.gg/b3YYQdbmnx" style={{ color: '#f9f9f9' }}>Art101 Discord</a>. You can find @lza and @cartyisme there.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Okay, so I mint a duck now what?</h1>
<br></br>
<p>That's up to you! You can hodl your duck and pray it survives, or join in the fray and elimintate fellow punks from the competition by minting and burning zappers to shoot other collectors NFT ducks.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Is there a maximum amount of ducks I can mint?</h1>
<br></br>
<p>Yep! A wallet can only mint 50 NFT ducks max. If you need more, you can buy them on <a className="underlinelink" href="" style={{ color: '#f9f9f9' }}>OpenSea</a>.</p> <p>The more ducks you own, the more likely you win!</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Is there a maximum amount of zappers I can mint?</h1>
<br></br>
<p>Nope! You can mint and burn as many zappers as you like. the more ducks you shoot the more likely you climb the leaderboard. When the game ends, the address that kills the most ducks wins 25% of the total contract funds!</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>When can I start shooting ducks?</h1>
<br></br>
<p>When the ducks have completed their 69 hour and 42 minute mint, zappers can begin shooting ducks.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Cool, I minted Zappers, how do I choose which ducks to shoot?</h1>
<br></br>
<p>You don't, when a zapper is burned a random duck is shot. The TokenIds are selected via RNG in the name of fairness. Aim carefully, you might miss.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Can I see the ducks I shoot?</h1>
<br></br>
<p>Of course! Our UI will let you know which ducks you killed each time you fire off your zappers, you can also view your kills on etherscan.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>How do I know if my duck is ded?</h1>
<br></br>
<p>Refresh the metadata and pepe will let you know. When a duck gets shot, the token's image and traits are flipped to reflect it's rekt-ness.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>So if I kill the most ducks, or own the last duck standing, I get paid!?</h1>
<br></br>
<p>That's right, the address with the most kills and the address holding the last duck each receive 25% of the contract funds. Keep tabs on who's winning via the <a className="underlinelink" href="#stats" style={{ color: '#f9f9f9' }}>leaderboard</a>. </p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Royalty?</h1>
<br></br>
<p>Z-E-R-O</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Filter?</h1>
<br></br>
<p>Never.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Roadmap?</h1>
<br></br>
<p>No roadmap, Punk Hunt is a one-off digital experience, a game. We are not building a brand. We are experimenting and having fun. If you'd like to see what we get up to next, follow us on twitter.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>Is this for real!?</h1>
<br></br>
<p>Yes, we r fer rel.</p> <p>Punk Hunt is an adaptation of our previous drop, <a className="underlinelink" href="https://twitter.com/unaboomernft" style={{ color: '#f9f9f9' }}>Unaboomer</a>. Consider it our MVP, or proof of concept. Punk Hunt is an Open Edition variation on the proven <a className="underlinelink" href="https://twitter.com/unaboomernft" style={{ color: '#f9f9f9' }}>Unaboomer</a> mechanics.</p> <p>Unaboomer minters will receive a free NFT duck airdrop.</p>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-10">
<h1>And who are you?</h1>
<br></br>
<p>We're doxxed on the <a className="underlinelink" href="#" style={{ color: '#f9f9f9' }}>title page</a>, where our twitters are linked. We created <a className="underlinelink" href="https://art101.io" style={{ color: '#f9f9f9' }}>Art101</a>, minted 30,000+ Free NFTs over <a className="underlinelink" href="https://opensea.io/art101.eth/created" style={{ color: '#f9f9f9' }}>10 generative collections</a>, and have reputations to keep.</p> <p>We've been innovating in this space for years. No rug here.</p> <p>Winners will be paid within 3 days of the contest ending. Our contract is verified, and activity can be audited on-chain.</p>
<br></br>
</div>
</div>
</div>
</div>
);
}
export default App;

@ -0,0 +1,8 @@
nav {
background-color: #231f20;
padding: 16px 16px;
}
a {
font-size: 1.25em;
}

@ -0,0 +1,30 @@
import './Nav.css';
function App() {
return (
<nav className="">
<div className="container-fluid">
<div className="row align-items-center">
<div className="col-6 justify-content-start d-flex">
<a href="#faq" className="underlinelink" style={{ color: '#ea6126' }}>FAQ</a>&#160;||&#160;<a href="" className="underlinelink" style={{ color: '#6e6e6e' }}>Trollbox</a>
</div>
<div className="col-6 d-flex justify-content-end">
<button type="button" className="nes-btn is-disabled">Connect</button>
</div>
</div>
</div>
</nav>
);
}
export default App;

@ -0,0 +1,7 @@
a {
font-size: 1.25em;
color: #ea6126;
text-decoration: none;
}

@ -0,0 +1,81 @@
import './Splash.css';
import logo from './img/punkhunt.png'
function App() {
return (
<div className="splash">
<div className="container">
<div className="row">
<div className="col-12 text-center">
<img src={logo} className="img-fluid w-75" />
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-12 text-center">
<h2 className="pt-2">an open edition PvP NFT game</h2>
</div>
</div>
</div>
<div className="container">
<div className="row justify-content-center">
<div className="col-12 text-center">
<label>
<input type="radio" className="nes-radio is-dark" name="answer-dark" checked/>
<span><a href="#duckmint" style={{ color: '#ea6126' }}>Step 1&emsp;Mint Ducks</a></span>
</label>
<br></br>
<label>
<input type="radio" className="nes-radio is-dark" name="answer-dark"/>
<span style={{ color: '#ea6126' }}><a href="#zappmint" style={{ color: '#ea6126' }}>Step 2&emsp;Buy Zappers</a></span>
</label>
<br></br>
<label>
<input type="radio" className="nes-radio is-dark" name="answer-dark"/>
<span style={{ color: '#ea6126' }}><a href="#burn" style={{ color: '#ea6126' }}>Step 3&emsp;Sh00t Ducks</a></span>
</label>
<br></br>
<label>
<input type="radio" className="nes-radio is-dark" name="answer-dark"/>
<span style={{ color: '#ea6126' }}><a href="#stats" style={{ color: '#ea6126' }}>Stats&emsp;Leaderboard</a></span>
</label>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-12 text-center">
<h2 className="p-2" style={{ color: '#97E500' }}>Top Score = ETH Reward!</h2>
<h2 className="" >©2023 <a style={{ color: '#f9f9f9' }} className="underlinelink" href="https://twitter.com/lza_menace">LZA_MENACE</a> & <a className="underlinelink" style={{ color: '#f9f9f9' }} href="https://twitter.com/cartyisme">CARTYISME</a></h2>
<h2 className="p-4" style={{ transform: 'rotate(90deg)' }}>>></h2>
</div>
</div>
</div>
</div>
);
}
export default App;

@ -0,0 +1,330 @@
import './Stats.css';
function App() {
return (
<div className="splash pt-2" id="stats">
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 text-center">
<h1 className="pt-4">leaderboard</h1>
</div>
</div>
</div>
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-12 d-flex text-center">
<div className="col-6 text-left">
<h2 style={{ color: '#3BC3FD' }}>Hodlers</h2>
</div>
<div className="col-6 text-right">
<h2 style={{ color: '#3BC3FD' }}>Ducks</h2>
</div>
</div>
<hr className="" style={{ color: '#3BC3FD' }}></hr>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 text-center">
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#3BC3FD' }}>1. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#3BC3FD' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#3BC3FD' }}>2. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#3BC3FD' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#3BC3FD' }}>3. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#3BC3FD' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#3BC3FD' }}>4. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#3BC3FD' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#3BC3FD' }}>5. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#3BC3FD' }}>XXXX</p>
</div>
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 d-flex text-center">
<div className="col-6 text-left">
<h2 style={{ color: '#ea6126' }}>Top Shots</h2>
</div>
<div className="col-6 text-right">
<h2 style={{ color: '#ea6126' }}>Hits</h2>
</div>
</div>
<hr className="" style={{ color: '#ea6126' }}></hr>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 text-center">
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#ea6126' }}>1. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#ea6126' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#ea6126' }}>2. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#ea6126' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#ea6126' }}>3. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#ea6126' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#ea6126' }}>4. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#ea6126' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#ea6126' }}>5. 0x0000...DEAD</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#ea6126' }}>XXXX</p>
</div>
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 d-flex text-center">
<div className="col-6 text-left">
<h2 style={{ color: '#97E500' }}>Stats</h2>
</div>
<div className="col-6 text-right">
<h2 style={{ color: '#97E500' }}>Count</h2>
</div>
</div>
<hr className="" style={{ color: '#97E500' }}></hr>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<div className="d-flex stats ">
<div className="col-6 text-left">
<p style={{ color: '#97E500' }}>Live Ducks:</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#97E500' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#97E500' }}>Dead Ducks:</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#97E500' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#97E500' }}>Live Zapps:</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#97E500' }}>XXXX</p>
</div>
</div>
<div className="d-flex stats">
<div className="col-6 text-left">
<p style={{ color: '#97E500' }}>Shots Fired:</p>
</div>
<div className="col-6 text-right">
<p style={{ color: '#97E500' }}>XXXX</p>
</div>
</div>
</div>
</div>
</div>
<div className="container-fluid pt-2 pb-4 ">
<div className="row justify-content-center">
<div className="col-12 text-center">
<h1>Contract:</h1>
<a className="underlinelink" href="" style={{ color: '#ea6126' }}>0x0000...DEAD</a>
</div>
</div>
</div>
<div className="container-fluid pt-2 pb-4 ">
<div className="row justify-content-center">
<div className="col-12 text-center">
<a className="underlinelink" href="" style={{ color: '#3BC3FD' }}>Punk Hunt on OpenSea</a>
</div>
</div>
</div>
</div>
);
}
export default App;

@ -0,0 +1,25 @@
import './Terms.css';
function App() {
return (
<div className="splash pt-2" id="stats">
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-12 text-center">
<h1 className="pt-4">Terms of Service</h1>
<p className="pb-4"><i class="nes-icon is-small heart"></i>&#160;fuck the police&#160;<i class="nes-icon is-small heart"></i></p>
</div>
</div>
</div>
</div>
);
}
export default App;

@ -0,0 +1,14 @@
p {
font-size: 1.25em;
}
.zapptxt {
margin-top: -10em;
}
.zapptxt2 {
margin-top: -40em;
font-size: 1.25em;
}

@ -0,0 +1,102 @@
import './Zapp.css';
import zapp from './img/zapp.png'
function App() {
return (
<body>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<h2 className="p-4" style={{ transform: 'rotate(90deg)' }}>>></h2>
</div>
</div>
</div>
<div className="" id="zappmint"></div>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<h1 className="p-2" style={{ color: '#231f20' }}>Mint <input type="text" style={{ width: '2.5em' }} id="inline_field" class="nes-input default_select" placeholder="5"></input> Zappers!</h1>
<button type="button" className="nes-btn is-disabled" >Mint Zappers</button>
<p>0.0025E</p>
<h1 className="pb-2" style={{ color: '#231f20' }}>XXXX Minted!</h1>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-12 text-center">
<img src={zapp} className="img-fluid w-100" />
</div>
</div>
</div>
<div className="d-none d-lg-block">
<div className="container-fluid zapptxt2">
<div className="row">
<div className="col-8 offset-4 p-4">
<p>Burn Zappers below to shoot ducks! Aim Carefully, you might miss...</p>
<br></br>
<p>The <a href="#stats" style={{ color: '#ea6126' }} className="underlinelink" >Top Shot</a> Wins 25% of the Contract Funds Once the Game is Complete!</p>
<br></br>
<p>When a duck gets shot the token's image and traits are flipped to reflect it's rekt-ness.</p>
<br></br>
<p>Wanna know more!? <a href="#" style={{ color: '#ea6126' }} >Read the FAQ</a>.</p>
</div>
</div>
</div>
</div>
<div className="d-lg-none ">
<div className="container-fluid zapptxt">
<div className="row">
<div className="col-6 offset-6">
<p>Burn Zappers below to shoot ducks! Aim Carefully, you might miss...</p>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-12">
<p>The <a href="#stats" style={{ color: '#ea6126' }} className="underlinelink" >Top Shot</a> Wins 25% of the Contract Funds Once the Game is Complete!</p>
</div>
</div>
</div>
</div>
</body>
);
}
export default App;

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

@ -0,0 +1,58 @@
@font-face {
font-family: "NES"; /*Can be any text*/
src: local("Pixel_NES"),
url("./fonts/Pixel_NES.otf") format("opentype");
}
* {
font-family: NES;
}
a {
display: inline-block;
font-size: 1.25em;
color: #ea6126;
text-decoration: none;
}
body {
background-color: #3BC3FD;
color: #f9f9f9;
}
.splash {
background-color: #231f20;
color: #f9f9f9;
}
hr {
border: 2px solid;
border-radius: 0px;
opacity: 100%;
margin-top: -2px;
width: 80vw!important;
}
p {
font-size: 1em!important;
}
a.underlinelink {
text-decoration: underline!important;
}
.splash {
background-color: #231f20;
color: #f9f9f9;
}
.stats {
font-size: 1.5em!important;
}
@media only screen and (max-width: 1152px) {
/* Style adjustments for viewports that meet the condition */
.stats {
font-size: .75em!important;
}
}

@ -0,0 +1,37 @@
import "nes.css/css/nes.min.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "./fonts/Pixel_NES.otf"
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Nav from './Nav';
import Splash from './Splash';
import Ducks from './Ducks';
import Zapp from './Zapp';
import Ded from './Ded';
import Stats from './Stats';
import Faq from './Faq';
import Terms from './Terms';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Nav />
<Splash />
<Ducks />
<Zapp />
<Ded />
<Stats />
<Faq />
<Terms />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
Loading…
Cancel
Save