Display the game with svg

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." ]