Partial DDA implementation

3 files changed, 59 insertions, 11 deletions

diff --git a/src/App.svelte b/src/App.svelte
index f9742c5..0f4e88d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,8 +1,9 @@
 <script>
-  import Navbar from './Navbar.svelte'
-  import Home from './Home.svelte'
+  import Navbar from './Navbar.svelte';
+  import Home from './Home.svelte';
 
-  let page = Home
+  import DDA from './algorithms/line-drawing/DDA.svelte';
+  let page = DDA;
   const changePage = event => page = event.detail.page;
 </script>
 
diff --git a/src/Navbar.svelte b/src/Navbar.svelte
index 3241646..97d8348 100644
--- a/src/Navbar.svelte
+++ b/src/Navbar.svelte
@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
-  import Home from './Home.svelte'
-  import DDA from './algorithms/line-drawing/DDA.svelte'
-  import Bresenham from './algorithms/line-drawing/Bresenham.svelte'
+  import Home from './Home.svelte';
+  import DDA from './algorithms/line-drawing/DDA.svelte';
+  import Bresenham from './algorithms/line-drawing/Bresenham.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -18,19 +18,23 @@
   <div class="ddgroup">
     Line Drawing Algorithms
     <div class="ddsub">
-      <button on:click={pageDDA}>DDA</button>
+      <button on:click={pageDDA}>Digital differential analyzer</button>
       <button on:click={pageBresenham}>Bresenham</button>
     </div>
   </div>
 </nav>
 
 <style>
-  .ddmenu { display: flex; }
+  .ddmenu {
+    display: flex;
+    padding: 0.2em;
+    border-bottom: 1px solid var(--bg-alt);
+  }
 
   .ddmenu button, .ddmenu .ddgroup {
     text-align: left;
     width: 100%;
-    padding: 15px;
+    padding: 8px;
     color: var(--fg-main);
     text-decoration: none;
     background: var(--bg-alt);
@@ -56,7 +60,7 @@
   .ddgroup::after {
     content: "\27A4";
     position: absolute;
-    top: 13px; right: 10px;
+    top: 8px; right: 8px;
     transition: transform 0.2s;
   }
   .ddgroup:hover::after {
diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte
index 5295cfd..db2070a 100644
--- a/src/algorithms/line-drawing/DDA.svelte
+++ b/src/algorithms/line-drawing/DDA.svelte
@@ -1 +1,44 @@
-<p>DDA</p>
+<script>
+  let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
+
+  $: dx = x1 - x0;
+  $: dy = y1 - y0;
+
+  $: steps = Math.max(...[dx, dy].map(x => Math.abs(x)));
+  $: x_inc = dx / steps;
+  $: y_inc = dy / steps;
+</script>
+
+<h2>Digital differential analyzer</h2>
+<form class="points">
+  <label for="x0">x0: </label>
+  <input type="number" id="x0" name="x0" bind:value={x0}>&nbsp;
+  <label for="y0">y0: </label>
+  <input type="number" id="y0" name="y0" bind:value={y0}>
+  <br>
+  <label for="x1">x1: </label>
+  <input type="number" id="x1" name="x1" bind:value={x1}>&nbsp;
+  <label for="y1">y1: </label>
+  <input type="number" id="y1" name="y1" bind:value={y1}>
+</form>
+<hr>
+
+<label for="dx">dx: </label>
+<input type="text" id="dx" name="dx" value={dx} disabled><br>
+<label for="dy">dy: </label>
+<input type="text" id="dy" name="dy" value={dy} disabled>
+<hr>
+
+<label for="steps">steps: </label>
+<input type="text" id="steps" name="steps" value={steps} disabled>
+<hr>
+
+<label for="x_inc">x Increment: </label>
+<input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br>
+<label for="y_inc">y Increment: </label>
+<input type="text" id="y_inc" name="y_inc" value={y_inc} disabled>
+<hr>
+
+<style>
+  hr { color: var(--bg-hl-alt-intense); }
+</style>