using Blink
import Blink: JSString

# === styling utility ===

style!(w, stylesheet) = @js win begin
  @var style = document.createElement("style");
  style.appendChild(document.createTextNode($stylesheet));
  document.head.appendChild(style);
end

# === page source ===

stylesheet = """
body {
  background-color: #ffe0f0;
}

/* needed to keep Ganja canvas from blowing up */
canvas {
  min-width: 600px;
  max-width: 600px;
  min-height: 600px;
  max-height: 600px;
}
"""

controls = """
<p><button id="flip-button">Flip</button></p>
"""

graph_script = """
// in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1);
let v = [
  CGA3.inline(() => Math.sqrt(0.5)*( 1e1 + 1e2 + 1e3 + 1e5))(),
  CGA3.inline(() => Math.sqrt(0.5)*( 1e1 - 1e2 - 1e3 + 1e5))(),
  CGA3.inline(() => Math.sqrt(0.5)*(-1e1 + 1e2 - 1e3 + 1e5))(),
  CGA3.inline(() => Math.sqrt(0.5)*(-1e1 - 1e2 + 1e3 + 1e5))(),
  CGA3.inline(() => -Math.sqrt(3)*1e4 + Math.sqrt(2)*1e5)()
];

// create scene function
let scene = () => [
  0xff00b0, v[0],
  0x00ffb0, v[1],
  0x00b0ff, v[2],
  0x8040ff, v[3],
  0xc0c0c0, v[4]
];

// initialize graph
let gr = CGA3.graph(
  scene,
  {
    conformal: true, gl: true, grid: true
  }
)
document.body.appendChild(gr);

// connect flip button
function flip() {
  for (let n = 0; n < 4; ++n) {
    // reflect
    v[n] = CGA3.Mul(CGA3.Mul(v[4], v[n]), v[4]);
    
    // de-noise
    for (let k = 6; k < v[n].length; ++k) {
      v[n][k] = 0;
    }
  }
  requestAnimationFrame(gr.update.bind(gr, scene));
}
document.querySelector('#flip-button').addEventListener('click', flip);
"""

# === page construction ===

# create window and open developer console
win = Window()
opentools(win)

# set stylesheet
style!(win, stylesheet)

# load Ganja.js
loadjs!(win, "https://unpkg.com/ganja.js")

# launch Ganja visualization
body!(win, controls, async=false)
js(win, JSString(graph_script))