@@ -37,6 +37,9 @@ type alias Model =
3737 , characterPositionY : Int
3838 , itemPositionX : Int
3939 , itemPositionY : Int
40+ , itemsCollected : Int
41+ , playerScore : Int
42+ , timeRemaining : Int
4043 }
4144
4245
@@ -47,6 +50,9 @@ initialModel =
4750 , characterPositionY = 300
4851 , itemPositionX = 500
4952 , itemPositionY = 300
53+ , itemsCollected = 0
54+ , playerScore = 0
55+ , timeRemaining = 0
5056 }
5157
5258
@@ -158,9 +164,16 @@ viewGame model =
158164 , viewGameGround
159165 , viewCharacter model
160166 , viewItem model
167+ , viewGameScore model
168+ , viewItemsCollected model
169+ , viewGameTime model
161170 ]
162171
163172
173+ 174+ -- GAME WINDOW
175+ 176+ 164177viewGameWindow : Svg Msg
165178viewGameWindow =
166179 rect
@@ -197,6 +210,71 @@ viewGameGround =
197210
198211
199212
213+ -- DISPLAY GAME DATA
214+ 215+ 216+ viewGameText : Int -> Int -> String -> Svg Msg
217+ viewGameText positionX positionY str =
218+ Svg . text_
219+ [ x ( String . fromInt positionX)
220+ , y ( String . fromInt positionY)
221+ , fontFamily " Courier"
222+ , fontWeight " bold"
223+ , fontSize " 16"
224+ ]
225+ [ Svg . text str ]
226+ 227+ 228+ viewGameScore : Model -> Svg Msg
229+ viewGameScore model =
230+ let
231+ currentScore =
232+ model. playerScore
233+ |> String . fromInt
234+ |> String . padLeft 5 ' 0'
235+ in
236+ Svg . svg []
237+ [ viewGameText 25 25 " SCORE"
238+ , viewGameText 25 40 currentScore
239+ ]
240+ 241+ 242+ viewItemsCollected : Model -> Svg Msg
243+ viewItemsCollected model =
244+ let
245+ currentItemCount =
246+ model. itemsCollected
247+ |> String . fromInt
248+ |> String . padLeft 3 ' 0'
249+ in
250+ Svg . svg []
251+ [ image
252+ [ xlinkHref " /images/coin.svg"
253+ , x " 275"
254+ , y " 18"
255+ , width " 15"
256+ , height " 15"
257+ ]
258+ []
259+ , viewGameText 300 30 ( " x " ++ currentItemCount)
260+ ]
261+ 262+ 263+ viewGameTime : Model -> Svg Msg
264+ viewGameTime model =
265+ let
266+ currentTime =
267+ model. timeRemaining
268+ |> String . fromInt
269+ |> String . padLeft 4 ' 0'
270+ in
271+ Svg . svg []
272+ [ viewGameText 525 25 " TIME"
273+ , viewGameText 525 40 currentTime
274+ ]
275+ 276+ 277+ 200278-- CHARACTER
201279
202280
0 commit comments