begin work on basic styling

3 files changed, 103 insertions, 5 deletions

diff --git a/elm.json b/elm.json
index ba0c4ba..5b9c9c4 100644
--- a/elm.json
+++ b/elm.json
@@ -10,12 +10,14 @@
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/random": "1.0.0",
-            "elm/time": "1.0.0"
+            "elm/time": "1.0.0",
+            "rtfeldman/elm-css": "16.1.0"
         },
         "indirect": {
             "elm/json": "1.1.3",
             "elm/url": "1.0.0",
-            "elm/virtual-dom": "1.0.2"
+            "elm/virtual-dom": "1.0.2",
+            "rtfeldman/elm-hex": "1.0.0"
         }
     },
     "test-dependencies": {
diff --git a/src/Styles.elm b/src/Styles.elm
new file mode 100644
index 0000000..57c124b
--- /dev/null
+++ b/src/Styles.elm
@@ -0,0 +1,67 @@
+module Styles exposing (..)
+
+import Css exposing (..)
+import Css.Global exposing (global, selector)
+import Html
+import Html.Styled exposing (..)
+
+
+styledButton : List (Attribute msg) -> List (Html msg) -> Html msg
+styledButton =
+    styled
+        button
+        [ margin (px 12)
+        , color (hex "#000")
+        , fontFamily monospace
+        , backgroundColor (hex "#ddd")
+        , border (px 0)
+        , borderRadius (px 4)
+        , padding (px 12)
+        ]
+
+
+styledInput : List (Attribute msg) -> List (Html msg) -> Html msg
+styledInput =
+    styled
+        input
+        [ margin (px 12)
+        , color (hex "#000")
+        , fontFamily monospace
+        , backgroundColor (hex "#eee")
+        , border (px 0)
+        , borderRadius (px 4)
+        , padding (px 12)
+        ]
+
+
+styledListItem : List (Attribute msg) -> List (Html msg) -> Html msg
+styledListItem =
+    styled
+        li
+        [ display inline
+        ]
+
+
+styledUnorderedList : List (Attribute msg) -> List (Html msg) -> Html msg
+styledUnorderedList =
+    styled
+        ul
+        [ listStyle Css.none
+        , padding (px 0)
+        ]
+
+
+styledTextBox : List (Attribute msg) -> List (Html msg) -> Html msg
+styledTextBox =
+    styled
+        div
+        [ margin (px 12)
+        , color (hex "#000")
+        , fontFamily monospace
+        , backgroundColor (hex "#eee")
+        , border (px 0)
+        , borderRadius (px 4)
+        , padding (px 12)
+        , width (px 500)
+        , display inlineBlock
+        ]
diff --git a/src/Views.elm b/src/Views.elm
index c5cc159..5e2dbcb 100644
--- a/src/Views.elm
+++ b/src/Views.elm
@@ -1,7 +1,12 @@
-module Views exposing (viewAccuracy, viewProgress, viewWpm)
+module Views exposing (viewAccuracy, viewProgress, viewWordLengthOptions, viewWpm)
 
 import Array exposing (..)
 import Base exposing (..)
+import Css exposing (..)
+import Html
+import Html.Styled exposing (..)
+import Html.Styled.Events exposing (onClick)
+import Styles exposing (styledListItem, styledUnorderedList)
 import Time exposing (Posix, toHour, toMinute, toSecond, utc)
 import Utils exposing (diffDuration, wordCountWith)
 
@@ -42,8 +47,15 @@ viewWpm model =
     Maybe.withDefault "XX" wpm
 
 
-viewProgress : Int -> Int -> String
-viewProgress soFar total =
+viewProgress : Model -> String
+viewProgress model =
+    let
+        soFar =
+            model.currentWord + 1
+
+        total =
+            model.config.length
+    in
     String.fromInt soFar ++ "/" ++ String.fromInt total
 
 
@@ -69,3 +81,20 @@ viewAccuracy words =
 
         Just a ->
             String.fromInt <| truncate a
+
+
+viewWordLengthOptions : Html Msg
+viewWordLengthOptions =
+    let
+        wl =
+            [ 10, 25, 50, 100 ]
+    in
+    styledUnorderedList []
+        (List.map
+            (\len ->
+                styledListItem
+                    [ onClick (Base.WordLengthChanged len) ]
+                    [ text <| String.fromInt len ]
+            )
+            wl
+        )