@@ -33,7 +63,7 @@
if (nav_open) {
document.getElementById("mySidepanel").style.width = "0";
} else {
- document.getElementById("mySidepanel").style.width = "250px";
+ document.getElementById("mySidepanel").style.width = "350px";
}
nav_open = !nav_open;
}
diff --git a/mapbuilder/src/index.ts b/mapbuilder/src/index.ts
index c823fa6..839d679 100644
--- a/mapbuilder/src/index.ts
+++ b/mapbuilder/src/index.ts
@@ -1,4 +1,25 @@
+let gridlineEls:any;
+let gridlineNeedsUpdate = true;
+
+function get_line_widths(): string[][] {
+ if (gridlineNeedsUpdate) {
+ gridlineEls = document.getElementsByClassName("gridline");
+ gridlineNeedsUpdate = false;
+ }
+ const out: string[][] = [[], [], []];
+ for(let el of
gridlineEls) {
+ let i = 0;
+ for( let c of el.getElementsByTagName('input')) {
+ out[i].push(
+ c.value
+ );
+ i += 1;
+ }
+ }
+ return out;
+}
+
function main() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
@@ -9,44 +30,52 @@ function main() {
canvas.width = width;
canvas.height = height;
- ctx.translate(width / 2, height / 2);
+ function draw() {
+ ctx.clearRect(0, 0, width, height);
+ ctx.save();
- ctx.strokeStyle = "#333"
- draw_grid(
- ctx, [width, 100, 20], [width / 2, height / 2], [width, height],
- 4, 0.30
- );
- ctx.fillStyle = "#ff5f00";
+ ctx.translate(width / 2, height / 2);
- ctx.fillRect(0, 0, 100, 100);
+ ctx.strokeStyle = "#333";
+ draw_grid(ctx, get_line_widths(), [width / 2, height / 2], [width, height]);
+ ctx.fillStyle = "#ff5f00";
+
+ ctx.fillRect(0, 0, 100, 100);
+
+ ctx.restore();
+ requestAnimationFrame(draw);
+ }
console.log("hallo");
+ draw();
+
}
function draw_grid(
ctx: CanvasRenderingContext2D,
- lines: number[], // number of pixels between lines, with smaller gettings lines
+ lines: string[][], // number of pixels between lines, with smaller gettings lines
transform: [number, number],
- size: [number, number],
- init_width = 2, factor = 0.5) {
+ size: [number, number]) {
ctx.save();
ctx.translate(-transform[0], -transform[1]);
-
- for (let delta of lines) {
- ctx.lineWidth = init_width;
+ for (let i = lines[0].length - 1; i >= 0 ; i -= 1) {
+ ctx.lineWidth = parseInt(lines[0][i]);
+ const delta = parseInt(lines[1][i]);
+ ctx.strokeStyle = "transparent";
+ ctx.strokeStyle = lines[2][i];
let xoff = transform[0] % delta;
let yoff = transform[1] % delta;
ctx.beginPath();
- for (let i = xoff; i < size[0]; i += delta) {
- ctx.moveTo(i, 0);
- ctx.lineTo(i, size[1]);
+ for (let j = xoff; j < size[0]; j += delta) {
+ ctx.moveTo(j, 0);
+ ctx.lineTo(j, size[1]);
}
for (let j = yoff; j < size[1]; j += delta) {
ctx.moveTo(0, j);
@@ -54,8 +83,6 @@ function draw_grid(
}
ctx.stroke();
-
- init_width *= factor;
}
ctx.restore();
diff --git a/mapbuilder/src/style/style.scss b/mapbuilder/src/style/style.scss
index 777415e..0214e12 100644
--- a/mapbuilder/src/style/style.scss
+++ b/mapbuilder/src/style/style.scss
@@ -28,10 +28,12 @@ $darkgrey: darken($grey, 20);
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
- a {
+ a,
+ input,
+ p {
padding: 8px 8px 8px 32px;
text-decoration: none;
- font-size: 25px;
+ font-size: 20px;
color: white;
display: block;
transition: 0.3s;
@@ -47,6 +49,52 @@ $darkgrey: darken($grey, 20);
}
}
+.section {
+ border: 2px solid $orange;
+ border-radius: 8px;
+ position: relative;
+ padding: 10px;
+ margin: 10px;
+ .title {
+ font-size: 24px;
+ color: $orange;
+ padding: 0 5px;
+ position: absolute;
+ top: -13px;
+ left: 8px;
+ display: inline-block;
+ background-color: $grey;
+ }
+ hr {
+ border: 1px dashed $lightgrey;
+ }
+}
+
+.prop {
+ margin: 10px;
+ color: white;
+ .item {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ label {
+ width: 40%;
+ }
+ input {
+ font-size: 15px;
+ margin-top: 2px;
+ color: $orange;
+ padding: 5px 10px;
+ width: 40%;
+ background-color: $lightgrey;
+ }
+ }
+ .item+.item {
+ margin-top: 10px;
+ }
+}
+
.openbtn {
position: absolute;
right: 5px;