Use plotly basic package, mount with onMount

Loading it with <svelte:head> meant that it was being fetched
everytime user changed the page. Now it'll be bundled with bundle.js
and we use onMount to solve it after everything has been
loaded/rendered.

6 files changed, 148 insertions, 165 deletions

diff --git a/package-lock.json b/package-lock.json
index 48dd888..3d045f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
+  "name": "Dorado",
+  "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -525,6 +525,11 @@
       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
       "dev": true
     },
+    "plotly.js-basic-dist-min": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-2.5.1.tgz",
+      "integrity": "sha512-BfWlZLhkoaDyicD4365NyHWrKz7rdjM5sLVWUJJOJlEuFr7xPCK2UPRSBpa2nLxeR8GeFzWzMQBaD0AfAqL1fw=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index ec70fbf..e603567 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "CG-Algorithms",
+    "name": "Dorado",
     "version": "0.1.0",
     "private": true,
     "scripts": {
@@ -18,6 +18,7 @@
         "svelte": "^3.0.0"
     },
     "dependencies": {
+        "plotly.js-basic-dist-min": "^2.5.1",
         "sirv-cli": "^1.0.0"
     }
 }
diff --git a/public/global.css b/public/global.css
index 6bcca5b..10978a7 100644
--- a/public/global.css
+++ b/public/global.css
@@ -70,9 +70,11 @@ html {
 
 body {
   max-width: 96ch;
-  margin: auto;
+  margin: 2ch;
   line-height: 1.5;
 }
+@media only screen and (min-width: 600px) { body { margin: 3.2ch; } }
+@media only screen and (min-width: 84ch) { body { margin: 4ch auto; } }
 
 h1 { color: var(--fg); }
 h2 { color: var(--fg-special-warm); }
@@ -111,7 +113,7 @@ form, input, button {
   padding: .25em;
 
 }
-
+input { max-width: 8ch; }
 input, button {
   border: 2px solid var(--bg-alt);
 }
diff --git a/public/index.html b/public/index.html
index 526a8cd..6c7e561 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width,initial-scale=1'>
 
-    <title>CG Algorithms</title>
+    <title>Dorado</title>
 
-    <link rel='icon' type='image/png' href='./favicon.png'>
+    <link rel='icon' type='image/png' href='https://andinus.unfla.me/resources/favicon.png'>
     <link rel='stylesheet' href='./global.css'>
     <link rel='stylesheet' href='./build/bundle.css'>
 
diff --git a/src/algorithms/line-drawing/Bresenham.svelte b/src/algorithms/line-drawing/Bresenham.svelte
index e3eaff1..eb2afd6 100644
--- a/src/algorithms/line-drawing/Bresenham.svelte
+++ b/src/algorithms/line-drawing/Bresenham.svelte
@@ -1,15 +1,8 @@
-<svelte:head>
-  <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script>
-</svelte:head>
 <script>
-  let solved = false;
-  let invalidInput = false;
+  import { onMount } from "svelte";
+  import Plotly from "plotly.js-basic-dist-min";
 
-  let plotlyReady = false;
-  const plotlyLoaded = () => {
-    plotlyReady = true;
-    solve();
-  }
+  let invalidInput = false;
 
   let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
   let dx, dy, step;
@@ -39,36 +32,37 @@
     y_axis = [y0,];
 
     for (let idx = 0; idx < dx; idx++) {
-        // x_axis.at(-1) doesn't work for some reason.
-        x_axis.push(x_axis[x_axis.length - 1] + 1);
-        if (p < 0) {
-            y_axis.push(y_axis[y_axis.length - 1]);
-            p += 2 * dy;
-        } else {
-            y_axis.push(y_axis[y_axis.length - 1] + 1);
-            p += step;
-        }
+      // x_axis.at(-1) doesn't work for some reason.
+      x_axis.push(x_axis[x_axis.length - 1] + 1);
+      if (p < 0) {
+        y_axis.push(y_axis[y_axis.length - 1]);
+        p += 2 * dy;
+      } else {
+        y_axis.push(y_axis[y_axis.length - 1] + 1);
+        p += step;
+      }
       p_vals.push(p);
     }
 
     // Plot the chart.
-    if (plotlyReady)
-      Plotly.newPlot('algoChart', [{
-        x: x_axis,
-        y: y_axis,
-        type: 'lines',
-        name: 'Bresenham'
-      }]);
-
-    solved = true;
+    Plotly.newPlot('algoChart', [{
+      x: x_axis,
+      y: y_axis,
+      type: 'lines',
+      name: 'Bresenham'
+    }]);
   }
+
+  onMount(() => {
+    solve();
+  });
 </script>
 
 <h2>Bresenham</h2>
 <form class="points">
   {#if invalidInput === true}
     <p class="note">
-      Slope must be between 0 to 1.
+      Invalid Input: Slope must be between 0 to 1.
     </p>
   {/if}
   <label for="x0">x0: </label>
@@ -84,75 +78,70 @@
   <button type="button" on:click={solve}>Solve</button>
 </form>
 
-{#if solved === true}
-  <hr>
-  <h3>Solution</h3>
+<hr>
+<h3>Solution</h3>
 
+{#if invalidInput === true}
+  <p class="note">
+    Inavlid Input: Slope must be between 0 to 1.
+  </p>
+{/if}
+
+<table>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>dx = <code>|x1 - x0|</code></td>
+      <td>{dx}</td>
+    </tr>
+    <tr>
+      <td>dy = <code>|y1 - y0|</code></td>
+      <td>{dy}</td>
+    </tr>
+    <tr>
+      <td>step = <code>|2 * (dy - dx)|</code></td>
+      <td>{step}</td>
+    </tr>
+    <tr>
+      <td><code>2 * dy</code></td>
+      <td>{2 * dy}</td>
+    </tr>
+  </tbody>
+</table>
+
+<details>
+  <summary>
+    Table
+  </summary>
   <table>
     <thead>
       <tr>
-        <th>&nbsp;</th>
-        <th>Value</th>
+        <th>Iteration (k)</th>
+        <th>P<sub>k</sub></th>
+        <th>x<sub>k + 1</sub></th>
+        <th>y<sub>k + 1</sub></th>
       </tr>
     </thead>
+
     <tbody>
+      {#each x_axis as _, i}
         <tr>
-          <td>dx = <code>|x1 - x0|</code></td>
-          <td>{dx}</td>
-        </tr>
-        <tr>
-          <td>dy = <code>|y1 - y0|</code></td>
-          <td>{dy}</td>
-        </tr>
-        <tr>
-          <td>step = <code>|2 * (dy - dx)|</code></td>
-          <td>{step}</td>
-        </tr>
-        <tr>
-          <td><code>2 * dy</code></td>
-          <td>{2 * dy}</td>
-        </tr>
-        <tr>
-          <td>p<sub>0</sub></td>
-          <td>{p_vals[0]}</td>
+          <td>{i}</td>
+          <td>{p_vals[i]}</td>
+          <td>{x_axis[i]}</td>
+          <td>{y_axis[i]}</td>
         </tr>
+      {/each}
     </tbody>
   </table>
+</details>
 
-  <details>
-    <summary>
-      Table
-    </summary>
-    <table>
-      <thead>
-        <tr>
-          <th>Iteration (k)</th>
-          <th>P<sub>k</sub></th>
-          <th>x<sub>k + 1</sub></th>
-          <th>y<sub>k + 1</sub></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        {#each x_axis as _, i}
-          <tr>
-            <td>{i}</td>
-            <td>{p_vals[i]}</td>
-            <td>{x_axis[i]}</td>
-            <td>{y_axis[i]}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </details>
-
-  <h3>Graph</h3>
-  {#if plotlyReady === false}
-    <p class="note">
-      Cannot plot graph: Plotly is not ready.
-    </p>
-  {/if}
-{/if}
+<h3>Graph</h3>
 <div id="algoChart"></div>
 
 <style>
diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte
index c9f62a0..379e965 100644
--- a/src/algorithms/line-drawing/DDA.svelte
+++ b/src/algorithms/line-drawing/DDA.svelte
@@ -1,14 +1,6 @@
-<svelte:head>
-  <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script>
-</svelte:head>
 <script>
-  let solved = false;
-
-  let plotlyReady = false;
-  const plotlyLoaded = () => {
-    plotlyReady = true;
-    dda();
-  }
+  import { onMount } from "svelte";
+  import Plotly from "plotly.js-basic-dist-min";
 
   let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
   let dx, dy;
@@ -47,16 +39,17 @@
     y_axis_floored = y_axis.map(function(y) {return Math.round(y)});
 
     // Plot the chart.
-    if (plotlyReady)
-      Plotly.newPlot('algoChart', [{
-        x: x_axis_floored,
-        y: y_axis_floored,
-        type: 'lines',
-        name: 'DDA'
-      }]);
-
-    solved = true;
+    Plotly.newPlot('algoChart', [{
+      x: x_axis_floored,
+      y: y_axis_floored,
+      type: 'lines',
+      name: 'DDA'
+    }]);
   }
+
+  onMount(() => {
+    dda();
+  });
 </script>
 
 <h2>Digital differential analyzer</h2>
@@ -74,61 +67,54 @@
   <button type="button" on:click={dda}>Solve</button>
 </form>
 
-{#if solved === true && steps > 0}
-  <hr>
-  <h3>Solution</h3>
-
-  <label for="dx">dx = <code>|x1 - x0|</code>: </label>
-  <input type="text" id="dx" name="dx" value={dx} disabled><br>
-  <label for="dy">dy = <code>|y1 - y0|</code>: </label>
-  <input type="text" id="dy" name="dy" value={dy} disabled>
-  <br>
-
-  <label for="steps">steps: </label>
-  <input type="text" id="steps" name="steps" value={steps} disabled>
-  <br>
-
-  <label for="x_inc">x Increment = <code>dx / steps</code>: </label>
-  <input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br>
-  <label for="y_inc">y Increment = <code>dy / steps</code>: </label>
-  <input type="text" id="y_inc" name="y_inc" value={y_inc} disabled>
-
-  <details>
-    <summary>
-      Table
-    </summary>
-    <table>
-      <thead>
+<hr>
+<h3>Solution</h3>
+
+<label for="dx">dx = <code>|x1 - x0|</code>: </label>
+<input type="text" id="dx" name="dx" value={dx} disabled><br>
+<label for="dy">dy = <code>|y1 - y0|</code>: </label>
+<input type="text" id="dy" name="dy" value={dy} disabled>
+<br>
+
+<label for="steps">steps: </label>
+<input type="text" id="steps" name="steps" value={steps} disabled>
+<br>
+
+<label for="x_inc">x Increment = <code>dx / steps</code>: </label>
+<input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br>
+<label for="y_inc">y Increment = <code>dy / steps</code>: </label>
+<input type="text" id="y_inc" name="y_inc" value={y_inc} disabled>
+
+<details>
+  <summary>
+    Table
+  </summary>
+  <table>
+    <thead>
+      <tr>
+        <th>Iteration</th>
+        <th>x</th>
+        <th>y</th>
+        <th>x (plot)</th>
+        <th>y (plot)</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {#each x_axis as _, i}
         <tr>
-          <th>Iteration</th>
-          <th>x</th>
-          <th>y</th>
-          <th>x (plot)</th>
-          <th>y (plot)</th>
+          <td>{i + 1}</td>
+          <td>{x_axis[i]}</td>
+          <td>{y_axis[i]}</td>
+          <td>{x_axis_floored[i]}</td>
+          <td>{y_axis_floored[i]}</td>
         </tr>
-      </thead>
-
-      <tbody>
-        {#each x_axis as _, i}
-          <tr>
-            <td>{i + 1}</td>
-            <td>{x_axis[i]}</td>
-            <td>{y_axis[i]}</td>
-            <td>{x_axis_floored[i]}</td>
-            <td>{y_axis_floored[i]}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </details>
-
-  <h3>Graph</h3>
-  {#if plotlyReady === false}
-    <p class="note">
-      Cannot plot graph: Plotly is not ready.
-    </p>
-  {/if}
-{/if}
+      {/each}
+    </tbody>
+  </table>
+</details>
+
+<h3>Graph</h3>
 <div id="algoChart"></div>
 
 <style>