Display the game at fullscreen

6 files changed, 139 insertions, 164 deletions

diff --git a/src/Main.elm b/src/Main.elm
index 8083e97..f141fcc 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -13,10 +13,10 @@ import Update.Update exposing (update)
 
 import Input exposing (getInput)
 
-import View.Page exposing (pageView)
+import View.Game exposing (renderGame)
 
 main : Signal Html
-main = Signal.map pageView game
+main = Signal.map renderGame game
 
 game : Signal Game
 game =
diff --git a/src/Model/Point.elm b/src/Model/Point.elm
index 9084c1b..a465e40 100644
--- a/src/Model/Point.elm
+++ b/src/Model/Point.elm
@@ -4,7 +4,6 @@ module Model.Point
   , pointSize
   , pointSpeed
   , pointSpawnDist
-  , pointAwayDist
   ) where
 
 import Model.Vec2 exposing (..)
@@ -28,7 +27,4 @@ pointSpeed : Float -> Float
 pointSpeed dt = dt / 20
 
 pointSpawnDist : Vec2 -> Float
-pointSpawnDist boardSize = (boardDiagonal boardSize) * 3 / 5
-
-pointAwayDist : Vec2 -> Float
-pointAwayDist boardSize = (boardDiagonal boardSize) * 3 / 4
+pointSpawnDist boardSize = (boardDiagonal boardSize) * 2.5 / 5 + pointSize
diff --git a/src/Update/CloudUpdate.elm b/src/Update/CloudUpdate.elm
index ecbce8b..f509a5f 100644
--- a/src/Update/CloudUpdate.elm
+++ b/src/Update/CloudUpdate.elm
@@ -51,10 +51,9 @@ cloudUpdate time boardSize seed player {points, spawn, lastSpawn} =
 
 presentPoints : Float -> Vec2 -> List Point -> List Point
 presentPoints time boardSize points =
-  let isPresent point = (distance (pointMove point time) originVec) < (pointAwayDist boardSize)
+  let isPresent point = (distance (pointMove point time) originVec) < (pointSpawnDist boardSize)
   in  List.filter isPresent points
 
-
 getNewPoint : Float -> Vec2 -> Seed -> (Point, Seed)
 getNewPoint time boardSize seed =
   let (initPos, seed') = pointInitPos boardSize seed
@@ -74,7 +73,7 @@ pointInitPos : Vec2 -> Seed -> (Vec2, Seed)
 pointInitPos boardSize seed =
   let (rand, seed') = generate floatGen seed
       angle = rand * (degrees 360)
-      dist = (boardDiagonal boardSize) * 3 / 5
+      dist = pointSpawnDist boardSize
   in  (polarToCartesian angle dist, seed')
 
 pointDestination : Vec2 -> Seed -> (Vec2, Seed)
diff --git a/src/View/Game.elm b/src/View/Game.elm
index abe7a15..af7c8de 100644
--- a/src/View/Game.elm
+++ b/src/View/Game.elm
@@ -1,5 +1,5 @@
 module View.Game
-  ( render
+  ( renderGame
   ) where
 
 import Html exposing (Html)
@@ -18,32 +18,96 @@ import Model.Round exposing (..)
 
 import View.Round exposing (roundView)
 
-render : Game -> Html
-render game =
-  let renderPoints config = List.map (renderPoint game.time config) (game.cloud.points config)
+renderGame : Game -> Html
+renderGame game =
+  let renderPoints config = List.map (renderPoint game.boardSize game.time config) (game.cloud.points config)
   in  svg
-        [ width (toString game.boardSize.x)
-        , height (toString game.boardSize.y)
+        [ width "100%"
+        , height "100%"
+        , Svg.Attributes.style ("background-color: " ++ backgroundColor ++ ";")
+        , viewBox ("0 0 " ++ (toString game.boardSize.x) ++ " " ++ (toString (game.boardSize.y + headerHeight)))
         ]
         [ renderBoard
-        , renderPlayer game.player
+        , renderPlayer game.boardSize game.player
         , g [] (renderPoints White)
         , g [] (renderPoints Black)
         , renderScore game.boardSize game.time game.rounds game.currentScore
+        , hideNewPoints game.boardSize
+        , renderHeader game
         ]
 
+headerHeight : Float
+headerHeight = 115
+
+renderHeader : Game -> Svg
+renderHeader game =
+  g
+    []
+    [ rect
+        [ width "100%"
+        , height (toString headerHeight)
+        , fill "#1B203F"
+        ]
+        []
+    , text'
+        [ x "10"
+        , y "45"
+        , fontSize "36"
+        , fill "white"
+        , fontWeight "bold"
+        ]
+        [ text "cAtchVoid" ]
+    , text'
+        [ fill "white"
+        , fontSize "12"
+        , fontStyle "italic"
+        ]
+        [ tspan
+            [ x (toString (game.boardSize.x / 2))
+            , y "75"
+            , textAnchor "middle"
+            ]
+            [ text "Catch the points of your color, avoid the other points." ]
+        , tspan
+            [ x (toString (game.boardSize.x / 2))
+            , y "92"
+            , textAnchor "middle"
+            ]
+            [ text "Use the arrow keys to move and 'e' to change your color." ]
+        ]
+    , ( case maybeBestRound game.rounds of
+          Nothing ->
+            text ""
+          Just bestRound ->
+            text'
+              [ fill "yellow"
+              , x "355"
+              , y "38"
+              , fontSize "13"
+              ]
+              [ tspan
+                  [ textAnchor "middle" ]
+                  [ text ("Top: " ++ roundView bestRound) ]
+              ]
+      )
+    ]
+
+backgroundColor : String
+backgroundColor = "#1B203F"
+
 renderBoard : Svg
 renderBoard =
   rect
-    [ width "100%"
+    [ y (toString headerHeight)
+    , width "100%"
     , height "100%"
     , fill "#677BF4"
     ]
     []
 
-renderPlayer : Player -> Svg
-renderPlayer player =
-  renderCircle player.pos playerSize (playerColor player.config)
+renderPlayer : Vec2 -> Player -> Svg
+renderPlayer boardSize player =
+  renderCircle boardSize player.pos playerSize (playerColor player.config)
 
 playerColor : Config -> String
 playerColor config =
@@ -51,10 +115,10 @@ playerColor config =
     White -> "#F0F0F0"
     Black -> "#0E1121"
 
-renderPoint : Float -> Config -> Point -> Svg
-renderPoint time config point =
+renderPoint : Vec2 -> Float -> Config -> Point -> Svg
+renderPoint boardSize time config point =
   let pos = pointMove point time
-  in  renderCircle pos pointSize (playerColor config)
+  in  renderCircle boardSize pos pointSize (playerColor config)
 
 pointColor : Config -> String
 pointColor config =
@@ -62,15 +126,13 @@ pointColor config =
     White -> "white"
     Black -> "black"
 
-renderCircle : Vec2 -> Float -> String -> Svg
-renderCircle pos size color =
+renderCircle : Vec2 -> Vec2 -> Float -> String -> Svg
+renderCircle boardSize pos size color =
   circle
-    [ cx (toString (pos.x + 250))
-    , cy (toString (-1 * pos.y + 250))
+    [ cx (toString (pos.x + boardSize.x / 2))
+    , cy (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
     , r (toString size)
     , fill color
-    , stroke "#222222"
-    , strokeWidth "1"
     ]
     []
 
@@ -84,17 +146,17 @@ renderScore boardSize currentRoundTime rounds score =
         then
           case List.head rounds of
             Just round ->
-              renderText scorePos (roundView round)
+              renderText boardSize scorePos (roundView round)
             Nothing ->
-              renderText scorePos (toString score)
+              renderText boardSize scorePos (toString score)
         else
-          renderText scorePos (toString score)
+          renderText boardSize scorePos (toString score)
 
-renderText : Vec2 -> String -> Svg
-renderText pos content =
+renderText : Vec2 -> Vec2 -> String -> Svg
+renderText boardSize pos content =
   text'
-    [ x (toString (250 + pos.x))
-    , y (toString (-1 * pos.y + 250))
+    [ x (toString (pos.x + boardSize.x / 2))
+    , y (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
     , fontFamily "calibri"
     , fontSize "24"
     , color "#0E1121"
@@ -104,3 +166,40 @@ renderText pos content =
         [ textAnchor "middle" ]
         [ text content ]
     ]
+
+hideNewPoints : Vec2 -> Svg
+hideNewPoints boardSize =
+  let size =
+        (pointSpawnDist boardSize) + pointSize - (Basics.max boardSize.x boardSize.y) / 2
+          |> toString
+  in  g
+        []
+        [ rect
+            [ x ("-" ++ size)
+            , width size
+            , height "100%"
+            , fill backgroundColor
+            ]
+            []
+        , rect
+            [ x (toString boardSize.x)
+            , width size
+            , height "100%"
+            , fill backgroundColor
+            ]
+            []
+        , rect
+            [ y ("-" ++ size)
+            , width "100%"
+            , height size
+            , fill backgroundColor
+            ]
+            []
+        , rect
+            [ y (toString (boardSize.y + headerHeight))
+            , width "100%"
+            , height size
+            , fill backgroundColor
+            ]
+            []
+        ]
diff --git a/src/View/Page.elm b/src/View/Page.elm
deleted file mode 100644
index a4e0ba0..0000000
--- a/src/View/Page.elm
+++ /dev/null
@@ -1,59 +0,0 @@
-module View.Page
-  ( pageView
-  ) where
-
-import List
-import String exposing (append)
-
-import Html exposing (..)
-import Html.Attributes exposing (..)
-import Html.Attributes as A
-import Json.Encode exposing (string)
-
-import Model.Game exposing (Game)
-import Model.Round exposing (..)
-
-import View.Game exposing (render)
-import View.Round exposing (roundView)
-
-pageView : Game -> Html
-pageView game =
-  div
-    []
-    [ h1 [] [ text "cAtchVoid" ]
-    , div
-        [ id "game" ]
-        [ render 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." ]
-    , ( case maybeBestRound game.rounds of
-          Nothing ->
-            div [ class "bestScore" ] []
-          Just bestRound ->
-             p
-               [ class "bestScore isDefined" ]
-               [ roundView bestRound
-                   |> append "Best score: "
-                   |> text
-               ]
-      )
-    , a
-        [ href "https://github.com/guyonvarch/catchvoid" ]
-        [ img
-            [ A.style
-                [ ("position", "absolute")
-                , ("top", "0")
-                , ("right", "0")
-                , ("border", "0")
-                ]
-            , src "https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
-            , alt "Fork me on GitHub"
-            , property "data-canonical-src" (string "https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png")
-            ]
-            []
-        ]
-    ]
diff --git a/style.css b/style.css
index 6499535..4281b43 100644
--- a/style.css
+++ b/style.css
@@ -1,69 +1,9 @@
-body {
-  margin: 0;
-  background-color: #05060c;
-  font-family: calibri;
-}
-
-h1 {
-  font-weight: bold;
-  background-color: #1b203f;
-  min-width: 500px;
-  color: white;
-  margin: 0;
-  font-size: 36px;
-  text-align: center;
-  line-height: 100px;
-  height: 100px;
-}
-
-#game {
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 40px;
-  border-top: 10px dashed #222222;
-  border-bottom: 10px dashed #222222;
-  width: 500px;
-  height: 500px;
-}
-
-p {
-  text-align: center;
-  color: #eeeeee;
-  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;
-  }
+body { margin: 0; }
+
+body > div {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }