TickTocks.elm

module TickTocks exposing(..)
import Browser
import Html exposing (..)
import Html.Attributes exposing (style)
import Task
import Time
main =
  Browser.element
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

type Msg = TickTock Time.Posix
type Model = Tick | Tock



init : () -> (Model, Cmd Msg)
init _ =  (Tick , Task.perform TickTock Time.now)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    TickTock _ ->
      case model of
        Tick ->(Tock , Cmd.none)
        Tock ->(Tick , Cmd.none)

subscriptions : Model -> Sub Msg
subscriptions model =
  Time.every 1000 TickTock

indent n = text <| String.repeat n "=>"

toCenter = [style "display" "flex", style   "align-items" "center",style "align-content" "center",style "justify-content" "center"]

tick_h1 = 
  h1 [] [ span [style "color" "red"] [text "Так"],
          b [] [text " - "],
          span [style "color" "blue"] [text "Тик"]  ]

tock_h1 = 
  h1 [] [ span [style "color" "blue"] [text "Тик"],
          b [] [text " - "],
          span [style "color" "red"] [text "Так"]  ]


view : Model -> Html Msg
view model =
  case model of
    Tick -> 
     div toCenter [ tick_h1 ]
    Tock -> 
     div toCenter [ tock_h1 ]