Current section
Files
Jump to
Current section
Files
src/docs@components@analog_clock.erl
-module(docs@components@analog_clock).
-compile([no_auto_import, nowarn_unused_vars]).
-export([analog_clock/2]).
-export_type([model/0, msg/0, analog_clock_props/0]).
-type model() :: {model, integer(), binary()}.
-type msg() :: {update_time, integer()}.
-type analog_clock_props() :: analog_clock_props.
-spec update(model(), msg()) -> model().
update(Model, Msg) ->
case Msg of
{update_time, Time} ->
erlang:setelement(2, Model, Time)
end.
-spec initial() -> model().
initial() ->
{model, gleam@erlang:system_time(second), <<"UTC"/utf8>>}.
-spec analog_clock(sprocket@context:context(), analog_clock_props()) -> {sprocket@context:context(),
list(sprocket@context:element())}.
analog_clock(Ctx, _) ->
sprocket@hooks@reducer:reducer(
Ctx,
initial(),
fun update/2,
fun(Ctx@1, _use1, Dispatch) ->
{model, Time, _} = _use1,
sprocket@hooks@effect:effect(
Ctx@1,
fun() ->
Interval_duration = 1000,
Update_time = fun() ->
Dispatch(
{update_time, gleam@erlang:system_time(second)}
)
end,
Update_time(),
Cancel = sprocket@internal@utils@timer:interval(
Interval_duration,
Update_time
),
{some, fun() -> Cancel() end}
end,
{with_deps, [sprocket@hooks:dep(Time)]},
fun(Ctx@2) ->
{Hours, Minutes, Seconds} = 'Elixir.FFIUtils':clock_time(
Time
),
Hours@1 = case Hours > 12 of
true ->
Hours - 12;
false ->
Hours
end,
Minutes@1 = (Minutes * 60) + Seconds,
Hours@2 = (Hours@1 * 3600) + Minutes@1,
Clock_second_hand_transform = <<<<"rotate("/utf8,
(gleam@float:to_string(
360.0 * (gleam@int:to_float(Seconds) / 60.0)
))/binary>>/binary,
",192,192)"/utf8>>,
Clock_minute_hand_transform = <<<<"rotate("/utf8,
(gleam@float:to_string(
360.0 * (gleam@int:to_float(Minutes@1) / 3600.0)
))/binary>>/binary,
",192,192)"/utf8>>,
Clock_hour_hand_transform = <<<<"rotate("/utf8,
(gleam@float:to_string(
360.0 * (gleam@int:to_float(Hours@2) / 43200.0)
))/binary>>/binary,
",192,192)"/utf8>>,
sprocket@component:render(
Ctx@2,
[sprocket@html@svg@elements:svg(
[sprocket@html@svg@attributes:version(
<<"1.1"/utf8>>
),
sprocket@html@attributes:xmlns(
<<"http://www.w3.org/2000/svg"/utf8>>
),
sprocket@html@attributes:xmlns_xlink(
<<"http://www.w3.org/1999/xlink"/utf8>>
),
sprocket@html@svg@attributes:x(
<<"0px"/utf8>>
),
sprocket@html@svg@attributes:y(
<<"0px"/utf8>>
),
sprocket@html@svg@attributes:width(
<<"384px"/utf8>>
),
sprocket@html@svg@attributes:height(
<<"384px"/utf8>>
),
sprocket@html@svg@attributes:view_box(
<<"0 0 384 384"/utf8>>
),
sprocket@html@svg@attributes:xml_space(
<<"preserve"/utf8>>
),
sprocket@html@svg@attributes:transform(
<<"scale(0.5)"/utf8>>
)],
[sprocket@html@svg@elements:path(
[sprocket@html@svg@attributes:class(
<<"clock-frame"/utf8>>
),
sprocket@html@svg@attributes:d(
<<"M192,0C85.961,0,0,85.961,0,192s85.961,192,192,192s192-85.961,192-192S298.039,0,192,0zM315.037,315.037c-9.454,9.454-19.809,17.679-30.864,24.609l-14.976-25.939l-10.396,6l14.989,25.964c-23.156,12.363-48.947,19.312-75.792,20.216V336h-12v29.887c-26.845-0.903-52.636-7.854-75.793-20.217l14.989-25.963l-10.393-6l-14.976,25.938c-11.055-6.931-21.41-15.154-30.864-24.608s-17.679-19.809-24.61-30.864l25.939-14.976l-6-10.396l-25.961,14.99C25.966,250.637,19.017,224.846,18.113,198H48v-12H18.113c0.904-26.844,7.853-52.634,20.216-75.791l25.96,14.988l6.004-10.395L44.354,99.827c6.931-11.055,15.156-21.41,24.61-30.864s19.809-17.679,30.864-24.61l14.976,25.939l10.395-6L110.208,38.33C133.365,25.966,159.155,19.017,186,18.113V48h12V18.113c26.846,0.904,52.635,7.853,75.792,20.216l-14.991,25.965l10.395,6l14.978-25.942c11.056,6.931,21.41,15.156,30.865,24.611c9.454,9.454,17.679,19.808,24.608,30.863l-25.94,14.976l6,10.396l25.965-14.99c12.363,23.157,19.312,48.948,20.218,75.792H336v12h29.887c-0.904,26.845-7.853,52.636-20.216,75.792l-25.964-14.989l-6.002,10.396l25.941,14.978C332.715,295.229,324.491,305.583,315.037,315.037z"/utf8>>
)],
[]
),
sprocket@html@svg@elements:line(
[sprocket@html@svg@attributes:class(
<<"clock-hour-hand"/utf8>>
),
sprocket@html@svg@attributes:id(
<<"clock-hour-hand"/utf8>>
),
sprocket@html@svg@attributes:transform(
Clock_hour_hand_transform
),
sprocket@html@svg@attributes:fill(
<<"none"/utf8>>
),
sprocket@html@svg@attributes:stroke(
<<"#000000"/utf8>>
),
sprocket@html@svg@attributes:stroke_width(
<<"18"/utf8>>
),
sprocket@html@svg@attributes:stroke_miterlimit(
<<"10"/utf8>>
),
sprocket@html@svg@attributes:x1(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:y1(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:x2(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:y2(
<<"87.5"/utf8>>
)],
[]
),
sprocket@html@svg@elements:line(
[sprocket@html@svg@attributes:class(
<<"clock-minute-hand"/utf8>>
),
sprocket@html@svg@attributes:id(
<<"anim-clock-minute-hand"/utf8>>
),
sprocket@html@svg@attributes:transform(
Clock_minute_hand_transform
),
sprocket@html@svg@attributes:fill(
<<"none"/utf8>>
),
sprocket@html@svg@attributes:stroke(
<<"#000000"/utf8>>
),
sprocket@html@svg@attributes:stroke_width(
<<"12"/utf8>>
),
sprocket@html@svg@attributes:stroke_miterlimit(
<<"10"/utf8>>
),
sprocket@html@svg@attributes:x1(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:y1(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:x2(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:y2(
<<"54"/utf8>>
)],
[]
),
sprocket@html@svg@elements:circle(
[sprocket@html@svg@attributes:class(
<<"clock-axis"/utf8>>
),
sprocket@html@svg@attributes:cx(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:cy(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:r(
<<"9"/utf8>>
)],
[]
),
sprocket@html@svg@elements:g(
[sprocket@html@svg@attributes:class(
<<"clock-second-hand"/utf8>>
),
sprocket@html@svg@attributes:id(
<<"anim-clock-second-hand"/utf8>>
),
sprocket@html@svg@attributes:transform(
Clock_second_hand_transform
)],
[sprocket@html@svg@elements:line(
[sprocket@html@svg@attributes:class(
<<"clock-second-hand-arm"/utf8>>
),
sprocket@html@svg@attributes:fill(
<<"none"/utf8>>
),
sprocket@html@svg@attributes:stroke(
<<"#D53A1F"/utf8>>
),
sprocket@html@svg@attributes:stroke_width(
<<"4"/utf8>>
),
sprocket@html@svg@attributes:stroke_miterlimit(
<<"10"/utf8>>
),
sprocket@html@svg@attributes:x1(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:y1(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:x2(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:y2(
<<"28.5"/utf8>>
)],
[]
),
sprocket@html@svg@elements:circle(
[sprocket@html@svg@attributes:class(
<<"clock-second-hand-axis"/utf8>>
),
sprocket@html@svg@attributes:fill(
<<"#D53A1F"/utf8>>
),
sprocket@html@svg@attributes:cx(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:cy(
<<"192"/utf8>>
),
sprocket@html@svg@attributes:r(
<<"4.5"/utf8>>
)],
[]
)]
)]
)]
)
end
)
end
).