Zombie Elm - Part 2 - Render with style

I’ll try to tag the code to match these posts. The goal for this spike

• Render the game

Rendering the game

Magnar’s quiescent code is quite similar to what we need to do.

Handling a single tile

• Define a function Tile -> Html for rendering a single tile. This is already in place in Zombie.elm. It looks like this

type alias Tile =
  { name : String
  , revealed : Bool
  }

tileHtml : Tile -> Html
tileHtml tile =
  let
    backClassname = "back " ++ tile.name

    revealed = if tile.revealed then " revealed" else ""

    tileClass = "tile" ++ revealed
  in
  div
    [ class "cell" ]
    [
      div [ class tileClass ]
      [
        div [ class "front" ] [],
        div [ class backClassname ] []
      ]
    ]

Calling this with the current index.html just gives me a blank page. I haven’t setup any styles yet. Thanks to Parensofthedead I’ve got one ready. Now calling this

tileHtml newTile "h1"

gives me:

Handling multiple tiles

• Define a function List Tile -> Html for rendering a row of tiles.

rowOfTiles : List Tile -> Html
rowOfTiles listOfTiles = div [ class "line" ]
                             (List.map tileHtml tileList)

Now I can call this with a list of tiles, say

rowOfTiles [newTile "h1", newTile "h2", newTile "h1", newTile "h2"]

and I will get something like this:

Handling multiple rows of tiles

• We also need a function which can handle multiple rows, its type signature will then be List List Tile -> Html. Just as with rowOftiles this also becomes a one-liner.

boardHtml : List (List Tile) -> Html
boardHtml rowsOfTiles = div [ class "board clearfix" ]
                         (List.map lineHtml tileList)

Now we’re getting somewhere. Let’s see if it works.

boardHtml [[newTile "h1", newTile "h1", newTile "h2", newTile "h2"],
          [newTile "h3", newTile "h3", newTile "h4", newTile "h4"]]

gives me

Finally getting somewhere. Next spike will be getting our test structure setup. Types help, but I still want to confirm without looking that I haven’t broken anything.

• Render the game

Bonus - Actually showing tiles.

So, none of the tiles in the example images had any image on them, so are we sure we got the right tiles. Instead of messing with the newTile function which I will keep using, I made a revealedTile function as well, it’s simply the newTile function but with the revealed flag flipped to True

revealedTile : String -> Tile
revealedTile name = Tile True name

Updating the view function to

boardHtml [[revealedTile "h1", revealedTile "h1", revealedTile "h2", revealedTile "h2"],
          [revealedTile "h3", revealedTile "h3", revealedTile "h4", revealedTile "h4"]]

gives: