From 615f4398f2b118a0142d752433d7eb1fc77f2301 Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 23 Nov 2020 19:31:15 +0530 Subject: fix layouting, finish styling --- src/Base.elm | 1 + src/Main.elm | 59 +++++++++++++++++++-------------------- src/Styles.elm | 87 ++++++++++++++++++++++++++++++++++++++++++++++------------ src/Views.elm | 83 ++++++++++++++++++++++++++++++++----------------------- 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) ] -- cgit v1.2.3