1 files changed, 134 insertions, 0 deletions
diff --git a/src/View/Page.elm b/src/View/Page.elm
new file mode 100644
index 0000000..ed0dceb
--- /dev/null
+++ b/src/View/Page.elm
@@ -0,0 +1,134 @@
+module View.Page
+  ( page
+  ) where
+
+import List
+
+import Graphics.Collage (..)
+import Graphics.Element (Element)
+import Color (..)
+import Text (..)
+import Text
+import Html (..)
+import Html.Attributes (..)
+import Html.Attributes as A
+import Json.Encode (string)
+
+import Model.Vec2 (Vec2)
+import Model.Player (..)
+import Model.Game (Game)
+import Model.Point (..)
+import Model.Board (boardSize)
+import Model.Config (..)
+
+page : Game -> Html
+page game =
+  div
+    []
+    [ h1 [] [ text "cAtchVoid" ]
+    , div
+        [ id "game" ]
+        [ fromElement << displayGame <| 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." ]
+    , 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")
+            ]
+            []
+        ]
+    ]
+
+displayGame : Game -> Element
+displayGame {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
+  in  collage (truncate boardSize.x) (truncate boardSize.y) forms
+
+boardForms : List Form
+boardForms = [filled boardColor (rect boardSize.x boardSize.y)]
+
+boardColor : Color
+boardColor = rgb 103 123 244
+
+playerForms : Player -> List Form
+playerForms player =
+  let playerColor = configColor player.config
+  in  [circleForm player.pos playerSize playerColor]
+
+playerColor : Color
+playerColor = rgb 224 224 224
+
+pointForm : Float -> Color -> Point -> Form
+pointForm time color point =
+  let pos = pointMove point time
+  in  circleForm pos pointSize color
+
+configColor : Config -> Color
+configColor config =
+  case config of
+    White -> rgb 240 240 240
+    Black -> rgb 14 17 33
+
+circleForm : Vec2 -> Float -> Color -> Form
+circleForm pos size color =
+  let outline = circle size
+        |> filled outlineColor
+      inside = circle (size - 1)
+        |> filled color
+  in  group [outline, inside]
+        |> move (pos.x, pos.y)
+
+outlineColor : Color
+outlineColor = rgb 34 34 34
+
+scoreForms : Int -> List Form
+scoreForms score =
+  let text = (toString 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
+        |> Text.height 30
+        |> typeface ["calibri", "arial"]
+        |> Text.color textColor
+        |> bold
+        |> alignment
+  in  textElement
+        |> toForm
+        |> move (pos.x, pos.y)
+
+textColor : Color
+textColor = rgb 14 17 33