         ] each-index
     ] each-index ;
 
-TUPLE: grid-gadget < gadget grid timer ;
+TUPLE: grid-gadget < gadget grid size timer ;
 
 : <grid-gadget> ( grid -- gadget )
     grid-gadget new
         swap >>grid
+        20 >>size
         dup '[ _ [ grid>> next-step ] [ relayout-1 ] bi ]
         f 1/5 seconds <timer> >>timer ;
 

    [ timer>> stop-timer ] [ call-next-method ] bi ;

M: grid-gadget pref-dim*
    grid>> grid-dim [ 20 * ] bi@ 2array ;

:: draw-cells ( gadget -- )
    COLOR: black gl-color
    gadget grid>> [| row j |
        row [| cell i |
            cell [
                i j [ 20 * ] bi@ 2array { 20 20 } gl-fill-rect
            ] when
        ] each-index
    ] each-index ;

:: draw-lines ( gadget -- )
    gadget pref-dim first2 :> ( w h )
    gadget grid>> grid-dim :> ( rows cols )
    COLOR: gray gl-color
    rows <iota> [| j |
        j 20 * :> y
        { 0 y } { w y } gl-line
        cols <iota> [| i |
            i 20 * :> x
            { x 0 } { x h } gl-line
        ] each
    ] each ;

M: grid-gadget draw-gadget*
    [ draw-cells ] [ draw-lines ] bi ;

:: on-click ( gadget -- )
    gadget hand-rel first2 [ 20 /i ] bi@ :> ( i j )
    i j [ 0 19 between? ] bi@ and [
        i j gadget grid>> nth [ not ] change-nth
    ] when gadget relayout-1 ;

:: on-drag ( gadget -- )
    gadget hand-rel first2 [ 20 /i ] bi@ :> ( i j )
    i j [ 0 19 between? ] bi@ and [
        t i j gadget grid>> nth set-nth
    ] when gadget relayout-1 ;

:: com-play ( gadget -- )
    gadget timer>> thread>> [


grid-gadget "gestures" [
    {
        { T{ key-down f { A+ } "F" } [ toggle-fullscreen ] }
        { T{ button-down { # 1 } } [ on-click ] }
        { T{ drag { # 1 } } [ on-drag ] }
        { mouse-scroll [ on-scroll ] }
    } assoc-union
] change-word-prop

