(module
  (func $add (param $lhs i32) (param $rhs i32) (result i32)
    local.get $lhs
    local.get $rhs
    i32.add)
  (export "add" (func $add))
)

import * as wasm from "wasm-webgl";

const playPauseButton = document.getElementById("play-pause");

const play = () => {
    playPauseButton.textContent = "▶";
};

playPauseButton.addEventListener("click", event => {
    playPauseButton.disabled = true;
    wasm.start();
});

play();

#[wasm_bindgen]
pub fn start() -> Result<(), JsValue> {
    ...;
    let canvas: web_sys::HtmlCanvasElement = canvas
                            .dyn_into::<web_sys::HtmlCanvasElement>()?;

    ...;
    let universe = Rc::new(RefCell::new(Universe::new(WIDTH, HEIGHT, GAME_CONFIG)));
    {
        let f = Rc::new(RefCell::new(None));
        let g = f.clone();
        ...;
        *g.borrow_mut() = Some(Closure::wrap(Box::new(move || {
            ...;

            draw_universe(&context.clone(), &universe.borrow()).unwrap();
            request_animation_frame(f.borrow().as_ref().unwrap());
        }) as Box<FnMut()>));

        request_animation_frame(g.borrow().as_ref().unwrap());
    }
}

let vert_shader = compile_shader(
    &context,
    WebGlRenderingContext::VERTEX_SHADER,
    r#"
    attribute vec2 position;
    attribute float point_size;
    attribute vec3 color;
    varying vec3 u_color;

    void main() {
        gl_Position =  vec4(position, 0, 1);
        gl_PointSize = point_size;
        u_color = color;
    }
"#,
)?;
let frag_shader = compile_shader(
    &context,
    WebGlRenderingContext::FRAGMENT_SHADER,
    r#"
    precision mediump float;
    varying vec3 u_color;

    void main() {
        gl_FragColor = vec4(u_color, 1.0);
    }
"#,
)?;

for col in 0..WIDTH {
    for row in 0..HEIGHT {
        let x = (0.5 + col as f32) * size_square - 1.0;
        let y = (0.5 + row as f32) * size_square - 1.0;

        table_points.push(x);
        table_points.push(y);
    }
}

let vertices = table_points.as_slice();
context_array_bind(&context, &vertices, 0, 2)?;

let colors = colors.as_slice();
context_array_bind(context, &colors, 2, 3)?;

context.clear_color(0.0, 0.0, 0.0, 1.0);
context.clear(WebGlRenderingContext::COLOR_BUFFER_BIT);

context.draw_arrays(
    WebGlRenderingContext::POINTS,
    0,
    universe_size.try_into().unwrap(),
);

#[wasm_bindgen(module = "/defined-in-js.js")]
extern "C" {
    pub fn pause();
}

const playPauseButton = document.getElementById("play-pause");

export function pause() {
    playPauseButton.disabled = false;
}

let fps = Rc::new(RefCell::new(new_fps_value().unwrap()));
{
    let fps = fps.clone();
    let a = Closure::wrap(Box::new(move || {
        *fps.borrow_mut() = new_fps_value().unwrap();
        // js::log(&fps.to_string());
    }) as Box<dyn FnMut()>);
    document
        .get_element_by_id("fps-control")
        .expect("Should have a #fps-control slider on the page")
        .dyn_ref::<HtmlElement>()
        .expect("#fps-control be an `HtmlElement`")
        .set_onchange(Some(a.as_ref().unchecked_ref()));
    a.forget();
}