Update demo (#180)

demo/src/Description.js

@@ -1,43 +1,4 @@
-class Section {
-  constructor(title, content) {
-    this.domElement = document.createElement("div");
-    this.domElement.style.textAlign = "left";
-    this.domElement.style.color = "#666";
-    this.domElement.style.fontSize = "14px";
-    this.domElement.style.padding = "22px";
-    this.domElement.style.paddingRight = "26px";
-    this.domElement.style.paddingLeft = "26px";
-    this.domElement.style.width = "100%";
-    this.domElement.style.display = "flex";
-    this.domElement.style.justifyContent = "center";
-
-    const divContainer = document.createElement("div");
-    divContainer.style.maxWidth = "600px";
-    this.domElement.appendChild(divContainer);
-
-    const h2 = document.createElement("h2");
-    this.header = h2;
-    h2.style.color = "black";
-    h2.style.fontSize = "25px";
-    h2.style.padding = "10px";
-    h2.style.borderBottom = "2px solid black";
-    h2.textContent = title;
-
-    const contentElement = document.createElement("div");
-    contentElement.innerHTML = content;
-
-    divContainer.appendChild(h2);
-    divContainer.appendChild(contentElement);
-  }
-
-  setStyle1() {
-    this.domElement.style.backgroundColor = "black";
-    this.domElement.style.color = "rgb(199, 199, 199)";
-    this.domElement.style.boxShadow = "rgba(0, 0, 0, 0.3) 0px 0px 10px";
-    this.header.style.color = "white";
-    this.header.style.borderBottom = "2px solid white";
-  }
-}
+import Section from "./Section";
 
 export default class Description {
   constructor() {
@@ -50,29 +11,29 @@ export default class Description {
     this.domElement.style.display = "flex";
     this.domElement.style.flexDirection = "column";
 
-    let s = new Section(
+    let s;
+
+    s = this.addSection(
       "energy-based models for virtual creatures",
 `<p>
 The concept of energy minimization is useful to understand physical systems as goal-directed systems.
 A deformable object that tends to recover its rest shape can be understood as a system whose goal is to minimize its elastic potential energy.
 More generally, energy can refer to any scalar-valued function that measures compatibility between variables as a means of implicitly capturing their dependencies through energy minimization.
-This more general notion of energy is useful to model inertia, friction, actuation mechanisms and, potentially, many other goal-directed behaviors that may or may not be conventionally considered "just physics".
+This more general notion of energy is useful to model inertia, friction, actuation mechanisms and, potentially, many other goal-directed behaviors that may or may not be conventionally considered &ldquo;just physics&rdquo;.
 </p>`
     );
     s.setStyle1();
-    this.domElement.appendChild(s.domElement);
 
-    s = new Section(
+    s = this.addSection(
       "no forces, just energy functions",
 `<p>
 Much like the loss function encapsulates the objective of a neural network in a single scalar value, potential energy functions offer a scalar representation of the objective of a physical system.
 In practice, just as we typically do not compute neural network gradients by hand, we can also avoid computing forces by hand.
 The force can be straightforwardly derived as the negative gradient of the potential energy.
 For general energy functions that are not plain potential energy functions, the negative gradient cannot be directly interpreted as a force, but it can still be used for gradient-based optimization and is useful for implicit numerical integration methods.
 </p>`);
-    this.domElement.appendChild(s.domElement);
 
-    s = new Section(
+    s = this.addSection(
       "six energy functions",
 `<p>
 This implementation defines six energy functions. Some are plain potential energy functions, that is, functions of vertex positions <span class="code">E(pos)</span>. Actuation mechanisms can be modeled with an action-dependent energy function <span class="code">E(pos, a)</span>. Other energy functions may also depend on the previous state, given by vertex positions and velocities <span class="code">(pos0, vel0)</span>.
@@ -86,8 +47,13 @@ This implementation defines six energy functions. Some are plain potential energ
 <li>friction <span class="code">E(pos, pos0)</span></li>
 <li>inertia <span class="code">E(pos, pos0, vel0)</span></li>
 </ul>`
-);
+    );
     s.setStyle1();
-    this.domElement.appendChild(s.domElement);
+  }
+
+  addSection(title, content) {
+    const section = new Section(title, content);
+    this.domElement.appendChild(section.domElement);
+    return section;
   }
 }

demo/src/Section.js

@@ -0,0 +1,40 @@
+export default class Section {
+  constructor(title, content) {
+    this.domElement = document.createElement("div");
+    this.domElement.style.textAlign = "left";
+    this.domElement.style.color = "#666";
+    this.domElement.style.fontSize = "14px";
+    this.domElement.style.padding = "22px";
+    this.domElement.style.paddingRight = "26px";
+    this.domElement.style.paddingLeft = "26px";
+    this.domElement.style.width = "100%";
+    this.domElement.style.display = "flex";
+    this.domElement.style.justifyContent = "center";
+
+    const divContainer = document.createElement("div");
+    divContainer.style.maxWidth = "600px";
+    this.domElement.appendChild(divContainer);
+
+    const h2 = document.createElement("h2");
+    this.header = h2;
+    h2.style.color = "black";
+    h2.style.fontSize = "25px";
+    h2.style.padding = "10px";
+    h2.style.borderBottom = "2px solid black";
+    h2.textContent = title;
+
+    const contentElement = document.createElement("div");
+    contentElement.innerHTML = content;
+
+    divContainer.appendChild(h2);
+    divContainer.appendChild(contentElement);
+  }
+
+  setStyle1() {
+    this.domElement.style.backgroundColor = "black";
+    this.domElement.style.color = "rgb(199, 199, 199)";
+    this.domElement.style.boxShadow = "rgba(0, 0, 0, 0.3) 0px 0px 10px";
+    this.header.style.color = "white";
+    this.header.style.borderBottom = "2px solid white";
+  }
+}

demo/src/ui.js

@@ -36,6 +36,7 @@ export function makeHeader() {
   divTitle.appendChild(h1);
   ((style) => {
     style.fontSize = "33px";
+    style.color = "white";
   })(h1.style);
 
   const h2 = document.createElement("h2");

demo/test/basic.test.js

@@ -5,8 +5,8 @@ test("main", async () => {
     const window = new utils.Window({
       headless: true,
       indexUrl: `http://localhost:${port}`,
-      width: 700,
-      height: 700
+      width: 800,
+      height: 1200
     });
     try {
       await window.launch();