Add more validation to form elements before taking actions.

client/src/MassiveDecks/Start.elm

@@ -69,4 +69,4 @@ initialData =
 
 
 view : Signal.Address Action -> List Error -> StartData -> Html
-view address errors data = UI.view address errors
+view address errors data = UI.view address errors data

client/src/MassiveDecks/UI/Config.elm

@@ -1,5 +1,7 @@
 module MassiveDecks.UI.Config where
 
+import String
+
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
@@ -25,7 +27,7 @@ view address data errors =
           [ invite lobby.id
           , divider
           , h1 [] [ text "Game Setup" ]
-          , deckList address decks
+          , deckList address decks data.deckId
           , startGameButton address enoughPlayers enoughCards
           ]
         ]
@@ -44,37 +46,38 @@ invite lobbyId =
       ]
 
 
-deckIdInput : Signal.Address Action -> Html
-deckIdInput address = div [ id "deck-id-input" ]
+deckIdInput : Signal.Address Action -> String -> Html
+deckIdInput address deckIdValue = div [ id "deck-id-input" ]
   [ div [ class "mui-textfield" ]
-    [ input [ type' "text"
-            , placeholder "Deck Id"
-            , on "change" targetValue (\deckId -> Signal.message address (UpdateInputValue "deckId" deckId))
-            , onKeyUp address (\key -> case key of
-                13 -> AddDeck Request {- Return key. -}
-                _ -> NoAction
-             ) ] []
+    [ input
+      [ type' "text"
+      , placeholder "Deck Id"
+      , on "input" targetValue (\deckId -> Signal.message address (UpdateInputValue "deckId" deckId))
+      , onKeyUp address (\key -> case key of
+          13 -> AddDeck Request {- Return key. -}
+          _ -> NoAction)
+      ] []
     , label [] [ icon "info-circle", text " A ", a [ href "https://www.cardcastgame.com/browse", target "_blank" ] [ text "CardCast" ], text " Deck Id" ]
     ]
-  , addDeckButton address
+  , addDeckButton address (not (String.isEmpty deckIdValue))
   ]
 
 
-addDeckButton : Signal.Address Action -> Html
-addDeckButton address =
-  button [ class "mui-btn mui-btn--small mui-btn--primary mui-btn--fab"
+addDeckButton : Signal.Address Action -> Bool -> Html
+addDeckButton address canAdd =
+  button [ class "mui-btn mui-btn--small mui-btn--primary mui-btn--fab", disabled (not canAdd)
          , onClick address (AddDeck Request) ] [ icon "plus" ]
 
 
-deckList : Signal.Address Action -> List DeckInfo -> Html
-deckList address decks =
+deckList : Signal.Address Action -> List DeckInfo -> String -> Html
+deckList address decks deckIdValue =
   table [ class "decks mui-table" ]
     [ thead []
       [ tr []
         [ th [] [ text "Id" ]
         , th [] [ text "Name" ]
-        , th [] [ icon "square" ]
-        , th [] [ icon "square-o" ]
+        , th [ title "Calls" ] [ icon "square" ]
+        , th [ title "Responses" ] [ icon "square-o" ]
         ]
       ]
     , tbody [] (List.concat
@@ -85,7 +88,7 @@ deckList address decks =
         , td [] [ text (toString deck.calls) ]
         , td [] [ text (toString deck.responses) ]
         ]) decks
-      , [ tr [] [ td [ colspan 4 ] [ deckIdInput address ] ] ]
+      , [ tr [] [ td [ colspan 4 ] [ deckIdInput address deckIdValue ] ] ]
       ])
     ]
 

client/src/MassiveDecks/UI/Start.elm

@@ -1,38 +1,45 @@
 module MassiveDecks.UI.Start where
 
+import String
+
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 
-import MassiveDecks.Models.State exposing (Error)
+import MassiveDecks.Models.State exposing (StartData, Error)
 import MassiveDecks.Actions.Action exposing (Action(..), APICall(..))
 import MassiveDecks.UI.General exposing (..)
 
 
-view : Signal.Address Action -> List Error -> Html
-view address errors = div [ id "start-screen" ] (List.concat [
-  [ div [ id "start-screen-content", class "mui-panel" ]
-    [ h1 [] [ text "Massive Decks" ]
-    , nameEntry address
-    , ul [ class "mui-tabs__bar mui-tabs__bar--justified" ]
-      [ li [ class "mui--is-active" ]
-          [ a [ attribute "data-mui-toggle" "tab", attribute "data-mui-controls" "pane-new" ] [ text "Create" ] ]
-      , li [] [ a [ attribute "data-mui-toggle" "tab", attribute "data-mui-controls" "pane-existing" ] [ text "Join" ] ]
-      ]
-    , div [ class "mui-tabs__pane mui--is-active", id "pane-new" ] [ newGame address ]
-    , div [ class "mui-tabs__pane", id "pane-existing" ]
-      [ lobbyIdEntry address
-      , joinGame address
-      ]
-    ]
-  ], [errorMessages address errors] ])
+view : Signal.Address Action -> List Error -> StartData -> Html
+view address errors data =
+  let
+    nameEntered = not (String.isEmpty data.name)
+    lobbyIdEntered = not (String.isEmpty data.lobbyId)
+  in
+    div [ id "start-screen" ] (List.concat [
+      [ div [ id "start-screen-content", class "mui-panel" ]
+        [ h1 [] [ text "Massive Decks" ]
+        , nameEntry address
+        , ul [ class "mui-tabs__bar mui-tabs__bar--justified" ]
+          [ li [ class "mui--is-active" ]
+              [ a [ attribute "data-mui-toggle" "tab", attribute "data-mui-controls" "pane-new" ] [ text "Create" ] ]
+          , li [] [ a [ attribute "data-mui-toggle" "tab", attribute "data-mui-controls" "pane-existing" ] [ text "Join" ] ]
+          ]
+        , div [ class "mui-tabs__pane mui--is-active", id "pane-new" ] [ newGame address nameEntered ]
+        , div [ class "mui-tabs__pane", id "pane-existing" ]
+          [ lobbyIdEntry address
+          , joinGame address (nameEntered && lobbyIdEntered)
+          ]
+        ]
+      ], [errorMessages address errors] ])
 
 
 nameEntry : Signal.Address Action -> Html
 nameEntry address = div [ class "nickname-entry mui-textfield" ]
   [ input [ type' "text"
           , placeholder "Nickname"
-          , on "change" targetValue (\name -> Signal.message address (UpdateInputValue "name" name))
+          , on "input" targetValue (\name -> Signal.message address (UpdateInputValue "name" name))
           ]
           []
   , label [] [ icon "info-circle", text " Your name in the game." ]
@@ -43,18 +50,26 @@ lobbyIdEntry : Signal.Address Action -> Html
 lobbyIdEntry address = div [ class "lobby-id-entry mui-textfield" ]
   [ input [ type' "text"
           , placeholder "Game Code"
-          , on "change" targetValue (\name -> Signal.message address (UpdateInputValue "lobbyId" name))
+          , on "input" targetValue (\name -> Signal.message address (UpdateInputValue "lobbyId" name))
           ]
           []
   , label [] [ icon "info-circle", text " The code for the game to join." ]
   ]
 
 
-joinGame : Signal.Address Action -> Html
-joinGame address =
-  button [ class "mui-btn mui-btn--large mui-btn--primary", onClick address JoinExistingLobby ] [ text "Join Game" ]
+joinGame : Signal.Address Action -> Bool -> Html
+joinGame address canJoin =
+  button
+    [ class "mui-btn mui-btn--large mui-btn--primary"
+    , onClick address JoinExistingLobby
+    , disabled (not canJoin)
+    ] [ text "Join Game" ]
 
 
-newGame : Signal.Address Action -> Html
-newGame address =
-  button [ class "mui-btn mui-btn--large mui-btn--primary", onClick address (NewLobby Request) ] [ text "Create Game" ]
+newGame : Signal.Address Action -> Bool -> Html
+newGame address canCreate =
+  button
+    [ class "mui-btn mui-btn--large mui-btn--primary"
+    , onClick address (NewLobby Request)
+    , disabled (not canCreate)
+    ] [ text "Create Game" ]