From 3b16e1695864753d23bcef2fce31edbad59b2df1 Mon Sep 17 00:00:00 2001 From: Scott Tolksdorf Date: Sat, 14 Nov 2015 18:29:51 -0500 Subject: [PATCH] Polishing up the monster card --- .../monsterCard/attackSlot/attackSlot.jsx | 7 +- .../monsterCard/attackSlot/attackSlot.less | 6 +- .../naturalCrit/monsterCard/monsterCard.jsx | 94 +++++++++++-------- .../naturalCrit/monsterCard/monsterCard.less | 28 ++++++ client/naturalCrit/naturalCrit.jsx | 3 +- 5 files changed, 92 insertions(+), 46 deletions(-) diff --git a/client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx b/client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx index e68678aa5..7b638dc29 100644 --- a/client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx +++ b/client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx @@ -40,6 +40,7 @@ var AttackSlot = React.createClass({ if(diceRoll[0] == 20) res = 'Crit!'; } this.state.lastRoll[key] = res + this.state.lastRoll[key + 'key'] = _.uniqueId(key); this.setState({ lastRoll : this.state.lastRoll }) @@ -67,8 +68,8 @@ var AttackSlot = React.createClass({ renderNotes : function(){ var notes = _.omit(this.props, ['name', 'atk', 'dmg', 'uses', 'heal']); return _.map(notes, function(text, key){ - return key + ': ' + text - }).join(', '); + return
{key + ': ' + text}
+ }); }, renderRolls : function(){ @@ -86,7 +87,7 @@ var AttackSlot = React.createClass({ })} /> {self.props[type]} - {self.state.lastRoll[type] || ''} + {self.state.lastRoll[type] || ''} }) diff --git a/client/naturalCrit/monsterCard/attackSlot/attackSlot.less b/client/naturalCrit/monsterCard/attackSlot/attackSlot.less index fae4b9133..0a5ee42ad 100644 --- a/client/naturalCrit/monsterCard/attackSlot/attackSlot.less +++ b/client/naturalCrit/monsterCard/attackSlot/attackSlot.less @@ -12,19 +12,23 @@ 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{ + &>span{ font-weight: 800; + .fadeInLeft(); } button{ width : 70px; diff --git a/client/naturalCrit/monsterCard/monsterCard.jsx b/client/naturalCrit/monsterCard/monsterCard.jsx index fd9fb8706..52e4bda16 100644 --- a/client/naturalCrit/monsterCard/monsterCard.jsx +++ b/client/naturalCrit/monsterCard/monsterCard.jsx @@ -32,15 +32,9 @@ var MonsterCard = React.createClass({ getInitialState: function() { return { - //currentHP: this.props.hp, status : 'normal', - usedThings : [], - - lastRoll : { - - }, - - + usedItems : [], + lastRoll : { }, mousePos : null, tempHP : 0 }; @@ -82,6 +76,15 @@ var MonsterCard = React.createClass({ }) }, + 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(){ @@ -100,39 +103,15 @@ var MonsterCard = React.createClass({ }, renderStats : function(){ - - }, - - - rollDice : function(key, notation){ - var additive = 0; - var dice = _.reduce([/\+(.*)/, /\-(.*)/], function(r, regexp){ - var res = r.match(regexp); - if(res){ - additive = res[0]*1; - r = r.replace(res[0], '') - } - return r; - }, notation) - - var numDice = dice.split('d')[0]; - var die = dice.split('d')[1]; - - var diceRoll = _.times(numDice, function(){ - return _.random(1, die); - }); - var res = _.sum(diceRoll) + additive; - if(numDice == 1 && die == 20){ - if(diceRoll[0] == 1) res = 'Fail!'; - if(diceRoll[0] == 20) res = 'Crit!'; + var stats = { + 'fa fa-shield' : this.props.ac, + 'fa fa-hourglass-2' : this.props.initiative, } - this.state.lastRoll[key] = res - this.setState({ - lastRoll : this.state.lastRoll + return _.map(stats, function(val, icon){ + return {val} }) }, - renderAttacks : function(){ var self = this; return _.map(this.props.attacks, function(attack, name){ @@ -147,9 +126,28 @@ var MonsterCard = React.createClass({ }) }, + 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 + {item} + + }); + }, + 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'; @@ -164,7 +162,10 @@ var MonsterCard = React.createClass({ {this.renderHPBox()} -
{this.props.name}
+
+ {this.props.name} + {this.renderStats()} +
{this.renderAttacks()} @@ -172,12 +173,23 @@ var MonsterCard = React.createClass({
{this.renderSpells()}
- {this.props.initiative} - + +
+ {this.renderItems()} +
+
); } }); module.exports = MonsterCard; + +/* + + +{this.props.initiative} + + +*/ \ No newline at end of file diff --git a/client/naturalCrit/monsterCard/monsterCard.less b/client/naturalCrit/monsterCard/monsterCard.less index f3850b8ad..923174c0f 100644 --- a/client/naturalCrit/monsterCard/monsterCard.less +++ b/client/naturalCrit/monsterCard/monsterCard.less @@ -49,6 +49,21 @@ &.dead{ opacity: 0.3; } + + &>.info{ + margin-bottom: 10px; + .name{ + font-size: 1.5em; + margin-right: 10px; + } + .stat{ + font-size: 0.7em; + margin-right: 5px; + i{ + font-size: 0.7em; + } + } + } .hpBox{ .noselect(); position : absolute; @@ -74,4 +89,17 @@ font-weight : 800; } } + + .itemContainer{ + + span{ + cursor: pointer; + font-size: 0.7em; + margin-right: 5px; + &.used{ + text-decoration: line-through; + } + } + + } } \ No newline at end of file diff --git a/client/naturalCrit/naturalCrit.jsx b/client/naturalCrit/naturalCrit.jsx index dc4c66c84..1bc0e29c9 100644 --- a/client/naturalCrit/naturalCrit.jsx +++ b/client/naturalCrit/naturalCrit.jsx @@ -17,6 +17,7 @@ var MonsterManual = { 'goblin' : { "hp" : 40, "mov": 30, + "ac" : 13, "attr" : { "str" : 8, "con" : 8, @@ -49,7 +50,7 @@ var MonsterManual = { } }, "abilities" : ["pack tactics"], - "items" : [] + "items" : ['healing_potion', 'healing_potion', 'ring'] } }