diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 1eaa665..66d3b3d 100644
--- a/backend/Cargo.toml
+++ b/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"
diff --git a/mapbuilder/index.html b/mapbuilder/index.html
index d92a760..7e6515a 100644
--- a/mapbuilder/index.html
+++ b/mapbuilder/index.html
@@ -15,35 +15,9 @@
Grid
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -52,7 +26,7 @@
-
+
diff --git a/mapbuilder/src/grid.ts b/mapbuilder/src/grid.ts
new file mode 100644
index 0000000..d069502
--- /dev/null
+++ b/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();
+}
diff --git a/mapbuilder/src/index.ts b/mapbuilder/src/index.ts
index 839d679..38de626 100644
--- a/mapbuilder/src/index.ts
+++ b/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();
diff --git a/mapbuilder/src/state.ts b/mapbuilder/src/state.ts
new file mode 100644
index 0000000..e69de29
diff --git a/mapbuilder/src/style/style.scss b/mapbuilder/src/style/style.scss
index 0214e12..c676934 100644
--- a/mapbuilder/src/style/style.scss
+++ b/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;
}
-}
-
-.openbtn {
- position: absolute;
- right: 5px;
- top: 5px;
- 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;
+ .delete {
+ border-radius: 30px;
+ margin: 10px 0 0 calc(100% - 35px);
+ width: 30px;
+ height: 30px;
+ font-size: 25px;
+ position: relative;
+ &::before {
+ content: "\00d7";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
}
}
diff --git a/mapbuilder/src/util.ts b/mapbuilder/src/util.ts
new file mode 100644
index 0000000..7fbbff9
--- /dev/null
+++ b/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;
+}