From 44fa9fbfc212d4a3eaaf4a596930b56fd4105124 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Sat, 7 Mar 2015 15:15:18 +0100 Subject: Decomposition of view into two files: page and game --- src/Main.elm | 4 +-- src/View/Game.elm | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++++ src/View/Page.elm | 100 ++++-------------------------------------------------- 3 files changed, 107 insertions(+), 96 deletions(-) create mode 100644 src/View/Game.elm diff --git a/src/Main.elm b/src/Main.elm index 329492a..7c257b7 100644 --- a/src/Main.elm +++ b/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 = diff --git a/src/View/Game.elm b/src/View/Game.elm new file mode 100644 index 0000000..25b519c --- /dev/null +++ b/src/View/Game.elm @@ -0,0 +1,99 @@ +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 diff --git a/src/View/Page.elm b/src/View/Page.elm index ed0dceb..6d6c54d 100644 --- a/src/View/Page.elm +++ b/src/View/Page.elm @@ -1,34 +1,26 @@ 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 -- cgit v1.2.3