1 files changed, 30 insertions, 29 deletions

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") ] ]
         ]