begin work on layouting and global styling

4 files changed, 35 insertions, 12 deletions

diff --git a/src/Data.elm b/src/Data.elm
index 95c92c1..244f149 100644
--- a/src/Data.elm
+++ b/src/Data.elm
@@ -23,7 +23,7 @@ punctuations =
 
 falseWeightedBool : Random.Generator Bool
 falseWeightedBool =
-    Random.weighted ( 20, True ) [ ( 80, False ) ]
+    Random.weighted ( 5, True ) [ ( 95, False ) ]
 
 
 randomWord : Config -> Random.Generator ( Int, Bool, Bool )
diff --git a/src/Main.elm b/src/Main.elm
index 620ef7c..4ca4934 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -4,7 +4,7 @@ import Array exposing (..)
 import Base exposing (..)
 import Browser
 import Css
-import Css.Global exposing (global, selector)
+import Css.Global exposing (everything, global, selector)
 import Data exposing (..)
 import Html
 import Html.Styled exposing (..)
@@ -217,15 +217,20 @@ currentContents model =
 
 view : Model -> Html Msg
 view model =
-    pre []
-        [ p [] [ text ("POS: " ++ viewProgress model) ]
-        , p [] [ text ("WPM: " ++ viewWpm model) ]
-        , p [] [ text ("ACC: " ++ viewAccuracy model.words) ]
-        , viewWordLengthOptions
-        , toPara model.words model.currentWord (currentContents model)
-        , styledInput [ onInput handleInputChanged, value model.inputBox ] []
-        , styledButton [ onClick Redo ] [ text "redo" ]
+    div []
+        [ div []
+            [ viewWordLengthOptions
+            , viewStats model
+            ]
+        , div []
+            [ toPara model.words model.currentWord (currentContents model)
+            , div []
+                [ styledInput [ onInput handleInputChanged, value model.inputBox ] []
+                , styledButton [ onClick Redo ] [ text "redo" ]
+                ]
+            ]
         , global [ selector "li:not(:last-child)::after" [ Css.property "content" "' / '" ] ]
+        , global [ everything [ Css.fontFamily Css.monospace ] ]
         ]
 
 
diff --git a/src/Styles.elm b/src/Styles.elm
index 57c124b..36bd1a3 100644
--- a/src/Styles.elm
+++ b/src/Styles.elm
@@ -65,3 +65,12 @@ styledTextBox =
         , width (px 500)
         , display inlineBlock
         ]
+
+
+actionContainer : List (Attribute msg) -> List (Html msg) -> Html msg
+actionContainer =
+    styled
+        div
+        [ padding (px 12)
+        , width (pct 100)
+        ]
diff --git a/src/Views.elm b/src/Views.elm
index 5e2dbcb..b56a945 100644
--- a/src/Views.elm
+++ b/src/Views.elm
@@ -1,4 +1,4 @@
-module Views exposing (viewAccuracy, viewProgress, viewWordLengthOptions, viewWpm)
+module Views exposing (..)
 
 import Array exposing (..)
 import Base exposing (..)
@@ -56,7 +56,7 @@ viewProgress model =
         total =
             model.config.length
     in
-    String.fromInt soFar ++ "/" ++ String.fromInt total
+    String.fromInt soFar ++ ":" ++ String.fromInt total
 
 
 viewAccuracy : Array Word -> String
@@ -98,3 +98,12 @@ viewWordLengthOptions =
             )
             wl
         )
+
+
+viewStats : Model -> Html Msg
+viewStats model =
+    styledUnorderedList []
+        [ styledListItem [] [ text ("WPM " ++ viewWpm model) ]
+        , styledListItem [] [ text ("ACC " ++ viewAccuracy model.words) ]
+        , styledListItem [] [ text ("POS " ++ viewProgress model) ]
+        ]