add watch section and bench section

3 files changed, 19 insertions, 10 deletions

diff --git a/site/index.html b/site/index.html
index 2d4c0e1..dd747c1 100644
--- a/site/index.html
+++ b/site/index.html
@@ -12,10 +12,19 @@
     <p class='subst-alts'></p>
     <p>benchmarking maximal convex polygon finding</p>
 
-    <button>go</button>
-    <span>fps: <span id='fps'>n/a</span></span>
-    <br>
-    <canvas width='500' height='500'></canvas>
+    <section class='watch'>
+      <h2>watch</h2>
+      <button>go</button>
+      <span>fps: <span class='fps'>n/a</span></span>
+      <br>
+      <canvas width='500' height='500'></canvas>
+    </section>
+
+    <section class='bench'>
+      <h2>bench</h2>
+      <input name='iters' value='1000'>
+      <button>bench</button>
+    </section>
 
     <script src='./main.mjs' type='module'></script>
 
diff --git a/site/pure.mjs b/site/pure.mjs
index 5065bb7..e43380c 100644
--- a/site/pure.mjs
+++ b/site/pure.mjs
@@ -240,14 +240,14 @@ function update(points) {
 }
 
 export default async function () {
-    const canvas = document.querySelector('canvas');
+    const canvas = document.querySelector('section.watch canvas');
     const ctx = canvas.getContext('2d');
     console.debug('canvas:', canvas, 'ctx', ctx);
     ctx.scale(canvas.width, canvas.height);
 
-    const fps = document.querySelector('#fps');
+    const fps = document.querySelector('section.watch .fps');
 
-    const goButton = document.querySelector('button');
+    const goButton = document.querySelector('section.watch button');
     let paused = true;
     goButton.onclick = e => {
         paused = !paused;
diff --git a/src/lib.rs b/src/lib.rs
index 16b1d25..7dd08e9 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -25,17 +25,17 @@ fn document() -> web_sys::Document {
 }
 
 fn canvas() -> JSResult<web_sys::HtmlCanvasElement> {
-    let x = document().query_selector("canvas")?.ok_or("no canvas")?;
+    let x = document().query_selector("section.watch canvas")?.ok_or("no canvas")?;
     Ok(x.dyn_into::<web_sys::HtmlCanvasElement>()?)
 }
 
 fn fps() -> JSResult<web_sys::HtmlElement> {
-    let x = document().query_selector("#fps")?.ok_or("no fps counter")?;
+    let x = document().query_selector("section.watch .fps")?.ok_or("no fps counter")?;
     Ok(x.dyn_into::<web_sys::HtmlElement>()?)
 }
 
 fn go() -> JSResult<web_sys::HtmlElement> {
-    let x = document().query_selector("button")?.ok_or("no go button")?;
+    let x = document().query_selector("section.watch button")?.ok_or("no go button")?;
     Ok(x.dyn_into::<web_sys::HtmlElement>()?)
 }