File layout

src/.gitignore

@@ -0,0 +1,2 @@
+*.js
+*.js.map

src/tower.ts

@@ -0,0 +1,5 @@
+import { TowerMap } from 'tower_map.js';
+
+export function main() {
+  const map = new TowerMap();
+};

src/tower_map.ts

@@ -0,0 +1,2 @@
+export class TowerMap {
+}

src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "noImplicitAny": true,
+    "sourceMap": true
+  },
+  "files": [
+    "tower.ts",
+    "tower_map.ts"
+  ]
+}

test.html

@@ -25,7 +25,7 @@ div {
 .map {
   width: var(--map-width);
   height: var(--map-height);
-  background-image: url('land1.svg');
+  background-image: url('images/land1.svg');
   background-size: 100% 100%;
   display: grid;
   grid-template-columns: repeat(var(--map-width-tiles), 1fr);
@@ -33,84 +33,84 @@ div {
 }
 
 .road-tb {
-  background-image: url('road1-tb.svg');
+  background-image: url('images/road1-tb.svg');
   background-size: cover;
   grid-column-end: span 2;
   grid-row-end: span 3;
 }
 
 .road-lr {
-  background-image: url('road1-lr.svg');
+  background-image: url('images/road1-lr.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 2;
 }
 
 .road-br {
-  background-image: url('road1-br.svg');
+  background-image: url('images/road1-br.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 3;
 }
 
 .road-bl {
-  background-image: url('road1-bl.svg');
+  background-image: url('images/road1-bl.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 3;
 }
 
 .road-tr {
-  background-image: url('road1-tr.svg');
+  background-image: url('images/road1-tr.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 3;
 }
 
 .road-tl {
-  background-image: url('road1-tl.svg');
+  background-image: url('images/road1-tl.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 3;
 }
 
 .road-blr {
-  background-image: url('road1-blr.svg');
+  background-image: url('images/road1-blr.svg');
   background-size: cover;
   grid-column-end: span 4;
   grid-row-end: span 3;
 }
 
 .road-tlr {
-  background-image: url('road1-tlr.svg');
+  background-image: url('images/road1-tlr.svg');
   background-size: cover;
   grid-column-end: span 4;
   grid-row-end: span 3;
 }
 
 .road-ltb {
-  background-image: url('road1-ltb.svg');
+  background-image: url('images/road1-ltb.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 4;
 }
 
 .road-rtb {
-  background-image: url('road1-rtb.svg');
+  background-image: url('images/road1-rtb.svg');
   background-size: cover;
   grid-column-end: span 3;
   grid-row-end: span 4;
 }
 
 .road-tblr {
-  background-image: url('road1-tblr.svg');
+  background-image: url('images/road1-tblr.svg');
   background-size: cover;
   grid-column-end: span 4;
   grid-row-end: span 4;
 }
 
 .empty {
-  background-image: url('empty1.svg');
+  background-image: url('images/empty1.svg');
   background-size: cover;
   grid-column-end: span 2;
   grid-row-end: span 1;