Fix CSS and continuous state in frontend

backend/templates/index.html

@@ -6,18 +6,23 @@
     <title>{{ title }}</title>
     <script src="/static/main.js"></script>
     <style>
-      * {
-        padding: 0;
-        margin: 0;
+      body {
+        text-align:center;
       }
-      #main {
-        display: grid;
-        height: 100%;
+      #container {
+        display: flex;
+        flex-direction: column;
+        margin: auto auto;
+        height: 95vh;
+        width: 90vh;
       }
-      img {
+      #container div {
+        align-self: center;
+      }
+      #container img {
+        align-self: center;
+        object-fit: cover;
         max-width: 100%;
-        max-height: 100vh;
-        margin: auto;
       }
     </style>
   </head>
@@ -32,7 +37,9 @@
     </ul>
     {% endif %}
     {% endwith %}
-    <div id="main"></div>
+    <div id="container">
+      <div id="main"></div>
+    </div>
     <script>
       var app = Elm.Main.init({
         node: document.getElementById('main')

frontend/src/Main.elm

@@ -2,8 +2,7 @@ module Main exposing (main)
 
 import Browser
 import Html exposing (..)
-import Html.Attributes exposing (..)
-import Html.Events exposing (..)
+import Html.Attributes exposing (src)
 import Http
 import Time
 import Json.Decode exposing (Decoder, map3, field, string, float)
@@ -31,13 +30,12 @@ type alias Surprise =
 
 type Model
   = Failure
-  | Loading
   | Success Surprise
 
 
 init : () -> (Model, Cmd Msg)
 init _ =
-  (Loading, getSurprise)
+  (Success { diff = 0.0, surprise = "", asset = "/static/loading.svg" }, getSurprise)
 
 
 -- UPDATE
@@ -51,7 +49,7 @@ update : Msg -> Model -> (Model, Cmd Msg)
 update msg model =
   case msg of
     FetchSurprise _ ->
-      (Loading, getSurprise)
+      (model, getSurprise)
 
     GotSurprise result ->
       case result of
@@ -66,7 +64,7 @@ update msg model =
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
-  Time.every 1000 FetchSurprise
+  Time.every 980 FetchSurprise
 
 
 -- VIEW
@@ -77,14 +75,50 @@ view model =
     Failure ->
       div [] [ text "Failed to fetch from server." ]
 
-    Loading ->
-      img [ src "/static/loading.svg" ] []
-
     Success surprise ->
       div [] 
-      [ div [] [ text (String.fromInt (round surprise.diff)) ]
-      , img [ src surprise.asset ] []
-      ]
+        ( (viewDiff surprise.diff)
+          ++ [ img [ src surprise.asset ] [] ]
+        )
+
+
+viewDiff: Float -> List (Html Msg)
+viewDiff diff =
+  diff
+    |> round
+    |> max 0
+    |> secondsToIntervals
+    |> List.filter (\(i, _) -> i /= 0)
+    |> List.map formatInterval
+    |> List.map (\s -> h2 [] [ text s ])
+
+
+formatInterval: (Int, String) -> String
+formatInterval (n, unit) =
+  let
+      s =
+        (String.fromInt n) ++ " " ++ unit
+  in
+    if n > 1 then
+      s ++ "s"
+    else
+      s 
+
+secondsToIntervals: Int -> List (Int, String)
+secondsToIntervals diff =
+  let
+      (days, daysRem) = 
+        (diff // 86400, modBy 86400 diff)
+      (hours, hoursRem) =
+        (daysRem // 3600, modBy 3600 daysRem)
+      (minutes, seconds) =
+        (hoursRem // 60, modBy 60 hoursRem)
+  in
+    [ (days, "day")
+    , (hours, "hour")
+    , (minutes, "minute")
+    , (seconds, "second")
+    ]
 
 
 -- HTTP