Show best score in html layout

8 files changed, 103 insertions, 67 deletions

diff --git a/src/Main.elm b/src/Main.elm
index 7c257b7..207a393 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -22,10 +22,7 @@ game : Signal Game
 game =
   Signal.foldp
     update
-    (initialGame initialSeed originVec White 0)
+    (initialGame (Random.initialSeed initialTime))
     getInput
 
 port initialTime : Int
-
-initialSeed : Random.Seed
-initialSeed = Random.initialSeed initialTime
diff --git a/src/Model/Game.elm b/src/Model/Game.elm
index 4ef5d89..705841d 100644
--- a/src/Model/Game.elm
+++ b/src/Model/Game.elm
@@ -14,29 +14,20 @@ import Model.Config (..)
 type alias Game =
   { time : Float
   , keysDown : List KeyCode
-  , score : Int
+  , currentScore : Int
   , player : Player
   , cloud : Cloud
-  , bestScore : Int
+  , scores : List Int
   , seed : Seed
   }
 
-initialGame : Seed -> Vec2 -> Config -> Int -> Game
-initialGame seed playerPos config bestScore =
-  let initPlayer =
-    { pos = playerPos
-    , speed =
-        { x = 0
-        , y = 0
-        }
-    , config = config
-    }
-  in
-    { time = 0
-    , keysDown = []
-    , score = 0
-    , player = initPlayer
-    , cloud = initCloud
-    , bestScore = bestScore
-    , seed = seed
-    }
+initialGame : Seed -> Game
+initialGame seed =
+  { time = 0
+  , keysDown = []
+  , currentScore = 0
+  , player = initPlayer
+  , cloud = initCloud
+  , scores = []
+  , seed = seed
+  }
diff --git a/src/Model/Player.elm b/src/Model/Player.elm
index c6aac21..a9f3f00 100644
--- a/src/Model/Player.elm
+++ b/src/Model/Player.elm
@@ -1,11 +1,12 @@
 module Model.Player
   ( Player
+  , initPlayer
   , playerSize
   , playerSpeed
   ) where
 
 import Model.Vec2 (..)
-import Model.Config (Config)
+import Model.Config (..)
 
 type alias Player =
   { pos : Vec2
@@ -13,6 +14,13 @@ type alias Player =
   , config : Config
   }
 
+initPlayer : Player
+initPlayer =
+  { pos = originVec
+  , speed = originVec
+  , config = White
+  }
+
 playerSize : Float
 playerSize = 15
 
diff --git a/src/Update/CloudUpdate.elm b/src/Update/CloudUpdate.elm
index 86f7e13..ce45beb 100644
--- a/src/Update/CloudUpdate.elm
+++ b/src/Update/CloudUpdate.elm
@@ -64,7 +64,7 @@ getNewPoint time seed =
         , initDest = initDest
         , move initTime initPos initDest time =
             let delta = time - initTime
-                move = getWaveMove (pointSpeed delta) (initDest `sub` initPos) 10 10
+                move = getMove (pointSpeed delta) (initDest `sub` initPos)
             in  initPos `add` move
         }
       , seed''
diff --git a/src/Update/Update.elm b/src/Update/Update.elm
index 0187dcf..ef85670 100644
--- a/src/Update/Update.elm
+++ b/src/Update/Update.elm
@@ -5,6 +5,7 @@ module Update.Update
 import List
 import Keyboard (KeyCode)
 import Char (fromCode, toCode)
+import Maybe
 
 import Model.Player (..)
 import Model.Point (pointSpeed, pointMove, pointAwayDist)
@@ -21,23 +22,29 @@ import Update.CloudUpdate (cloudUpdate)
 import Input (Input)
 
 update : Input -> Game -> Game
-update {dir, inputKeysDown, delta} {time, keysDown, score, player, cloud, bestScore, seed} =
-  let hostilePoints = cloud.points (otherConfig player.config)
-  in  if(playerPointsCollision time player hostilePoints) then
-        let newBestScore = if(score > bestScore) then score else bestScore
-        in  initialGame seed player.pos player.config newBestScore
-      else
-        let newTime = time + delta
-            newPlayer = playerStep delta dir (newKeyCode keysDown inputKeysDown) player
-            (newCloud, addScore, newSeed) = cloudUpdate time seed newPlayer cloud
-        in  { time = newTime
-            , keysDown = inputKeysDown
-            , score = score + addScore
-            , player = newPlayer
-            , cloud = newCloud
-            , bestScore = bestScore
-            , seed = newSeed
-            }
+update input game =
+  let hostilePoints = game.cloud.points (otherConfig game.player.config)
+  in  if(playerPointsCollision game.time game.player hostilePoints)
+        then
+          { game
+          | time <- 0
+          , currentScore <- 0
+          , cloud <- initCloud
+          , scores <- game.currentScore :: game.scores
+          }
+        else
+          let newTime = game.time + input.delta
+              newPlayer = playerStep input.delta input.dir (newKeyCode game.keysDown input.inputKeysDown) game.player
+              (newCloud, addScore, newSeed) = cloudUpdate game.time game.seed newPlayer game.cloud
+          in
+              { game
+              | time <- newTime
+              , keysDown <- input.inputKeysDown
+              , currentScore <- game.currentScore + addScore
+              , player <- newPlayer
+              , cloud <- newCloud
+              , seed <- newSeed
+              }
 
 playerStep : Float -> Vec2 -> (KeyCode -> Bool) -> Player -> Player
 playerStep dt dir newKey player =
diff --git a/src/View/Game.elm b/src/View/Game.elm
index 25b519c..8e76b48 100644
--- a/src/View/Game.elm
+++ b/src/View/Game.elm
@@ -18,15 +18,15 @@ import Model.Board (boardSize)
 import Model.Config (..)
 
 gameView : Game -> Element
-gameView {time, score, player, cloud, bestScore} =
-  let whitePointForms = List.map (pointForm time (configColor White)) (cloud.points White)
-      blackPointForms = List.map (pointForm time (configColor Black)) (cloud.points Black)
-      forms = boardForms
-              ++ playerForms player
-              ++ whitePointForms
-              ++ blackPointForms
-              ++ scoreForms score
-              ++ bestScoreForms bestScore
+gameView game =
+  let whitePointForms = List.map (pointForm game.time (configColor White)) (game.cloud.points White)
+      blackPointForms = List.map (pointForm game.time (configColor Black)) (game.cloud.points Black)
+      forms =
+        boardForms
+        ++ playerForms game.player
+        ++ whitePointForms
+        ++ blackPointForms
+        ++ scoreForms game.currentScore
   in  collage (truncate boardSize.x) (truncate boardSize.y) forms
 
 boardForms : List Form
@@ -72,17 +72,6 @@ scoreForms score =
       scorePos = { x = 0.0, y = boardSize.y / 2 - 30 }
   in  [textForm text scorePos centered]
 
-bestScoreForms : Int -> List Form
-bestScoreForms bestScore =
-  if(bestScore > 0) then
-    let text = "Record: " ++ (toString bestScore)
-        pos =
-          { x = -boardSize.x / 2 + 100
-          , y = -boardSize.y / 2 + 30
-          }
-    in  [textForm text pos leftAligned]
-  else []
-
 textForm : String -> Vec2 -> (Text -> Element) -> Form
 textForm content pos alignment =
   let textElement = fromString content
diff --git a/src/View/Page.elm b/src/View/Page.elm
index 6d6c54d..4dd54b5 100644
--- a/src/View/Page.elm
+++ b/src/View/Page.elm
@@ -20,13 +20,22 @@ pageView game =
     [ h1 [] [ text "cAtchVoid" ]
     , div
         [ id "game" ]
-        [ fromElement << gameView <| game ]
+        [ fromElement <| gameView game ]
     , p
         []
         [ text "Catch the points of your color, avoid the other points." ]
     , p
         []
         [ text "Use the arrow keys to move and 'e' to change your color." ]
+    , ( if List.isEmpty game.scores
+          then
+            div [ class "bestScore" ] []
+          else
+            let bestScore = List.maximum game.scores
+            in  p
+                  [ class "bestScore isDefined" ]
+                  [ text <| "Best score: " ++ (toString bestScore) ]
+      )
     , a
         [ href "https://github.com/guyonvarch/catchvoid" ]
         [ img
diff --git a/style.css b/style.css
index a32951d..6499535 100644
--- a/style.css
+++ b/style.css
@@ -11,9 +11,9 @@ h1 {
   color: white;
   margin: 0;
   font-size: 36px;
-  padding-top: 30px;
-  padding-bottom: 30px;
   text-align: center;
+  line-height: 100px;
+  height: 100px;
 }
 
 #game {
@@ -32,3 +32,38 @@ p {
   font-style: italic;
   font-size: 17px;
 }
+
+.bestScore {
+  position: absolute;
+  top: 100px;
+  left: 0px;
+  padding: 0 20px;
+  background-color: #222222;
+  color: rgba(0, 0, 0, 0);
+  height: 0px;
+  line-height: 0px;
+  margin: 0;
+}
+
+.isDefined {
+  animation: reveal 1s ease;
+  height: 50px;
+  line-height: 50px;
+  color: white;
+}
+
+@keyframes reveal {
+  0% {
+    height: 0px;
+    line-height: 0px;
+    color: rgba(0, 0, 0, 0);
+  }
+  30% {
+    color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    height: 50px;
+    line-height: 50px;
+    color: white;
+  }
+}