griefed/ltt-mapmaker repository overview

⁠Screenshots

⁠Let Them Trade Map Maker

ltt-mapmaker is a visual map maker for the game Let Them Trade⁠ by Spaceflower⁠, a german indie-gamestudio.

⁠Using lttmm

Simply click on a button in the center of a tile and select the tile you want it to change to. Do so for the whole map. After your map looks good to you, hit the "DOWNLOAD MAP"-button in the top-right. This will generate a .json-file and download it which will contain your configuration as a Let Them Trade map.

⁠TODOs

• Add infobutton/box telling users how to load their maps in-game (so far only relevant for playtests) map fromfile - Opens a "Open file"-dialog
• Figure out how to generate random maps (very low on the priority list)
• Allow users to set the size of the map

⁠Deploying lttmm

If you wish to manually deploy lttmm, download the latest lttmm-x.x.x.tar.gz or lttmm-x.x.x.zip from the Releases⁠ page and use these files to deploy it. I expect you to know how to deploy these files with NGINX or similar software, as providing a complete guide on how to do so would blow up the README.

⁠Docker

⁠Docker-Compose

Create a docker-compose.yml-file in your preferred location and add the following to it after editing it to your liking:

version: '3'
services:
  ltt-mapmaker:
    image: ghcr.io/griefed/ltt-mapmaker:latest
    container_name: ltt-mapmaker
    restart: unless-stopped
    environment:
      - TZ=Europe/Berlin # Your Timezone
      - PUID=1000 # Your user ID
      - PGID=1000 # your group ID
    ports:
      - 80:80
      - 443:443

After running docker-compose up -d, lttmm will be available at localhost:80 and localhost:443.

⁠Docker run

Run the following command, after editing it to your liking:

docker create \
  --name=ltt-mapmaker \
  -e TZ=Europe/Berlin `# Your Timezone` \
  -e PUID=1000 `# Your user ID` \
  -e PGID=1000 `# Your group ID` \
  -p 80:80 \
  -p 443:443 \
  --restart unless-stopped \
  ghcr.io/griefed/ltt-mapmaker:latest

After running the command above, lttmm will be available at localhost:80 and localhost:443.

⁠Making changes

If you wish to make changes, simply clone this repository, install the dependencies with npm install, start the app in development mode (hot-code reloading, error reporting, etc.) with quasar dev and make your changes, lint the files npm run lint, build the app for production with quasar build.

⁠Expanding tiles

Should Let Them Trade ever introduce more tiles to the game, a couple of things need to be done in order to expand lttmm with those new tiles. Edit Tile.vue⁠:

Here's what the item for the barren-tile looks like. If you wish to add a new item, copy'n'paste this and change

• change barren in @click="barren" to the name of the new tile
• create the icon for the new tile and change barren in <img src="~assets/tiles/barren.webp"/> to the name of the new tile
  • images are of the webp-format and 55x55 pixels in size.
  • images for item-selection go into src/assets/tiles
• change Barren in <q-item-label>Barren</q-item-label> to the name of the new tile

        <q-item clickable v-close-popup @click="barren">
          <q-item-section avatar>
            <q-avatar>
              <img src="~assets/tiles/barren.webp"/>
            </q-avatar>
          </q-item-section>
          <q-item-section>
            <q-item-label>Barren</q-item-label>
          </q-item-section>
        </q-item>

After that is done, you need to add a new method for said new tile. Copy'n'paste this from the methods: {-section and change

• change barren in the name of the method barren () { to the name of the new tile
• change Barren in console.log('Clicked on Barren'); to the name of the new tile
• change barren in this.label = 'barren'; to the name of the new tile
• change brown-6 in this.color = 'brown-6'; to a suitable Quasar colour⁠ of the new tile. This is the button colour.
• change white in this.textcolor = 'white'; to black if this.color of the new tile is bright, improves readability
• change /barren_tile.webp in this.backgroundImage = 'background-image: url(/tiles/barren_tile.webp);' to a suitable image of the new tile
  • images are of the webp-format and usually ~50x57 pixels in size
  • images for tiles to into public/tiles

    barren () {
  console.log('Clicked on Barren');
  this.label = 'barren';
  this.color = 'brown-6';
  this.textcolor = 'white';
  this.backgroundImage = 'background-image: url(/tiles/barren_tile.webp);'
},

Congratulations! You've added a new tile to lttmm!

⁠Expanding/changing random map names

If you wish to expand/change the random name generator, edit const reticulating and/or getMapName() in the MainLayout.vue⁠.

⁠Other things to note

Hexagon-shaped tiles would not have been possible without the help of this awesome tool available at csshexagon on github.io⁠ by the awesome brenna⁠.