Add button to create new tiles

src/Main.elm

@@ -8,7 +8,7 @@ import Browser
 import Browser.Dom exposing (getViewport, Viewport)
 import Browser.Navigation exposing (Key)
 import Browser.Events exposing (onResize)
-import Html exposing (div, h3, input, Html, section, text)
+import Html exposing (button, div, h3, input, Html, section, text)
 import Html.Attributes exposing (class, style, value)
 import Html.Events exposing (onClick, onInput)
 import Json.Decode as D
@@ -34,6 +34,7 @@ type Msg
   | Click Int Int Int Int
   | WindowSize Int Int
   | SetTileText Int Int String
+  | AddTile Int
 
 type alias Model =
   { windowW: Int
@@ -51,6 +52,8 @@ type alias Tile =
   , stickers: List Sticker
   }
 
+blankTile = { text = "", stickers = [] }
+
 viewportToWindowSize : Viewport -> Msg
 viewportToWindowSize { viewport } =
   WindowSize (round viewport.width) (round viewport.height)
@@ -104,6 +107,7 @@ viewColumn columnIndex {name, tiles} =
          []
          [text name]
       ) :: (Array.indexedMap (viewTile columnIndex) tiles |> Array.toList)
+        ++ [ viewAddTile columnIndex ]
     )
 
 viewTile : Int -> Int -> Tile -> Html Msg
@@ -130,16 +134,23 @@ viewTile columnIndex tileIndex tile =
       (map viewSticker tile.stickers)
     ]
 
--- viewAddTile : Int -> Html Msg
--- viewAddTile columnIndex =
---   div
---     [ class "add-tile"
---     , onClick
+viewAddTile : Int -> Html Msg
+viewAddTile columnIndex =
+  button
+    [ class "add-tile"
+    , class "tile"
+    , onClick (AddTile columnIndex)
+    ]
+    [ text "+" ]
 
 addStickerToTile : Sticker -> Tile -> Tile
 addStickerToTile sticker tile =
   { tile | stickers = sticker :: tile.stickers }
 
+addTileToColumn : Column -> Column
+addTileToColumn column =
+  { column | tiles = Array.push blankTile column.tiles }
+
 updateTileText : String -> Tile -> Tile
 updateTileText text tile =
   { tile | text = text }
@@ -177,4 +188,9 @@ update msg model = case Debug.log "UPDATE" (msg, model) of
     (modColumnInPage columnIndex << modTileInColumn tileIndex)
       (updateTileText newText)
       model
+      |> withoutCmd
+  ( AddTile columnIndex, _ ) ->
+    modColumnInPage columnIndex
+      addTileToColumn
+      model
       |> withoutCmd

style.sass

@@ -13,11 +13,15 @@ body
 			text-align: center
 
 		.tile
-			background-color: #fcedd6 //e2b97a
+			background-color: #fcedd6
 			position: relative
+			height: 80px
+			width: 400px
 
 			display: grid
 			align-items: center
+			margin-bottom: 15px
+			border: none
 
 			input
 				padding: 20px
@@ -33,4 +37,11 @@ body
 				position: absolute
 				top: 0
 				left: 0
-				pointer-events: none // Allow clicking the input box below this
+				pointer-events: none // Allow clicking the input box below this
+
+			&.add-tile
+				text-align: center
+				font-weight: bold
+				font-size: 60px
+				background-color: #efc88d
+				color: #3d2c12