1 files changed, 208 insertions, 0 deletions
diff --git a/src/View.elm b/src/View.elm
new file mode 100644
index 0000000..822c2d2
--- /dev/null
+++ b/src/View.elm
@@ -0,0 +1,208 @@
+module View exposing
+  ( view
+  )
+
+import Html exposing (Html)
+import Svg exposing (..)
+import Svg.Attributes exposing (..)
+import List
+
+import Time exposing (Time)
+
+import Model exposing (Model)
+import Model.Vec2 exposing (Vec2)
+import Model.Player exposing (..)
+import Model.Point exposing (..)
+import Model.Config exposing (..)
+import Model.Round exposing (..)
+import Model.Level exposing (..)
+import Model.Color exposing (htmlOutput)
+
+import View.Round exposing (roundView)
+
+view : Model -> Html msg
+view model =
+  let renderPoints config = List.map (renderPoint model.boardSize model.elapsedTime config) (model.cloud.points config)
+  in  svg
+        [ width "100%"
+        , height "100%"
+        , Svg.Attributes.style ("background-color: " ++ backgroundColor ++ ";")
+        , viewBox ("0 0 " ++ (toString model.boardSize.x) ++ " " ++ (toString (model.boardSize.y + headerHeight)))
+        ]
+        [ renderBoard model.currentScore
+        , renderPlayer model.boardSize model.player (getPlayerSize model.currentScore)
+        , g [] (renderPoints White)
+        , g [] (renderPoints Black)
+        , renderScore model.boardSize model.elapsedTime model.rounds model.currentScore
+        , hideNewPoints model.boardSize
+        , renderHeader model
+        ]
+
+headerHeight : Float
+headerHeight = 115
+
+renderHeader : Model -> Svg msg
+renderHeader model =
+  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 (model.boardSize.x / 2))
+            , y "75"
+            , textAnchor "middle"
+            ]
+            [ text "Catch the points of your color, avoid the other points." ]
+        , tspan
+            [ x (toString (model.boardSize.x / 2))
+            , y "92"
+            , textAnchor "middle"
+            ]
+            [ text "Use the arrow keys to move and 'e' to change your color." ]
+        ]
+    , ( case maybeBestRound model.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 : Int -> Svg msg
+renderBoard currentScore =
+  rect
+    [ y (toString headerHeight)
+    , width "100%"
+    , height "100%"
+    , fill (htmlOutput (progressiveColor currentScore))
+    ]
+    []
+
+renderPlayer : Vec2 -> Player -> Float -> Svg msg
+renderPlayer boardSize player playerSize =
+  renderCircle boardSize player.pos playerSize (playerColor player.config)
+
+playerColor : Config -> String
+playerColor config =
+  case config of
+    White -> "#F0F0F0"
+    Black -> "#0E1121"
+
+renderPoint : Vec2 -> Float -> Config -> Point -> Svg msg
+renderPoint boardSize elapsedTime config point =
+  let pos = pointMove point elapsedTime
+  in  renderCircle boardSize pos pointSize (playerColor config)
+
+pointColor : Config -> String
+pointColor config =
+  case config of
+    White -> "white"
+    Black -> "black"
+
+renderCircle : Vec2 -> Vec2 -> Float -> String -> Svg msg
+renderCircle boardSize pos size color =
+  circle
+    [ cx (toString (pos.x + boardSize.x / 2))
+    , cy (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
+    , r (toString size)
+    , fill color
+    ]
+    []
+
+renderScore : Vec2 -> Time -> List Round -> Int -> Svg msg
+renderScore boardSize elapsedTime rounds score =
+  let scorePos =
+        { x = 0.0
+        , y = boardSize.y / 2 - 35
+        }
+      scoreText = "L" ++ (toString << currentLevelNumber <| score) ++ " - " ++ (toString score)
+  in  if elapsedTime < 5000
+        then
+          case List.head rounds of
+            Just round ->
+              renderText boardSize scorePos (roundView round)
+            Nothing ->
+              renderText boardSize scorePos scoreText
+        else
+          renderText boardSize scorePos scoreText
+
+renderText : Vec2 -> Vec2 -> String -> Svg msg
+renderText boardSize pos content =
+  text'
+    [ x (toString (pos.x + boardSize.x / 2))
+    , y (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
+    , fontFamily "calibri"
+    , fontSize "24"
+    , color "#0E1121"
+    , fontWeight "bold"
+    ]
+    [ tspan
+        [ textAnchor "middle" ]
+        [ text content ]
+    ]
+
+hideNewPoints : Vec2 -> Svg msg
+hideNewPoints boardSize =
+  let size =
+        (pointAwayDist 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
+            ]
+            []
+        ]