diff options
| -rw-r--r-- | elm-package.json | 3 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/View/Game.elm | 106 | ||||
| -rw-r--r-- | src/View/Page.elm | 5 |
4 files changed, 109 insertions, 7 deletions
diff --git a/elm-package.json b/elm-package.json index 593ca68..839ed41 100644 --- a/elm-package.json +++ b/elm-package.json @@ -8,6 +8,7 @@ "elm-version": "0.15.1 <= v < 0.16.0", "dependencies": { "elm-lang/core": "2.1.0 <= v < 3.0.0", - "evancz/elm-html": "4.0.1 <= v < 5.0.0" + "evancz/elm-html": "4.0.1 <= v < 5.0.0", + "evancz/elm-svg": "2.0.0 <= v < 3.0.0" } } diff --git a/package.json b/package.json index afa017c..35d033a 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "start": "npm run watch", - "watch": "npm run launch-server && watch 'npm run build-client --silent' src", + "watch": "npm run launch-server & watch 'npm run build --silent' src", "build": "elm make src/Main.elm --output client.js", "launch-server": "npm run kill-server && http-server ./ -p 8080", 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 ] + ] diff --git a/src/View/Page.elm b/src/View/Page.elm index 3468019..54f5925 100644 --- a/src/View/Page.elm +++ b/src/View/Page.elm @@ -13,7 +13,7 @@ import Json.Encode exposing (string) import Model.Game exposing (Game) import Model.Round exposing (..) -import View.Game exposing (gameView) +import View.Game exposing (gameView, render) import View.Round exposing (roundView) pageView : Game -> Html @@ -23,7 +23,8 @@ pageView game = [ h1 [] [ text "cAtchVoid" ] , div [ id "game" ] - [ fromElement <| gameView game ] + -- [ fromElement <| render game ] + [ render game ] , p [] [ text "Catch the points of your color, avoid the other points." ] |