stronk/RandomChad
1
0
Fork 0
mirror of https://github.com/stronk-dev/RandomChad.git synced 2025-07-06 02:45:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show traits on viewetr

Browse Source
This commit is contained in:
Mentor Palokaj 2021-11-08 16:54:54 +01:00
parent 5b808ec65a
commit 84503950d1
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
viewer/src/App.css
View File

@ -73,6 +73,22 @@ a img {
text-align: center; text-align: center;
} }
input[type=number] {
text-align: center;
padding: .5rem 1rem;
}
#traits {
padding: 0;
width: 100%;
}
#traits li {
display: flex;
justify-content: space-between;
text-transform: capitalize;
padding: .2rem 0;
}
h1, p, label { h1, p, label {
padding: .2rem .5rem; padding: .2rem .5rem;
} }

12
viewer/src/App.js
View File

@ -15,6 +15,7 @@ function App() {
const [ rocketeer, setRocketeer ] = useState() const [ rocketeer, setRocketeer ] = useState()
const [ loading, setLoading ] = useState( false ) const [ loading, setLoading ] = useState( false )
const [ error, setError ] = useState( false ) const [ error, setError ] = useState( false )
const [ manualSelect, setManualSelect ] = useState( )
// /////////////////////////////// // ///////////////////////////////
// Lifesycle management // Lifesycle management
@ -30,7 +31,7 @@ function App() {
log( 'Id found: ', id ) log( 'Id found: ', id )
// Check if id is a number // Check if id is a number
if( isNaN( id ) ) return setError( 'No rocketeer selected' ) if( isNaN( id ) ) return setManualSelect( true )
// If all is good, set the ID to state // If all is good, set the ID to state
return setRocketeerId( id ) return setRocketeerId( id )
@ -68,7 +69,10 @@ function App() {
// /////////////////////////////// // ///////////////////////////////
// Rendering // Rendering
// /////////////////////////////// // ///////////////////////////////
if( manualSelect ) return <Container>
<input type='number' placeholder='Input Rocketeer ID' onChange={ ( { target } ) => setRocketeerId( target.value ) } />
<a href={ `/?rocketeer=${ rocketeerId }` } className="button">View Rocketeer</a>
</Container>
if( error ) return <Container> if( error ) return <Container>
{ error } { error }
</Container> </Container>
@ -81,6 +85,10 @@ function App() {
<h1>{ rocketeer.name }</h1> <h1>{ rocketeer.name }</h1>
<p>{ rocketeer.description || "This is a generic Rocketeer without a description. That should only happen during testing. Contact us on Discord if you see this." }</p> <p>{ rocketeer.description || "This is a generic Rocketeer without a description. That should only happen during testing. Contact us on Discord if you see this." }</p>
<ul id="traits">
{ rocketeer.attributes.map( ( { trait_type, value } ) => <li key={ trait_type }><span>{ trait_type }</span><span>{ value }</span></li> ) }
</ul>
<div> <div>
<a href={ rocketeer.image } className="button">Download Jpeg</a> <a href={ rocketeer.image } className="button">Download Jpeg</a>