diff --git a/viewer/src/App.css b/viewer/src/App.css index 303c261..92b56fa 100644 --- a/viewer/src/App.css +++ b/viewer/src/App.css @@ -73,6 +73,22 @@ a img { 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 { padding: .2rem .5rem; } diff --git a/viewer/src/App.js b/viewer/src/App.js index 90ae4ae..26a6fbe 100644 --- a/viewer/src/App.js +++ b/viewer/src/App.js @@ -15,6 +15,7 @@ function App() { const [ rocketeer, setRocketeer ] = useState() const [ loading, setLoading ] = useState( false ) const [ error, setError ] = useState( false ) + const [ manualSelect, setManualSelect ] = useState( ) // /////////////////////////////// // Lifesycle management @@ -30,7 +31,7 @@ function App() { log( 'Id found: ', id ) // 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 return setRocketeerId( id ) @@ -68,7 +69,10 @@ function App() { // /////////////////////////////// // Rendering // /////////////////////////////// - + if( manualSelect ) return + setRocketeerId( target.value ) } /> + View Rocketeer + if( error ) return { error } @@ -81,6 +85,10 @@ function App() {

{ rocketeer.name }

{ rocketeer.description || "This is a generic Rocketeer without a description. That should only happen during testing. Contact us on Discord if you see this." }

+ +
Download Jpeg