import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import Header from './_patterns/atoms/header/Component' ; import Configuration from './_patterns/pages/configuration/Component' ; import Home from './_patterns/pages/home/Component' ; import { IConfiguration , Strategies } from './common/types' ; import './styles/vibes.css' ; import Simulation from './_patterns/pages/simulation/Component' ; interface IVibesState { strategy : Strategies | null ; configuration : IConfiguration ; page : Pages ; show : boolean ; } enum Pages { HOME , CONFIGURATION , SIMULATION } class Vibes extends React . Component < { } , IVibesState > { constructor ( props ) { super ( props ) ; this . state = { strategy : Strategies . GENERIC_SIMULATION , page : Pages . HOME , show : false , configuration : { blockTime : 600 , numberOfNeighbours : 4 , numberOfNodes : 10 , simulateUntil : Date . now ( ) + 3 * 3600000 , transactionSize : 250000 , throughput : 10 , latency : 900 , neighboursDiscoveryInterval : 3000 , maxBlockSize : 1000 , maxBlockWeight : 0 , networkBandwidth : 1 , strategy : Strategies . GENERIC_SIMULATION . toString ( ) , transactionPropagationDelay : 150 , hashRate : 0 , confirmations : 0 , transactionFee : 0 , transactionWeight : 0 , } , } ; this . handleStrategyChange = this . handleStrategyChange . bind ( this ) ; this . handleConfigurationNextClick = this . handleConfigurationNextClick . bind ( this ) ; this . handleConfigurationBackClick = this . handleConfigurationBackClick . bind ( this ) ; this . handleConfigurationChange = this . handleConfigurationChange . bind ( this ) ; this . handleHomeNextClick = this . handleHomeNextClick . bind ( this ) ; } public componentDidMount ( ) { setTimeout ( ( ) => { this . setState ( { show : true } ) ; } , 300 ) ; } public render ( ) { const { page , show , configuration , strategy , } = this . state ; return ( < div > { show && ( < div className = "vibes" > < div className = "vibes__header" > < Header /> < /div> < div className = "vibes__content" > { page === Pages . HOME && ( < Home onStrategyChange = { this . handleStrategyChange } onHomeNextClick = { this . handleHomeNextClick } strategy = { strategy } / > ) } { page === Pages . CONFIGURATION && ( < Configuration onConfigurationNextClick = { this . handleConfigurationNextClick } onConfigurationBackClick = { this . handleConfigurationBackClick } onConfigurationChange = { this . handleConfigurationChange } configuration = { configuration } / > ) } { page === Pages . SIMULATION && ( < Simulation { ... this . state . configuration } onNewSimulation = { ( ) => this . setState ( { page : Pages . HOME } ) } />)} < /div> < /div>)} < /div>); } private handleStrategyChange ( strategy ) { if ( strategy === Strategies . BITCOIN_LIKE_BLOCKCHAIN ) { const configuration = { strategy : strategy . toString ( ) , simulateUntil : Date . now ( ) + 6 * 3600000 , blockTime : 600 , numberOfNeighbours : 4 , numberOfNodes : 20 , neighboursDiscoveryInterval : 3000 , latency : 900 , transactionSize : 1000 , maxBlockSize : 50000 , throughput : 50 , transactionWeight : 2000 , maxBlockWeight : 200000 , networkBandwidth : 1 , transactionPropagationDelay : 150 , hashRate : 30 , confirmations : 4 , transactionFee : 0 , } ; this . setState ( { configuration } ) ; this . setState ( { strategy } ) ; } else if ( strategy === Strategies . GENERIC_SIMULATION ) { const configuration = { blockTime : 600 , numberOfNeighbours : 4 , numberOfNodes : 10 , simulateUntil : Date . now ( ) + 3 * 3600000 , transactionSize : 250000 , throughput : 10 , latency : 900 , neighboursDiscoveryInterval : 3000 , maxBlockSize : 0 , maxBlockWeight : 0 , networkBandwidth : 1 , strategy : strategy . toString ( ) , transactionPropagationDelay : 150 , hashRate : 0 , confirmations : 0 , transactionFee : 0 , transactionWeight : 0 , } ; this . setState ( { configuration } ) ; this . setState ( { strategy } ) ; } } private handleHomeNextClick ( ) { this . setState ( { page : Pages . CONFIGURATION } ) ; } private handleConfigurationChange ( configuration ) { this . setState ( { configuration } ) ; } private handleConfigurationNextClick ( ) { this . setState ( { page : Pages . SIMULATION } ) ; } private handleConfigurationBackClick ( ) { this . setState ( { page : Pages . HOME } ) ; } } ReactDOM . render ( < Vibes />, document.getElementById('app'));