Skip to content

Ironsworn coding for complete beginners

Jump to bottom
Ben Straub edited this page Dec 16, 2022 · 3 revisions

So you'd like to change something about this system, but you don't know where to start? Here's what to do.

Install some tools

You'll need to install three programs on your computer before getting started.

  1. Visual Studio Code is a text editor, which you'll use to modify the system's code.
  2. GitHub Desktop is a tool we'll use to track changes, and send them back to GitHub.
  3. Node JS is what we'll use to run a development server.
  4. A chromium browser, like Google Chrome or Edge.

Get the code

Load up https://github.com/ben/foundry-ironsworn, and click the green "Code" button near the top. In that menu, find and click "Open with GitHub Desktop," and follow the prompts to make a local copy of the repository.

Next you'll want to launch Visual Studio Code, and go to File > Open Folder. Find the directory you just made with GitHub Desktop.

Start Foundry

When doing development, it's best to keep a separate Foundry world. Start up Foundry, make sure you've got the latest Ironsworn system, and create/open a fresh Ironsworn world to work in. Then make sure you "log out" from the Foundry app (but leave it running); we'll be using a web browser for the rest.

Launch the development server

In VS Code, open up the terminal (View > Terminal, or ctrl-backtick). Type this command and hit enter:

npm install

This will download all of the libraries the system needs to create a build of itself. Next, type this command:

npm start

This starts the development server, which sits in between your browser and Foundry, and provides some nice features for us to work with.

Now open up a browser window, and visit http://localhost:8080. You should see the familiar Foundry login window, so go ahead and log in as the gamemaster.

Make a change

Back in VS Code, hit ctrl-p (cmd-p on mac) to open the file-finder, type in "ironsworn.less" (no quotes) and hit enter. This will open up the file containing the styles for the Ironsworn theme, which is probably active in your open browser tab. Find the line that says this:

.palettize(ironsworn-color, #000000, #ffffff, #ff6600, #ff0000);

…and change the "#ffffff" to say "#ffff00". Save the file (ctrl-s or cmd-s), and switch back to your browser window. You should find that the colors have changed, and if you open a character sheet now, it is unreadably yellow.

Next steps

If all of this works as described, congratulations! You've got a working development environment! For further reading, here are some of the technologies we're using:

And if you have questions, we're usually in the Foundry discord in #foundry-vtt.

Clone this wiki locally