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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
module View.Game
( renderGame
) 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 Model.Level exposing (..)
import Model.Color exposing (htmlOutput)
import View.Round exposing (roundView)
renderGame : Game -> Html
renderGame game =
let renderPoints config = List.map (renderPoint game.boardSize game.elapsedTime config) (game.cloud.points config)
in svg
[ width "100%"
, height "100%"
, Svg.Attributes.style ("background-color: " ++ backgroundColor ++ ";")
, viewBox ("0 0 " ++ (toString game.boardSize.x) ++ " " ++ (toString (game.boardSize.y + headerHeight)))
]
[ renderBoard game.currentScore
, renderPlayer game.boardSize game.player (getPlayerSize game.currentScore)
, g [] (renderPoints White)
, g [] (renderPoints Black)
, renderScore game.boardSize game.elapsedTime game.rounds game.currentScore
, hideNewPoints game.boardSize
, renderHeader game
]
headerHeight : Float
headerHeight = 115
renderHeader : Game -> Svg
renderHeader game =
g
[]
[ rect
[ width "100%"
, height (toString headerHeight)
, fill "#1B203F"
]
[]
, text'
[ x "10"
, y "45"
, fontSize "36"
, fill "white"
, fontWeight "bold"
]
[ text "cAtchVoid" ]
, text'
[ fill "white"
, fontSize "12"
, fontStyle "italic"
]
[ tspan
[ x (toString (game.boardSize.x / 2))
, y "75"
, textAnchor "middle"
]
[ text "Catch the points of your color, avoid the other points." ]
, tspan
[ x (toString (game.boardSize.x / 2))
, y "92"
, textAnchor "middle"
]
[ text "Use the arrow keys to move and 'e' to change your color." ]
]
, ( case maybeBestRound game.rounds of
Nothing ->
text ""
Just bestRound ->
text'
[ fill "yellow"
, x "355"
, y "38"
, fontSize "13"
]
[ tspan
[ textAnchor "middle" ]
[ text ("Top: " ++ roundView bestRound) ]
]
)
]
backgroundColor : String
backgroundColor = "#1B203F"
renderBoard : Int -> Svg
renderBoard currentScore =
rect
[ y (toString headerHeight)
, width "100%"
, height "100%"
, fill (htmlOutput (progressiveColor currentScore))
]
[]
renderPlayer : Vec2 -> Player -> Float -> Svg
renderPlayer boardSize player playerSize =
renderCircle boardSize player.pos playerSize (playerColor player.config)
playerColor : Config -> String
playerColor config =
case config of
White -> "#F0F0F0"
Black -> "#0E1121"
renderPoint : Vec2 -> Float -> Config -> Point -> Svg
renderPoint boardSize elapsedTime config point =
let pos = pointMove point elapsedTime
in renderCircle boardSize pos pointSize (playerColor config)
pointColor : Config -> String
pointColor config =
case config of
White -> "white"
Black -> "black"
renderCircle : Vec2 -> Vec2 -> Float -> String -> Svg
renderCircle boardSize pos size color =
circle
[ cx (toString (pos.x + boardSize.x / 2))
, cy (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
, r (toString size)
, fill color
]
[]
renderScore : Vec2 -> Time -> List Round -> Int -> Svg
renderScore boardSize elapsedTime rounds score =
let scorePos =
{ x = 0.0
, y = boardSize.y / 2 - 35
}
scoreText = "L" ++ (toString << currentLevelNumber <| score) ++ " - " ++ (toString score)
in if elapsedTime < 5000
then
case List.head rounds of
Just round ->
renderText boardSize scorePos (roundView round)
Nothing ->
renderText boardSize scorePos scoreText
else
renderText boardSize scorePos scoreText
renderText : Vec2 -> Vec2 -> String -> Svg
renderText boardSize pos content =
text'
[ x (toString (pos.x + boardSize.x / 2))
, y (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
, fontFamily "calibri"
, fontSize "24"
, color "#0E1121"
, fontWeight "bold"
]
[ tspan
[ textAnchor "middle" ]
[ text content ]
]
hideNewPoints : Vec2 -> Svg
hideNewPoints boardSize =
let size =
(pointAwayDist boardSize) + pointSize - (Basics.max boardSize.x boardSize.y) / 2
|> toString
in g
[]
[ rect
[ x ("-" ++ size)
, width size
, height "100%"
, fill backgroundColor
]
[]
, rect
[ x (toString boardSize.x)
, width size
, height "100%"
, fill backgroundColor
]
[]
, rect
[ y ("-" ++ size)
, width "100%"
, height size
, fill backgroundColor
]
[]
, rect
[ y (toString (boardSize.y + headerHeight))
, width "100%"
, height size
, fill backgroundColor
]
[]
]
|
