Code restructure, started work for resizes.

Counter.elm

@@ -16,16 +16,18 @@ type alias Model =
     , color : Color
     , period : Time.Time
     , start : Time.Time
+    , fontSize : String
     }
 
 
-init : Float -> Time.Time -> Model
-init period startTime =
-    { num = 0
+init : String -> Float -> Time.Time -> Model
+init fontSize period startTime =
+    { num = -1
     , limit = 9
-    , color = red
-    , period = Debug.log "p" <| period
-    , start = Debug.log "s" <| Time.inMilliseconds startTime
+    , color = Color.blue
+    , period = period
+    , fontSize = fontSize
+    , start = Time.inMilliseconds startTime
     }
 
 -- UPDATE
@@ -68,5 +70,5 @@ countStyle model =
     [ ("font-family", "monospace")
     , ("color", rgb model.color)
     , ("text-align", "center")
-    , ("font-size", "4em")
+    , ("font-size", model.fontSize)
     ]

CounterGrid.elm

@@ -7,65 +7,97 @@ import Time
 import Counter
 import List
 import Debug
+import Random
+import Window
+
 
 -- MODEL
 
+globals = {
+    tdSize = "20px"
+    , textSize = "1.5em"
+    , border = "0px solid gray"
+    , w = 40
+    , h = 24
+    }
+
 type alias Model =
-    { counters : List Counter.Model
+    { counters : Maybe (List Counter.Model)
     , cols : Int
+    , rows : Int
     }
 
-init : List Float -> Time.Time -> (Model, Cmd Msg)
-init periods start =
-    let
-        m = { counters = List.map (\p -> Counter.init p start) periods
-            , cols = 4
-            }
-    in
-        (m, Cmd.none)
+init : (Model, Cmd Msg)
+init =
+    ({ counters = Nothing
+     , cols = globals.w
+     , rows = globals.h
+     }, Random.generate Rnds (periodGen (globals.w*globals.h)))
+
+periodGen : Int -> Random.Generator (List Float)
+periodGen n = Random.list n (Random.float 300 30000)
 
 -- UPDATE
 
-type Msg = Tick Time.Time | CounterMsg Counter.Msg
+type Msg =
+    Tick Time.Time
+    | CounterMsg Counter.Msg
+    | Rnds (List Float)
+    | Resize Int Int
 
 update : Msg -> Model -> (Model, Cmd Msg)
 update msg model =
     case msg of
         Tick time ->
+            case model.counters of
+                Just cs ->
+                    ({ model
+                    | counters = Just <| List.map (Counter.update <| Counter.tickMsg time) cs
+                    }, Cmd.none)
+                Nothing -> (model, Cmd.none)
+        CounterMsg counterMsg ->
+            (model, Cmd.none)
+        Rnds periods ->
             ({ model
-            | counters = List.map (Counter.update <| Counter.tickMsg time) model.counters
+             | counters = Just <| List.map (\p -> Counter.init globals.textSize p 0) periods
             }, Cmd.none)
-        CounterMsg counterMsg ->
+        Resize y x ->
             (model, Cmd.none)
 
 
+
+
+
 -- VIEW
 
 viewTable : Model -> Html Msg
 viewTable model =
-    let
-        w = model.cols
-        h = ((List.length model.counters) // model.cols) + 1
-        n = List.length model.counters
-        row r = tr [] <| List.map (counterAt r) <| List.range 0 (w-1)
-        counterAt r i = td [tdStyle] <|
-            case get model.counters (r*w + i) of
-                Nothing -> []
-                Just cell -> [Html.map CounterMsg <| Counter.view cell]
-    in
-        div []
-            [ table [tableStyle]
-                <| List.map row <| List.range 0 (h-1)
-            ]
+    case model.counters of
+    Nothing -> div [] []
+    Just cs ->
+        let
+            w = model.cols
+            h = ((List.length cs) // model.cols) + 1
+            n = List.length cs
+            row r = tr [] <| List.map (counterAt r) <| List.range 0 (w-1)
+            counterAt r i = td [tdStyle] <|
+                case get cs (r*w + i) of
+                    Nothing -> []
+                    Just cell -> [Html.map CounterMsg <| Counter.view cell]
+        in
+            div []
+                [ table [tableStyle]
+                    <| List.map row <| List.range 0 (h-1)
+                ]
 
 tdStyle = style
-    [ ("width", "100px")
-    , ("height", "100px")
+    [ ("width", globals.tdSize)
+    , ("height", globals.tdSize)
     ]
 
 tableStyle = style
     [ ("background", "black")
-    , ("border", "1px solid darkgray")
+    , ("border", globals.border)
     , ("margin", "0 auto")
     ]
 
@@ -91,4 +123,5 @@ get list i = List.drop i list |> List.head
 subscriptions : Model -> Sub Msg
 subscriptions model = Sub.batch
     [ Time.every Time.millisecond Tick
+    , Window.resizes (\{height, width} -> Resize height width)
     ]

Main.elm

@@ -3,13 +3,9 @@ module Main exposing (..)
 import Html exposing (Html, program)
 import CounterGrid as CounterGrid exposing (init, update, view, Model, Msg, subscriptions)
 
-n = 18
-
 main : Program Never Model Msg
 main = program
-    { init = init (List.take n rnds) 0
+    { init = init
     , view = view
     , update = update
     , subscriptions = subscriptions}
-
-rnds = [6506, 651, 1125, 2228, 4854, 2221, 524, 3690, 2165, 6649, 7216, 5865, 113, 1179, 5156, 677, 4623, 772, 7658, 4631, 3548, 5222, 5692, 1582, 2067, 1474, 1184, 2622, 2397, 4178, 7143, 1058, 6251, 615, 3007, 1639, 2316, 7520, 2164, 4463, 1109, 5505, 5145, 3565, 5336, 6137, 4383, 1659, 6994, 5385, 3350, 4380, 4661, 2381, 4654, 5978, 5894, 4450, 367, 1093, 5619, 7516, 3326, 7425, 1741, 1731, 3072, 5422, 7793, 7139, 5643, 2660, 3151, 5240, 2578, 4478, 2256, 3403, 7856, 2287, 4523, 7586, 7627, 818, 4197, 4401, 4465, 6540, 2863, 7545, 5673, 2099, 5407, 6367, 1863, 827, 3375, 226, 1014, 5438]

elm-package.json

@@ -9,7 +9,8 @@
     "exposed-modules": [],
     "dependencies": {
         "elm-lang/core": "5.0.0 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
+        "elm-lang/html": "2.0.0 <= v < 3.0.0",
+        "elm-lang/window": "1.0.1 <= v < 2.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }