mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-01 10:52:46 +00:00
Workign on the homebrew
This commit is contained in:
Scott Tolksdorf
165
client/naturalCrit/combatManager/combatManager.jsx
Normal file
165
client/naturalCrit/combatManager/combatManager.jsx
Normal file
@@ -0,0 +1,165 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var Sidebar = require('./sidebar/sidebar.jsx');
|
||||
var Encounter = require('./encounter/encounter.jsx');
|
||||
|
||||
var encounters = [
|
||||
{
|
||||
name : 'The Big Bad',
|
||||
desc : 'The big fight!',
|
||||
reward : 'gems',
|
||||
enemies : ['goblin', 'goblin'],
|
||||
reserve : ['goblin'],
|
||||
},
|
||||
{
|
||||
name : 'Demon Goats',
|
||||
desc : 'Gross fight',
|
||||
reward : 'curved horn, goat sac',
|
||||
enemies : ['demon_goat', 'demon_goat', 'demon_goat'],
|
||||
unique : {
|
||||
demon_goat : {
|
||||
"hp" : 140,
|
||||
"ac" : 16,
|
||||
"attr" : {
|
||||
"str" : 8,
|
||||
"con" : 8,
|
||||
"dex" : 8,
|
||||
"int" : 8,
|
||||
"wis" : 8,
|
||||
"cha" : 8
|
||||
},
|
||||
"attacks" : {
|
||||
"charge" : {
|
||||
"atk" : "1d20+5",
|
||||
"dmg" : "1d8+5",
|
||||
"type" : "bludge"
|
||||
}
|
||||
},
|
||||
"abilities" : ["charge"],
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
var defaultMonsterManual = require('naturalCrit/defaultMonsterManual.js');
|
||||
|
||||
var attrMod = function(attr){
|
||||
return Math.floor(attr/2) - 5;
|
||||
}
|
||||
|
||||
|
||||
var Store = require('naturalCrit/combat.store');
|
||||
var Actions = require('naturalCrit/combat.actions');
|
||||
|
||||
|
||||
|
||||
var CombatManager = React.createClass({
|
||||
mixins : [Store.mixin()],
|
||||
|
||||
|
||||
getInitialState: function() {
|
||||
var self = this;
|
||||
return {
|
||||
selectedEncounterIndex : 0,
|
||||
encounters : JSON.parse(localStorage.getItem('encounters')) || encounters,
|
||||
monsterManual : JSON.parse(localStorage.getItem('monsterManual')) || defaultMonsterManual,
|
||||
|
||||
players : localStorage.getItem('players') || 'jasper 13\nzatch 19',
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
onStoreChange : function(){
|
||||
console.log('STORE CAHNGE', Store.getInc());
|
||||
this.setState({
|
||||
inc : Store.getInc()
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
handleEncounterJSONChange : function(encounterIndex, json){
|
||||
this.state.encounters[encounterIndex] = json;
|
||||
this.setState({
|
||||
encounters : this.state.encounters
|
||||
})
|
||||
localStorage.setItem("encounters", JSON.stringify(this.state.encounters));
|
||||
},
|
||||
handleMonsterManualJSONChange : function(json){
|
||||
this.setState({
|
||||
monsterManual : json
|
||||
});
|
||||
localStorage.setItem("monsterManual", JSON.stringify(this.state.monsterManual));
|
||||
},
|
||||
handlePlayerChange : function(e){
|
||||
this.setState({
|
||||
players : e.target.value
|
||||
});
|
||||
localStorage.setItem("players", e.target.value);
|
||||
},
|
||||
handleSelectedEncounterChange : function(encounterIndex){
|
||||
console.log(encounterIndex);
|
||||
this.setState({
|
||||
selectedEncounterIndex : encounterIndex
|
||||
});
|
||||
},
|
||||
handleRemoveEncounter : function(encounterIndex){
|
||||
this.state.encounters.splice(encounterIndex, 1);
|
||||
this.setState({
|
||||
encounters : this.state.encounters
|
||||
});
|
||||
localStorage.setItem("encounters", JSON.stringify(this.state.encounters));
|
||||
},
|
||||
|
||||
renderSelectedEncounter : function(){
|
||||
var self = this;
|
||||
|
||||
if(this.state.selectedEncounterIndex != null && this.state.encounters[this.state.selectedEncounterIndex]){
|
||||
var selectedEncounter = this.state.encounters[this.state.selectedEncounterIndex]
|
||||
return <Encounter
|
||||
key={selectedEncounter.name}
|
||||
{...selectedEncounter}
|
||||
monsterManual={this.state.monsterManual}
|
||||
players={this.state.players}
|
||||
/>
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
temp : function(){
|
||||
Actions.setInc(++this.state.inc);
|
||||
},
|
||||
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
return(
|
||||
<div className='combatManager'>
|
||||
<Sidebar
|
||||
selectedEncounter={this.state.selectedEncounterIndex}
|
||||
encounters={this.state.encounters}
|
||||
monsterManual={this.state.monsterManual}
|
||||
players={this.state.players}
|
||||
|
||||
onSelectEncounter={this.handleSelectedEncounterChange}
|
||||
onRemoveEncounter={this.handleRemoveEncounter}
|
||||
onJSONChange={this.handleEncounterJSONChange}
|
||||
onMonsterManualChange={this.handleMonsterManualJSONChange}
|
||||
onPlayerChange={this.handlePlayerChange}
|
||||
/>
|
||||
|
||||
|
||||
{this.renderSelectedEncounter()}
|
||||
|
||||
<button onClick={this.temp}>YUP {this.state.inc}</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = CombatManager;
|
||||
8
client/naturalCrit/combatManager/combatManager.less
Normal file
8
client/naturalCrit/combatManager/combatManager.less
Normal file
@@ -0,0 +1,8 @@
|
||||
.combatManager{
|
||||
|
||||
.encounterContainer{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
}
|
||||
162
client/naturalCrit/combatManager/encounter/encounter.jsx
Normal file
162
client/naturalCrit/combatManager/encounter/encounter.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var Store = require('naturalCrit/combat.store.js');
|
||||
|
||||
var MonsterCard = require('./monsterCard/monsterCard.jsx');
|
||||
|
||||
|
||||
|
||||
var attrMod = function(attr){
|
||||
return Math.floor(attr/2) - 5;
|
||||
}
|
||||
|
||||
var Encounter = React.createClass({
|
||||
mixins : [Store.mixin()],
|
||||
getInitialState: function() {
|
||||
return {
|
||||
enemies: this.createEnemies(this.props)
|
||||
};
|
||||
},
|
||||
|
||||
onStoreChange : function(){
|
||||
var players = Store.getplayersText();
|
||||
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name : '',
|
||||
desc : '',
|
||||
reward : '',
|
||||
enemies : [],
|
||||
players : '',
|
||||
unique : {},
|
||||
|
||||
monsterManual : {}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
this.setState({
|
||||
enemies : this.createEnemies(nextProps)
|
||||
})
|
||||
},
|
||||
|
||||
createEnemies : function(props){
|
||||
var self = this;
|
||||
return _.indexBy(_.map(props.enemies, function(type, index){
|
||||
return self.createEnemy(props, type, index)
|
||||
}), 'id')
|
||||
},
|
||||
|
||||
createEnemy : function(props, type, index){
|
||||
var stats = props.unique[type] || props.monsterManual[type];
|
||||
if(!stats) return;
|
||||
return _.extend({
|
||||
id : type + index,
|
||||
name : type,
|
||||
currentHP : stats.hp,
|
||||
initiative : _.random(1,20) + attrMod(stats.attr.dex)
|
||||
}, stats);
|
||||
},
|
||||
|
||||
|
||||
updateHP : function(enemyId, newHP){
|
||||
this.state.enemies[enemyId].currentHP = newHP;
|
||||
this.setState({
|
||||
enemies : this.state.enemies
|
||||
});
|
||||
},
|
||||
removeEnemy : function(enemyId){
|
||||
delete this.state.enemies[enemyId];
|
||||
this.setState({
|
||||
enemies : this.state.enemies
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
getPlayerObjects : function(){
|
||||
return _.reduce(this.props.players.split('\n'), function(r, line){
|
||||
var parts = line.split(' ');
|
||||
if(parts.length != 2) return r;
|
||||
r.push({
|
||||
name : parts[0],
|
||||
initiative : parts[1] * 1,
|
||||
isPC : true
|
||||
})
|
||||
return r;
|
||||
},[])
|
||||
},
|
||||
|
||||
|
||||
renderEnemies : function(){
|
||||
var self = this;
|
||||
|
||||
var sortedEnemies = _.sortBy(_.union(_.values(this.state.enemies), this.getPlayerObjects()), function(e){
|
||||
if(e && e.initiative) return -e.initiative;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return _.map(sortedEnemies, function(enemy){
|
||||
if(enemy.isPC){
|
||||
return <PlayerCard {...enemy} key={enemy.name} />
|
||||
}
|
||||
|
||||
return <MonsterCard
|
||||
{...enemy}
|
||||
key={enemy.id}
|
||||
updateHP={self.updateHP.bind(self, enemy.id)}
|
||||
remove={self.removeEnemy.bind(self, enemy.id)}
|
||||
/>
|
||||
})
|
||||
},
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
|
||||
var reward;
|
||||
if(this.props.reward){
|
||||
reward = <div className='reward'>
|
||||
<i className='fa fa-trophy' /> Rewards: {this.props.reward}
|
||||
</div>
|
||||
}
|
||||
|
||||
return(
|
||||
<div className='mainEncounter'>
|
||||
<div className='info'>
|
||||
<h1>{this.props.name}</h1>
|
||||
<p>{this.props.desc}</p>
|
||||
{reward}
|
||||
</div>
|
||||
|
||||
<div className='cardContainer'>
|
||||
{this.renderEnemies()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Encounter;
|
||||
|
||||
|
||||
var PlayerCard = React.createClass({
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name : '',
|
||||
initiative : 0
|
||||
};
|
||||
},
|
||||
render : function(){
|
||||
return <div className='playerCard'>
|
||||
<span className='name'>{_.startCase(this.props.name)}</span>
|
||||
<span className='initiative'><i className='fa fa-hourglass-2'/>{this.props.initiative}</span>
|
||||
</div>
|
||||
},
|
||||
|
||||
})
|
||||
36
client/naturalCrit/combatManager/encounter/encounter.less
Normal file
36
client/naturalCrit/combatManager/encounter/encounter.less
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
.mainEncounter{
|
||||
box-sizing : border-box;
|
||||
overflow : hidden;
|
||||
width : auto;
|
||||
|
||||
&>.info{
|
||||
|
||||
margin-left: 10px;
|
||||
padding-bottom : 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
h1{
|
||||
font-size: 2em;
|
||||
font-weight: 800;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
p{
|
||||
margin-left: 10px;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5em;
|
||||
max-width: 600px;
|
||||
}
|
||||
.reward{
|
||||
font-size: 0.8em;
|
||||
font-weight: 800;
|
||||
margin-top: 5px;
|
||||
i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var RollDice = require('naturalCrit/rollDice');
|
||||
|
||||
var AttackSlot = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name : '',
|
||||
uses : null
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
lastRoll: {},
|
||||
usedCount : 0
|
||||
};
|
||||
},
|
||||
|
||||
rollDice : function(key, notation){
|
||||
var res = RollDice(notation);
|
||||
this.state.lastRoll[key] = res
|
||||
this.state.lastRoll[key + 'key'] = _.uniqueId(key);
|
||||
this.setState({
|
||||
lastRoll : this.state.lastRoll
|
||||
})
|
||||
},
|
||||
|
||||
renderUses : function(){
|
||||
var self = this;
|
||||
if(!this.props.uses) return null;
|
||||
|
||||
return _.times(this.props.uses, function(index){
|
||||
var atCount = index < self.state.usedCount;
|
||||
return <i
|
||||
key={index}
|
||||
className={cx('fa', {'fa-circle-o' : !atCount, 'fa-circle' : atCount})}
|
||||
onClick={self.updateCount.bind(self, atCount)}
|
||||
/>
|
||||
})
|
||||
},
|
||||
updateCount : function(used){
|
||||
this.setState({
|
||||
usedCount : this.state.usedCount + (used ? -1 : 1)
|
||||
});
|
||||
},
|
||||
|
||||
renderNotes : function(){
|
||||
var notes = _.omit(this.props, ['name', 'atk', 'dmg', 'uses', 'heal']);
|
||||
return _.map(notes, function(text, key){
|
||||
return <div key={key}>{key + ': ' + text}</div>
|
||||
});
|
||||
},
|
||||
|
||||
renderRolls : function(){
|
||||
var self = this;
|
||||
|
||||
return _.map(['atk', 'dmg', 'heal'], function(type){
|
||||
if(!self.props[type]) return null;
|
||||
return <div className={cx('roll', type)} key={type}>
|
||||
|
||||
<button onClick={self.rollDice.bind(self, type, self.props[type])}>
|
||||
<i className={cx('fa', {
|
||||
'fa-hand-grab-o' : type=='dmg',
|
||||
'fa-bullseye' : type=='atk',
|
||||
'fa-plus' : type=='heal'
|
||||
})} />
|
||||
{self.props[type]}
|
||||
</button>
|
||||
<span key={self.state.lastRoll[type+'key']}>{self.state.lastRoll[type]}</span>
|
||||
</div>
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
return(
|
||||
<div className='attackSlot'>
|
||||
<div className='info'>
|
||||
<div className='name'>{this.props.name}</div>
|
||||
<div className='uses'>
|
||||
{this.renderUses()}
|
||||
</div>
|
||||
<div className='notes'>
|
||||
{this.renderNotes()}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='rolls'>
|
||||
{this.renderRolls()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = AttackSlot;
|
||||
@@ -0,0 +1,71 @@
|
||||
|
||||
.attackSlot{
|
||||
//border : 1px solid black;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom : 5px;
|
||||
font-size : 0.8em;
|
||||
.info, .rolls{
|
||||
display : inline-block;
|
||||
vertical-align : top;
|
||||
}
|
||||
.info{
|
||||
width : 40%;
|
||||
.name{
|
||||
font-weight : 800;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.notes{
|
||||
font-size : 0.8em;
|
||||
}
|
||||
.uses{
|
||||
cursor : pointer;
|
||||
//font-size: 0.8em;
|
||||
//margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.rolls{
|
||||
.roll{
|
||||
margin-bottom : 2px;
|
||||
&>span{
|
||||
font-weight: 800;
|
||||
.fadeInLeft();
|
||||
}
|
||||
button{
|
||||
width : 70px;
|
||||
margin-right : 5px;
|
||||
cursor : pointer;
|
||||
font-size : 0.7em;
|
||||
font-weight : 800;
|
||||
text-align : left;
|
||||
border : none;
|
||||
outline : 0;
|
||||
i{
|
||||
width : 15px;
|
||||
margin-right : 5px;
|
||||
border-right : 1px solid white;
|
||||
}
|
||||
&:hover{
|
||||
//text-align: right;
|
||||
}
|
||||
}
|
||||
&.atk{
|
||||
button{
|
||||
background-color : fade(@blue, 40%);
|
||||
i { border-color: @blue}
|
||||
}
|
||||
}
|
||||
&.dmg{
|
||||
button{
|
||||
background-color : fade(@red, 40%);
|
||||
i { border-color: @red}
|
||||
}
|
||||
}
|
||||
&.heal{
|
||||
button{
|
||||
background-color : fade(@green, 40%);
|
||||
i { border-color: @green}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var AttackSlot = require('./attackSlot/attackSlot.jsx');
|
||||
|
||||
var MonsterCard = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name : '',
|
||||
hp : 1,
|
||||
currentHP : 1,
|
||||
ac: 1,
|
||||
move : 30,
|
||||
attr : {
|
||||
str : 8,
|
||||
con : 8,
|
||||
dex : 8,
|
||||
int : 8,
|
||||
wis : 8,
|
||||
cha : 8
|
||||
},
|
||||
attacks : {},
|
||||
spells : {},
|
||||
abilities : [],
|
||||
items : [],
|
||||
|
||||
updateHP : function(){},
|
||||
remove : function(){},
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
status : 'normal',
|
||||
usedItems : [],
|
||||
lastRoll : { },
|
||||
mousePos : null,
|
||||
tempHP : 0
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
window.addEventListener('mousemove', this.handleMouseDrag);
|
||||
window.addEventListener('mouseup', this.handleMouseUp);
|
||||
},
|
||||
|
||||
handleMouseDown : function(e){
|
||||
this.setState({
|
||||
mousePos : {
|
||||
x : e.pageX,
|
||||
y : e.pageY,
|
||||
}
|
||||
});
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
},
|
||||
handleMouseUp : function(e){
|
||||
if(!this.state.mousePos) return;
|
||||
|
||||
|
||||
this.props.updateHP(this.props.currentHP + this.state.tempHP);
|
||||
this.setState({
|
||||
mousePos : null,
|
||||
tempHP : 0
|
||||
});
|
||||
},
|
||||
|
||||
handleMouseDrag : function(e){
|
||||
if (!this.state.mousePos) return;
|
||||
var distance = Math.sqrt(Math.pow(e.pageX - this.state.mousePos.x, 2) + Math.pow(e.pageY - this.state.mousePos.y, 2));
|
||||
var mult = (e.pageY > this.state.mousePos.y ? -1 : 1)
|
||||
|
||||
this.setState({
|
||||
tempHP : Math.floor(distance * mult/25)
|
||||
})
|
||||
},
|
||||
|
||||
addUsed : function(item, shouldRemove){
|
||||
if(!shouldRemove) this.state.usedItems.push(item);
|
||||
if(shouldRemove) this.state.usedItems.splice(this.state.usedItems.indexOf(item), 1);
|
||||
|
||||
this.setState({
|
||||
usedItems : this.state.usedItems
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
renderHPBox : function(){
|
||||
var self = this;
|
||||
|
||||
var tempHP
|
||||
if(this.state.tempHP){
|
||||
var sign = (this.state.tempHP > 0 ? '+' : '');
|
||||
tempHP = <span className='tempHP'>{['(',sign,this.state.tempHP,')'].join('')}</span>
|
||||
}
|
||||
|
||||
return <div className='hpBox' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<div className='currentHP'>
|
||||
{tempHP} {this.props.currentHP}
|
||||
</div>
|
||||
{self.renderStats()}
|
||||
</div>
|
||||
},
|
||||
|
||||
renderStats : function(){
|
||||
var stats = {
|
||||
'fa fa-shield' : this.props.ac,
|
||||
//'fa fa-hourglass-2' : this.props.initiative,
|
||||
}
|
||||
return _.map(stats, function(val, icon){
|
||||
return <div className='stat' key={icon}> {val} <i className={icon} /></div>
|
||||
})
|
||||
},
|
||||
|
||||
renderAttacks : function(){
|
||||
var self = this;
|
||||
return _.map(this.props.attacks, function(attack, name){
|
||||
return <AttackSlot key={name} name={name} {...attack} />
|
||||
})
|
||||
},
|
||||
|
||||
renderSpells : function(){
|
||||
var self = this;
|
||||
return _.map(this.props.spells, function(spell, name){
|
||||
return <AttackSlot key={name} name={name} {...spell} />
|
||||
})
|
||||
},
|
||||
|
||||
renderAbilities : function(){
|
||||
return _.map(this.props.abilities, function(text, name){
|
||||
return <div className='ability' key={name}>
|
||||
<span className='name'>{name}</span>: {text}
|
||||
</div>
|
||||
});
|
||||
},
|
||||
|
||||
renderItems : function(){
|
||||
var self = this;
|
||||
var usedItems = this.state.usedItems.slice(0);
|
||||
return _.map(this.props.items, function(item, index){
|
||||
var used = _.contains(usedItems, item);
|
||||
if(used){
|
||||
usedItems.splice(usedItems.indexOf(item), 1);
|
||||
}
|
||||
return <span
|
||||
key={index}
|
||||
className={cx({'used' : used})}
|
||||
onClick={self.addUsed.bind(self, item, used)}>
|
||||
{item}
|
||||
</span>
|
||||
});
|
||||
},
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
var condition = ''
|
||||
if(this.props.currentHP + this.state.tempHP > this.props.hp) condition='overhealed';
|
||||
if(this.props.currentHP + this.state.tempHP <= this.props.hp * 0.5) condition='hurt';
|
||||
if(this.props.currentHP + this.state.tempHP <= this.props.hp * 0.2) condition='last_legs';
|
||||
if(this.props.currentHP + this.state.tempHP <= 0) condition='dead';
|
||||
|
||||
|
||||
return(
|
||||
<div className={cx('monsterCard', condition)}>
|
||||
<div className='healthbar' style={{width : (this.props.currentHP + this.state.tempHP)/this.props.hp*100 + '%'}} />
|
||||
<div className='overhealbar' style={{width : (this.props.currentHP + this.state.tempHP - this.props.hp)/this.props.hp*100 + '%'}} />
|
||||
|
||||
|
||||
{this.renderHPBox()}
|
||||
<div className='info'>
|
||||
<span className='name'>{this.props.name}</span>
|
||||
</div>
|
||||
|
||||
<div className='attackContainer'>
|
||||
{this.renderAttacks()}
|
||||
</div>
|
||||
<div className='spellContainer'>
|
||||
{this.renderSpells()}
|
||||
</div>
|
||||
|
||||
<div className='abilitiesContainer'>
|
||||
{this.renderAbilities()}
|
||||
</div>
|
||||
<div className='itemContainer'>
|
||||
<i className='fa fa-flask' />
|
||||
{this.renderItems()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MonsterCard;
|
||||
|
||||
/*
|
||||
|
||||
|
||||
{this.props.initiative}
|
||||
|
||||
<i className='fa fa-times' onClick={this.props.remove} />
|
||||
*/
|
||||
@@ -0,0 +1,129 @@
|
||||
|
||||
@marginSize : 10px;
|
||||
.playerCard{
|
||||
display : inline-block;
|
||||
box-sizing : border-box;
|
||||
margin : @marginSize;
|
||||
padding : 10px;
|
||||
background-color : white;
|
||||
border : 1px solid #bbb;
|
||||
.name{
|
||||
margin-right : 20px;
|
||||
}
|
||||
.initiative{
|
||||
font-size : 0.8em;
|
||||
i{
|
||||
font-size : 0.8em;
|
||||
}
|
||||
}
|
||||
&:nth-child(5n + 1){ background-color: fade(@blue, 25%); }
|
||||
&:nth-child(5n + 2){ background-color: fade(@purple, 25%); }
|
||||
&:nth-child(5n + 3){ background-color: fade(@steel, 25%); }
|
||||
&:nth-child(5n + 4){ background-color: fade(@green, 25%); }
|
||||
&:nth-child(5n + 5){ background-color: fade(@orange, 25%); }
|
||||
}
|
||||
.monsterCard{
|
||||
position : relative;
|
||||
display : inline-block;
|
||||
vertical-align : top;
|
||||
box-sizing : border-box;
|
||||
width : 220px;
|
||||
margin : @marginSize;
|
||||
padding : 10px;
|
||||
background-color : white;
|
||||
border : 1px solid #bbb;
|
||||
.healthbar{
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
z-index : 50;
|
||||
height : 3px;
|
||||
max-width : 100%;
|
||||
background-color : @green;
|
||||
}
|
||||
.overhealbar{
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
z-index : 100;
|
||||
height : 3px;
|
||||
max-width : 100%;
|
||||
background-color : @blueLight;
|
||||
}
|
||||
&.hurt{
|
||||
.healthbar{
|
||||
background-color : orange;
|
||||
}
|
||||
}
|
||||
&.last_legs{
|
||||
background-color : lighten(@red, 49%);
|
||||
.healthbar{
|
||||
background-color : red;
|
||||
}
|
||||
}
|
||||
&.dead{
|
||||
opacity : 0.3;
|
||||
}
|
||||
&>.info{
|
||||
margin-bottom : 10px;
|
||||
.name{
|
||||
margin-right : 10px;
|
||||
font-size : 1.5em;
|
||||
}
|
||||
.stat{
|
||||
margin-right : 5px;
|
||||
font-size : 0.7em;
|
||||
i{
|
||||
font-size : 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hpBox{
|
||||
.noselect();
|
||||
position : absolute;
|
||||
top : 5px;
|
||||
right : 5px;
|
||||
cursor : pointer;
|
||||
text-align : right;
|
||||
.currentHP{
|
||||
font-size : 2em;
|
||||
font-weight : 800;
|
||||
line-height : 0.8em;
|
||||
.tempHP{
|
||||
vertical-align : top;
|
||||
font-size : 0.4em;
|
||||
line-height : 0.8em;
|
||||
}
|
||||
}
|
||||
.stat{
|
||||
font-size : 0.8em;
|
||||
}
|
||||
.hpText{
|
||||
font-size : 0.6em;
|
||||
font-weight : 800;
|
||||
}
|
||||
}
|
||||
.abilitiesContainer{
|
||||
margin-top : 10px;
|
||||
.ability{
|
||||
font-size: 0.7em;
|
||||
.name{
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemContainer{
|
||||
margin-top : 10px;
|
||||
i{
|
||||
font-size : 0.7em;
|
||||
}
|
||||
span{
|
||||
margin-right : 5px;
|
||||
cursor : pointer;
|
||||
font-size : 0.7em;
|
||||
&.used{
|
||||
text-decoration : line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
client/naturalCrit/combatManager/sidebar/CODE Bold.otf
Normal file
BIN
client/naturalCrit/combatManager/sidebar/CODE Bold.otf
Normal file
Binary file not shown.
BIN
client/naturalCrit/combatManager/sidebar/CODE Light.otf
Normal file
BIN
client/naturalCrit/combatManager/sidebar/CODE Light.otf
Normal file
Binary file not shown.
59
client/naturalCrit/combatManager/sidebar/dmDice/dmDice.jsx
Normal file
59
client/naturalCrit/combatManager/sidebar/dmDice/dmDice.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var RollDice = require('naturalCrit/rollDice');
|
||||
|
||||
var DmDice = React.createClass({
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
lastRoll:{ },
|
||||
diceNotation : {
|
||||
a : "1d20",
|
||||
b : "6d6 + 3",
|
||||
c : "1d20 - 1"
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
roll : function(id){
|
||||
this.state.lastRoll[id] = RollDice(this.state.diceNotation[id]);
|
||||
this.setState({
|
||||
lastRoll : this.state.lastRoll
|
||||
});
|
||||
},
|
||||
handleChange : function(id, e){
|
||||
this.state.diceNotation[id] = e.target.value;
|
||||
this.setState({
|
||||
diceNotation : this.state.diceNotation
|
||||
});
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
renderRolls : function(){
|
||||
var self = this;
|
||||
return _.map(['a', 'b', 'c'], function(id){
|
||||
return <div className='roll' key={id} onClick={self.roll.bind(self, id)}>
|
||||
<input type="text" value={self.state.diceNotation[id]} onChange={self.handleChange.bind(self, id)} />
|
||||
<i className='fa fa-random' />
|
||||
<span key={self.state.lastRoll[id]}>{self.state.lastRoll[id]}</span>
|
||||
</div>
|
||||
})
|
||||
},
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
return(
|
||||
<div className='dmDice'>
|
||||
<h3> <i className='fa fa-random' /> DM Dice </h3>
|
||||
{this.renderRolls()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = DmDice;
|
||||
32
client/naturalCrit/combatManager/sidebar/dmDice/dmDice.less
Normal file
32
client/naturalCrit/combatManager/sidebar/dmDice/dmDice.less
Normal file
@@ -0,0 +1,32 @@
|
||||
.dmDice{
|
||||
|
||||
h3{
|
||||
color : white;
|
||||
background-color: @teal;
|
||||
}
|
||||
|
||||
.roll{
|
||||
cursor: pointer;
|
||||
.noselect();
|
||||
input[type="text"]{
|
||||
margin-left: 10px;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 6px;
|
||||
width : 60px;
|
||||
font-family: monospace;
|
||||
padding : 5px;
|
||||
}
|
||||
i.fa-random{
|
||||
font-size: 0.8em;
|
||||
margin: 0 10px;
|
||||
}
|
||||
span{
|
||||
font-weight: 800;
|
||||
.fadeInLeft();
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: fade(@teal, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var JSONFileEditor = require('naturalCrit/jsonFileEditor/jsonFileEditor.jsx');
|
||||
|
||||
//var GetRandomEncounter = require('naturalCrit/randomEncounter.js');
|
||||
|
||||
var Store = require('naturalCrit/combat.store.js');
|
||||
var Actions = require('naturalCrit/combat.actions.js');
|
||||
|
||||
|
||||
var Encounters = React.createClass({
|
||||
mixins : [Store.mixin()],
|
||||
onStoreChange : function(){
|
||||
this.setState({
|
||||
encounters : Store.getEncounters(),
|
||||
selectedEncounter : Store.getSelectedEncounterIndex()
|
||||
});
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
encounters : Store.getEncounters(),
|
||||
selectedEncounter : Store.getSelectedEncounterIndex()
|
||||
};
|
||||
},
|
||||
/*
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
encounters : [],
|
||||
selectedEncounter : 0,
|
||||
|
||||
onJSONChange : function(encounterIndex, json){},
|
||||
onSelectEncounter : function(encounterIndex){},
|
||||
onRemoveEncounter : function(encounterIndex){}
|
||||
};
|
||||
},
|
||||
*/
|
||||
handleJSONChange : function(encounterIndex, json){
|
||||
//this.props.onJSONChange(encounterIndex, json);
|
||||
Actions.updateEncounter(encounterIndex, json);
|
||||
},
|
||||
handleSelectEncounter : function(encounterIndex){
|
||||
//this.props.onSelectEncounter(encounterIndex);
|
||||
Actions.selectEncounter(encounterIndex);
|
||||
},
|
||||
handleRemoveEncounter : function(encounterIndex){
|
||||
//this.props.onRemoveEncounter(encounterIndex);
|
||||
Actions.removeEncounter(encounterIndex);
|
||||
},
|
||||
addRandomEncounter : function(){
|
||||
Actions.addEncounter();
|
||||
},
|
||||
|
||||
|
||||
renderEncounters : function(){
|
||||
var self = this;
|
||||
return _.map(this.state.encounters, function(encounter, index){
|
||||
|
||||
var isSelected = self.state.selectedEncounter == index;
|
||||
return <div className={cx('encounter' , {'selected' : isSelected})} key={index}>
|
||||
|
||||
<i onClick={self.handleSelectEncounter.bind(self, index)} className={cx('select', 'fa', {
|
||||
'fa-square-o' : !isSelected,
|
||||
'fa-check-square-o' : isSelected,
|
||||
})} />
|
||||
|
||||
|
||||
<JSONFileEditor
|
||||
name={encounter.name}
|
||||
json={encounter}
|
||||
onJSONChange={self.handleJSONChange.bind(self, index)}
|
||||
/>
|
||||
|
||||
<i onClick={self.handleRemoveEncounter.bind(self, index)} className='remove fa fa-times' />
|
||||
</div>
|
||||
})
|
||||
},
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
return(
|
||||
<div className='encounters'>
|
||||
<h3>
|
||||
<i className='fa fa-flag' /> Encounters
|
||||
<button className='addEncounter'>
|
||||
<i className='fa fa-plus' onClick={this.addRandomEncounter}/>
|
||||
</button>
|
||||
</h3>
|
||||
{this.renderEncounters()}
|
||||
|
||||
<div className='controls'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Encounters;
|
||||
@@ -0,0 +1,53 @@
|
||||
|
||||
.encounters{
|
||||
margin-bottom : 20px;
|
||||
h3{
|
||||
background-color : @red;
|
||||
color : white;
|
||||
button{
|
||||
.animate(color);
|
||||
float : right;
|
||||
cursor : pointer;
|
||||
background-color : transparent;
|
||||
border : none;
|
||||
outline : none;
|
||||
&:hover{
|
||||
color : white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.encounter{
|
||||
position : relative;
|
||||
padding-left : 15px;
|
||||
border-left : 0px solid @teal;
|
||||
.animateAll();
|
||||
&:hover{
|
||||
i.remove{
|
||||
opacity : 1;
|
||||
}
|
||||
}
|
||||
i.remove{
|
||||
.animate(opacity);
|
||||
position : absolute;
|
||||
top : 3px;
|
||||
right : 3px;
|
||||
cursor : pointer;
|
||||
opacity : 0;
|
||||
font-size : 0.6em;
|
||||
color : #333;
|
||||
&:hover{
|
||||
color : @red;
|
||||
}
|
||||
}
|
||||
i.select{
|
||||
cursor : pointer;
|
||||
}
|
||||
.jsonFileEditor{
|
||||
display : inline-block;
|
||||
}
|
||||
&.selected{
|
||||
//background-color : fade(@green, 30%);
|
||||
border-left : 8px solid @teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
76
client/naturalCrit/combatManager/sidebar/sidebar.jsx
Normal file
76
client/naturalCrit/combatManager/sidebar/sidebar.jsx
Normal file
@@ -0,0 +1,76 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var JSONFileEditor = require('naturalCrit/jsonFileEditor/jsonFileEditor.jsx');
|
||||
|
||||
var DMDice = require('./dmDice/dmDice.jsx');
|
||||
var Encounters = require('./encounters/encounters.jsx');
|
||||
|
||||
var Store = require('naturalCrit/combat.store.js');
|
||||
var Actions = require('naturalCrit/combat.actions.js');
|
||||
|
||||
|
||||
var Sidebar = React.createClass({
|
||||
mixins : [Store.mixin()],
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
hide : false,
|
||||
|
||||
monsterManual : Store.getMonsterManual(),
|
||||
players : Store.getPlayersText()
|
||||
};
|
||||
},
|
||||
|
||||
onStoreChange : function(){
|
||||
this.setState({
|
||||
players : Store.getPlayersText(),
|
||||
monsterManual : Store.getMonsterManual()
|
||||
})
|
||||
},
|
||||
|
||||
handleLogoClick : function(){
|
||||
this.setState({
|
||||
hide : !this.state.hide
|
||||
})
|
||||
},
|
||||
handleMonsterManualChange : function(json){
|
||||
Actions.updateMonsterManual(json);
|
||||
},
|
||||
handlePlayerChange : function(e){
|
||||
Actions.updatePlayers(e.target.value);
|
||||
},
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
return(
|
||||
<div className={cx('sidebar', {'hide' : this.state.hide})}>
|
||||
<div className='logo'>
|
||||
<svg onClick={this.handleLogoClick} version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"><path d="M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116 c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262 c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358 c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976 c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0 s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083 c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113 c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223 c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562 c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223 C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004 c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002 l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008 c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082 c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076 c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043 c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303 c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035 c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017 c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048 c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026 c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202 L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75 L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645 z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649 l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393 l-38.263,6.959L46.631,69.09z"></path></svg>
|
||||
<span className='name'>
|
||||
<div>Natural<span className='crit'>Crit</span></div>
|
||||
<small>Combat Manager</small>
|
||||
</span>
|
||||
</div>
|
||||
<div className='contents'>
|
||||
<div className='monsterManualContainer'>
|
||||
<JSONFileEditor
|
||||
name="Monster Manual"
|
||||
json={this.state.monsterManual}
|
||||
onJSONChange={this.handleMonsterManualChange}
|
||||
/>
|
||||
</div>
|
||||
<Encounters />
|
||||
<div className='addPlayers'>
|
||||
<h3> <i className='fa fa-group' /> Players </h3>
|
||||
<textarea value={this.state.players} onChange={this.handlePlayerChange} />
|
||||
</div>
|
||||
<DMDice />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Sidebar;
|
||||
90
client/naturalCrit/combatManager/sidebar/sidebar.less
Normal file
90
client/naturalCrit/combatManager/sidebar/sidebar.less
Normal file
@@ -0,0 +1,90 @@
|
||||
|
||||
@font-face {
|
||||
font-family : CodeLight;
|
||||
src : url('/assets/naturalCrit/sidebar/CODE Light.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family : CodeBold;
|
||||
src : url('/assets/naturalCrit/sidebar/CODE Bold.otf');
|
||||
}
|
||||
.sidebar{
|
||||
.animateAll();
|
||||
float : left;
|
||||
box-sizing : border-box;
|
||||
height : 100%;
|
||||
width : @sidebarWidth;
|
||||
padding-bottom : 20px;
|
||||
background-color : white;
|
||||
//border : 1px solid @steel;
|
||||
&.hide{
|
||||
height : 50px;
|
||||
width : 50px;
|
||||
.logo .name{
|
||||
left : -200px;
|
||||
opacity : 0;
|
||||
}
|
||||
.contents{
|
||||
height : 0px;
|
||||
opacity : 0;
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
padding : 10px 10px;
|
||||
background-color : @steel;
|
||||
font-family : 'CodeLight', sans-serif;
|
||||
font-size : 1.8em;
|
||||
color : white;
|
||||
svg{
|
||||
vertical-align : middle;
|
||||
height : 1em;
|
||||
margin-right : 0.2em;
|
||||
cursor : pointer;
|
||||
fill : white;
|
||||
}
|
||||
|
||||
span.name{
|
||||
.animateAll();
|
||||
position : absolute;
|
||||
top : 15px;
|
||||
left : 50px;
|
||||
opacity : 1;
|
||||
font-size: 0.9em;
|
||||
line-height: 0.5em;
|
||||
span.crit{
|
||||
font-family : 'CodeBold';
|
||||
}
|
||||
small{
|
||||
font-size: 0.3em;
|
||||
font-family : 'Open Sans';
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contents{
|
||||
.animate(opacity);
|
||||
box-sizing : border-box;
|
||||
width : 100%;
|
||||
&>*{
|
||||
width : 100%;
|
||||
}
|
||||
h3{
|
||||
padding : 10px;
|
||||
font-size : 0.8em;
|
||||
font-weight : 800;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
.addPlayers{
|
||||
h3{
|
||||
color : white;
|
||||
background-color: @purple;
|
||||
}
|
||||
textarea{
|
||||
height : 80px;
|
||||
width : 100px;
|
||||
margin : 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user