Giter Club home page Giter Club logo

beyond-encounters's People

Contributors

andrewvmail avatar jeffkamo avatar

Stargazers

 avatar

Watchers

 avatar

beyond-encounters's Issues

UI Concepts and Cerebral Ideas

Data

state = {

    // `order` represents the active monsters and characters
    // who are active in this encounter, and are organized by
    // initiative.
    order: {
        'giant-poison-snake': {
            ids: ['unique-monsters-1', 'unique-monsters-2'],
            name: 'Snake Group',
            initiative: 5,
        },
       'player-1-id': {
            ids: ['unique-player-1'],
            name: 'Player 1',
            initiative: 10,
        },
       'player-2-id': {
            ids: ['unique-player-2'],
            name: 'Player 2',
            initiative: 1,
        },
    },

    // 'participants' are the list of each individual monster
    // or character, and their active stats (things that
    // change for just that individual) like name, hp, status,
    // and so on.
    participants: {
        'unique-monster-1': {
            dndBeyondId: 'giant-poison-snake',
            name: 'Custom Poison Snake Name',
            maxHp: 30,
            currentHp: 20,
            tempHp: 0,
            status: ''
        },
        'unique-monster-2': {
            dndBeyondId: 'giant-poison-snake',
            name: 'Giant Poison Snake',
            maxHp: 30,
            currentHp: 0,
            tempHp: 0,
            status: 'incapacitated'
        },
        'unique-player-1': {
            id: 'player-1-id',
            name: 'Player 1',
            maxHp: 30,
            currentHp: 20,
            tempHp: 0,
            status: 'poisoned'
        },
        'unique-player-2': {
            id: 'player-2-id',
            name: 'Player 1',
            maxHp: 30,
            currentHp: 20,
            tempHp: 0,
            status: ''
        },
    },

    // `bestiary` is the list of data pulled from D&D
    // Beyond that does not change, such as stat
    // block stats, URL, etc.
    bestiary: {
        'giant-poison-snake': {
            name: 'Giant Poison Snake',
            url: '#snake-url'
        },
        'player-1-id': {
            name: 'Player 1',
            url: '#player-1-url'
        },
        'player-2-id': {
            name: 'Player 2',
            url: '#player-2-url'
        },
    }
}

Initiative List UI

[ 10 ] Player 1 : [ poisoned ]
       HP: ==========-----

[ 5 ]  Snake Group
       - Custom Poison Snake Name
         HP: =====----------
       - Snake 2 : [ incapacitated]
         HP: ---------------

[ 1 ]  Player 2
       HP: ==========-----
  • Notice how players are not grouped together
  • Participants are grouped by their common dndBeyondId
  • Participants are ordered based on their initiative
  • Clicking the initiative number would open a small form that lets you set the value to any number
  • Clicking an HP bar would open a small form that lets you add or subtract HP, add or subtract temporary hit points.
  • Clicking on a participant name will open a form that lets you edit the name
  • Clicking on a group name will open a form that lets you edit the group name

Functions

// Order Functions
// ===

// @param uuid: (string) the unique id of the monster or player being modified
addToOrder(uuid)

// @param id: (string) the id of the group being modified
removeOrderGroup(id)

// @param uuid: (string) the unique id of the monster or player being modified
removeParticipantFromOrder(uuid)

// @param id: (string) the dndBeyondId used as the order group id being modified
// @param initiative: (int) the initiative value, minimum 0
setInitiative(id, initiative)

// @param id: (string) the dndBeyondId used as the order group id being modified
// @param name: (string) the name that the group is being set to
setOrderName(id, name)


// Participant Functions
// ===

// This function generates a new `uuid` for the participant being added
//
// @param object: (object) an object containing the active stats of the participant
addParticipant(object)

// @param id: (string) the unique id of the monster or player being modified
// @param name: (string) the name of the monster of player being set
setName(id, name)

// @param id: (string) the unique id of the monster or player being modified
// @param value: (int) the monster or player's maximum HP value
setMaxHp(id, value)

// Sets a monster or player's HP to the value. If the value is higher than the monster's
// `maxHp`, the monster/player's HP will cap at that maximum value. The HP is also
// floored to a minimum of 0.
//
// @param id: (string) the unique id of the monster or player being modified
// @param value: (int) the value to set the monster or player's HP to
setCurrentHp(id, value)

// If the monster or player has Temporary HP, damage is first removed from that. Then
// any remaining damage is removed from the current HP to a minimum value of 0.
//
// @param id: (string) the unique id of the monster or player being modified
// @param damage: (int) the amount subtracted from the monster or player's current HP
applyDamage(id, damage)

// @param id: (string) the unique id of the monster or player being modified
// @param heal: (int) the amount added to the monster or player's current HP
applyHealing(id, heal)

// @param id: (string) the unique id of the monster or player being modified
// @param value: (int) the amount of temporary HP added to the monster or player, minimum 0
setTempHp(id, value)

// @param id: (string) the unique id of the monster or player being modified
// @param string: (string) the text that describes the monster or character's status
setStatus(id, string)


// Bestiary Functions
// ===

// @param id: (string) the dndBeyondId for the monster or player
// @param object: (object) an object containing the stat block data of the monster or player
addBestiary(id, object)

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.