Giter VIP home page Giter VIP logo

dungeon-mapper's Introduction

Dungeon Mapper โ€ƒ Travis (.org) Requires.io GitHub issues GitHub npm

Archived: Originally forked from apclary/dungeon-revealer at a time when it was unmaintained. That project has since been revived with many excellent features added and should be used instead of this project.

Display digital maps to players of tabletop RPGs

This web app for tabletop RPGs allows the Dumgeon Master to reveal selected areas of a digital map to players. This allows you to keep certain areas of the map hidden from the players until they discover them.

DM's View

DM's view

Players View

Player's view

Originally forked from apclary/dungeon-revealer, now updated, refactored and maintained with new features.

Example images used above from Dungeon Mapster.

Installing / Getting started

If you are happy using git, node and npm/yarn it is as simple as:

npm install dungeon-mapper
npm start

Otherwise you'll need the following:

  1. Go to https://nodejs.org/download/ and download and install Node. Node is the runtime for this software, which basically means you need it to make the software work. Only one person needs Node (assumed to be the DM).
  2. Once Node is installed, open a command prompt.
  • For Mac users, press Command + Space and type "terminal" into Spotlight. Press enter and a prompt should open.
  • For Windows users, press the Windows key and type "command prompt" or "cmd" into the search box and then press enter.
  • For Linux users, you already know how to open the command prompt.
  1. Using the command prompt, change to whatever directory you want to keep this program in.
  2. Once you are in that directory, type git clone https://github.com/Crainbows/dungeon-mapper.git ./ into the command prompt and press enter.
  3. Then type npm install into the command prompt and press enter and wait a little bit while it installs.
  4. Once it's done type npm start into the prompt. Some messages should appear letting you know where to naviagte to in your web browser.
  • On some Windows machines, a firewall prompt will appear. Check all of the checkboxes and click OK.

Usage

Once you have run npm start you should be given a local ip address for your players to use. If they enter this address in their browsers they will be ready to go.

The DM needs to navigate to http://localhost:3000/dm on the same device the server was started on. They will then be able to begin uploading maps and removing the fog of war. Maps will remain until deleted but currently fog of war data will be deleted as soon as the DM browser window closes. If you have multiple displays or want to use streaming devices such as chromecast the DM can also open a second window and browse to http://localhost:3000 to see the same view as the players.

Once finished clicking the Quit button will shutdown the server.

Developing

If you are interested in developing this project further get the dev dependencies to allow for testing and linting:

git clone https://github.com/Crainbows/dungeon-mapper.git
cd dungeon-mapper/
npm install --save-dev

We are open to pull requests and new features and ideas.

Built With

  • Vue.js
  • Jest
  • Webpack
  • Laravel Mix
  • Dropzone.js

TODO

  • Roll-up Map class into Vue component.
    • Implement Template for Map Class
  • Use fowContext.getImageData and fowContext.putImageData to save FoW long-term.
    • Save FoW Data as JSON with same map name.
  • Convert to Electron app.

Versioning

We can maybe use SemVer for versioning. For the versions available, see the link to tags on this repository.

Style guide

We currently use eslint:reccomended with slight modifications.

Licensing

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.