beyond-encounters's People
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.