aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--elm-package.json3
-rw-r--r--package.json2
-rw-r--r--src/View/Game.elm106
-rw-r--r--src/View/Page.elm5
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." ]