Adding a New Map

Every map requires that you add the following:

• The background images for the map
  • Correcting mistakes in the images for the map
• The map thumbnail into the thumbnails file
• The spawn points
• The locations of all objectives
  • Bomb
  • Hostage
  • Secure
• Camera Positions
• Camera lines-of-sight
• Camera previews
• Ceiling hatch positions
• Drone tunnels
• Room Labels

Background Images

The map images should be added to site/img/{name}/{name}-{floorIndex}.jpg, where name is the name of the map, and floorIndex is such that if a floor number is mentioned ingame (e.g. 2F Balcony) it will match the map.

To ensure the map is scaled correctly for the icons, ensure that the floor hatches in the map images are 29x29px on the image (the more recent maps have poorer resolution and therefore must be rescaled to match). I've been using gimp for image editing.

Map Thubnail

The thumbnail for the map should go in site/img/map-thumbs.jpg, and then dev/scss/main/_select-map.scss should be updated accordingly: Add

&.{name} div.image.thumb {
  @include map-thumb-icon({index});
}

Where index is the 1-based index of the position of the thumbnail in the jpg, and add

body[loaded-map="{name}"] &.{name} p {
  @include map-name-selected();
}

Both should go towards the bottom where the rest of the maps have their respective settings.

General Data

For editing the code, I use VS Code with javascript plugins (including an eslint plugin).

There are two locations for data. The first is dev/lang-terms/lang-terms.js. This has all the text in english. Find mapNames and add the new map's names to the object, and then find mapRooms, and add an object with the names of the rooms. The breaks (<br/>) will be added later as necessary.

The second location to add data is dev/main/main.map-data.js. This is where all of the position data, among other things, is set. First add a reference to your language terms up top: {name}Terms = mapRoomTerms.{name},. Then add an object that looks like this:

{name}: {
  name: mapNames.{name},
  imgUrlPrefix: '{name}',
  objectives: [
    'bomb', 'hostage', 'secure'
  ],
  floors: [
    { top: int, left: int, name: floorTerms.{floor}, [background: true, ][default: true] },
  ],
  hostageObjectives: [
    { floor: int, top: int, left: int },
  ],
  bombObjectives: [
    { floor: int, top: int, left: int, set: int, letter: objectiveTerms.bombShortA },
    { floor: int, top: int, left: int, set: int, letter: objectiveTerms.bombShortB },
  ],
  secureObjectives: [
    { floor: int, top: int, left: int },
  ],
  zoomPoints: {
    topLeft: { top: int, left: int },
    bottomRight: { top: int, left: int }
  },
  compassPoints: {
    top: int, left: int
  },
  ladders: [
    { floor: int, top: int, left: int, otherFloor: ('up'|'down') }
  ],
  cameras: [
    { floor: int, top: int, left: int, id: int, location: {map}Terms.{location}[.removeBreakTags()],
      los: [
        [{top: int, left: int}, {top: int, left: int}[,...]],...
      ] },
  ],
  ceilingHatches: [
    { floor: int, top: int, left: int[, otherFloor: 'up'] },
  ],
  skylights: [
    { floor: int, top: int, left: int[, otherFloor: 'up'] },
  ],
  droneTunnels: [
    { floor: int, top: int, left: int, rotate: deg, size: (int|DRONE_SMALL|DRONE_MED)[, otherFloor: ('up'|'down') },
  ],
  spawnPoints: [
    { letter: spawnTerms.{letter}, top: int, left: int, description: {map}Terms.{location}[.removeBreakTags()][, floor: int] }, 
  ],
  roomLabels: [
    { floor: int, top: int, left: int, description: {map}Terms.location[.removeBreakTags()][, (veryHardToRead|hardToRead): true] }
  ]
}

To help facilitate all position-based items , if you edit dev/js/common/common.global.js and set DEV_MODE to true and then rebuild, every click on the map while not modifying the zoom, and with only 1 floor showing, will print the location to set for an object with a center at that point (use REGULAR/DOUBLE LINE TEXT for anything that isn't a single line of text, which you should use SINGLE LINE TEXT for).

You can also inspect element and modify top and left there (if you highlight numerical values you can step by single pixels with the up/down keys, and by 10 pixels if you hold shift), which is the same value you set in dev/js/main/main.map-data.js.

To make development easier, while working on js files, after building run npm run watch:js, which will rebuild whenever you save a change in a js file. This does take a few seconds though, and requires a refresh of the page every time you want to load changes in.