diff options
author | Akshay <[email protected]> | 2020-11-23 14:01:15 +0000 |
---|---|---|
committer | Akshay <[email protected]> | 2020-11-23 14:01:15 +0000 |
commit | 615f4398f2b118a0142d752433d7eb1fc77f2301 (patch) | |
tree | 8b63898317c63d854cfdd22404b69375f417f0a5 /src/Main.elm | |
parent | 86bd94ec91e88f3a50a02daf051fcca316db09a5 (diff) |
fix layouting, finish styling
Diffstat (limited to 'src/Main.elm')
-rw-r--r-- | src/Main.elm | 59 |
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 (..) | |||
4 | import Base exposing (..) | 4 | import Base exposing (..) |
5 | import Browser | 5 | import Browser |
6 | import Css | 6 | import Css |
7 | import Css.Global exposing (everything, global, selector) | 7 | import Css.Global exposing (body, everything, global, selector) |
8 | import Data exposing (..) | 8 | import Data exposing (..) |
9 | import Html | 9 | import Html |
10 | import Html.Styled exposing (..) | 10 | import Html.Styled exposing (..) |
11 | import Html.Styled.Attributes exposing (..) | 11 | import Html.Styled.Attributes exposing (..) |
12 | import Html.Styled.Events exposing (onClick, onInput) | 12 | import Html.Styled.Events exposing (onClick, onInput) |
13 | import Random | 13 | import Random |
14 | import Styles exposing (styledButton, styledInput, styledTextBox) | 14 | import Styles exposing (styledButton, styledInput, styledTextBox, wordStyle) |
15 | import Task | 15 | import Task |
16 | import Time | 16 | import Time |
17 | import Utils exposing (isJust, isNothing) | 17 | import Utils exposing (isJust, isNothing) |
@@ -44,7 +44,7 @@ generateWords config = | |||
44 | 44 | ||
45 | defaultModel : Model | 45 | defaultModel : Model |
46 | defaultModel = | 46 | defaultModel = |
47 | Model Nothing Nothing Array.empty Nothing defaultConfig 0 "" | 47 | Model Nothing Nothing Array.empty Nothing defaultConfig 0 "" False |
48 | 48 | ||
49 | 49 | ||
50 | init : () -> ( Model, Cmd Msg ) | 50 | init : () -> ( Model, Cmd Msg ) |
@@ -143,8 +143,11 @@ update msg model = | |||
143 | 143 | ||
144 | else | 144 | else |
145 | Cmd.none | 145 | Cmd.none |
146 | |||
147 | inpStat = | ||
148 | String.startsWith s (currentContents model) | ||
146 | in | 149 | in |
147 | ( { model | inputBox = s } | 150 | ( { model | inputBox = s, inputCorrect = inpStat } |
148 | , cmd | 151 | , cmd |
149 | ) | 152 | ) |
150 | 153 | ||
@@ -183,28 +186,13 @@ update msg model = | |||
183 | ) | 186 | ) |
184 | 187 | ||
185 | 188 | ||
186 | wordStyle : WordStatus -> Attribute msg | ||
187 | wordStyle w = | ||
188 | case w of | ||
189 | Correct -> | ||
190 | style "color" "green" | ||
191 | |||
192 | Wrong -> | ||
193 | style "color" "red" | ||
194 | |||
195 | Todo -> | ||
196 | style "color" "black" | ||
197 | |||
198 | CurrentWord -> | ||
199 | style "color" "magenta" | ||
200 | |||
201 | |||
202 | toPara : Array Word -> Int -> String -> Html Msg | 189 | toPara : Array Word -> Int -> String -> Html Msg |
203 | toPara words current content = | 190 | toPara words current content = |
204 | words | 191 | words |
205 | |> Array.map (\w -> span [ wordStyle w.status ] [ text (w.content ++ " ") ]) | 192 | |> Array.map (\w -> span [ css [ wordStyle w.status ] ] [ text w.content ]) |
206 | |> Array.set current (span [ wordStyle CurrentWord ] [ text (content ++ " ") ]) | 193 | |> Array.set current (span [ css [ wordStyle CurrentWord ] ] [ text content ]) |
207 | |> Array.toList | 194 | |> Array.toList |
195 | |> List.intersperse (span [] [ text " " ]) | ||
208 | |> styledTextBox [] | 196 | |> styledTextBox [] |
209 | 197 | ||
210 | 198 | ||
@@ -217,20 +205,33 @@ currentContents model = | |||
217 | 205 | ||
218 | view : Model -> Html Msg | 206 | view : Model -> Html Msg |
219 | view model = | 207 | view model = |
220 | div [] | 208 | div |
221 | [ div [] | 209 | [ style "width" "95%" |
210 | , style "max-width" "650px" | ||
211 | , style "margin" "auto" | ||
212 | , style "padding-top" "15%" | ||
213 | ] | ||
214 | [ div | ||
215 | [ style "width" "100%" | ||
216 | ] | ||
222 | [ viewWordLengthOptions | 217 | [ viewWordLengthOptions |
223 | , viewStats model | 218 | , div |
219 | [ style "float" "right" ] | ||
220 | [ styledButton [ onClick Redo ] [ text "redo" ] ] | ||
224 | ] | 221 | ] |
225 | , div [] | 222 | , div [] |
226 | [ toPara model.words model.currentWord (currentContents model) | 223 | [ toPara model.words model.currentWord (currentContents model) |
227 | , div [] | 224 | , div [] |
228 | [ styledInput [ onInput handleInputChanged, value model.inputBox ] [] | 225 | [ text "> " |
229 | , styledButton [ onClick Redo ] [ text "redo" ] | 226 | , styledInput model.inputCorrect [ onInput handleInputChanged, value model.inputBox ] [] |
230 | ] | 227 | ] |
231 | ] | 228 | ] |
232 | , global [ selector "li:not(:last-child)::after" [ Css.property "content" "' / '" ] ] | 229 | , div [] [ viewStats model ] |
233 | , global [ everything [ Css.fontFamily Css.monospace ] ] | 230 | |
231 | -- , global [ selector "li:not(:last-child)::after" [ Css.property "content" "' ยท '" ] ] | ||
232 | , global [ everything [ Css.fontFamily Css.monospace, Css.fontSize (Css.px 18) ] ] | ||
233 | |||
234 | -- , global [ body [ Css.backgroundColor (Css.hex "#000"), Css.color (Css.hex "#fff") ] ] | ||
234 | ] | 235 | ] |
235 | 236 | ||
236 | 237 | ||