1
- module Main exposing (.. )
1
+ module Main exposing (main )
2
2
3
- import Color exposing (..)
3
+ import Browser
4
+ import Browser.Dom
5
+ import Browser.Events
4
6
import Collage exposing (..)
5
- import Date exposing (Date )
6
- import Element exposing (toHtml )
7
- import Html exposing (Html , program )
7
+ import Collage.Layout
8
+ import Collage.Render
9
+ import Color exposing (black , green , lightGreen , lightRed , lightYellow , red , yellow )
10
+ import Html exposing (Html )
8
11
import List exposing (filterMap )
9
12
import Platform.Cmd
10
13
import Platform.Sub
11
14
import Task
12
- import Time exposing (every , second )
13
- import Window exposing (Size )
15
+ import Time exposing (Posix )
14
16
15
17
16
18
type Msg
17
- = Resize Size
18
- | Tick Date
19
+ = Resize Float Float
20
+ | Tick Posix
21
+ | Here Time . Zone
19
22
20
23
21
24
type alias Model =
22
- ( ( Int , Int ) , Date )
25
+ { width : Float
26
+ , height : Float
27
+ , date : Posix
28
+ , zone : Time . Zone
29
+ }
23
30
24
31
25
- main : Program Never Model Msg
32
+ main : Program () Model Msg
26
33
main =
27
- program
28
- { init = init
34
+ Browser . element
35
+ { init = always init
29
36
, update = update
30
- , subscriptions = always <| subscriptions
37
+ , subscriptions = always subscriptions
31
38
, view = view
32
39
}
33
40
34
41
35
42
init : ( Model , Cmd Msg )
36
43
init =
37
- ( ( ( 0 , 0 ) , Date . fromTime 0 )
44
+ ( { width = 100
45
+ , height = 100
46
+ , date = Time . millisToPosix 0
47
+ , zone = Time . utc
48
+ }
38
49
, Cmd . batch
39
- [ Task . perform Resize Window . size
40
- , Task . perform Tick Date . now
50
+ [ Task . perform ( \ vp -> Resize vp. viewport. width vp. viewport. height)
51
+ Browser . Dom . getViewport
52
+ , Task . perform Tick Time . now
53
+ , Task . perform Here Time . here
41
54
]
42
55
)
43
56
44
57
45
58
subscriptions : Sub Msg
46
59
subscriptions =
47
60
Sub . batch
48
- [ Window . resizes Resize
49
- , every ( 10 * second ) ( Tick << Date . fromTime )
61
+ [ Browser . Events . onResize ( \ w h -> Resize ( toFloat w ) ( toFloat h ))
62
+ , Time . every ( 10 * 1000 ) Tick
50
63
]
51
64
52
65
53
66
view : Model -> Html Msg
54
- view ( ( w, h ) , date ) =
55
- let
56
- width =
57
- toFloat w
58
-
59
- height =
60
- toFloat h
61
- in
62
- toHtml <|
63
- collage w
64
- h
65
- [ filled black <| rect width height
66
- , clock ( min width height) ( Date . hour date, Date . minute date )
67
- ]
67
+ view model =
68
+ Collage . Render . svgBox
69
+ ( model. width
70
+ , model. height
71
+ )
72
+ <|
73
+ Collage . Layout . stack
74
+ [ clock ( min model. width model. height)
75
+ ( Time . toHour model. zone model. date
76
+ , Time . toMinute model. zone model. date
77
+ )
78
+ , filled ( uniform black) <| rectangle model. width model. height
79
+ ]
68
80
69
81
70
82
@@ -92,7 +104,7 @@ view ( ( w, h ), date ) =
92
104
-}
93
105
94
106
95
- clock : Float -> ( Int , Int ) -> Form
107
+ clock : Float -> ( Int , Int ) -> Collage a
96
108
clock size ( h, m ) =
97
109
let
98
110
ledSize =
@@ -113,56 +125,56 @@ clock size ( h, m ) =
113
125
led p c1 c2 x y =
114
126
if p then
115
127
Just
116
- ( move ( x, y ) <|
128
+ ( shift ( x, y ) <|
117
129
group
118
- [ filled c1 <| circle ledSize
119
- , filled c2 <| circle <| ledSize * 0.8
130
+ [ filled ( uniform c1 ) <| circle ledSize
131
+ , filled ( uniform c2 ) <| circle <| ledSize * 0.8
120
132
]
121
133
)
134
+
122
135
else
123
136
Nothing
124
137
125
- gtt12 =
126
- h >= 12
127
-
128
138
hh =
129
- h % 12
139
+ modBy 12 h
130
140
131
141
h3 =
132
- h % 3
142
+ modBy 3 h
133
143
134
144
m5 =
135
- ( m % 15 ) // 5
145
+ modBy 15 m // 5
136
146
137
147
m1 =
138
- m % 5
148
+ modBy 5 m
139
149
in
140
- group <|
141
- filterMap identity <|
142
- [ led ( hh >= 3 ) green lightGreen d3_10 d3_10
143
- , led ( hh >= 9 ) green lightGreen - d3_10 d3_10
144
- , led ( hh >= 6 ) green lightGreen 0 d1_5
145
- , led ( gtt12) green lightGreen 0 d2_5
146
- , led ( m >= 15 ) green lightGreen d3_10 - d3_10
147
- , led ( m >= 45 ) green lightGreen - d3_10 - d3_10
148
- -- , led (m >= 60) green lightGreen 0 -d1_5 -- 60min newer happen
149
- , led ( m >= 30 ) green lightGreen 0 - d2_5
150
- , led ( h3 > 0 ) red lightRed - d1_10 d3_10
151
- , led ( h3 > 1 ) red lightRed d1_10 d3_10
152
- , led ( m5 > 0 ) red lightRed - d1_10 - d3_10
153
- , led ( m5 > 1 ) red lightRed d1_10 - d3_10
154
- , led ( m1 > 0 ) yellow lightYellow - d3_10 0
155
- , led ( m1 > 1 ) yellow lightYellow - d1_10 0
156
- , led ( m1 > 2 ) yellow lightYellow d1_10 0
157
- , led ( m1 > 3 ) yellow lightYellow d3_10 0
158
- ]
150
+ group <|
151
+ filterMap identity <|
152
+ [ led ( hh >= 3 ) green lightGreen d3_10 d3_10
153
+ , led ( hh >= 9 ) green lightGreen - d3_10 d3_10
154
+ , led ( hh >= 6 ) green lightGreen 0 d1_5
155
+ , led ( h >= 12 ) green lightGreen 0 d2_5
156
+ , led ( m >= 15 ) green lightGreen d3_10 - d3_10
157
+ , led ( m >= 45 ) green lightGreen - d3_10 - d3_10
158
+ , led ( m >= 30 ) green lightGreen 0 - d2_5
159
+ , led ( h3 > 0 ) red lightRed - d1_10 d3_10
160
+ , led ( h3 > 1 ) red lightRed d1_10 d3_10
161
+ , led ( m5 > 0 ) red lightRed - d1_10 - d3_10
162
+ , led ( m5 > 1 ) red lightRed d1_10 - d3_10
163
+ , led ( m1 > 0 ) yellow lightYellow - d3_10 0
164
+ , led ( m1 > 1 ) yellow lightYellow - d1_10 0
165
+ , led ( m1 > 2 ) yellow lightYellow d1_10 0
166
+ , led ( m1 > 3 ) yellow lightYellow d3_10 0
167
+ ]
159
168
160
169
161
170
update : Msg -> Model -> ( Model , Cmd Msg )
162
- update msg ( size , date ) =
171
+ update msg model =
163
172
case msg of
164
- Resize s ->
165
- ( ( ( s . width, s . height ) , date ) , Cmd . none )
173
+ Resize w h ->
174
+ ( { model | width = w , height = h } , Cmd . none )
166
175
167
176
Tick d ->
168
- ( ( size, d ) , Cmd . none )
177
+ ( { model | date = d }, Cmd . none )
178
+
179
+ Here z ->
180
+ ( { model | zone = z }, Cmd . none )
0 commit comments