Code Monkey home page Code Monkey logo

dungeon-revealer's Introduction

dungeon-revealer

Build Status Downloads Release Docker Discord

Dungeon Revealer is an open source self-hosted app for playing pen and paper such as Dungeon and Dragons or Cyberpunk or other tabletop games together.

The main features include revealing game maps to players, moving around tokens on a map, a dice roll chat and sharing notes and images.

Dungeon Revealer supports both desktop clients and mobile clients, such as tablets or phones. It can be used for in person gaming on a local network or for online gaming via the internet.

Join the discord server. Check out the wiki for a detailed walkthrough!

What the DM Sees

alt text

You can protect the DM area by setting a password.

What the players see

alt text

Getting Started

Getting the app

The easiest way to use dungeon-revealer is to download the app from the releases page here on github. There is also a docker image that is kept up to date with the releases in this repository.

Prebuilt app

Download the app for your system from the releases page. We provide builds for Windows, Linux, and OSX.

Running from the command prompt will present connection information and some debugging. Optionally, you may set a password for the dungeon master and/or players by setting the environmental variables DM_PASSWORD and PC_PASSWORD when starting the app. e.g. for linux PC_PASSWORD='password1' DM_PASSWORD='password2' ./dungeon-revealer-linux Leaving a variable undefined will disable authentication and allow public access for that section of the map.

Linux

Open the zip file and extract the files to your preferred location.

Then you can run the app directly in the terminal.

./dungeon-revealer-linux

Then go to localhost:3000 in your browser and point your players to <YOUR_IPADDRESS>:3000. This information is also present in the terminal window.

There is also a community maintained AUR package.

OSX

Open the zip file and extract the files to your preferred location.

Double click the app. A terminal will open with useful information. Then go to localhost:3000 in your browser and point your players to <YOUR_IPADDRESS>:3000. This information is also present in the terminal window.

Windows

Double click the app. A command prompt will open with useful information. Then go to localhost:3000 in your browser and point your players to <YOUR_IPADDRESS>:3000. This information is also present in the command prompt window.

Docker

We provide docker images for x64 and arm architectures. An up to date version of docker is required to make sure the correct image architecture is pulled for your host machine. To create an instance, run the following:

docker pull ghcr.io/dungeon-revealer/dungeon-revealer:v1.17.1
docker run -e DM_PASSWORD=<password> -e PC_PASSWORD=<password> -p <PORT>:3000 -v <DATA_DIR>:/usr/src/app/data -d ghcr.io/dungeon-revealer/dungeon-revealer:latest
  • Replace <password> with your chosen passwords.
  • Replace <PORT> with your preferred port.
  • <DATA_DIR> is the directory on the host filesystem in which you want to store the maps and settings. <DATA_DIR> must be an absolute path. One way to achieve this in linux is to navigate to the directory you want in the terminal and then use $PWD/data as <DATA_DIR>.

In your browser, go to <YOUR_IPADDRESS>:<PORT>/dm. If your players are on the local network, have them go to <YOUR_IPADDRESS>:<PORT>.

Heroku

Heroku is a platform supporting one-click deployments and includes a free usage tier. Sign up for a free account then click the button below. Give your app a unique name, set any required passwords, and click Deploy App to start the build process.

Note: the Heroku deployment will not preserve user data over time (see #405).

button

Using the app

The app is separated into two sections. One for the dungeon master and one for the players. Check out the wiki for a detailed walkthrough!

Dungeon Master

To use dungeon-revealer, the game master and the players must be on the same local network (usually a wifi network). The game master will start the server (see Installation), navigate to the server's URL in a web browser, click on the Dungeon Master link, and then enter a password if it is set. At this point, they will be prompted to upload an image file of the map to share with the other players. The other players will navigate to the server using their own browsers (laptop, tablet, or phone) and will remain at the home page. The connection information is displayed in command prompt for convenience.

To clear areas of the map, click and draw on the map. You can switch the brush mode by clicking the "Reveal" or "Shroud" button. Alternatively, you can select an area to clear or shroud by clicking the "Select Area" button. Whenever the game master clears some of the fog of war from the map and it is ready to share with the players, they will click "Send" and the revealed areas of the map will appear in the players' browsers. What appears as a shadow to the DM will appear as pure blackness to players, thus only revealing the cleared sections of the map to them. The "Mark" button will display a circle for a period of time to indicate a point of interest.

To switch to a different map, click "Map Library", and then select one of the maps you have already uploaded and click "Load". The "LIVE" indicator in the lower right indicates if the map currently on the dungeon master page is being presented on the player page. the "Stop Sharing" button will blank the player page in preparation for a new map to be loaded.

You can add token with the "Token" tool. Click anywhere on the map to place it. The token can be changed by opening the context menu trough right-clicking on a single token. You can alter it's label, color and size.

Shortcuts
Key Functionality
1 select move tool.
2 select area tool.
3 select brush tool.
4 select mark tool.
5 select token tool.
Shift toggle between hide/reveal.
CMD/Ctrl + S push map to players.
Hold Alt use move tool while Alt key is pressed and return to previous mode after Alt is released.

Players

Navigate to the server using a web browser and wait at the home page. (The connection information is displayed in command prompt for convenience.) When the dungeon master is ready, they will push a map to your webpage. You will see either a black screen or a partially covered image. You can zoom in/out and pan the map. On a long click you will place a "point of interest" on the map that will show as a red circle.

Contributing

See the CONTRIBUTING.md.

dungeon-revealer's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

dungeon-revealer's Issues

Draggable tokens to represent players and monsters

Add player/monster tokens. The impetus is that while players can visualize the map, they have to mentally track their own position. Beyond that, it may be necessary to stake a claim to a position for the sake of game rules.

Operations to be performed on tokens:

  • Create
  • Move
  • Delete

Other suggestions:

  • Color selection for tokens, so monsters of a certain type could all be a certain color. Perhaps from a palette.
  • Adjustable sizes for tokens, or ability to pick from a palette of size options at creation time. Since we do not know the scale of user's maps in advance, they might want tokens to correspond to their own grid system.
  • Ability to add a letter or sub image to a token to more easily identify that token, perhaps "A" for a character named "Alex" or the image of a bow for a player with a bow.
  • Players could move tokens. A complex permissions system may be overkill, but it might be nice for players to move tokens rather than constantly coordinating with the DM, e.g. "move my token 5 down and 2 to the left".

Update documentation for v1.2.0 and wiki

The documentation needs to be updated to reflect v.1.2.0. We should also address the issues raised in #92 and #87 and possibly #47.

I've started editing the readme to address these. However, the readme is starting to feel bloated and clunky. @apclary @n1ru4l, how do you feel about moving the bulk of the installation and usage sections to a wiki?

I'll put in a draft PR soon with everything in the readme so you can see what it would look like.

Suggestion - Multiple maps

Hi apclary !

First, thank you so much for this tool ! It is really simple and efficient, and fits exactly my needs as a DM !

Here is a suggestion to make the tool even more cool. Could you add multiple maps support ? For dungeons with multiple levels, for example, it would be awesome if the DM could switch back and forth between maps, saving the currently cleared area of the maps.

Build Process / Bundle App

The end goal would be to have ability use an EXE that hosts the app locally. Instead of needing to install node and download the app from get.

I will be working on creating a build (Researching node.js, nexe or pkg generate the package)

I was able to create an exe, but need to do more testing. I will also create an linux package as well. I (I did see the heroku app of this)

Look for a PR soon.

Implement zooming

It would be nice to be able to zoom the images (especially on the client side). My group plays on a TV and it is almost always required to scale the maps to fit the minis.

macosx executable is not executable by default

I was testing the 1.2.0 draft release when realizing that the macosx executable is not executable by default. It only outputs a mess of code, after doing chmod +x everything worked as expected.

@maxb2 Would this be fixable by running chmod +x on the CI before uploading?

React implementation breaks Docker image

#48 breaks the docker container at runtime.
Error:

> [email protected] start /usr/src/app
> node ./bin/dungeon-revealer

fs.js:948
  binding.stat(pathModule._makeLong(path));
          ^

Error: ENOENT: no such file or directory, stat '/usr/src/app/build/favicon.ico'
    at Object.fs.statSync (fs.js:948:11)
    at resolveSync (/usr/src/app/node_modules/serve-favicon/index.js:187:17)
    at favicon (/usr/src/app/node_modules/serve-favicon/index.js:61:12)
    at Object.<anonymous> (/usr/src/app/app.js:54:9)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node ./bin/dungeon-revealer`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-05-01T15_26_34_203Z-debug.log

Mobile Safari Compatibility

Currently, the experience in mobile Safari browsers is a bit horrible.

  • Using Pinch Zoom Drags the document (instead of only the map)
  • Excessive (double) tapping results in zooming into the document (instead of the map)

I have already achieved making the player area usable.

We should tackle this in two phases. First, the player area, then the admin area.

The admin section, however, is on a whole other level... The browser keeps crashing randomly without giving any clear information. Even with the remote debugger attached you get no information.

Select area to reveal fog

On Roll20 you can reveal the fog area by selecting an area via click drag release.

This would be an useful addition for revealing huge quadratic shapes without having to click the increase brush size button for ages.

In addition to that, this feature would improve the usability on tablets where you do not have a cursor and therefore cannot exactly say how large the revealed area from the brush will be.

I will work on this feature.

[feature request] Simple drawing tools

It would be nice for the DM (maybe even the players) to be able to draw (freehand) on the map.

This would mean that players and the DM can track where they are and where the monsters are.

Without this, the tool is just limited to showing what the players can see.

gulp

or maybe grunt

Change dockercloud CI tag

I would suggest changing the dockercloud ci tag to dev instead of latest. This is because we tend to implement small changes in master here on github without necessarily incrementing the version number and issuing a release. I think the latest tag on docker should be reserved for tagged releases here on github. The travis build from #56 will build the images associated with a github release/tag and push them to dockercloud with both the latest tag and a version tag.

Linux binary making directory in an inappropriate place

The linux binary is trying to make a folder at /home/uploads. Could the program make the directories in the directory that it is being run instead?

Error:

pkg/prelude/bootstrap.js:1178
      throw error;
      ^

Error: EACCES: permission denied, mkdir '/home/uploads/'
    at Object.fs.mkdirSync (fs.js:874:3)
    at Object.<anonymous> (/snapshot/dungeon-revealer/app.js:45:6)
    at Module._compile (pkg/prelude/bootstrap.js:1254:22)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:711:10)
    at Module.load (internal/modules/cjs/loader.js:610:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:549:12)
    at Function.Module._load (internal/modules/cjs/loader.js:541:3)
    at Module.require (internal/modules/cjs/loader.js:648:17)
    at Module.require (pkg/prelude/bootstrap.js:1159:31)
    at require (internal/modules/cjs/helpers.js:20:18)

Uploading a new map doesn't always work

Trying to upload a new map doesn't always work. After clicking new map and uploading a file, the previous map is still loaded in the page. After refreshing the page you can successfully upload a new map once and then it is broken again. I saw this behavior in both firefox and chromium.

Log:

> [email protected] start /usr/src/app
> node ./bin/dungeon-revealer

Listening at http://localhost:3000
Point your browser to that address
Have your players point their browsers to http://[REDACTED]:3000
Thu, 09 May 2019 20:52:28 GMT express deprecated res.sendfile: Use res.sendFile instead at app.js:155:7
GET / 200 7.509 ms - 2932
GET /stylesheets/bootstrap.min.css 200 1.944 ms - 117024
GET /static/js/main.48fe2250.chunk.js 200 1.401 ms - 904
GET /static/css/main.9aace31b.chunk.css 200 1.816 ms - 2543
GET /static/js/3.b716f758.chunk.js 200 1.707 ms - 125421
GET /static/js/2.0131b56b.chunk.js 200 0.423 ms - 110966
GET /static/js/5.1e0501b5.chunk.js 200 0.625 ms - 2399
GET /favicon.ico 200 1.445 ms - 34494
GET /fonts/folkard.woff 200 0.514 ms - 18464
GET /images/DungeonEntranceMedium.jpg 200 0.577 ms - 3788500
a user connected

Connect as the DM

a user disconnected
Thu, 09 May 2019 20:53:11 GMT express deprecated res.sendfile: Use res.sendFile instead at app.js:159:7
GET /dm 200 1.177 ms - 2932
GET /stylesheets/bootstrap.min.css 304 0.842 ms - -
GET /static/css/main.9aace31b.chunk.css 304 0.715 ms - -
GET /static/js/3.b716f758.chunk.js 304 0.635 ms - -
GET /static/js/main.48fe2250.chunk.js 304 0.618 ms - -
GET /static/js/4.7ea716b6.chunk.js 200 0.435 ms - 12848
GET /dm/map 401 1.048 ms - 0
Uploading image to /usr/src/uploads/
GET /dm/map 404 1.630 ms - 9

Upload first map

map uploaded
POST /upload 200 4.577 ms - 2
GET /dm/map 200 0.635 ms - 7859

Upload 2nd map (still shows previous map)

Deleting old map /usr/src/uploads/map.png
map uploaded
POST /upload 200 6.293 ms - 2

Refresh site (first map still on screen)

GET /dm 304 0.562 ms - -
GET /stylesheets/bootstrap.min.css 304 0.545 ms - -
GET /static/css/main.9aace31b.chunk.css 304 0.613 ms - -
GET /static/js/3.b716f758.chunk.js 304 0.610 ms - -
GET /static/js/main.48fe2250.chunk.js 304 0.619 ms - -
GET /static/js/4.7ea716b6.chunk.js 304 0.217 ms - -
GET /dm/map 200 0.490 ms - 10362
GET /dm/map 304 0.299 ms - -

Upload 3rd map (replaces map as expected)

Deleting old map /usr/src/uploads/map.png
map uploaded
POST /upload 200 77.631 ms - 2
GET /dm/map 200 0.669 ms - 15212424

Upload 4th map (3rd map still on screen)

Deleting old map /usr/src/uploads/map.png
map uploaded
POST /upload 200 3.066 ms - 2

It looks like when you upload a map, it doesn't always GET /dm/map.

Error in documentation

The documentation on the site and in the console output is incorrect. Navigating to the DM screen with only localhost:PORT will take you to the player view. You must navigate to localhost:PORT/dm to reach the DM view.

Cross Browser Integration Tests

I have worked with BrowserStack before, they also have a plan for open source projects. We would need to apply for that: https://www.browserstack.com/open-source

IMHO low-level unit tests are cool. However. I think integration/frontend tests would be a better approach for us.

We could test common desktop browsers aka safari, chrome and also some mobile browsers and link a list in the readme so that users know what they should use.

Brush sizing inconsistent step size

I enlarged the brush then shrunk it and got a small brush instead of the medium one. The medium sized brush can no longer be accessed as enlarging goes to big size and shrinking goes to small size.

(In Chrome)

Grid Lines

Grid Lines on both player and dm screen. Looking at implementing this as well.

FYI: I currently use this app for my huge screen that the players play on.
Also looking into splitting off the map image into a separate channels, only passing the map once. (Either a URL, Video, or Image once)

Leaving the other channel for the FOW, and Grid Lines. (So I can do live updates, with bigger maps)

DM link dead

When selecting the "Dungeon Master" link on the homepage. I get a "Not Found" message at address/dm.

The console outputs:

a user connected
GET /dm 404 0.827 ms - 9
a user disconnected

Use a frontend framework

The UI can become quite complex with all the planned features. Maybe a frontend framework could help improve the overall quality of this project. We do not have to instantly rewrite everything, we could start by introducing it for one of the new features and do stuff step by step. Having to update the DOM manually after state changes are actually annoying to me since I cannot remember when I last worked without a library like react, ember or vue.

Upgrading packages.

Currently upgrading packages.

Last problem is working through the kinks of the latest socket IO.

image

Improve Send Performance

I noticed that the more of a map is revealed the longer the sending/receiving aka time to send until the player sees the updates increases drastically. This might be because sending a black image is faster than sending the actual map.

Maybe it would be possible to send the actual map initially and only send the updated fog image after updates. This would allow users to see the whole map (not just the revealed parts) if they use the developer tools to inspect the DOM or trace the HTTP requests. However, since this tool is intended for home use I do not think cheating would be an issue.

Do you have any other optimizations in mind? Detecting affected areas (that the dm draws on) and sending only those could be a more complicated but also effective change.

dm-area: reduce the amount of used canvases

Currently, there are three canvases which have quite some impact on performance (especially when zooming/dragging).

When removing the cursor & fog canvas from the DOM I notice a significant performance improvement.
I am pretty sure this is caused by the transparency/absolute positioning of the different stacked canvases.

We can definitely move the cursor stuff onto the object SVG. However, I am still unsure about the shadow canvas. Maybe we can merge both the map and shadow canvas.

I am as always open for suggestions ๐Ÿค”

DM Movable UX Dialogs (Suggestion)

I noticed during my last game. The bottom UX seemed to get in the way for my larger maps.

image

It would nice to make the UX box's drag-able/movable so that I can get to the areas hidden by the UX.

pull request incoming

Hi Apclary -

Not sure if you are actively working on dungeon-reveler, but I had a few ideas for improvements that I worked on today.

  1. added an option for a square option to the fow cursor
  2. added an outline to the fow cursor

I am still debugging an issue with the square cursor, some funky behavior due to the reliance on lineWidth and lineCap that I am trying to debut. You can checkout my repo here: https://github.com/aaronmyhre/dungeon-revealer

Anyways, just thought I would send you a heads up to see if you are interested in a pull request.

Aaron

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.