moved options from the html to const file

Zazzik1 · Aug 15, 2023 · 4265e94 · 4265e94
1 parent 3b04f07
commit 4265e94
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 35 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -19,9 +19,24 @@ export const DEFAULT_RGB: RGBColorPalette = [
     [106, 52, 3]
 ];
 
+export const SUGGESTED_ITERATIONS = [5, 20, 40, 120, 200, 500, 800, 1000, 1200, 1400, 2000,  2500, 3000, 3500, 4000, 4500, 5000];
+export const CANVAS_SIZES = [
+    { name: '400x400', value: '400x400' },
+    { name: '500x500', value: '500x500' },
+    { name: '600x600', value: '600x600' },
+    { name: '700x700', value: '700x700' },
+    { name: '800x800', value: '800x800' },
+    { name: '400x400', value: '400x400' },
+    { name: '360x640', value: '360x640' },
+    { name: '640x480', value: '640x480' },
+    { name: '1280x720 HD', value: '1280x720' },
+    { name: '1920x1080 Full HD', value: '1920x1080' },
+    { name: '3840x2160 4K', value: '3840x2160' },
+]
+
 export enum ZOOM_MULTIPLIER {
     CLICK_ZOOM_IN = 2,
     CLICK_ZOOM_OUT = 0.5,
-    SCROLL_ZOOM_IN = 1.4,
-    SCROLL_ZOOM_OUT = 1 / 1.4,
+    SCROLL_ZOOM_IN = 1.3,
+    SCROLL_ZOOM_OUT = 1 / 1.3,
 }
diff --git a/src/index.html b/src/index.html
@@ -18,42 +18,12 @@
             </label>
             <br />
             <input id="reset" type="button" value="Reset settings"/>
-            <datalist id="iterations">
-               <option value="5"></option>
-               <option value="20"></option>
-               <option value="40"></option>
-               <option value="120"></option>
-               <option value="200"></option>
-               <option value="500"></option>
-               <option value="800"></option>
-               <option value="1000"></option>
-               <option value="1200"></option>
-               <option value="1400"></option>
-               <option value="2000"></option>
-               <option value="2500"></option>
-               <option value="3000"></option>
-               <option value="3500"></option>
-               <option value="4000"></option>
-               <option value="4500"></option>
-               <option value="5000"></option>
-            </datalist>
+            <datalist id="iterations"></datalist>
          </div>
          <div>
             <label>
                Canvas size: 
-               <select id="cSize">
-                  <option value="400x400" selected>400x400</option>
-                  <option value="500x500">500x500</option>
-                  <option value="600x600">600x600</option>
-                  <option value="700x700">700x700</option>
-                  <option value="800x800">800x800</option>
-                  <option value="-" disabled>------------</option>
-                  <option value="360x640">360x640</option>
-                  <option value="640x480">640x480</option>
-                  <option value="1280x720">1280x720 HD</option>
-                  <option value="1920x1080">1920x1080 Full HD</option>
-                  <option value="3840x2160">3840x2160 4K</option>
-               </select>
+               <select id="cSize"></select>
             </label>
             <span>Larger canvas sizes as well as larger maximum iteration values can take much longer to compute.</span><br>
             <label>

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,8 @@
 import Mandelbrot from "./Mandelbrot";
-import { ZOOM_MULTIPLIER } from "./constants";
+import { CANVAS_SIZES, SUGGESTED_ITERATIONS, ZOOM_MULTIPLIER } from "./constants";
 import './styles/styles';
 
+const iterationsDatalist = document.querySelector('#iterations') as HTMLSelectElement;
 const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
 const wheel = document.querySelector("#wheel") as HTMLInputElement;
 const mandelbrot = new Mandelbrot(canvas);
@@ -70,6 +71,20 @@ function download() {
     link.href = canvas.toDataURL("image/png", 1.0); // type, quality
     link.click();
 }
+
+// set datalist / select contents
+for (let iterations of SUGGESTED_ITERATIONS) {
+    const option = document.createElement('option');
+    option.value = iterations.toString();
+    iterationsDatalist.appendChild(option)
+}
+
+for (let { name, value } of CANVAS_SIZES) {
+    const option = document.createElement('option');
+    option.value = value;
+    option.textContent = name;
+    INPUTS.CSIZE.appendChild(option);
+}
 
 // event listeners
 canvas.addEventListener("mousedown", e => {