Style with massung/elm-css, instead of inline styles.

.gitignore

@@ -1,2 +1,2 @@
 elm-stuff
-documentation.json
+documentation.json

README.md

@@ -4,13 +4,13 @@ There is no game play yet. I'm working on the board generation code, so the disp
 
 Code is in the ```src``` directory, scripts in the ```bin``` directory.
 
-If you run ```elm-reactor``` in this directory, you can navigate to ```src/kakuro.elm``` for development.
+If you run ```elm-reactor``` in this directory, you can navigate to [```src/kakuro.elm```](src/kakuro.elm) for development.
 
 ```bin/build-site``` compiles the application to ```site/index.html```.
 
 ```bin/update-site``` builds the application and syncs the ```site``` directory with the live site.
 
-"```bin/m file```" compiles ```src/file.elm```, leaving the output in ```/tmp/nop.js```. Useful for syntax checking while editing.
+"```bin/m file```" compiles ```src/file.elm```, directing output to ```/dev/null```. Useful for syntax checking while editing.
 
 ```bin/docs``` generates ```documentation.json```, suitable for upload to [package.elm-lang.org/help/docs-preview](http://package.elm-lang.org/help/docs-preview).
 

bin/m

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-elm-make src/$1.elm --output /tmp/nop.js
+elm-make src/$1.elm --output /dev/null

elm-package.json

@@ -7,10 +7,12 @@
       ".",
       "src"
     ],
-    "exposed-modules": ["Board", "Generate"],
+    "exposed-modules": ["Board",
+                        "Generate"],
     "dependencies": {
         "elm-lang/core": "4.0.5 <= v < 5.0.0",
-        "elm-lang/html": "1.1.0 <= v < 2.0.0"
+        "elm-lang/html": "1.1.0 <= v < 2.0.0",
+        "massung/elm-css": "1.1.0 <= v < 2.0.0"
     },
     "elm-version": "0.17.1 <= v < 0.18.0"
 }

src/Board.elm

@@ -32,6 +32,10 @@ type alias Board =
   , array: Array (Array Int)
   }
 
+makeRow : Int -> (Array Int)
+makeRow cols =
+  Array.repeat cols 0
+
 {-| Create a new Board of the given size.
 
     make rows cols
@@ -41,7 +45,7 @@ make rows cols =
   Board
     rows
     cols
-    (Array.repeat rows (Array.repeat cols 0))
+    (Array.repeat rows (makeRow cols))
 
 check : Board -> Int -> Int -> Bool
 check board row col =
@@ -78,13 +82,12 @@ set row col val board =
                                board.array
                  }
 
-{-| Return the Array for the given row, or Nothing, if out of range.
+{-| Return the Array for the given row, or an all-zero array, if out of range.
 
     getRow row board
 -}
-getRow : Int -> Board -> Maybe (Array Int)
+getRow : Int -> Board -> (Array Int)
 getRow row board =
-  if row<0 || row>=board.rows then
-    Nothing
-  else
-    Array.get row board.array
+  case Array.get row board.array of
+      Nothing -> makeRow board.cols
+      Just row -> row

src/KakuroStylesheet.elm

@@ -0,0 +1,80 @@
+----------------------------------------------------------------------
+--
+-- KakuroStylesheet.elm
+-- The CSS Stylesheet for the Kakuro page
+-- Copyright (c) 2016 Bill St. Clair <billstclair@gmail.com>
+-- Some rights reserved.
+-- Distributed under the MIT License
+-- See LICENSE.txt
+--
+----------------------------------------------------------------------
+
+module KakuroStylesheet exposing
+  ( style, stylesheet, KClass(..), KId(..), id, class
+  )
+
+import Css exposing (Sel(..))
+import Html.Attributes
+
+type KClass = BoardCellClass
+            | BoardLabelClass
+            | ControlsClass
+
+type KId = BoardId
+         | TopInputId
+         | FooterId
+
+imports : List String
+imports = []
+
+rule: a -> b -> { selectors : a, descriptor : b }
+rule selectors descriptor =
+  { selectors = selectors
+  , descriptor = descriptor
+  }
+
+rules =
+  [ rule
+      [ Id BoardId ]
+      [ ("font-family", "\"Lucida Console\", Monaco, monospace")
+      , ("font-size", "18pt")
+      , ("padding", "2px")
+      , ("border", "1px solid black")
+      ]
+  , rule
+      [ Id TopInputId ]
+      [ ("margin-top", "5em")
+      , ("margin-bottom", "0.5em")
+      ]
+  , rule
+      [ Id FooterId ]
+      [ ("margin-top", "2em")
+      ]
+  , rule
+      [ Class ControlsClass ]
+      [ ("font-size", "14pt")
+      ]
+  , rule
+      [ Class BoardCellClass ]
+      [ ("padding", "4px")
+      , ("textAlign", "center")
+      , ("border", "1px solid black")
+      ]
+  , rule
+      [ Class BoardLabelClass ]
+      [ ("padding", "4px")
+      , ("font-size", "50%")
+      , ("text-align", "center")
+      , ("border", "1px solid black")
+      ]
+  ]
+
+stylesheet = Css.stylesheet imports rules
+
+-- This is for inclusion at the beginning of the outermost div
+style = Css.style [ Html.Attributes.scoped True ] stylesheet
+
+-- For use in the attributes of Html elements
+-- E.g. id Board
+id = stylesheet.id
+class = stylesheet.class

src/kakuro.elm

@@ -9,6 +9,7 @@
 --
 ----------------------------------------------------------------------
 
+import KakuroStylesheet exposing (id, class, KId(..), KClass(..))
 import Board exposing(Board)
 import Generate
 
@@ -89,18 +90,13 @@ update msg model =
 showDebugNumbers : Bool
 showDebugNumbers = True
 
-tdStyle : List (Attribute Msg)
-tdStyle = [ style [ ("padding", "4px")
-                  , ("textAlign", "center")
-                  , ("border", "1px solid black") ] ]
-
 nbsp : String
 nbsp = String.cons (Char.fromCode 160) "" -- \u00A0
 
 renderElement : Int -> Html Msg
 renderElement val =
   td
-    tdStyle
+    [ class BoardCellClass ]
     [ text (if val == 0 then nbsp else (toString val)) ]
 
 renderRow : Int -> Array Int -> Html Msg
@@ -113,15 +109,9 @@ renderRow rowNum row =
   in
       tr [] elts                         
 
-dnStyle : List (Attribute Msg)
-dnStyle = [ style [ ("padding", "4px")
-                  , ("font-size", "50%")
-                  , ("textAlign", "center")
-                  , ("border", "1px solid black") ] ]
-
 debugNumbersElement : String -> Html Msg
 debugNumbersElement label =
-  td dnStyle [ text label ]
+  td [ class BoardLabelClass ] [ text label ]
 
 debugNumbersIntElement : Int -> Html Msg
 debugNumbersIntElement num =
@@ -143,12 +133,7 @@ renderBoard board =
                rs
   in
       table
-        [ style [ ("font-family", "\"Lucida Console\", Monaco, monospace")
-                , ("font-size", "18pt")
-                , ("padding", "2px")
-                , ("border", "1px solid black")
-                ]
-        ]
+        [ id BoardId]
         rows
 
 sqrimg : String -> String -> Int -> Html Msg
@@ -163,19 +148,20 @@ sqrimg url name size =
 view : Model -> Html Msg
 view model =
   div [ align "center" --deprecated, so sue me
-      , style [ ("margin-top", "5em") ] ]
-    [ div [ style [ ("margin-bottom", "0.5em") ] ]
+      ]
+    [ KakuroStylesheet.style
+    , div [ id TopInputId ]
         [input [ value (toString model.maxrun)
                , size 1
                , onInput SetMaxrun
-               , style [ ("font-size", "14pt") ] ] []
+               , class ControlsClass ] []
         , text " "
         , button [ onClick Generate
-                 , style [ ("font-size", "14pt") ] ]
+                 , class ControlsClass ]
            [ text "Generate" ]
         ]
     , div [] [ renderBoard model.board
-             , div [ style [ ("margin-top", "2em") ] ]
+             , div [ id FooterId ]
                [ a [ href "https://github.com/billstclair/kakuro-master" ]
                    [ sqrimg "images/GitHub-Mark-32px.png" "GitHub" 32 ]
                , text " "