fix layouting, finish styling

4 files changed, 149 insertions, 81 deletions

diff --git a/src/Base.elm b/src/Base.elm
index 480147a..1d19723 100644
--- a/src/Base.elm
+++ b/src/Base.elm
@@ -25,6 +25,7 @@ type alias Model =
     , config : Config
     , currentWord : Int
     , inputBox : String
+    , inputCorrect : Bool
     }
 
 
diff --git a/src/Main.elm b/src/Main.elm
index 4ca4934..2b1cc67 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -4,14 +4,14 @@ import Array exposing (..)
 import Base exposing (..)
 import Browser
 import Css
-import Css.Global exposing (everything, global, selector)
+import Css.Global exposing (body, everything, global, selector)
 import Data exposing (..)
 import Html
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (..)
 import Html.Styled.Events exposing (onClick, onInput)
 import Random
-import Styles exposing (styledButton, styledInput, styledTextBox)
+import Styles exposing (styledButton, styledInput, styledTextBox, wordStyle)
 import Task
 import Time
 import Utils exposing (isJust, isNothing)
@@ -44,7 +44,7 @@ generateWords config =
 
 defaultModel : Model
 defaultModel =
-    Model Nothing Nothing Array.empty Nothing defaultConfig 0 ""
+    Model Nothing Nothing Array.empty Nothing defaultConfig 0 "" False
 
 
 init : () -> ( Model, Cmd Msg )
@@ -143,8 +143,11 @@ update msg model =
 
                     else
                         Cmd.none
+
+                inpStat =
+                    String.startsWith s (currentContents model)
             in
-            ( { model | inputBox = s }
+            ( { model | inputBox = s, inputCorrect = inpStat }
             , cmd
             )
 
@@ -183,28 +186,13 @@ update msg model =
             )
 
 
-wordStyle : WordStatus -> Attribute msg
-wordStyle w =
-    case w of
-        Correct ->
-            style "color" "green"
-
-        Wrong ->
-            style "color" "red"
-
-        Todo ->
-            style "color" "black"
-
-        CurrentWord ->
-            style "color" "magenta"
-
-
 toPara : Array Word -> Int -> String -> Html Msg
 toPara words current content =
     words
-        |> Array.map (\w -> span [ wordStyle w.status ] [ text (w.content ++ " ") ])
-        |> Array.set current (span [ wordStyle CurrentWord ] [ text (content ++ " ") ])
+        |> Array.map (\w -> span [ css [ wordStyle w.status ] ] [ text w.content ])
+        |> Array.set current (span [ css [ wordStyle CurrentWord ] ] [ text content ])
         |> Array.toList
+        |> List.intersperse (span [] [ text " " ])
         |> styledTextBox []
 
 
@@ -217,20 +205,33 @@ currentContents model =
 
 view : Model -> Html Msg
 view model =
-    div []
-        [ div []
+    div
+        [ style "width" "95%"
+        , style "max-width" "650px"
+        , style "margin" "auto"
+        , style "padding-top" "15%"
+        ]
+        [ div
+            [ style "width" "100%"
+            ]
             [ viewWordLengthOptions
-            , viewStats model
+            , div
+                [ style "float" "right" ]
+                [ styledButton [ onClick Redo ] [ text "redo" ] ]
             ]
         , div []
             [ toPara model.words model.currentWord (currentContents model)
             , div []
-                [ styledInput [ onInput handleInputChanged, value model.inputBox ] []
-                , styledButton [ onClick Redo ] [ text "redo" ]
+                [ text "> "
+                , styledInput model.inputCorrect [ onInput handleInputChanged, value model.inputBox ] []
                 ]
             ]
-        , global [ selector "li:not(:last-child)::after" [ Css.property "content" "' / '" ] ]
-        , global [ everything [ Css.fontFamily Css.monospace ] ]
+        , div [] [ viewStats model ]
+
+        -- , global [ selector "li:not(:last-child)::after" [ Css.property "content" "' · '" ] ]
+        , global [ everything [ Css.fontFamily Css.monospace, Css.fontSize (Css.px 18) ] ]
+
+        -- , global [ body [ Css.backgroundColor (Css.hex "#000"), Css.color (Css.hex "#fff") ] ]
         ]
 
 
diff --git a/src/Styles.elm b/src/Styles.elm
index 36bd1a3..db5b0ce 100644
--- a/src/Styles.elm
+++ b/src/Styles.elm
@@ -1,5 +1,6 @@
 module Styles exposing (..)
 
+import Base exposing (WordStatus(..))
 import Css exposing (..)
 import Css.Global exposing (global, selector)
 import Html
@@ -10,27 +11,43 @@ styledButton : List (Attribute msg) -> List (Html msg) -> Html msg
 styledButton =
     styled
         button
-        [ margin (px 12)
-        , color (hex "#000")
+        [ marginTop (px 12)
+        , marginBottom (px 12)
+        , paddingTop (px 12)
+        , paddingBottom (px 12)
+        , paddingLeft (px 0)
+        , paddingRight (px 12)
         , fontFamily monospace
-        , backgroundColor (hex "#ddd")
         , border (px 0)
+        , backgroundColor (hex "#fff")
         , borderRadius (px 4)
-        , padding (px 12)
         ]
 
 
-styledInput : List (Attribute msg) -> List (Html msg) -> Html msg
-styledInput =
+correctInputStyle : Style
+correctInputStyle =
+    color (hex "#000")
+
+
+wrongInputStyle : Style
+wrongInputStyle =
+    wrongWordStyle
+
+
+styledInput : Bool -> List (Attribute msg) -> List (Html msg) -> Html msg
+styledInput inputStatus =
     styled
         input
-        [ margin (px 12)
-        , color (hex "#000")
-        , fontFamily monospace
-        , backgroundColor (hex "#eee")
-        , border (px 0)
-        , borderRadius (px 4)
-        , padding (px 12)
+        [ fontFamily monospace
+        , if inputStatus then
+            correctInputStyle
+
+          else
+            wrongInputStyle
+        , border zero
+        , paddingTop (px 12)
+        , paddingBottom (px 12)
+        , width (pct 95)
         ]
 
 
@@ -55,14 +72,12 @@ styledTextBox : List (Attribute msg) -> List (Html msg) -> Html msg
 styledTextBox =
     styled
         div
-        [ margin (px 12)
-        , color (hex "#000")
+        [ color (hex "#000")
         , fontFamily monospace
-        , backgroundColor (hex "#eee")
         , border (px 0)
         , borderRadius (px 4)
-        , padding (px 12)
-        , width (px 500)
+        , paddingTop (px 12)
+        , paddingBottom (px 12)
         , display inlineBlock
         ]
 
@@ -74,3 +89,39 @@ actionContainer =
         [ padding (px 12)
         , width (pct 100)
         ]
+
+
+wrongWordStyle : Style
+wrongWordStyle =
+    color (hex "#f07178")
+
+
+correctWordStyle : Style
+correctWordStyle =
+    color (hex "#13CA91")
+
+
+todoWordStyle : Style
+todoWordStyle =
+    color (hex "#787878")
+
+
+currentWordStyle : Style
+currentWordStyle =
+    textDecoration underline
+
+
+wordStyle : WordStatus -> Style
+wordStyle w =
+    case w of
+        Correct ->
+            correctWordStyle
+
+        Wrong ->
+            wrongWordStyle
+
+        Todo ->
+            todoWordStyle
+
+        CurrentWord ->
+            currentWordStyle
diff --git a/src/Views.elm b/src/Views.elm
index b56a945..b54fc93 100644
--- a/src/Views.elm
+++ b/src/Views.elm
@@ -5,10 +5,11 @@ import Base exposing (..)
 import Css exposing (..)
 import Html
 import Html.Styled exposing (..)
+import Html.Styled.Attributes exposing (css)
 import Html.Styled.Events exposing (onClick)
-import Styles exposing (styledListItem, styledUnorderedList)
+import Styles exposing (styledButton, styledListItem, styledUnorderedList)
 import Time exposing (Posix, toHour, toMinute, toSecond, utc)
-import Utils exposing (diffDuration, wordCountWith)
+import Utils exposing (diffDuration, isNothing, wordCountWith)
 
 
 viewTime : Posix -> String
@@ -26,7 +27,7 @@ viewTime t =
     String.join ":" (List.map String.fromInt [ hh, mm, ss ])
 
 
-viewWpm : Model -> String
+viewWpm : Model -> Maybe String
 viewWpm model =
     let
         t1 =
@@ -40,11 +41,8 @@ viewWpm model =
 
         correctWords =
             wordCountWith model.words ((==) Correct)
-
-        wpm =
-            Maybe.map (String.fromInt << truncate << (*) 60 << (/) (toFloat correctWords)) duration
     in
-    Maybe.withDefault "XX" wpm
+    Maybe.map (String.fromInt << truncate << (*) 60 << (/) (toFloat correctWords)) duration
 
 
 viewProgress : Model -> String
@@ -59,28 +57,30 @@ viewProgress model =
     String.fromInt soFar ++ ":" ++ String.fromInt total
 
 
-viewAccuracy : Array Word -> String
-viewAccuracy words =
-    let
-        wordsAttempted =
-            toFloat <| wordCountWith words ((/=) Todo)
+viewAccuracy : Model -> Maybe String
+viewAccuracy model =
+    if isNothing model.end then
+        Nothing
 
-        correctCount =
-            toFloat <| wordCountWith words ((==) Correct)
+    else
+        let
+            words =
+                model.words
 
-        accuracy =
-            if wordsAttempted == 0.0 then
-                Nothing
+            wordsAttempted =
+                toFloat <| wordCountWith words ((/=) Todo)
 
-            else
-                Just <| correctCount / wordsAttempted * 100
-    in
-    case accuracy of
-        Nothing ->
-            "XX"
+            correctCount =
+                toFloat <| wordCountWith words ((==) Correct)
+
+            accuracy =
+                if wordsAttempted == 0.0 then
+                    Nothing
 
-        Just a ->
-            String.fromInt <| truncate a
+                else
+                    Just <| String.fromInt <| truncate <| correctCount / wordsAttempted * 100
+        in
+        accuracy
 
 
 viewWordLengthOptions : Html Msg
@@ -89,12 +89,20 @@ viewWordLengthOptions =
         wl =
             [ 10, 25, 50, 100 ]
     in
-    styledUnorderedList []
+    ul
+        [ css
+            [ margin zero
+            , listStyle Css.none
+            , display inlineBlock
+            , paddingLeft (px 0)
+            ]
+        ]
         (List.map
             (\len ->
-                styledListItem
-                    [ onClick (Base.WordLengthChanged len) ]
-                    [ text <| String.fromInt len ]
+                li [ css [ display inline ] ]
+                    [ styledButton [ onClick (Base.WordLengthChanged len) ]
+                        [ text <| String.fromInt len ]
+                    ]
             )
             wl
         )
@@ -102,8 +110,15 @@ viewWordLengthOptions =
 
 viewStats : Model -> Html Msg
 viewStats model =
-    styledUnorderedList []
-        [ styledListItem [] [ text ("WPM " ++ viewWpm model) ]
-        , styledListItem [] [ text ("ACC " ++ viewAccuracy model.words) ]
-        , styledListItem [] [ text ("POS " ++ viewProgress model) ]
-        ]
+    let
+        wpm =
+            viewWpm model
+
+        acc =
+            viewAccuracy model
+
+        stats =
+            Maybe.map2 (\w a -> w ++ " words per minute · " ++ a ++ "% accuracy") wpm acc
+    in
+    p []
+        [ text (Maybe.withDefault "" stats) ]