Web Dev Solutions

Catalin Mititiuc

From 9d4f58472d00558e809cd43642259ba109e25037 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 16 May 2024 23:11:05 -0700 Subject: WIP: Buildings --- public/assets/css/map.css | 55 +++++++- public/assets/images/map1.svg | 310 ++++++++++++++++++++++++++++++++++++++++++ public/assets/images/map2.svg | 12 ++ src/index.js | 2 + 4 files changed, 377 insertions(+), 2 deletions(-) diff --git a/public/assets/css/map.css b/public/assets/css/map.css index 99648fc..9f12832 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -387,8 +387,59 @@ g[data-y="76"] { --i: 76; } [data-x="31"] { --i: 31; } [data-x="32"] { --i: 32; } -.buildings { - display: none; +#terrain { + opacity: 0.5; +} + +#tree .trunk { + fill: brown; +} + +#tree .branches { + fill: green; +} + +#bush { + fill: green; + transform: scale(0.9); +} + +.building { + opacity: 0.5; +} + +.building .floor { + /* fill: white; */ + fill: none; +} + +.building path { + fill: none; +} + +.building .furniture { + fill: violet; +} + +.building path.walls { + stroke: black; + stroke-linecap: square; +} + +.building .windows, .building .door-edges, .building .doors { + stroke-linecap: square; +} + +.building .windows, .building .doors, .building .door-edges { + stroke-width: 2.5px; +} + +.building .windows, .building .door-edges { + stroke: lightseagreen; +} + +.building .doors { + stroke: orange; } #test-arcs line, #test-arcs polyline { diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg index 04ca8a9..bef74ee 100644 --- a/public/assets/images/map1.svg +++ b/public/assets/images/map1.svg @@ -84,6 +84,289 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -95,6 +378,33 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/map2.svg b/public/assets/images/map2.svg index 04f0a10..5a44d17 100644 --- a/public/assets/images/map2.svg +++ b/public/assets/images/map2.svg @@ -24,6 +24,13 @@ + + + + + + + @@ -37,6 +44,11 @@ + + + + + diff --git a/src/index.js b/src/index.js index 3710843..b90c579 100644 --- a/src/index.js +++ b/src/index.js @@ -74,6 +74,7 @@ function load() { linkEl.setAttribute('rel', 'stylesheet'); linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css'); linkEl.setAttribute('type', 'text/css'); + linkEl.onload = function (e) { console.log('map.css loaded'); @@ -86,6 +87,7 @@ function load() { scriptEl.setAttribute('href', 'http://localhost:8080/map.js'); } }; + svg.prepend(linkEl); this.style.opacity = 1; -- cgit v1.2.3