even better grid lines

backend/Cargo.toml

@@ -7,7 +7,7 @@ edition = "2018"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-mozaic = { git = "https://github.com/ajuvercr/MOZAIC" }
+mozaic = { git = "https://github.com/ZeusWPI/MOZAICP" }
 tokio = "0.1.22"
 rand = { version = "0.6.5", default-features = true }
 futures = "0.1.28"

mapbuilder/index.html

@@ -15,35 +15,9 @@
 
         <div class="section">
             <span class="title">Grid</span>
-            <div class="prop gridline">
+            <div id="gridConfig">
-                <div class="item">
-                    <label for="mwidth" class="input">Line width</label>
-                    <input type="number" id="mwidth" value="4">
-                </div>
-                <div class="item">
-                    <label for="mwidth" class="input">Seperation</label>
-                    <input type="number" id="mwidth" value="100">
-                </div>
-                <div class="item">
-                    <label for="mwidth" class="input">Color</label>
-                    <input type="text" id="mwidth" value="#333">
-                </div>
-            </div>
-            <hr>
-            <div class="prop gridline">
-                <div class="item">
-                    <label for="mwidth" class="input">Line width</label>
-                    <input type="number" id="mwidth" value="2">
-                </div>
-                <div class="item">
-                    <label for="mwidth" class="input">Seperation</label>
-                    <input type="number" id="mwidth" value="20">
-                </div>
-                <div class="item">
-                    <label for="mwidth" class="input">Color</label>
-                    <input type="text" id="mwidth" value="#333">
-                </div>
             </div>
+            <button class="btn" id="addbtn">&#43;</button>
         </div>
 
     </div>
@@ -52,7 +26,7 @@
         <canvas id="canvas" class="canvas"></canvas>
     </div>
 
-    <button class="openbtn" onclick="toggleNav()">&#9776;</button>
+    <button id="openbtn" class="openbtn" onclick="toggleNav()">&#9776;</button>
 </body>
 
 

mapbuilder/src/grid.ts

@@ -0,0 +1,52 @@
+import { removeEl, newDiv, newInput, newLabel, addChildren, newButton } from './util'
+
+const gridConfig = document.getElementById("gridConfig");
+let width = 4;
+let sep = 100;
+
+function addGrid() {
+
+    const grid = newDiv(["prop", "gridline"]);
+
+    const w = newDiv(["item"]);
+    const wi = newLabel("Line width", ["input"]);
+    const wv = newInput("number", width + "");
+    addChildren(w, [wi, wv]);
+
+    const s = newDiv(["item"]);
+    const si = newLabel("Seperation", ["input"]);
+    const sv = newInput("number", sep + "");
+    addChildren(s, [si, sv]);
+
+    const c = newDiv(["item"]);
+    const ci = newLabel("Color", ["input"]);
+    const cv = newInput("text", "#333");
+    addChildren(c, [ci, cv]);
+
+    const hr = document.createElement("hr");
+
+    const d = newButton("", ["btn", "delete"]);
+    d.onclick = () => {
+        removeEl(grid);
+        removeEl(hr);
+
+        width *= 2;
+        sep *= 5;
+    }
+
+    addChildren(grid, [w, s, c, d]);
+
+    gridConfig.appendChild(grid);
+    gridConfig.appendChild(hr);
+
+    width /= 2;
+    if (width < 1) width = 1;
+    sep /= 5;
+    if (sep < 1) sep = 1;
+}
+
+
+export function init_grid() {
+    document.getElementById("addbtn").onclick = () => addGrid();
+    addGrid();
+}

mapbuilder/src/index.ts

@@ -1,3 +1,4 @@
+import {init_grid} from "./grid"
 
 let gridlineEls:any;
 let gridlineNeedsUpdate = true;
@@ -89,3 +90,4 @@ function draw_grid(
 }
 
 setTimeout(main, 200);
+init_grid();

mapbuilder/src/style/style.scss

@@ -12,9 +12,31 @@ $darkgrey: darken($grey, 20);
     box-sizing: border-box;
 }
 
+#openbtn {
+    right: 5px;
+    top: 5px;
+}
+
 
 /* Side panel styling */
 
+.openbtn {
+    position: absolute;
+    font-size: 20px;
+    cursor: pointer;
+    background-color: $lightgrey;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    &:hover {
+        background-color: $orange;
+        color: darken($color: $grey, $amount: 10);
+    }
+    &:focus {
+        outline: none;
+    }
+}
+
 .sidepanel {
     /* 0 width - change this with JavaScript */
     height: 100vh;
@@ -65,11 +87,33 @@ $darkgrey: darken($grey, 20);
         display: inline-block;
         background-color: $grey;
     }
+    #addbtn {
+        width: 90%;
+        margin: 0 5%;
+    }
     hr {
+        margin: 10px 0;
         border: 1px dashed $lightgrey;
     }
 }
 
+.btn {
+    border-radius: 8px;
+    color: $orange;
+    background-color: $lightgrey;
+    transition: 0.35s;
+    font-size: 20px;
+    padding: 5px;
+    font-weight: bolder;
+    &:hover {
+        background-color: $orange;
+        color: darken($color: $grey, $amount: 10);
+    }
+    &:focus {
+        outline: none;
+    }
+}
+
 .prop {
     margin: 10px;
     color: white;
@@ -93,24 +137,20 @@ $darkgrey: darken($grey, 20);
     .item+.item {
         margin-top: 10px;
     }
-}
+    .delete {
-
+        border-radius: 30px;
-.openbtn {
+        margin: 10px 0 0 calc(100% - 35px);
+        width: 30px;
+        height: 30px;
+        font-size: 25px;
+        position: relative;
+        &::before {
+            content: "\00d7";
             position: absolute;
-    right: 5px;
+            left: 50%;
-    top: 5px;
+            top: 50%;
-    font-size: 20px;
+            transform: translate(-50%, -50%);
-    cursor: pointer;
-    background-color: $lightgrey;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    &:hover {
-        background-color: $orange;
-        color: darken($color: $grey, $amount: 10);
         }
-    &:focus {
-        outline: none;
     }
 }
 

mapbuilder/src/util.ts

@@ -0,0 +1,58 @@
+
+// DOM manipulation
+
+export function removeEl(el: any) {
+    el.remove();
+}
+
+export function newLabel(label = "", classes: string[] = []): HTMLLabelElement {
+    const out: HTMLLabelElement = document.createElement("label");
+    out.classList.add("input");
+    out.appendChild(document.createTextNode(label));
+
+    for(let c of classes) {
+        out.classList.add(c);
+    }
+
+    return out;
+}
+
+export function newInput(type: string, value = "", classes: string[] = []): HTMLInputElement {
+    const out: HTMLInputElement = document.createElement("input");
+
+    out.type = type;
+    out.value = value;
+
+    for(let c of classes) {
+        out.classList.add(c);
+    }
+
+    return out;
+}
+
+export function newDiv(classes: string[] = []): HTMLDivElement {
+    const out: HTMLDivElement = document.createElement("div");
+
+    for(let c of classes) {
+        out.classList.add(c);
+    }
+
+    return out;
+}
+
+export function addChildren(div: HTMLDivElement, els: HTMLElement[]) {
+    for(let c of els) {
+        div.appendChild(c);
+    }
+}
+
+export function newButton(value = "", classes: string[] = []): HTMLButtonElement {
+    const out = document.createElement("button");
+    out.appendChild(document.createTextNode(value));
+
+    for(let c of classes) {
+        out.classList.add(c);
+    }
+
+    return out;
+}