Skip to content

Latest commit

 

History

History
126 lines (95 loc) · 3.46 KB

README.md

File metadata and controls

126 lines (95 loc) · 3.46 KB

Togetherness

sjbrown

Tabletop RPGs are no longer just played in physical spaces. More and more, this kind of gaming is being played online, and players are discovering online dice rollers, communal game maps, virtual tabletops, and digital character keepers. But too often these tools are walled gardens whose owners see players as products, not human beings.

Togetherness is a web-based virtual tabletop whose chief aim is the empowerment of players as free human beings participating voluntarily in a community. There are no "owners", just equal participants enjoying a gamut of activities including "creation", "play" and "hosting".

History

After joining The Gauntlet and playing around with the awesome roller, I got the itch to create my own "dice-rolling" application.

Goals

Here are some goals for Togetherness:

  • Document-centric. The state should all live in the document.
  • Use HTML5. Use SVG.
    • Don't reinvent wheels that already exist
    • Use the opportunity to deeply learn the standards
  • No server
    • No software to install
    • Easy for new developers to contribute / fork
  • Use TogetherJS
    • Don't reinvent wheels
    • Meets above goals
    • Batteries included!
      • real time content sync
      • user focus
      • user presence
      • text chat

Live Demo

I'm going to try to keep a demo up and running at https://www.1kfa.com/table

Quick Start

cd /tmp
git clone <this repo>
cd togetherness/src
python2 -m SimpleHTTPServer 8000
# Or,if you prefer Python3 to Python2:
# python3 -m http.server
# Or if you prefer Node.js to Python:
# npm install npx -g; npx http-server -a localhost -p 8000

Then open your browser to localhost:8000

That's it!

Making your own "objects" for the table

Any interactive objects (dice, decks of cards, etc) are simply SVG files.

I'm planning to have the default interface support dynamically inserting foreign SVGs, but for now, you'll have to fork this repo and add a + My Thing button to the index.html file.

<button class="btn" onclick="add_object('svg/v1/my_thing.svg')">
 + My Thing
</button>

Then just add the file svg/v1/my_thing.svg.

Interactivity Interface

To make your object interactive, you need to include some JavaScript.

Your <script> element needs to have an attribute data-namespace with a name that's unique to your object.

Inside the script, there must be one JavaScript object whose name matches that data-namespace value. This object uses 3 specially-named keys to integrate with the main web UI: menu, initialize, and serialize.

<svg x="0" y="0" width="100" height="100">
  <rect x="25" y="25" width="50" height="50" style="fill:#ff0000" />
  <script
    type="text/javascript"
    data-namespace="myThing"
  ><![CDATA[

myThing = {

  menu: {
    'Change Color': {
      eventName: 'changeMyColor',
      applicable: (elem) => { return true },
      uiLabel: (elem) => { return 'Change Color To Green' },
    },
  },

  initialize: function(elem) {
    elem.addEventListener( 'changeMyColor', (evt) => {
      console.log('Changing color!')
      elem.querySelector('rect').style['fill'] = '#00ff00'
    } )
  },

  serialize: function(elem) {
    return { myColor: elem.querySelector('rect').style['fill'] }
  },

}

]]></script>
</svg>