Showing the score at the end of each round

5 files changed, 89 insertions, 15 deletions

diff --git a/src/Model/Round.elm b/src/Model/Round.elm
index d5210d5..16e8f5e 100644
--- a/src/Model/Round.elm
+++ b/src/Model/Round.elm
@@ -1,8 +1,9 @@
 module Model.Round
   ( Round
-  , roundOrder
+  , maybeBestRound
   ) where
 
+import List
 import Time (Time)
 
 type alias Round =
@@ -10,6 +11,16 @@ type alias Round =
   , score : Int
   }
 
+maybeBestRound : List Round -> Maybe Round
+maybeBestRound rounds =
+  let orderedRounds =
+        rounds
+          |> List.sortWith roundOrder
+          |> List.reverse
+  in  case orderedRounds of
+        [] -> Nothing
+        best :: _ -> Just best
+
 roundOrder : Round -> Round -> Order
 roundOrder round1 round2 =
   if round1.score == round2.score
diff --git a/src/Update/Update.elm b/src/Update/Update.elm
index 7cf4dee..ab68d2e 100644
--- a/src/Update/Update.elm
+++ b/src/Update/Update.elm
@@ -31,7 +31,7 @@ update input game =
           | time <- 0
           , currentScore <- 0
           , cloud <- initCloud
-          , rounds <- (Round game.time game.currentScore) :: game.rounds
+          , rounds <- game.rounds `List.append` [Round game.time game.currentScore]
           }
         else
           let newTime = game.time + input.delta
diff --git a/src/View/Game.elm b/src/View/Game.elm
index 8e76b48..0bbea00 100644
--- a/src/View/Game.elm
+++ b/src/View/Game.elm
@@ -69,7 +69,7 @@ outlineColor = rgb 34 34 34
 scoreForms : Int -> List Form
 scoreForms score =
   let text = (toString score)
-      scorePos = { x = 0.0, y = boardSize.y / 2 - 30 }
+      scorePos = { x = 0.0, y = boardSize.y / 2 - 35 }
   in  [textForm text scorePos centered]
 
 textForm : String -> Vec2 -> (Text -> Element) -> Form
diff --git a/src/View/Page.elm b/src/View/Page.elm
index 3aa29a2..c85cf91 100644
--- a/src/View/Page.elm
+++ b/src/View/Page.elm
@@ -3,6 +3,7 @@ module View.Page
   ) where
 
 import List
+import String (append)
 
 import Html (..)
 import Html.Attributes (..)
@@ -10,7 +11,7 @@ import Html.Attributes as A
 import Json.Encode (string)
 
 import Model.Game (Game)
-import Model.Round (roundOrder)
+import Model.Round (..)
 
 import View.Game (gameView)
 import View.Time (timeView)
@@ -29,18 +30,23 @@ pageView game =
     , p
         []
         [ text "Use the arrow keys to move and 'e' to change your color." ]
-    , ( let orderedRounds =
-              game.rounds
-                |> List.sortWith roundOrder
-                |> List.reverse
-        in case orderedRounds of
-             [] ->
-               div [ class "bestScore" ] []
-             bestRound :: _ ->
-               p
-                 [ class "bestScore isDefined" ]
-                 [ text <| "Best score: " ++ (toString bestRound.score) ++ " hits within " ++ (timeView bestRound.duration) ]
+    , ( case maybeBestRound game.rounds of
+          Nothing ->
+            div [ class "bestScore" ] []
+          Just bestRound ->
+             p
+               [ class "bestScore isDefined" ]
+               [ roundView bestRound
+                   |> append "Best score: "
+                   |> text
+               ]
       )
+    , ul
+        [ class "rounds" ]
+        ( List.map
+            (\round -> li [] [ text (roundView round) ])
+            game.rounds
+        )
     , a
         [ href "https://github.com/guyonvarch/catchvoid" ]
         [ img
@@ -58,3 +64,9 @@ pageView game =
         ]
     ]
 
+roundView : Round -> String
+roundView round =
+  let score = toString round.score
+      hits = "hit" ++ (if round.score > 1 then "s" else "")
+      duration = timeView round.duration
+  in  score ++ " " ++ hits ++ " within " ++ duration
diff --git a/style.css b/style.css
index 6499535..763cb22 100644
--- a/style.css
+++ b/style.css
@@ -67,3 +67,54 @@ p {
     color: white;
   }
 }
+
+ul.rounds {
+  padding-left: 0;
+  color: white;
+  list-style-type: none;
+  position: absolute;
+  width: 300px;
+  left: 50%;
+  margin-left: -150px;
+  top: 110px;
+}
+
+ul.rounds > li {
+  background-color: #333333;
+  text-align: center;
+  border-radius: 2px;
+  animation: hide 5s ease;
+
+  opacity: 0;
+  height: 0px;
+  line-height: 0px;
+  margin-bottom: 0px;
+}
+
+@keyframes hide {
+  0% {
+    opacity: 1;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 10px;
+  }
+  90% {
+    opacity: 1;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 10px;
+  }
+  95% {
+    opacity: 0;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 10px;
+  }
+  100% {
+    opacity: 0;
+    height: 0px;
+    line-height: 0px;
+    margin-bottom: 0px;
+  }
+}
+