Svg version of Board/View.elm

View.elm

import Svg exposing (Svg, svg, rect, circle)
import Svg.Attributes exposing (x, cx, y, cy, r, fill, width, height, viewBox)

boardDisplay : Board -> Html BoardMsg
boardDisplay board =
    svg
        [ viewBox "0 0 100 100"
        ]
        (rect [ fill "#FFFFFF", x "0", y "0", width "100", height "100" ] []
            :: List.concat (List.indexedMap rowView board)
        )

rowView : Int -> List Cell -> List (Svg BoardMsg)
rowView idx row =
    List.concat (List.indexedMap (cellView idx) row)


cellView : Int -> Int -> Cell -> List (Svg BoardMsg)
cellView rowIdx colIdx cell =
    rect [ x (toString (colIdx * 10)), y (toString (rowIdx * 10)), width "10", height "10", fill "#FFFFFF" ] []
        :: (case cell of
                Empty ->
                    []

                Dead ->
                    [ circle [ cx (toString (colIdx * 10 + 5)), cy (toString (rowIdx * 10 + 5)), r "5", fill "rgb(0, 121, 107)" ] [] ]

                Alive ->
                    [ circle [ cx (toString (colIdx * 10 + 5)), cy (toString (rowIdx * 10 + 5)), r "5", fill "rgb(0, 150, 136)" ] [] ]
           )