From a578cf071f8857ebde4844693162ad7071e89ab9 Mon Sep 17 00:00:00 2001 From: Mentor Palokaj Date: Tue, 7 Dec 2021 14:19:43 +0100 Subject: [PATCH] Changing room explanation on website --- website/package-lock.json | 103 +++++++++++++++++- website/package.json | 1 + website/src/_changingroom.md | 33 ++++++ website/src/changingroom.pug | 45 ++++++++ website/src/css/essential-above-the-fold.sass | 2 +- website/src/css/styles.sass | 4 + website/src/index.pug | 21 ++-- 7 files changed, 194 insertions(+), 15 deletions(-) create mode 100644 website/src/_changingroom.md create mode 100644 website/src/changingroom.pug diff --git a/website/package-lock.json b/website/package-lock.json index bfd2341..93ecae4 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -23,6 +23,7 @@ "dotenv": "^8.6.0", "html-minifier": "^4.0.0", "ip": "^1.1.5", + "jstransformer-markdown-it": "^2.1.0", "mkdirp": "^1.0.4", "ncp": "^2.0.0", "node-sass": "^5.0.0", @@ -2044,7 +2045,6 @@ "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, "dependencies": { "sprintf-js": "~1.0.2" } @@ -5570,6 +5570,17 @@ "promise": "^7.0.1" } }, + "node_modules/jstransformer-markdown-it": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/jstransformer-markdown-it/-/jstransformer-markdown-it-2.1.0.tgz", + "integrity": "sha1-aewwzkUYvtWZezjwJ2SOjChekvc=", + "dependencies": { + "markdown-it": "^8.0.0" + }, + "engines": { + "node": ">=7" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -5634,6 +5645,14 @@ "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==" }, + "node_modules/linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "dependencies": { + "uc.micro": "^1.0.1" + } + }, "node_modules/load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -6007,11 +6026,36 @@ "node": ">=0.10.0" } }, + "node_modules/markdown-it": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz", + "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==", + "dependencies": { + "argparse": "^1.0.7", + "entities": "~1.1.1", + "linkify-it": "^2.0.0", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "bin": { + "markdown-it": "bin/markdown-it.js" + } + }, + "node_modules/markdown-it/node_modules/entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" }, + "node_modules/mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" + }, "node_modules/meow": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", @@ -9092,8 +9136,7 @@ "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", - "dev": true + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "node_modules/sshpk": { "version": "1.16.1", @@ -9848,6 +9891,11 @@ "node": "*" } }, + "node_modules/uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "node_modules/uglify-js": { "version": "3.13.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.4.tgz", @@ -11953,7 +12001,6 @@ "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, "requires": { "sprintf-js": "~1.0.2" } @@ -14604,6 +14651,14 @@ "promise": "^7.0.1" } }, + "jstransformer-markdown-it": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/jstransformer-markdown-it/-/jstransformer-markdown-it-2.1.0.tgz", + "integrity": "sha1-aewwzkUYvtWZezjwJ2SOjChekvc=", + "requires": { + "markdown-it": "^8.0.0" + } + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -14661,6 +14716,14 @@ "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==" }, + "linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "requires": { + "uc.micro": "^1.0.1" + } + }, "load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -14949,11 +15012,35 @@ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=" }, + "markdown-it": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz", + "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==", + "requires": { + "argparse": "^1.0.7", + "entities": "~1.1.1", + "linkify-it": "^2.0.0", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "dependencies": { + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + } + } + }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" }, + "mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" + }, "meow": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", @@ -17286,8 +17373,7 @@ "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", - "dev": true + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "sshpk": { "version": "1.16.1", @@ -17837,6 +17923,11 @@ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz", "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==" }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "uglify-js": { "version": "3.13.4", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.4.tgz", diff --git a/website/package.json b/website/package.json index 74d9aac..cac7c9b 100644 --- a/website/package.json +++ b/website/package.json @@ -34,6 +34,7 @@ "dotenv": "^8.6.0", "html-minifier": "^4.0.0", "ip": "^1.1.5", + "jstransformer-markdown-it": "^2.1.0", "mkdirp": "^1.0.4", "ncp": "^2.0.0", "node-sass": "^5.0.0", diff --git a/website/src/_changingroom.md b/website/src/_changingroom.md new file mode 100644 index 0000000..818a480 --- /dev/null +++ b/website/src/_changingroom.md @@ -0,0 +1,33 @@ +## What is the changing room? + +The changing room is a web interface where, once a month, you are able to regenerate your Rocketeer's outfit. This will change the colors to something close to their traits, but different than their current look. + +## What does the changing room cost? + +It is free. Including free of gas fees. All activity is signed with your wallet, but entirely off chain. + +## Does the changing room change traits? + +The changing room does not change the current traits like helmet or patch type, but it adds the trait "available outfits" and "last outfit change" which will update with every changing room use. The rarity of these traits will depend on how often you use the changing room. + +## How random are the new outfit colors? + +The colors are based on the static color traits of your Rocketeer. With each use of the changing room, your Rocketeer gets more adventurous with their outfit. That is to say that color randomness increases with every outfit you generate. + +## Do special editions get special treatment? + +Yes. All special editions (genesis, hitchhiker, generous, glitched) have more randomness in their new outfits than regular versions. + +Additionally, glitched Rocketeers will have access to their old glitched appearance and their updated appearance in the changing room. + +## Must I use the new outfit? + +That is your choice, you may set your Rocketeer's outfit to any of their available outfits. Changing the outfit does not cost any gas and you can change them as often as you want. + +## How are changes generated? + +Every new Rocketeer is given colors in RGB values. After their image is generated, the Oracle guesses the human pronouncable name of the RGB color. + +For example if your Rocketeer has a helmet of rgb( 255, 10, 4 ) then the trait the Oracle guessed is "red". + +The changing room translates the human readable color back to a reasonably close RGB value. "Red" could for example become rgb( 255, 99, 71 ) which is "tomato red", but it could also become rgb( 240, 128, 128 ) which is "coral red". diff --git a/website/src/changingroom.pug b/website/src/changingroom.pug new file mode 100644 index 0000000..3eff743 --- /dev/null +++ b/website/src/changingroom.pug @@ -0,0 +1,45 @@ +//- -------------------------------- +//- HiPew settings +//- -------------------------------- + +//- This is pace-specific metadata +- + const page = { + title: 'Rocketeer NFT', desc: 'Mint your Rocketeer NFT', url: '/', + published: '2020-02-11', featuredimg: '/assets/mike-kiev-Opzk_hvwO9Q-unsplash.jpg' + } +//- This is a file with helpers +include pug/_helpers.pug + + +//- -------------------------------- +//- Webpage source code +//- -------------------------------- + +doctype html +html( lang=content.lang ) + include pug/_header.pug + body#page + + main + section#hero + h1 Changing room FAQ + //- h1 30 Oct 2021 + h2 The changing room lets you generate new outfit colors once a month. + + div.row + //- a( target='_blank' href='https://mint.rocketeer.fans/' ).button Mint now + a.button.shadow.invert( href="https://tools.rocketeer.fans/#/outfits" ) View changing room + + //- p Launching Soon™️ + +rimg.stretch( src=site.system.url+'/assets/draft-rocketeer.png' ) + + section#content + include:markdown-it _changingroom.md + + + + + + + include pug/_footer.pug \ No newline at end of file diff --git a/website/src/css/essential-above-the-fold.sass b/website/src/css/essential-above-the-fold.sass index 7d4f445..2f501cd 100644 --- a/website/src/css/essential-above-the-fold.sass +++ b/website/src/css/essential-above-the-fold.sass @@ -57,7 +57,7 @@ a.button // /////////////////////////////// // Index page // /////////////////////////////// -#index +#index, #page section position: relative diff --git a/website/src/css/styles.sass b/website/src/css/styles.sass index 7b1e039..a6711b8 100644 --- a/website/src/css/styles.sass +++ b/website/src/css/styles.sass @@ -54,6 +54,10 @@ p margin: 4rem +#page + #hero + height: 500px + #footer // make the copyright notics less in your face text-align: center diff --git a/website/src/index.pug b/website/src/index.pug index ed14c7f..dac89ad 100644 --- a/website/src/index.pug +++ b/website/src/index.pug @@ -30,26 +30,29 @@ html( lang=content.lang ) | Their sole thought is wen. div.row - a( target='_blank' href='https://mint.rocketeer.fans/' ).button Mint now + a( target='_blank' href='https://tools.rocketeer.fans/#/mint' ).button Mint now a.button.shadow.invert( href="https://opensea.io/collection/the-rocketeers" ) View on Opensea //- p Launching Soon™️ +rimg.stretch( src=site.system.url+'/assets/draft-rocketeer.png' ) section#manage - h1 Manage your Rocketeers - p If you own a Rocketeer, you are entitled to the @verified-hodler status on Discord. - p If you are also a Rocketpool node operator you can associate a Rocketeer with your validator on the Rocketpool metrics dashboard. + h1 Rocketeer Utility + p Rocketeers are the unofficial spirit animals of the Ethereum staking community, their utility is mostly within this community: + + p 📈 If you are also a Rocketpool node operator you can associate a Rocketeer with your validator on the Rocketpool metrics dashboard. + p 👔 Once a month you can use the Changing Room to generate a new outfit for your Rocketeer. + p 💬 If you are on our Discord you can apply the the @Verified Holder role. See the #get-verified channel. + br div.row - a( target='_blank' href='https://mint.rocketeer.fans/#/verify' ).button.outline Verify your ownership - a( target='_blank' href='https://mint.rocketeer.fans/#/avatar' ).button.outline Set your validator avatar + a( target='_blank' href='https://tools.rocketeer.fans/' ).button.outline Open Rocketeer toolkit section#story +cimg.circle( size=200 src=site.system.url+'/assets/draft-rocketeer.png' ) p Until minted, each Rocketeer exists in a quantum superposition of many possible identities. They are each unique, but share a foundational desire to reach the moon. div.row - a( target='_blank' href='https://mint.rocketeer.fans/' ).button Mint now + a( target='_blank' href='https://tools.rocketeer.fans/#/mint' ).button Mint now a.button.shadow.outline( href="https://opensea.io/collection/the-rocketeers" ) View on Opensea @@ -94,7 +97,7 @@ html( lang=content.lang ) p The attributes have weighted probabilities. Upon mint a random number generator probablistically determines the attributes. h2 How is the team paid? - p The team does not earn money from minting. Every 42nd Rocketeer is sent to the contract wallet, to be used for community ends. If you are the one minting it it will cost you some more gas. There is also a 5% trading royalty on Opensea designed to recoup the gas fees associated with development. + p The team does not earn money from minting. Every 42nd Rocketeer is sent to the contract wallet, to be used for community ends. If you are the one minting it it will cost you some more gas. There is also a 5% trading royalty on Opensea designed to recoup the costs associated with development. h2 What inspired the Rocketeer NFT? p The undying patience and excited optimism of the Rocket Pool and ETH2 staking communites. @@ -104,6 +107,8 @@ html( lang=content.lang ) h2 Is the code open source? p Yes, you can find it + a( href="https://etherscan.io/address/0xb3767b2033cf24334095dc82029dbf0e9528039d#code" ) here on Etherscan + span and a( href="https://github.com/actuallymentor/rocketeer" ) in this Github repository.