1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
module View.Game
( render
) where
import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import List
import Time exposing (Time)
import Model.Vec2 exposing (Vec2)
import Model.Player exposing (..)
import Model.Game exposing (Game)
import Model.Point exposing (..)
import Model.Config exposing (..)
import Model.Round exposing (..)
import View.Round exposing (roundView)
render : Game -> Html
render game =
let renderPoints config = List.map (renderPoint game.time config) (game.cloud.points config)
in svg
[ width (toString game.boardSize.x)
, height (toString game.boardSize.y)
]
[ renderBoard
, renderPlayer game.player
, g [] (renderPoints White)
, g [] (renderPoints Black)
, renderScore game.boardSize game.time game.rounds game.currentScore
]
renderBoard : Svg
renderBoard =
rect
[ width "100%"
, height "100%"
, fill "#677BF4"
]
[]
renderPlayer : Player -> 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
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
renderCircle pos size color =
circle
[ cx (toString (pos.x + 250))
, cy (toString (-1 * pos.y + 250))
, r (toString size)
, fill color
, stroke "#222222"
, strokeWidth "1"
]
[]
renderScore : Vec2 -> Time -> List Round -> Int -> 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
renderText pos content =
text'
[ x (toString (250 + pos.x))
, y (toString (-1 * pos.y + 250))
, fontFamily "calibri"
, fontSize "24"
, color "#0E1121"
, fontWeight "bold"
]
[ tspan
[ textAnchor "middle" ]
[ text content ]
]
|
