From 82dca9cb88b4d23338357a094eb7bdfa42f98774 Mon Sep 17 00:00:00 2001 From: Mentor Palokaj Date: Sun, 28 Nov 2021 12:22:14 +0100 Subject: [PATCH] Prettified changing room --- minter/src/App.css | 16 +++---- minter/src/components/atoms/Avatar.js | 8 ---- minter/src/components/atoms/CircleImage.js | 12 +++++ minter/src/components/atoms/Container.js | 6 +-- minter/src/components/atoms/Section.js | 22 ++++++++- minter/src/components/atoms/Text.js | 22 ++++++--- minter/src/components/atoms/Theme.js | 1 + minter/src/components/molecules/Avatar.js | 12 +++++ minter/src/components/molecules/Hero.js | 14 +----- minter/src/components/molecules/Loading.js | 2 +- minter/src/components/organisms/Outfits.js | 54 ++++++++++++++-------- 11 files changed, 111 insertions(+), 58 deletions(-) delete mode 100644 minter/src/components/atoms/Avatar.js create mode 100644 minter/src/components/atoms/CircleImage.js create mode 100644 minter/src/components/molecules/Avatar.js diff --git a/minter/src/App.css b/minter/src/App.css index 394f425..c73bbfb 100644 --- a/minter/src/App.css +++ b/minter/src/App.css @@ -1,4 +1,4 @@ -main { +/*main { display: flex; flex-grow: 1; flex-shrink: 0; @@ -46,9 +46,9 @@ div.container.wide { p.row { max-width: 100%!important; } - +*/ /*Login button*/ -.button { +/*.button { display: flex; flex-direction: row; align-items: center; @@ -91,10 +91,10 @@ input#address { h1, p, label { padding: .2rem .5rem; -} +}*/ /*Loading spinner*/ -.loading { +/*.loading { display: flex; flex-direction: column; align-items: center; @@ -126,13 +126,13 @@ h1, p, label { 100% { transform: rotate(360deg); } -} +}*/ /* /////////////////////////////// /// Avatar page // /////////////////////////////*/ -#avatar .rocketeer { +/*#avatar .rocketeer { margin: 1rem 0; border-radius: 50%; padding: 1rem; @@ -159,4 +159,4 @@ h1, p, label { .radios .row { width: 200px; -} \ No newline at end of file +}*/ \ No newline at end of file diff --git a/minter/src/components/atoms/Avatar.js b/minter/src/components/atoms/Avatar.js deleted file mode 100644 index 724cf8d..0000000 --- a/minter/src/components/atoms/Avatar.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components' - -export default styled.img` - border-radius: 50%; - height: 200px; - width: 200px; - padding: 1rem; -` \ No newline at end of file diff --git a/minter/src/components/atoms/CircleImage.js b/minter/src/components/atoms/CircleImage.js new file mode 100644 index 0000000..d649384 --- /dev/null +++ b/minter/src/components/atoms/CircleImage.js @@ -0,0 +1,12 @@ +import styled from 'styled-components' + +export default styled.img` + border-radius: 50%; + height: 150px; + width: 150px; + margin: 1rem; + cursor: ${ ( { onClick } ) => onClick ? 'pointer' : 'none' }; + &:hover { + box-shadow: ${ ( { onClick } ) => onClick ? '0 0 20px 2px rgb(0 0 0 / 20%)' : 'none' }; + } +` \ No newline at end of file diff --git a/minter/src/components/atoms/Container.js b/minter/src/components/atoms/Container.js index e3b4862..302e04f 100644 --- a/minter/src/components/atoms/Container.js +++ b/minter/src/components/atoms/Container.js @@ -21,11 +21,11 @@ const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: ${ ( { justify='flex-start' } ) => justify }; min-height: 100vh; width: 100%; - padding: 0 max( 1rem, calc( 25vw - 4rem ) ); - margin-bottom: 10rem; + padding: ${ ( { gutter=true } ) => gutter ? '0 max( 1rem, calc( 25vw - 4rem ) )' : 'none' }; + // margin-bottom: 10rem; box-sizing: border-box; & * { box-sizing: border-box; diff --git a/minter/src/components/atoms/Section.js b/minter/src/components/atoms/Section.js index 1d7dea6..1a3da19 100644 --- a/minter/src/components/atoms/Section.js +++ b/minter/src/components/atoms/Section.js @@ -1,7 +1,8 @@ import styled from 'styled-components' export default styled.section` - padding: 1rem 0; + position: relative; + padding: ${ ( { gutter=false } ) => gutter ? '5rem max( 1rem, calc( 25vw - 4rem ) )' : '5rem 0' }; display: flex; flex-direction: ${ ( { direction } ) => direction || 'column' }; width: ${ ( { width } ) => width || '100%' }; @@ -9,4 +10,23 @@ export default styled.section` flex-wrap: wrap; align-items: ${ ( { align } ) => align || 'center' }; justify-content: ${ ( { justify } ) => justify || 'center' }; + box-shadow: ${ ( { shadow } ) => shadow ? '0 0 20px 2px rgb(0 0 0 / 20%)' : 'none' }; + background-image: ${ ( { background } ) => background ? `url(${ background })` : 'none' }; + background-size: cover; + background-position: center; + + & * { + z-index: 2; + } + + &:after { + content: ''; + z-index: 1; + background: ${ ( { background } ) => background ? `rgba( 255, 255, 255, .5 )` : 'none' }; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + } ` \ No newline at end of file diff --git a/minter/src/components/atoms/Text.js b/minter/src/components/atoms/Text.js index 9c8218c..e042d9b 100644 --- a/minter/src/components/atoms/Text.js +++ b/minter/src/components/atoms/Text.js @@ -2,28 +2,38 @@ import styled from 'styled-components' export const Text = styled.p` font-size: 1rem; - margin: 1rem 0; + margin: .2rem 0; line-height: 1.5rem; - color: ${ ( { theme } ) => theme.colors.text }; - text-align: ${ ( { align } ) => align || 'left' } + color: ${ ( { banner, theme } ) => banner ? theme.colors.primary_invert : theme.colors.text }; + background: ${ ( { banner, theme } ) => banner ? theme.colors.primary : theme.colors.primary_invert }; + padding: ${ ( { banner } ) => banner ? '.5rem 1rem' : 'initial' }; + box-shadow: ${ ( { banner } ) => banner ? '0 0 20px 2px rgb(0 0 0 / 70%)' : '' }; + text-align: ${ ( { align } ) => align || 'left' }; ` export const H1 = styled.h1` font-size: 2.5rem; font-weight: 500; line-height: 1.2; + margin: 1rem 0; font-family: sans-serif; text-align: ${ ( { align } ) => align || 'left' }; - color: ${ ( { theme } ) => theme.colors.primary }; + box-shadow: ${ ( { banner } ) => banner ? '0 0 20px 2px rgb(0 0 0 / 70%)' : '' }; + color: ${ ( { banner, theme } ) => banner ? theme.colors.primary_invert : theme.colors.text }; + background: ${ ( { banner, theme } ) => banner ? theme.colors.primary : theme.colors.primary_invert }; + padding: ${ ( { banner } ) => banner ? '.5rem 1rem' : 'initial' }; ` export const H2 = styled.h2` font-size: 1.5rem; - margin: 0 0 1rem; + margin: .5rem 0; line-height: 1.2; font-weight: 400; text-align: ${ ( { align } ) => align || 'left' }; - color: ${ ( { theme } ) => theme.colors.primary }; + box-shadow: ${ ( { banner } ) => banner ? '0 0 20px 2px rgb(0 0 0 / 70%)' : '' }; + color: ${ ( { banner, theme } ) => banner ? theme.colors.primary_invert : theme.colors.text }; + background: ${ ( { banner, theme } ) => banner ? theme.colors.primary : theme.colors.primary_invert }; + padding: ${ ( { banner } ) => banner ? '.5rem 1rem' : 'initial' }; ` export const Sidenote = styled.p` diff --git a/minter/src/components/atoms/Theme.js b/minter/src/components/atoms/Theme.js index 7c8980d..7240d24 100644 --- a/minter/src/components/atoms/Theme.js +++ b/minter/src/components/atoms/Theme.js @@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components' const theme = { colors: { primary: 'black', + primary_invert: 'white', text: 'rgb( 0, 0, 0, .8 )', accent: 'orange', hint: 'rgba( 0, 0, 0, .4 )', diff --git a/minter/src/components/molecules/Avatar.js b/minter/src/components/molecules/Avatar.js new file mode 100644 index 0000000..4268a33 --- /dev/null +++ b/minter/src/components/molecules/Avatar.js @@ -0,0 +1,12 @@ +import styled from 'styled-components' +import CircleImage from '../atoms/CircleImage' +import { Text } from '../atoms/Text' + +const Wrapper = styled.div` + +` + +export default ( { title, ...props } ) => + + { title && { title } } + \ No newline at end of file diff --git a/minter/src/components/molecules/Hero.js b/minter/src/components/molecules/Hero.js index a9a2004..a8771f3 100644 --- a/minter/src/components/molecules/Hero.js +++ b/minter/src/components/molecules/Hero.js @@ -4,17 +4,5 @@ import Section from '../atoms/Section' export default styled( Section )` width: 100%; min-height: 500px; - align-items: flex-start; - border-bottom: 2px solid ${ ( { theme } ) => theme.colors.primary }; - margin-bottom: 5rem; - & h1 { - margin-bottom: .5rem; - text-align: left; - } - & * { - max-width: 700px; - } - & p { - margin: 0 0 4rem; - } + align-items: center; ` \ No newline at end of file diff --git a/minter/src/components/molecules/Loading.js b/minter/src/components/molecules/Loading.js index 97df451..268358f 100644 --- a/minter/src/components/molecules/Loading.js +++ b/minter/src/components/molecules/Loading.js @@ -32,7 +32,7 @@ const Spinner = styled.div` ` -export default ( { message, ...props } ) => +export default ( { message, ...props } ) => { message && { message } } diff --git a/minter/src/components/organisms/Outfits.js b/minter/src/components/organisms/Outfits.js index 16b180b..9c78fda 100644 --- a/minter/src/components/organisms/Outfits.js +++ b/minter/src/components/organisms/Outfits.js @@ -9,7 +9,7 @@ import Container from '../atoms/Container' import Section from '../atoms/Section' import { H1, H2, Text } from '../atoms/Text' import Button from '../atoms/Button' -import Avatar from '../atoms/Avatar' +import Avatar from '../molecules/Avatar' import Loading from '../molecules/Loading' @@ -61,8 +61,8 @@ export default function Verifier() { if( error ) throw new Error( error ) - alert( `Success! Outfit changed, please click "refresh metadata" on Opensea to update it there.\nForwarding you to the tools homepage.` ) - navigate( `/` ) + alert( `Success! Outfit changed, please click "refresh metadata" on Opensea to update it there.` ) + window?.location.reload() } catch( e ) { @@ -144,6 +144,10 @@ export default function Verifier() { selected.last_outfit_change = last_outfit_change selected.new_outfit_available = timeUntilAllowedToChange < 0 selected.when_new_outfit = new Date( Date.now() + timeUntilAllowedToChange ) + + const [ full, outfitnumber ] = selected.image.match( /(\d)(?:-\d\.jpg)/ ) || [] + log( `Current outfit of ${ full } is ${ outfitnumber }` ) + selected.current_outfit = outfitnumber || 0 } log( "Selecting rocketeer ", selected ) @@ -180,26 +184,40 @@ export default function Verifier() { // Changing room - if( rocketeer ) return + if( rocketeer ) return - -

{ rocketeer.name }

- - - { rocketeer.new_outfit_available ? : New outfit available on { rocketeer.when_new_outfit.toString() } } - + { /* Header */ } + +

{ rocketeer.name.split( ' ' )[0] }'s changing room

+

Current outfit: { rocketeer.current_outfit ? `#${rocketeer.current_outfit}` : 'Genesis' }

 + +
+

{ rocketeer.name }

+ + { rocketeer.new_outfit_available ? : New outfit available on { rocketeer.when_new_outfit.toString() } } +
-

{ rocketeer.name.split( ' ' )[0] }'s outfits

- This Rocketeer has { 1 + rocketeer.outfits } outfits. { rocketeer.outfits > 0 && 'Click any outfit to select it as primary.' } -
+ { /* Select outfits */ } +
- setPrimaryOutfit( 0 ) } src={ rocketeer.image.replace( /-\d\.jpg/, '.jpg' ) } alt={ `Rocketeer number ${ rocketeer.id }` } /> - - { Array.from( Array( rocketeer.outfits ) ).map( ( val, i ) => { - return setPrimaryOutfit( i + 1 ) } key={ rocketeer.id + i } src={ rocketeer.image.replace( /-\d\.jpg/, `-${ i + 1 }.jpg` ) } alt={ `Rocketeer number ${ rocketeer.id }` } /> - } ) } +

{ rocketeer.name.split( ' ' )[0] }'s outfits

+ This Rocketeer has { 1 + rocketeer.outfits } outfits. { rocketeer.outfits > 0 && 'Click any outfit to select it as primary.' } + + +
+ + + { Array.from( Array( rocketeer.outfits ) ).map( ( val, i, arr ) => { + const reverseNumber = arr.length - i + return setPrimaryOutfit( reverseNumber ) } key={ rocketeer.id + reverseNumber } src={ rocketeer.image.replace( /(-\d)?\.jpg/, `-${ reverseNumber }.jpg` ) } alt={ `Rocketeer number ${ rocketeer.id } outfit ${ reverseNumber }` } /> + } ) } + + { /* Genesis avatar */ } + setPrimaryOutfit( 0 ) } src={ rocketeer.image.replace( /(-\d)?\.jpg/, '.jpg' ) } alt={ `Rocketeer number ${ rocketeer.id }` } /> + +