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
|
module Display where
import List
import Graphics.Collage (..)
import Graphics.Element (Element)
import Color (..)
import Text (..)
import Text
import Html (..)
import Html.Attributes (..)
import Html.Attributes as A
import Json.Encode (string)
import Vec2 (Vec2)
import Player (..)
import Game (Game)
import Point (..)
import Board (boardSize)
import Config (..)
display : Game -> Html
display game =
div
[]
[ h1 [] [ text "cAtchVoid" ]
, div
[ id "game" ]
[ fromElement << displayGame <| game ]
, p
[]
[ text "Catch the points of your color, avoid the other points." ]
, p
[]
[ text "Use the arrow keys to move and 'e' to change your color." ]
, a
[ href "https://github.com/guyonvarch/catchvoid" ]
[ img
[ A.style
[ ("position", "absolute")
, ("top", "0")
, ("right", "0")
, ("border", "0")
]
, src "https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
, alt "Fork me on GitHub"
, property "data-canonical-src" (string "https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png")
]
[]
]
]
displayGame : Game -> Element
displayGame {time, score, player, cloud, bestScore} =
let whitePointForms = List.map (pointForm time (configColor White)) (cloud.points White)
blackPointForms = List.map (pointForm time (configColor Black)) (cloud.points Black)
forms = boardForms
++ playerForms player
++ whitePointForms
++ blackPointForms
++ scoreForms score
++ bestScoreForms bestScore
in collage (truncate boardSize.x) (truncate boardSize.y) forms
boardForms : List Form
boardForms = [filled boardColor (rect boardSize.x boardSize.y)]
boardColor : Color
boardColor = rgb 103 123 244
playerForms : Player -> List Form
playerForms 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
in circleForm pos pointSize color
configColor : Config -> Color
configColor config =
case config of
White -> rgb 240 240 240
Black -> rgb 14 17 33
circleForm : Vec2 -> Float -> Color -> Form
circleForm pos size color =
let outline = circle size
|> filled outlineColor
inside = circle (size - 1)
|> filled color
in group [outline, inside]
|> move (pos.x, pos.y)
outlineColor : Color
outlineColor = rgb 34 34 34
scoreForms : Int -> List Form
scoreForms score =
let text = (toString score)
scorePos = { x = 0.0, y = boardSize.y / 2 - 30 }
in [textForm text scorePos centered]
bestScoreForms : Int -> List Form
bestScoreForms bestScore =
if(bestScore > 0) then
let text = "Record: " ++ (toString bestScore)
pos =
{ x = -boardSize.x / 2 + 100
, y = -boardSize.y / 2 + 30
}
in [textForm text pos leftAligned]
else []
textForm : String -> Vec2 -> (Text -> Element) -> Form
textForm content pos alignment =
let textElement = fromString content
|> Text.height 30
|> typeface ["calibri", "arial"]
|> Text.color textColor
|> bold
|> alignment
in textElement
|> toForm
|> move (pos.x, pos.y)
textColor : Color
textColor = rgb 14 17 33
|
