import { canvas } from "@thi.ng/hdom-canvas" ; import { start } from "@thi.ng/hdom/start" ; import { HALF_PI , TAU } from "@thi.ng/math/api" ; import { mapcat } from "@thi.ng/transducers/mapcat" ; import { range } from "@thi.ng/transducers/range" ; import { cartesian2 } from "@thi.ng/vectors/cartesian" ; const WEEKDAYS = [ "SUN" , "MON" , "TUE" , "WED" , "THU" , "FRI" , "SAT" ] ; const tick = ( i , r1 , r2 ) => { const theta = ( i / 12 ) * TAU - HALF_PI ; return [ [ "line" , { } , cartesian2 ( null , [ r1 , theta ] ) , cartesian2 ( null , [ r2 , theta ] ) , ] , i % 3 == 0 ? [ "text" , { stroke : "none" } , cartesian2 ( null , [ r1 - 10 , theta ] ) , i > 0 ? i : 12 , ] : null , ] ; } ; const hand = ( r1 , r2 , theta , attribs = { } , eps = 0.5 ) => { theta = theta * TAU - HALF_PI ; return [ "polygon" , attribs , [ [ r1 , theta - eps ] , [ r2 , theta ] , [ r1 , theta + eps ] , ] . map ( ( p ) => cartesian2 ( null , p ) ) , ] ; } ; start ( ( ) => { const now = new Date ( ) ; const t = now . getTime ( ) / 1000 - now . getTimezoneOffset ( ) * 60 ; const sec = ( t % 60 ) / 60 ; const min = ( ( t % 3600 ) + sec / 60 ) / 3600 ; const hour = ( ( t % ( 12 * 3600 ) ) + min / 60 ) / ( 12 * 3600 ) ; return [ "div.vh-100.flex.flex-column.justify-center.items-center.code.f7" , [ "div" , now . toLocaleTimeString ( ) ] , [ canvas , { class : "ma2" , width : 200 , height : 200 } , [ "g" , { translate : [ 100 , 100 ] , stroke : "black" , fill : "none" , align : "center" , baseline : "middle" , __normalize : false , } , [ "circle" , { } , [ 0 , 0 ] , 99 ] , [ "text" , { font : "24px Menlo" } , [ 0 , - 33 ] , "thi.ng" ] , [ "g" , { fill : "black" } , ... mapcat ( ( i ) => tick ( i , 90 , 99 ) , range ( 12 ) ) , [ "rect" , { fill : "none" } , [ 40 , - 8 ] , 30 , 16 ] , [ "text" , { stroke : "none" } , [ 55 , 0 ] , WEEKDAYS [ now . getDay ( ) ] , ] , ] , [ "g" , { fill : "black" , stroke : "none" } , hand ( 5 , 60 , hour ) , hand ( 5 , 90 , min ) , hand ( 5 , 80 , sec , { fill : "red" , shadowX : 2 , shadowY : 2 , shadowBlur : 5 , shadowColor : "rgba(0,0,0,0.4)" , } ) , [ "circle" , { } , [ 0 , 0 ] , 5 ] , ] , ] , ] , [ "a.link" , { href : "https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-clock" , } , "Source code" , ] , ] ; } ) ;