Added basic death save functionality to the health bar

TODO.md

@@ -1,6 +1,4 @@
-Character.js is under construction... expect broken character sheets
-
-issues
+sxissues
 ------
 
 

rpg-docs/.meteor/packages

@@ -13,4 +13,5 @@ random
 dburles:collection-helpers
 reactive-var
 cw4gn3r:jquery-event-drag
+underscore
 

rpg-docs/Model/Character/Characters.js

@@ -121,8 +121,9 @@ Character = function(owner){
 	}
 
 	this.deathSave = {
-		success : 0,
-		fail: 0
+		pass : 0,
+		fail: 0,
+		canDeathSave: true
 	};
 	
 	this.weaponProficiencies = [];
@@ -292,6 +293,19 @@ Characters.helpers({
 				Characters.update(this._id, {$pull: effectToPull});
 			}
 		}
+	},
+	
+	level: function(){
+		var xp = this.attributeValue(this.attributes.experience);
+		var xpTable = [0, 300, 900, 2700, 6500, 14000, 23000, 34000, 48000, 64000,
+					  85000, 100000, 120000, 140000, 165000, 195000, 225000, 265000,
+					  305000, 355000];
+		for(var i = 0, l = xpTable.length; i < l; i++){
+			if(xp < xpTable[i]){
+				return i;
+			}
+		}
+		return 20;
 	}
 });
 

rpg-docs/Model/Character/Constructors/Effect.js

@@ -1,5 +1,5 @@
 Effect = function(stat, value){
 	this.stat = stat;
 	this.value = value;
-	this._id = new Mongo.ObjectID()._str;
+	this._id = Random.id();
 }

rpg-docs/client/views/character/healthBar/healthBar.css

@@ -11,6 +11,8 @@
 	position: relative;
 	height: 30px;
 	flex-grow: 1;
+	display: flex;
+	align-items: center; /* align vertical */
 }
 
 .healthBarGreen{
@@ -39,14 +41,20 @@
 
 .healthBarBorder{
 	position: absolute;
+	top: 0px;
 	left: -1px;
 	height: 0px;
-	width: 227px;
+	width: 228px;
 	border-width: 15px 37px 16px 37px;
 	border-image: url('/png/bar-border.png') 46 112 48 112 stretch;
 	display: flex;
 	justify-content: center; /* align horizontal */
 	align-items: center; /* align vertical */
+	pointer-events: none;
+}
+
+.hpReadout {
+	color: #FFE0B5;
 }
 
 .healthBarButton{
@@ -62,8 +70,74 @@
 .healthBarMinus{
 	
 }
+/*deadbar*/
+.deadText {
+	color: #AF0000;
+	text-align: center;
+	flex-grow: 1;
+	letter-spacing: 10px;
+	font-weight: bold;
+	cursor: default;
+}
 
+/*death saves bar*/
 .deltaHp{
 	position: absolute;
 	top: -20px;
+}
+
+.deathSaveFail{
+	display:inline-block;
+}
+
+.deathSavePass{
+	display: inline-block;
+}
+
+.untickedDeathFail{
+	display: inline-block;
+	width: 30px;
+	height: 28px;
+	background-color: grey;
+}
+
+.tickedDeathFail{
+	display: inline-block;
+	width: 30px;
+	height: 28px;
+	background-color: red;
+}
+
+.untickedDeathPass{
+	display: inline-block;
+	width: 30px;
+	height: 28px;
+	background-color: grey;
+}
+
+.tickedDeathPass{
+	display: inline-block;
+	width: 30px;
+	height: 28px;
+	background-color: green;
+}
+
+.stability{
+	display: inline-block;
+	flex-grow: 1;
+	text-align: center;
+	color: #40D940;
+	cursor: default;
+}
+
+.heal{
+	display: inline-block;
+	flex-grow: 1;
+	text-align: center;
+	color: #FFB44B;
+	cursor: default;
+}
+
+.unstableButton{
+	display: inline-block;
 }

rpg-docs/client/views/character/healthBar/healthBar.html

@@ -1,20 +1,52 @@
 <template name="healthBar">
 	<div class="deltaHpContainer">
-			
-		</div>
+
+	</div>
 	<div class="healthBarContainer">
 		<!--<button class="healthBarMinus healthBarButton"></button>-->
-		<div class= "healthBar">
-			<div class="deltaHp" style="left:{{hpPercentDelta}}%">
-				<button id="applyDelta" style="display: {{showDelta}}">{{deltaHp}}</button>
-			</div>
-			<div class="healthBarYellow" style="width: {{hpYellow}}%"></div>
-			<div class="healthBarRed" style="width: {{hpRed}}%"></div>
-			<div class="healthBarGreen" style="width: {{hpGreen}}%"></div>
-			<div class="healthBarBorder">
-				<span class="hpReadout">{{attributeValue attributes.hitPoints}}/{{maxHp}}</span>
-			</div>
-		</div>
+		{{#if healthy}}
+			{{> hitPointBars}}
+		{{else}}
+			{{# if dead}}
+				{{> deadBar}}
+			{{else}}
+				{{> deathSaves}}
+			{{/if}}
+		{{/if}}
 		<!--<button class="healthBarPlus healthBarButton"></button>-->
 	</div>
+</template>
+
+<template name="hitPointBars">
+	<div class= "healthBar">
+		<div class="deltaHp" style="left:{{hpPercentDelta}}%">
+			<button id="applyDelta" style="display: {{showDelta}}">{{deltaHp}}</button>
+		</div>
+		<div class="healthBarYellow" style="width: {{hpYellow}}%"></div>
+		<div class="healthBarRed" style="width: {{hpRed}}%"></div>
+		<div class="healthBarGreen" style="width: {{hpGreen}}%"></div>
+		<div class="healthBarBorder">
+			<span class="hpReadout">{{attributeValue attributes.hitPoints}}/{{maxHp}}</span>
+		</div>
+	</div>
+</template>
+
+<template name="deadBar">
+	<div class= "healthBar">
+		<div class="deadText">DEAD</div>
+		<div class="healthBarBorder"></div>
+	</div>
+</template>
+	
+<template name="deathSaves">
+	<div class= "healthBar">
+		<div class={{deathFailGT 0}}></div>
+		<div class={{deathFailGT 1}}></div>
+		<div class={{deathFailGT 2}}></div>
+		<div class={{stable}}>{{stabilizeText}}</div>
+		<div class={{deathPassGT 2}}></div>
+		<div class={{deathPassGT 1}}></div>
+		<div class={{deathPassGT 0}}></div>
+		<div class="healthBarBorder"></div>
+	</div>
 </template>

rpg-docs/client/views/character/healthBar/healthBar.js

@@ -1,4 +1,20 @@
 Template.healthBar.helpers({
+	healthy: function(){
+		var hp = this.attributeValue(this.attributes.hitPoints);
+		return hp > 0;
+	},
+	dead: function(){
+		if(this.deathSave.canDeathSave){
+			return this.deathSave.fail >= 3;
+		} else{
+			//creatures that can't make death saves die at 0 HP
+			var hp = this.attributeValue(this.attributes.hitPoints);
+			return hp <= 0;
+		}
+	}
+});
+
+Template.hitPointBars.helpers({
 	hpRed: function(){
 		var currentHp = this.attributeValue(this.attributes.hitPoints);
 		var damage = this.attributes.hitPoints.base;
@@ -58,7 +74,7 @@ Template.healthBar.helpers({
 	}
 });
 
-Template.healthBar.events({
+Template.hitPointBars.events({
 	"dragstart .healthBar": function(event) {
 		Template.instance().startDrag = new ReactiveVar(Template.instance().deltaHp.get());
 	},
@@ -99,4 +115,58 @@ Template.healthBar.events({
 		Characters.update(this._id, {$inc: {"attributes.hitPoints.base": Template.instance().deltaHp.get()}})
 		Template.instance().deltaHp.set(0);
 	}
+});
+
+Template.deadBar.events({
+	"click .deadText": function(){
+		Characters.update(this._id, {$set: {"deathSave.fail": 0}});
+		Characters.update(this._id, {$set: {"deathSave.pass": 0}});
+	}
+});
+
+Template.deathSaves.helpers({
+	deathFailGT: function(num){
+		if(this.deathSave.fail > num) return "tickedDeathFail";
+		else return "untickedDeathFail";
+	},
+	deathPassGT: function(num){
+		if(this.deathSave.pass > num) return "tickedDeathPass";
+		else return "untickedDeathPass";
+	},
+	stable: function(){
+		if(this.deathSave.pass > 0 || this.deathSave.fail > 0){
+			return "stability";
+		} else{
+			return "heal";
+		}
+	},
+	stabilizeText: function(){
+		if(this.deathSave.pass > 0 || this.deathSave.fail > 0){
+			return "stabilize";
+		} else{
+			return "heal";
+		}
+	}
+});
+
+Template.deathSaves.events({
+	"click .stability": function(){
+		Characters.update(this._id, {$set: {"deathSave.fail": 0}});
+		Characters.update(this._id, {$set: {"deathSave.pass": 0}});
+	},
+	"click .heal": function(){
+		Characters.update(this._id, {$inc: {"attributes.hitPoints.base": 1}});
+	},
+	"click .untickedDeathFail" : function(){
+		Characters.update(this._id, {$inc: {"deathSave.fail": 1}});
+	},
+	"click .untickedDeathPass" : function(){
+		Characters.update(this._id, {$inc: {"deathSave.pass": 1}});
+	},
+	"click .tickedDeathFail" : function(){
+		Characters.update(this._id, {$inc: {"deathSave.fail": -1}});
+	},
+	"click .tickedDeathPass" : function(){
+		Characters.update(this._id, {$inc: {"deathSave.pass": -1}});
+	}
 });