even better grid lines

This commit is contained in:
ajuvercr 2019-10-29 18:30:17 +01:00
parent 7165e7339f
commit 2fb497236a
7 changed files with 174 additions and 48 deletions

View file

@ -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"

View file

@ -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">&#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>

52
mapbuilder/src/grid.ts Normal file
View 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();
}

View file

@ -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
View file

View 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 {
.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;
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);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&:focus {
outline: none;
}
}

58
mapbuilder/src/util.ts Normal file
View 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;
}