From 6a69c596d8cc2c8b7ac1f763cf63e5e3a0e260e9 Mon Sep 17 00:00:00 2001 From: Joris Date: Fri, 13 Nov 2015 22:09:10 +0100 Subject: Display the game with svg --- src/View/Game.elm | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 103 insertions(+), 3 deletions(-) (limited to 'src/View/Game.elm') diff --git a/src/View/Game.elm b/src/View/Game.elm index ab9eee4..5af59bd 100644 --- a/src/View/Game.elm +++ b/src/View/Game.elm @@ -1,5 +1,6 @@ module View.Game ( gameView + , render ) where import List @@ -20,6 +21,16 @@ import Model.Round exposing (..) import View.Round exposing (roundView) + + + + + + +import Html exposing (Html) +import Svg +import Svg.Attributes + gameView : Game -> Element gameView game = let pointsForm color = @@ -46,9 +57,6 @@ playerForm 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 @@ -101,3 +109,95 @@ textForm pos content = textColor : Color textColor = rgb 14 17 33 + + + + + +render : Game -> Html +render game = + let renderPoints config = List.map (renderPoint game.time config) (game.cloud.points config) + in Svg.svg + [ Svg.Attributes.width ((toString game.boardSize.x) ++ "px") + , Svg.Attributes.height ((toString game.boardSize.y) ++ "px") + ] + ( [ renderBoard + , renderPlayer game.player + ] + ++ (renderPoints White) + ++ (renderPoints Black) + ++ [renderScore game.boardSize game.time game.rounds game.currentScore] + ) + +renderBoard : Svg.Svg +renderBoard = + Svg.rect + [ Svg.Attributes.width "100%" + , Svg.Attributes.height "100%" + , Svg.Attributes.fill "#677BF4" + ] + [] + +renderPlayer : Player -> Svg.Svg +renderPlayer player = + renderCircle player.pos playerSize (playerColor player.config) + +playerColor : Config -> String +playerColor config = + case config of + White -> "#F0F0F0" + Black -> "#0E1121" + +renderPoint : Float -> Config -> Point -> Svg.Svg +renderPoint time config point = + let pos = pointMove point time + in renderCircle pos pointSize (playerColor config) + +pointColor : Config -> String +pointColor config = + case config of + White -> "white" + Black -> "black" + +renderCircle : Vec2 -> Float -> String -> Svg.Svg +renderCircle pos size color = + Svg.circle + [ Svg.Attributes.cx (toString (pos.x + 250)) + , Svg.Attributes.cy (toString (-1 * pos.y + 250)) + , Svg.Attributes.r (toString size) + , Svg.Attributes.fill color + , Svg.Attributes.stroke "#222222" + , Svg.Attributes.strokeWidth "1" + ] + [] + +renderScore : Vec2 -> Time -> List Round -> Int -> Svg.Svg +renderScore boardSize currentRoundTime rounds score = + let scorePos = + { x = 0.0 + , y = boardSize.y / 2 - 35 + } + in if currentRoundTime < 5000 + then + case List.head rounds of + Just round -> + renderText scorePos (roundView round) + Nothing -> + renderText scorePos (toString score) + else + renderText scorePos (toString score) + +renderText : Vec2 -> String -> Svg.Svg +renderText pos content = + Svg.text' + [ Svg.Attributes.x (toString (250 + pos.x)) + , Svg.Attributes.y (toString (-1 * pos.y + 250)) + , Svg.Attributes.fontFamily "calibri" + , Svg.Attributes.fontSize "24" + , Svg.Attributes.color "#0E1121" + , Svg.Attributes.fontWeight "bold" + ] + [ Svg.tspan + [ Svg.Attributes.textAnchor "middle" ] + [ Svg.text content ] + ] -- cgit v1.2.3