Decomposition of view into two files: page and game

src/Main.elm

@@ -13,10 +13,10 @@ import Update.Update (update)
 
 import Input (getInput)
 
-import View.Page (page)
+import View.Page (pageView)
 
 main : Signal Html
-main = Signal.map page game
+main = Signal.map pageView game
 
 game : Signal Game
 game =

src/View/Game.elm

+module View.Game
+  ( gameView
+  ) where
+
+import List
+
+import Graphics.Collage (..)
+import Graphics.Element (Element)
+import Color (..)
+import Text (..)
+import Text
+
+import Model.Vec2 (Vec2)
+import Model.Player (..)
+import Model.Game (Game)
+import Model.Point (..)
+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
+  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

src/View/Page.elm

 module View.Page
-  ( page
+  ( pageView
   ) 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 =
+import View.Game (gameView)
+
+pageView : Game -> Html
+pageView game =
   div
     []
     [ h1 [] [ text "cAtchVoid" ]
     , div
         [ id "game" ]
-        [ fromElement << displayGame <| game ]
+        [ fromElement << gameView <| game ]
     , p
         []
         [ text "Catch the points of your color, avoid the other points." ]
@@ -52,83 +44,3 @@ page game =
         ]
     ]
 
-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