even better grid lines
This commit is contained in:
parent
7165e7339f
commit
2fb497236a
7 changed files with 174 additions and 48 deletions
|
@ -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"
|
||||
|
|
|
@ -15,35 +15,9 @@
|
|||
|
||||
<div class="section">
|
||||
<span class="title">Grid</span>
|
||||
<div class="prop gridline">
|
||||
<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 id="gridConfig">
|
||||
</div>
|
||||
<button class="btn" id="addbtn">+</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -52,7 +26,7 @@
|
|||
<canvas id="canvas" class="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<button class="openbtn" onclick="toggleNav()">☰</button>
|
||||
<button id="openbtn" class="openbtn" onclick="toggleNav()">☰</button>
|
||||
</body>
|
||||
|
||||
|
||||
|
|
52
mapbuilder/src/grid.ts
Normal file
52
mapbuilder/src/grid.ts
Normal file
|
@ -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();
|
||||
}
|
|
@ -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();
|
||||
|
|
0
mapbuilder/src/state.ts
Normal file
0
mapbuilder/src/state.ts
Normal file
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
58
mapbuilder/src/util.ts
Normal file
58
mapbuilder/src/util.ts
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue