Commit 44fa9fbf authored by Joris Guyonvarch's avatar Joris Guyonvarch

Decomposition of view into two files: page and game

parent 17a58e0c
......@@ -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 =
......
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
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment