1 files changed, 58 insertions, 72 deletions
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>