From 87386e8b148c2536214fdaf6c3140853c751d7b4 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Sun, 8 Mar 2015 15:14:07 +0100 Subject: Showing the score at the end of each round --- src/Model/Round.elm | 13 ++++++++++++- src/Update/Update.elm | 2 +- src/View/Game.elm | 2 +- src/View/Page.elm | 36 ++++++++++++++++++++++++------------ style.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 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; + } +} + -- cgit v1.2.3