Oliver level

js/tile.js

@@ -27,6 +27,10 @@ export class Tile {
         const mask = Array(width).fill(Array(height).fill(true));
         return new Tile(name, width, height, mask);
     }
+    static from_mask(name, mask_string) {
+        const mask = string_to_mask(mask_string);
+        return new Tile(name, mask.length, mask[0].length, mask);
+    }
     get_mask() {
         return __classPrivateFieldGet(this, _mask);
     }
@@ -40,4 +44,22 @@ export class Tile {
     }
 }
 _name = new WeakMap(), _width = new WeakMap(), _height = new WeakMap(), _mask = new WeakMap();
+function string_to_mask(mask_string) {
+    // mask_string: '\n+++\n+++\n'
+    const rows = mask_string.trim().split('\n');
+    // rows: ['+++', '+++']
+    const mask = [];
+    for (let x = 0; x < rows[0].length; x++) {
+        mask[x] = Array(rows.length);
+    }
+    // mask: [ [ empty, empty ], [ empty, empty ], [ empty, empty ] ]
+    for (let y = 0; y < rows.length; y++) {
+        const row = rows[y];
+        for (let x = 0; x < row.length; x++) {
+            const cell = row[x];
+            mask[x][y] = (cell.toUpperCase() == 'X');
+        }
+    }
+    return mask;
+}
 //# sourceMappingURL=tile.js.map

js/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,MAAM,OAAO,IAAI;IAMf,YAAY,IAAY,EAAE,KAAa,EAAE,MAAc,EAAE,IAAiB;QAL1E,wBAAc;QACd,yBAAe;QACf,0BAAgB;QAChB,wBAAmB;QAGjB,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,uBAAA,IAAI,UAAU,KAAK,EAAC;QACpB,uBAAA,IAAI,WAAW,MAAM,EAAC;QACtB,uBAAA,IAAI,SAAS,IAAI,EAAC;IACpB,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,IAAY,EAAE,KAAa,EAAE,MAAc;QAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzD,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7C,CAAC;IAED,QAAQ;QACN,2CAAkB;IACpB,CAAC;IAED,QAAQ,CAAC,OAAe;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,OAAO,IAAI,mCAAU,QAAQ,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,oCAAW,EAAE,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,qCAAY,EAAE,CAAC;QAC/C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,MAAM,OAAO,IAAI;IAMf,YAAY,IAAY,EAAE,KAAa,EAAE,MAAc,EAAE,IAAiB;QAL1E,wBAAc;QACd,yBAAe;QACf,0BAAgB;QAChB,wBAAmB;QAGjB,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,uBAAA,IAAI,UAAU,KAAK,EAAC;QACpB,uBAAA,IAAI,WAAW,MAAM,EAAC;QACtB,uBAAA,IAAI,SAAS,IAAI,EAAC;IACpB,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,IAAY,EAAE,KAAa,EAAE,MAAc;QAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzD,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7C,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,IAAY,EAAE,WAAmB;QAChD,MAAM,IAAI,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,QAAQ;QACN,2CAAkB;IACpB,CAAC;IAED,QAAQ,CAAC,OAAe;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,OAAO,IAAI,mCAAU,QAAQ,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,oCAAW,EAAE,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,qCAAY,EAAE,CAAC;QAC/C,OAAO,IAAI,CAAC;IACd,CAAC;CACF;;AAED,SAAS,cAAc,CAAC,WAAmB;IACzC,8BAA8B;IAE9B,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5C,uBAAuB;IAEvB,MAAM,IAAI,GAAG,EAAE,CAAC;IAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACvC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC9B;IACD,iEAAiE;IAEjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACnC,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,CAAC;SAC1C;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

js/tiles.js

@@ -13,7 +13,16 @@ export const ROAD_TLR = Tile.rectangle('road-tlr', 8, 6);
 export const ROAD_LTB = Tile.rectangle('road-ltb', 6, 8);
 export const ROAD_RTB = Tile.rectangle('road-rtb', 6, 8);
 // +
-export const ROAD_TBLR = Tile.rectangle('road-tblr', 8, 8);
+export const ROAD_TBLR = Tile.from_mask('road-tblr', `
+.xxxxxx.
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+.xxxxxx.
+`);
 // Tower base
 export const EMPTY = Tile.rectangle('empty', 4, 2);
 // Straight

js/tiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tiles.js","sourceRoot":"","sources":["../ts/tiles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,WAAW;AACX,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvD,QAAQ;AACR,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvD,IAAI;AACJ,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,IAAI;AACJ,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAE3D,aAAa;AACb,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEnD,WAAW;AACX,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,QAAQ;AACR,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC"}
+{"version":3,"file":"tiles.js","sourceRoot":"","sources":["../ts/tiles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,WAAW;AACX,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvD,QAAQ;AACR,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvD,IAAI;AACJ,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,IAAI;AACJ,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;;;;;;;;;CASpD,CAAC,CAAC;AAEH,aAAa;AACb,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEnD,WAAW;AACX,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,QAAQ;AACR,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC"}

js/tower.js

@@ -3,21 +3,75 @@ import * as tiles from './tiles.js';
 export function main() {
     document.body.style.margin = '0';
     document.body.style.backgroundColor = 'black';
-    const container = document.createElement('div');
+    document.body.style.display = 'flex';
-    document.body.appendChild(container);
+    document.body.style.justifyContent = 'center';
-    container.style.width = '100vmin';
+    const mask = document.createElement('div');
-    container.style.height = '100vmin';
+    document.body.appendChild(mask);
-    const grid = new Grid(container);
+    mask.style.width = 'min(100vw, 125vh)';
-    grid.set_size(40, 40);
+    mask.style.height = 'calc(0.8 * min(100vw, 125vh))';
+    mask.style.overflow = 'hidden';
+    const real = document.createElement('div');
+    mask.appendChild(real);
+    real.style.width = 'min(140vw, 175vh)';
+    real.style.height = 'calc(0.8 * min(140vw, 175vh))';
+    real.style.position = 'relative';
+    real.style.top = 'calc((-8 / 70) * min(140vw, 175vh))';
+    real.style.left = 'calc((-10 / 70) * min(140vw, 175vh))';
+    const grid = new Grid(real);
+    grid.set_size(70, 56);
     grid.set_tileset('tropical');
     grid.set_layers(['road', 'water', 'bridge']);
-    grid.add_tile('road', tiles.ROAD_LR, 0, 6);
+    grid.add_tile('road', tiles.ROAD_TB, 20, 46);
-    grid.add_tile('road', tiles.ROAD_LR, 6, 6);
+    grid.add_tile('road', tiles.ROAD_BL, 18, 40);
-    grid.add_tile('road', tiles.ROAD_LR, 12, 6);
+    grid.add_tile('road', tiles.ROAD_TR, 12, 38);
-    grid.add_tile('water', tiles.RIVER_TB, 6, 0);
+    grid.add_tile('road', tiles.ROAD_BR, 12, 32);
-    grid.add_tile('water', tiles.RIVER_TB, 6, 6);
+    grid.add_tile('road', tiles.ROAD_TL, 18, 30);
-    grid.add_tile('water', tiles.RIVER_TB, 6, 12);
+    grid.add_tile('road', tiles.ROAD_BL, 18, 24);
-    grid.add_tile('bridge', tiles.BRIDGE_LR, 5, 6);
+    grid.add_tile('road', tiles.ROAD_TR, 12, 22);
+    grid.add_tile('road', tiles.ROAD_BR, 12, 16);
+    grid.add_tile('road', tiles.ROAD_LR, 18, 16);
+    grid.add_tile('road', tiles.ROAD_TBLR, 24, 14);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 2);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 8);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 22);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 28);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 34);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 40);
+    grid.add_tile('road', tiles.ROAD_TB, 26, 46);
+    grid.add_tile('road', tiles.ROAD_BL, 32, 16);
+    grid.add_tile('road', tiles.ROAD_TB, 34, 22);
+    grid.add_tile('road', tiles.ROAD_TB, 34, 28);
+    grid.add_tile('road', tiles.ROAD_TB, 34, 34);
+    grid.add_tile('road', tiles.ROAD_TR, 34, 40);
+    grid.add_tile('road', tiles.ROAD_LR, 40, 42);
+    grid.add_tile('road', tiles.ROAD_LR, 46, 42);
+    grid.add_tile('road', tiles.ROAD_TL, 52, 40);
+    grid.add_tile('road', tiles.ROAD_BL, 52, 34);
+    grid.add_tile('road', tiles.ROAD_LR, 46, 34);
+    grid.add_tile('road', tiles.ROAD_TR, 40, 32);
+    grid.add_tile('road', tiles.ROAD_BR, 40, 26);
+    grid.add_tile('road', tiles.ROAD_LR, 46, 26);
+    grid.add_tile('road', tiles.ROAD_TL, 52, 24);
+    grid.add_tile('road', tiles.ROAD_BL, 52, 18);
+    grid.add_tile('road', tiles.ROAD_LR, 46, 18);
+    grid.add_tile('road', tiles.ROAD_TR, 40, 16);
+    grid.add_tile('road', tiles.ROAD_BR, 40, 10);
+    grid.add_tile('road', tiles.ROAD_LR, 46, 10);
+    grid.add_tile('road', tiles.ROAD_LR, 52, 10);
+    grid.add_tile('road', tiles.ROAD_LR, 58, 10);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 46);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 40);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 34);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 28);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 22);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 16);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 10);
+    grid.add_tile('water', tiles.RIVER_TB, 47, 4);
+    grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 42);
+    grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 34);
+    grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 26);
+    grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 18);
+    grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 10);
 }
 ;
 main();

ts/tile.ts

@@ -16,6 +16,11 @@ export class Tile {
     return new Tile(name, width, height, mask);
   }
 
+  static from_mask(name: string, mask_string: string): Tile {
+    const mask = string_to_mask(mask_string);
+    return new Tile(name, mask.length, mask[0].length, mask);
+  }
+
   get_mask(): boolean[][] {
     return this.#mask;
   }
@@ -29,3 +34,26 @@ export class Tile {
     return elem;
   }
 }
+
+function string_to_mask(mask_string: string): boolean[][] {
+  // mask_string: '\n+++\n+++\n'
+
+  const rows = mask_string.trim().split('\n');
+  // rows: ['+++', '+++']
+
+  const mask = [];
+  for (let x = 0; x < rows[0].length; x++) {
+    mask[x] = Array(rows.length);
+  }
+  // mask: [ [ empty, empty ], [ empty, empty ], [ empty, empty ] ]
+
+  for (let y = 0; y < rows.length; y++) {
+    const row = rows[y];
+    for (let x = 0; x < row.length; x++) {
+      const cell = row[x];
+      mask[x][y] = (cell.toUpperCase() == 'X');
+    }
+  }
+
+  return mask;
+}

ts/tiles.ts

@@ -17,7 +17,16 @@ export const ROAD_LTB = Tile.rectangle('road-ltb', 6, 8);
 export const ROAD_RTB = Tile.rectangle('road-rtb', 6, 8);
 
 // +
-export const ROAD_TBLR = Tile.rectangle('road-tblr', 8, 8);
+export const ROAD_TBLR = Tile.from_mask('road-tblr', `
+.xxxxxx.
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+xxxxxxxx
+.xxxxxx.
+`);
 
 // Tower base
 export const EMPTY = Tile.rectangle('empty', 4, 2);

ts/tower.ts

@@ -4,24 +4,81 @@ import * as tiles from './tiles.js';
 export function main() {
   document.body.style.margin = '0';
   document.body.style.backgroundColor = 'black';
+  document.body.style.display = 'flex';
+  document.body.style.justifyContent = 'center';
 
-  const container = document.createElement('div');
+  const mask = document.createElement('div');
-  document.body.appendChild(container);
+  document.body.appendChild(mask);
-  container.style.width = '100vmin';
+  mask.style.width = 'min(100vw, 125vh)';
-  container.style.height = '100vmin';
+  mask.style.height = 'calc(0.8 * min(100vw, 125vh))';
+  mask.style.overflow = 'hidden';
 
-  const grid = new Grid(container);
+  const real = document.createElement('div');
-  grid.set_size(40, 40);
+  mask.appendChild(real);
+  real.style.width = 'min(140vw, 175vh)';
+  real.style.height = 'calc(0.8 * min(140vw, 175vh))';
+  real.style.position = 'relative';
+  real.style.top = 'calc((-8 / 70) * min(140vw, 175vh))';
+  real.style.left = 'calc((-10 / 70) * min(140vw, 175vh))';
+
+  const grid = new Grid(real);
+  grid.set_size(70, 56);
   grid.set_tileset('tropical');
   grid.set_layers(['road', 'water', 'bridge']);
 
-  grid.add_tile('road', tiles.ROAD_LR, 0, 6);
+  grid.add_tile('road', tiles.ROAD_TB, 20, 46);
-  grid.add_tile('road', tiles.ROAD_LR, 6, 6);
+  grid.add_tile('road', tiles.ROAD_BL, 18, 40);
-  grid.add_tile('road', tiles.ROAD_LR, 12, 6);
+  grid.add_tile('road', tiles.ROAD_TR, 12, 38);
-  grid.add_tile('water', tiles.RIVER_TB, 6, 0);
+  grid.add_tile('road', tiles.ROAD_BR, 12, 32);
-  grid.add_tile('water', tiles.RIVER_TB, 6, 6);
+  grid.add_tile('road', tiles.ROAD_TL, 18, 30);
-  grid.add_tile('water', tiles.RIVER_TB, 6, 12);
+  grid.add_tile('road', tiles.ROAD_BL, 18, 24);
-  grid.add_tile('bridge', tiles.BRIDGE_LR, 5, 6);
+  grid.add_tile('road', tiles.ROAD_TR, 12, 22);
+  grid.add_tile('road', tiles.ROAD_BR, 12, 16);
+  grid.add_tile('road', tiles.ROAD_LR, 18, 16);
+  grid.add_tile('road', tiles.ROAD_TBLR, 24, 14);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 2);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 8);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 22);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 28);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 34);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 40);
+  grid.add_tile('road', tiles.ROAD_TB, 26, 46);
+  grid.add_tile('road', tiles.ROAD_BL, 32, 16);
+  grid.add_tile('road', tiles.ROAD_TB, 34, 22);
+  grid.add_tile('road', tiles.ROAD_TB, 34, 28);
+  grid.add_tile('road', tiles.ROAD_TB, 34, 34);
+  grid.add_tile('road', tiles.ROAD_TR, 34, 40);
+  grid.add_tile('road', tiles.ROAD_LR, 40, 42);
+  grid.add_tile('road', tiles.ROAD_LR, 46, 42);
+  grid.add_tile('road', tiles.ROAD_TL, 52, 40);
+  grid.add_tile('road', tiles.ROAD_BL, 52, 34);
+  grid.add_tile('road', tiles.ROAD_LR, 46, 34);
+  grid.add_tile('road', tiles.ROAD_TR, 40, 32);
+  grid.add_tile('road', tiles.ROAD_BR, 40, 26);
+  grid.add_tile('road', tiles.ROAD_LR, 46, 26);
+  grid.add_tile('road', tiles.ROAD_TL, 52, 24);
+  grid.add_tile('road', tiles.ROAD_BL, 52, 18);
+  grid.add_tile('road', tiles.ROAD_LR, 46, 18);
+  grid.add_tile('road', tiles.ROAD_TR, 40, 16);
+  grid.add_tile('road', tiles.ROAD_BR, 40, 10);
+  grid.add_tile('road', tiles.ROAD_LR, 46, 10);
+  grid.add_tile('road', tiles.ROAD_LR, 52, 10);
+  grid.add_tile('road', tiles.ROAD_LR, 58, 10);
+
+  grid.add_tile('water', tiles.RIVER_TB, 47, 46);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 40);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 34);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 28);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 22);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 16);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 10);
+  grid.add_tile('water', tiles.RIVER_TB, 47, 4);
+
+  grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 42);
+  grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 34);
+  grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 26);
+  grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 18);
+  grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 10);
 };
 
 main();