package Ġsamples . grid Ċ Ċ import Ġan td . grid .* Ċ import Ġan td . grid . col Ċ import Ġan td . slider .* Ċ import Ġkotlin ext . js .* Ċ import Ġreact .* Ċ import Ġreact . dom .* Ċ import Ġstyled .* Ċ Ċ interface ĠPlay ground AppState Ġ: ĠR State Ġ{ ĊĠĠĠ Ġvar Ġg utter Key : ĠNumber ĊĠĠĠ Ġvar Ġcol Count Key : ĠNumber Ċ } Ċ Ċ class ĠPlay ground App Ġ: ĠR Component < R Props , ĠPlay ground AppState >() Ġ{ ĊĠĠĠ Ġprivate Ġval Ġg utter s : Ġdynamic Ġ= Ġobject Ġ{} ĊĠĠĠ Ġprivate Ġval Ġcol Counts : Ġdynamic Ġ= Ġobject Ġ{} ĊĊĠĠĠ Ġinit Ġ{ ĊĠĠĠĠĠĠĠ ĠarrayOf ( 8 , Ġ 1 6 , Ġ 2 4 , Ġ 3 2 , Ġ 4 0 , Ġ 4 8 ). forEach Indexed Ġ{ Ġindex , Ġvalue Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġg utter s [ index ] Ġ= Ġvalue ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ ĠarrayOf ( 2 , Ġ 3 , Ġ 4 , Ġ 6 , Ġ 8 , Ġ 1 2 ). forEach Indexed Ġ{ Ġindex , Ġvalue Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcol Counts [ index ] Ġ= Ġvalue ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġval Ġhandle G utter Change Ġ= Ġfun ( value : ĠNumber ) Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġg utter Key Ġ= Ġvalue ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġval Ġhandle Col Count Change Ġ= Ġfun ( value : ĠNumber ) Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcol Count Key Ġ= Ġvalue ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠPlay ground AppState . init () Ġ{ ĊĠĠĠĠĠĠĠ Ġg utter Key Ġ= Ġ 1 ĊĠĠĠĠĠĠĠ Ġcol Count Key Ġ= Ġ 2 ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġcol Count Ġ= Ġcol Counts [ state . col Count Key . toInt ()]. unsafe Cast < Number >(). toInt () ĊĠĠĠĠĠĠĠ Ġval Ġcols Ġ= Ġmutable ListOf < React Element >() ĊĠĠĠĠĠĠĠ Ġvar Ġcol Code Ġ= Ġ"" ĊĊĠĠĠĠĠĠĠ Ġfor Ġ( i Ġin Ġ 1 .. col Count ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġcol Ġ= Ġbuild Element Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcol Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġi . toString () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan Ġ= Ġ 2 4 Ġ/ Ġcol Count ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ Ġ+" Column " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcols . add ( col ) ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġcol Code Ġ+= Ġ" Ġ Ġ< Col Ġspan ={ ${ 2 4 Ġ/ Ġcol Count }} Ġ/>\ n " ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . js Style Ġ= Ġjs Ġ{ ĠmarginBottom Ġ= Ġ 1 6 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . js Style Ġ= Ġjs Ġ{ ĠmarginRight Ġ= Ġ 6 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" G utter Ġ( px ): Ġ" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . js Style Ġ= Ġjs Ġ{ Ġwidth Ġ= Ġ" 5 0 %" Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġslider Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmin Ġ= Ġ 0 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmax Ġ= Ġjs (" Object "). keys ( gutter s ). length . unsafe Cast < Number >(). toInt () Ġ- Ġ 1 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġstate . gutter Key ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġhandle G utter Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmarks Ġ= Ġg utter s . unsafe Cast < Slider Marks >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstep Ġ= Ġnull ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . js Style Ġ= Ġjs Ġ{ ĠmarginRight Ġ= Ġ 6 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Column ĠCount : Ġ" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . js Style Ġ= Ġjs Ġ{ Ġwidth Ġ= Ġ" 5 0 %" Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġslider Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmin Ġ= Ġ 0 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmax Ġ= Ġjs (" Object "). keys ( col Counts ). length . unsafe Cast < Number >(). toInt () Ġ- Ġ 1 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġstate . col Count Key ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġhandle Col Count Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmarks Ġ= Ġcol Counts . unsafe Cast < Slider Marks >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstep Ġ= Ġnull ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġrow Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . gutter Ġ= Ġg utter s [ state . gutter Key . toInt ()]. unsafe Cast < Any >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchild List . add ( cols . to Typed Array ()) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġpre Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrow Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . gutter Ġ= Ġg utter s [ state . gutter Key . toInt ()]. unsafe Cast < Any >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ "< Row Ġg utter ={ ${ gutter s [ state . gutter Key ]}} >\ n " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ col Code ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ "</ Row >" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠR Builder . playground App () Ġ= Ġchild ( Play ground App :: class ) Ġ{} Ċ Ċ fun ĠR Builder . playground () Ġ{ ĊĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠ Ġcss Ġ{ Ġ+ Grid Styles . playground Ġ} ĊĠĠĠĠĠĠĠ Ġplay ground App () ĊĠĠĠ Ġ} Ċ } Ċ