ReactiveRuntime

]add https://github.com/SimonDanisch/JSServe.jl.git https://github.com/SimonDanisch/ReactiveRuntime.jl.git 

using ReactiveRuntime, Observables, JSServe, Markdown, GeometryTypes, Dates
using JSServe.DOM
using JSServe: with_session
import ReactiveRuntime: @cell

@variable timer = begin
  # With a Channel, we can savely start a while true loop that updates timer
  # Will get cancelled when we overwrite it with a new value!
  Channel() do channel
    while true
     	put!(channel, Dates.now())
    	sleep(1/30)
    end
  end
end

global position = Point2(w[] / 2, h[] / 2)
global dir = rand(Vec{2, Float64}) .* 2.0
global wall = Observable("started")

# These will create Compute Graph input variables
@variable w = 200
@variable h = 100
@variable r = 4

# This computation will be executed every time any used input node gets
# updated
@variable begin
  timer # rely on timer to update this computation every 1/30s
  global wall, position, dir
  position += dir
  (position[1] - r < 0) && (wall[] = "left";     dir = Vec(2, dir[2]))
  (position[1] + r > w) && (wall[] = "right";  dir = Vec(-2, dir[2]))
  (position[2] - r < 0) && (wall[] = "top";      dir = Vec(dir[1], 2))
  (position[2] + r > h) && (wall[] = "bottom"; dir = Vec(dir[1], -2))
  HTML("""
    <svg height="$(h)" width="$(w)">
    <circle cx="$(position[1])" cy="$(position[2])" r="$(r)" fill="red" />
    </svg>
   """)
end

#TODO remove the need for `with_session`
with_session() do s
  md"""
  # Hello Reactive

  The ball hit: *$(wall)*
  """
end