Ċ Ċ import Ġkotlinx . browser . document Ċ import Ġlib . M Ċ import Ġmodels . Video Ċ import Ġmodels . poke . Pokemon Ċ import Ġreact .* Ċ import Ġreact . dom .* Ċ Ċ @ Js Name ("$ ") Ċ @ Js Non Module Ċ @ Js Module (" jquery ") Ċ external Ġfun Ġjq ( id : ĠString ): Ġdynamic Ċ Ċ //@ Js Module (" libr air y . material ize - css ") Ċ //@ Js Non Module Ċ // external Ġval Ġlibr air y . material ize : Ġdynamic ĊĊĊĊĊ Ċ @ Js Export Ċ class ĠPokemon List : ĠR Component < Pokemon List Props , ĠR State >() Ġ{ ĊĠĠĠ Ġoverride Ġfun ĠcomponentDidMount () Ġ{ ĊĠĠĠĠĠĠĠ Ġprintln (" mont Ã© : Ġ" Ġ) ĊĊĠĠĠĠĠĠĠ Ġdocument . addEventListener (" load ", { ĊĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġelems Ġ= Ġdocument . querySelectorAll (". material boxed ") ĊĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġinstances Ġ= ĠM . Material box . init ( elems ){ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinstances . open () Ċ // ĠĠĠĠĠĠĠĠĠ Ġval Ġinstance Ġ= ĠM . Material box . getInstance ( elems ) ĊĊĊĠĠĠĠĠĠĠ Ġ}) Ċ Ċ // Ċ // ĠĠĠĠĠĠĠ Ġval Ġelems Ġ= Ġdocument . querySelectorAll (". material boxed ") Ċ // ĠĠĠĠĠĠĠ Ġval Ġinstances Ġ= ĠM . Material box . init ( elems ) Ġ{} ĊĊĊĊĊ ĊĊĠĠĠ Ġ} ĊĊĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġprintln (" rendered " Ġ) ĊĊĠĠĠĠĠĠĠ Ġfor Ġ( pokemon Ġin Ġprops . pokemon ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" col Ġs 3 ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" card "){ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" card - image "){ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġimg ( src Ġ= Ġ"${ pokemon . sprites . other . dream _ world . front _ default }", Ġclasses Ġ= Ġ" material boxed "){ ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight =" 1 8 0 " Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Function Ġ= Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprintln (" button Ġclicked : Ġ 8 " Ġ) Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" card - content "){ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan ( classes Ġ= Ġ" card - title Ġblue - text "){ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" ${ pokemon . name }" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġp { ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Ġlittle Ġmarkup Ġto Ġuse Ġeffectively ." ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĊĊĊĠĠĠ Ġ} ĊĊĊĊĊ Ċ } Ċ Ċ external Ġinterface ĠPokemon List Props : ĠR Props Ġ{ ĊĠĠĠ Ġvar Ġpokemon : ĠList < Pokemon > ĊĠĠĠ Ġvar Ġselected Pokemon : ĠPokemon ? ĊĠĠĠ Ġvar Ġon selected Pokemon : Ġ( Pokemon ) Ġ-> ĠUnit Ċ } Ċ external Ġinterface ĠPokemon List State : ĠR State Ġ{ ĊĠĠĠ Ġvar Ġselected Video : ĠVideo ? Ċ } Ċ Ċ fun ĠR Builder . pokemon List ( handler : ĠPokemon List Props . () Ġ-> ĠUnit ): ĠReact Element Ġ{ ĊĠĠĠ Ġreturn Ġchild ( Pokemon List :: class ) Ġ{ ĊĠĠĠĠĠĠĠ Ġthis . attrs ( handler ) ĊĠĠĠ Ġ} Ċ }