From 83186ec38a810a1bedf9f23f1a9a36226723a598 Mon Sep 17 00:00:00 2001
From: Thaum <stefanzermatten@gmail.com>
Date: Tue, 24 Feb 2015 13:40:50 +0000
Subject: [PATCH] Moved all stats to stats tab, implemented hit dice

---
 rpg-docs/client/views/GeneralCSS/general.css  |   8 +
 .../client/views/GeneralCSS/globalDetail.css  |   6 +
 .../Stats/abilityCards/abilityCards.html      |  37 ++--
 .../character/Stats/hitDice/hitDice.html      |  24 +++
 .../views/character/Stats/hitDice/hitDice.js  |  25 +++
 .../client/views/character/Stats/stats.html   |  95 +++++++++-
 .../views/character/characterSheet.html       |   2 +-
 .../views/character/features/features.css     |   9 -
 .../views/character/features/features.html    |  55 ++----
 .../views/character/features/features.js      |  12 +-
 .../views/character/healthBar/healthBar.css   | 143 --------------
 .../views/character/healthBar/healthBar.html  |  52 -----
 .../views/character/healthBar/healthBar.js    | 177 ------------------
 .../views/character/healthCard/healthCard.css |  25 +++
 .../character/healthCard/healthCard.html      |  15 ++
 .../views/character/healthCard/healthCard.js  |   7 +
 .../views/character/inventory/inventory.css   |  16 +-
 .../personaDetailsDialog.html                 |   6 -
 .../persona/textDialog/textDialog.html        |   6 -
 19 files changed, 249 insertions(+), 471 deletions(-)
 create mode 100644 rpg-docs/client/views/character/Stats/hitDice/hitDice.html
 create mode 100644 rpg-docs/client/views/character/Stats/hitDice/hitDice.js
 delete mode 100644 rpg-docs/client/views/character/healthBar/healthBar.css
 delete mode 100644 rpg-docs/client/views/character/healthBar/healthBar.html
 delete mode 100644 rpg-docs/client/views/character/healthBar/healthBar.js
 create mode 100644 rpg-docs/client/views/character/healthCard/healthCard.css
 create mode 100644 rpg-docs/client/views/character/healthCard/healthCard.html
 create mode 100644 rpg-docs/client/views/character/healthCard/healthCard.js

diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css
index b72f967d..8fd32771 100644
--- a/rpg-docs/client/views/GeneralCSS/general.css
+++ b/rpg-docs/client/views/GeneralCSS/general.css
@@ -172,3 +172,11 @@ paper-fab-menu /deep/ .container {
 .fullwidth {
 	width: 100%;
 }
+
+.padded {
+	padding: 16px;
+}
+
+.leftRound{
+	border-radius: 2px 0 0 2px;
+}
diff --git a/rpg-docs/client/views/GeneralCSS/globalDetail.css b/rpg-docs/client/views/GeneralCSS/globalDetail.css
index 0a93d6ed..850317fa 100644
--- a/rpg-docs/client/views/GeneralCSS/globalDetail.css
+++ b/rpg-docs/client/views/GeneralCSS/globalDetail.css
@@ -46,6 +46,12 @@
 	border-radius: 2px 2px 0 0;
 }
 
+@media (max-width: 640px) {
+	#globalDetail core-toolbar {
+		border-radius: 0;
+	}
+}
+
 @media (max-width: 640px) {
 	#globalDetail {
 		top: 0 !important;
diff --git a/rpg-docs/client/views/character/Stats/abilityCards/abilityCards.html b/rpg-docs/client/views/character/Stats/abilityCards/abilityCards.html
index 4ecc87cd..0522fca5 100644
--- a/rpg-docs/client/views/character/Stats/abilityCards/abilityCards.html
+++ b/rpg-docs/client/views/character/Stats/abilityCards/abilityCards.html
@@ -1,10 +1,14 @@
-<template name="abilityCards">
-	{{> strengthCard}}
-	{{> dexterityCard}}
-	{{> constitutionCard}}
-	{{> intelligenceCard}}
-	{{> wisdomCard}}
-	{{> charismaCard}}
+<template name="abilityMiniCard">
+	<paper-shadow class="card double">
+		<div class="abilityScore white-text {{color}}">
+			{{> ripple color="#eee"}}
+			<h1 class="display1">{{../attributeValue ability}}</h1>
+			<h2>{{../abilityMod ability}}</h2>
+		</div>
+		<div class="abilityCardRight subhead" layout horizontal center>
+			{{title}}
+		</div>
+	</paper-shadow>
 </template>
 
 <template name="strengthCard">
@@ -33,7 +37,6 @@
 		<div class="abilityCardRight">
 			<h1>Dexterity</h1>
 			{{> skillRow name="Save" skill="dexteritySave"}}
-			{{> skillRow name="Initiative" skill="initiative"}}
 			<hr>
 			{{> skillRow name="Acrobatics" skill="acrobatics"}}
 			{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
@@ -53,18 +56,6 @@
 			<h1>Constitution</h1>
 			{{> skillRow name="Save" skill="constitutionSave"}}
 			<hr>
-			<h1 class="attribute" hero-id="d6HitDice">
-				{{> hitDice hitDice="d6HitDice" d="6"}}
-			</h1>
-			<h1 class="attribute" hero-id="d8HitDice">
-				{{> hitDice hitDice="d8HitDice" d="8"}}
-			</h1>
-			<h1 class="attribute" hero-id="d10HitDice">
-				{{> hitDice hitDice="d10HitDice" d="10"}}
-			</h1>
-			<h1 class="attribute" hero-id="d12HitDice">
-				{{> hitDice hitDice="d12HitDice" d="12"}}
-			</h1>
 		</div>
 	</paper-shadow>
 </template>
@@ -126,10 +117,4 @@
 			{{> skillRow name="Persuasion" skill="persuasion"}}
 		</div>
 	</paper-shadow>
-</template>
-
-<template name="hitDice">
-	{{# if ../attributeBase hitDice}}
-		{{../attributeValue hitDice}}d{{d}} {{../abilityMod "constitution"}}
-	{{/if}}
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/Stats/hitDice/hitDice.html b/rpg-docs/client/views/character/Stats/hitDice/hitDice.html
new file mode 100644
index 00000000..7740adde
--- /dev/null
+++ b/rpg-docs/client/views/character/Stats/hitDice/hitDice.html
@@ -0,0 +1,24 @@
+<template name="hitDice">
+	{{#if char.attributeBase name}}
+		<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
+			<div class="containerLeft green">
+				<div class="resourceValue" layout vertical center>
+					<div>
+						{{../attributeValue name}}
+					</div>
+					<div class="title white-text">
+						d{{diceNum}} {{../abilityMod "constitution"}}
+					</div>
+				</div>
+				<div class="resourceButtons">
+					<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
+					<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
+				</div>
+			</div>
+			<div class="containerRight" flex relative horizontal layout center>
+				Hit Dice
+				<paper-ripple fit></paper-ripple>
+			</div>
+		</paper-shadow>
+	{{/if}}
+</template>
diff --git a/rpg-docs/client/views/character/Stats/hitDice/hitDice.js b/rpg-docs/client/views/character/Stats/hitDice/hitDice.js
new file mode 100644
index 00000000..632fbf0d
--- /dev/null
+++ b/rpg-docs/client/views/character/Stats/hitDice/hitDice.js
@@ -0,0 +1,25 @@
+Template.hitDice.helpers({
+	cantIncrement: function(){
+		return !(this.char.attributeValue(this.name) < this.char.attributeBase(this.name));
+	},
+	cantDecrement: function(){
+		return !(this.char.attributeValue(this.name) > 0);
+	}
+});
+
+Template.hitDice.events({
+	"tap .resourceUp": function(event){
+		if(this.char.attributeValue(this.name) < this.char.attributeBase(this.name)){
+			var modifier = {$inc: {}};
+			modifier.$inc[this.name + ".adjustment"] = 1;
+			Characters.update(this.char._id, modifier, {validate: false});
+		}
+	},
+	"tap .resourceDown": function(event){
+		if(this.char.attributeValue(this.name) > 0){
+			var modifier = {$inc: {}};
+			modifier.$inc[this.name + ".adjustment"] = -1;
+			Characters.update(this.char._id, modifier, {validate: false});
+		}
+	}
+});
diff --git a/rpg-docs/client/views/character/Stats/stats.html b/rpg-docs/client/views/character/Stats/stats.html
index b85a49a0..8f07f03d 100644
--- a/rpg-docs/client/views/character/Stats/stats.html
+++ b/rpg-docs/client/views/character/Stats/stats.html
@@ -1,7 +1,100 @@
 <template name="stats">
 	<div class="scroll-y" fit>
+		<div class="resourceCards" layout horizontal wrap>
+			{{> healthCard}}
+		</div>
 		<div id="stats" class="containers" >
-			{{> abilityCards}}
+			<!--Ability Scores-->
+			{{> abilityMiniCard ability="strength" title="Strength" color="red"}}
+			{{> abilityMiniCard ability="dexterity" title="Dexterity" color="indigo"}}
+			{{> abilityMiniCard ability="constitution" title="Constitution" color="green"}}
+			{{> abilityMiniCard ability="intelligence" title="Intelligence" color="deep-orange"}}
+			{{> abilityMiniCard ability="wisdom" title="Wisdom" color="purple"}}
+			{{> abilityMiniCard ability="charisma" title="Charisma" color="pink"}}
+			<!--Armor-->
+			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
+				<div class="containerLeft teal">
+					{{attributeValue "armor"}}
+				</div>
+				<div class="containerRight" flex horizontal layout center>
+					Armor Class
+				</div>
+				<paper-ripple fit></paper-ripple>
+			</paper-shadow>
+			<!--Speed-->
+			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
+				<div class="containerLeft teal">
+					{{attributeValue "speed"}}
+				</div>
+				<div class="containerRight" flex horizontal layout center>
+					Speed
+				</div>
+				<paper-ripple fit></paper-ripple>
+			</paper-shadow>
+			<!--Initiative-->
+			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
+				<div class="containerLeft indigo">
+					{{skillMod "initiative"}}
+				</div>
+				<div class="containerRight" flex horizontal layout center>
+					Initiative
+				</div>
+				<paper-ripple fit></paper-ripple>
+			</paper-shadow>
+			<!--Proficiency Bonus-->
+			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
+				<div class="containerLeft blue">
+					+{{attributeValue "proficiencyBonus"}}
+				</div>
+				<div class="containerRight" flex horizontal layout center>
+					Proficiency Bonus
+				</div>
+				<paper-ripple fit></paper-ripple>
+			</paper-shadow>
+			{{>hitDice name="d6HitDice" diceNum="6" char=this}}
+			{{>hitDice name="d8HitDice" diceNum="8" char=this}}
+			{{>hitDice name="d10HitDice" diceNum="10" char=this}}
+			{{>hitDice name="d12HitDice" diceNum="12" char=this}}
+			<!--Saving Throws-->
+			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+				<div class="containerTop teal white-text" layout horizontal center>
+					<div class="containerName subhead" hero-id="title" flex>Saving Throws</div>
+				</div>
+				<div flex class="containerMain">
+					{{> skillRow name="Strength" skill="strengthSave"}}
+					{{> skillRow name="Dexterity" skill="dexteritySave"}}
+					{{> skillRow name="Constitution" skill="constitutionSave"}}
+					{{> skillRow name="Intelligence" skill="intelligenceSave"}}
+					{{> skillRow name="Wisdom" skill="wisdomSave"}}
+					{{> skillRow name="Charisma" skill="charismaSave"}}
+				</div>
+			</paper-shadow>
+			<!--Skills-->
+			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+				<div class="containerTop blue white-text" layout horizontal center>
+					<div class="containerName subhead" hero-id="title" flex>Skills</div>
+				</div>
+				<div flex class="containerMain">
+					{{> skillRow name="Acrobatics" skill="acrobatics"}}
+					{{> skillRow name="Animal Handling" skill="animalHandling"}}
+					{{> skillRow name="Arcana" skill="arcana"}}
+					{{> skillRow name="Athletics" skill="athletics"}}
+					{{> skillRow name="Deception" skill="deception"}}
+					{{> skillRow name="History" skill="history"}}
+					{{> skillRow name="Insight" skill="insight"}}
+					{{> skillRow name="Intimidation" skill="intimidation"}}
+					{{> skillRow name="Investigation" skill="investigation"}}
+					{{> skillRow name="Medicine" skill="medicine"}}
+					{{> skillRow name="Nature" skill="nature"}}
+					{{> skillRow name="Perception" skill="perception" showPassive="true"}}
+					{{> skillRow name="Performance" skill="performance"}}
+					{{> skillRow name="Persuasion" skill="persuasion"}}
+					{{> skillRow name="Religion" skill="religion"}}
+					{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
+					{{> skillRow name="Stealth" skill="stealth"}}
+					{{> skillRow name="Survival" skill="survival"}}
+				</div>
+			</paper-shadow>
 		</div>
 	</div>
 </template>
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index d8e58d41..e523d379 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -11,7 +11,7 @@
 				<paper-tab>Stats</paper-tab>
 				<paper-tab>Features</paper-tab>
 				<paper-tab>Inventory</paper-tab>
-				<paper-tab>Spellbook</paper-tab>
+				<paper-tab>Spells</paper-tab>
 				<paper-tab>Persona</paper-tab>
 				<paper-tab>Journal</paper-tab>
 			</paper-tabs>
diff --git a/rpg-docs/client/views/character/features/features.css b/rpg-docs/client/views/character/features/features.css
index 6fd9cc19..3db8f419 100644
--- a/rpg-docs/client/views/character/features/features.css
+++ b/rpg-docs/client/views/character/features/features.css
@@ -22,12 +22,3 @@
 	width: 100%;
 	padding: 0 16px 0 0;
 }
-
-.healthCard paper-slider{
-	width: 100%;
-}
-
-#hitPointSlider::shadow #sliderBar::shadow #activeProgress {
-	background-color: #0f9d58;
-	height: 50px;
-}
diff --git a/rpg-docs/client/views/character/features/features.html b/rpg-docs/client/views/character/features/features.html
index 6491b5e0..e5d7e65e 100644
--- a/rpg-docs/client/views/character/features/features.html
+++ b/rpg-docs/client/views/character/features/features.html
@@ -1,49 +1,18 @@
 <template name="features">
 	<div fit>
 		<div class="scroll-y" fit>
-			<div class="resourceCards" layout horizontal wrap>
-				<paper-shadow class="card container healthCard" hero-id="main" {{detailHero}} layout vertical>
-					<paper-slider id="hitPointSlider"
-							  value={{attributeValue "hitPoints"}}
-							  max={{attributeBase "hitPoints"}} 
-							  editable pin
-							  role="slider"
-							  ></paper-slider>
-				</paper-shadow>
-				<!--Armor-->
-				<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
-					<div class="containerLeft">
-						{{attributeValue "armor"}}
-					</div>
-					<div class="containerRight" flex horizontal layout center>
-						Armor Class
-					</div>
-					<paper-ripple fit></paper-ripple>
-				</paper-shadow>
-				<!--Speed-->
-				<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
-					<div class="containerLeft">
-						{{attributeValue "speed"}}
-					</div>
-					<div class="containerRight" flex horizontal layout center>
-						Speed
-					</div>
-					<paper-ripple fit></paper-ripple>
-				</paper-shadow>
-				<!--ki-->
-				{{>resource name="ki" title="Ki Points" char=this}}
-				<!--sorceryPoints-->
-				{{>resource name="sorceryPoints" title="Sorcery Points" char=this}}
-				<!--rages-->
-				{{>resource name="rages" title="Rages" char=this}}
-				<!--superiorityDice-->
-				{{>resource name="superiorityDice" title="Superiority Dice" char=this}}
-				<!--expertiseDice-->
-				{{>resource name="expertiseDice" title="Expertise Dice" char=this}}
-				{{>gridPadding num="6" class="card container"}}
-			</div>
-			<!--<div class="cardHeader" layout horizontal center>Features</div>-->
 			<div class="containers">
+				<!--expertiseDice-->
+				{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
+				<!--ki-->
+				{{>resource name="ki" title="Ki Points" color="teal" char=this}}
+				<!--rages-->
+				{{>resource name="rages" title="Rages" color="teal" char=this}}
+				<!--sorceryPoints-->
+				{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
+				<!--superiorityDice-->
+				{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
+				<!--features-->
 				{{#each features}}
 					<paper-shadow class="card container featureCard"  hero-id="main" {{detailHero}}>
 						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
@@ -77,7 +46,7 @@
 <template name="resource">
 	{{#if char.attributeBase name}}
 		<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
-			<div class="containerLeft">
+			<div class="containerLeft {{getColor}}">
 				<div class="resourceValue">{{char.attributeValue name}}</div>
 				<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
 				<div class="resourceButtons">
diff --git a/rpg-docs/client/views/character/features/features.js b/rpg-docs/client/views/character/features/features.js
index 46250404..bc5d29b9 100644
--- a/rpg-docs/client/views/character/features/features.js
+++ b/rpg-docs/client/views/character/features/features.js
@@ -39,11 +39,6 @@ Template.features.events({
 	"tap .resetFeature": function(event){
 		var featureId = this._id;
 		Features.update(featureId, {$set: {used: 0}});
-	},
-	"change #hitPointSlider": function(event){
-		var value = event.currentTarget.value;
-		var adjustment = value - this.attributeBase("hitPoints");
-		Characters.update(this._id, {$set: {"hitPoints.adjustment": adjustment}});
 	}
 });
 
@@ -53,6 +48,13 @@ Template.resource.helpers({
 	},
 	cantDecrement: function(){
 		return !(this.char.attributeValue(this.name) > 0);
+	},
+	getColor: function(){
+		if(this.char.attributeValue(this.name) > 0){
+			return this.color;
+		} else {
+			return "grey";
+		}
 	}
 });
 
diff --git a/rpg-docs/client/views/character/healthBar/healthBar.css b/rpg-docs/client/views/character/healthBar/healthBar.css
deleted file mode 100644
index b32cbd5d..00000000
--- a/rpg-docs/client/views/character/healthBar/healthBar.css
+++ /dev/null
@@ -1,143 +0,0 @@
-.healthBarContainer{
-	width: 300px;
-	height: 30px;
-	display: flex;
-	position: relative;
-	align-items: center; /* align vertical */
-	margin-top: 25px;
-}
-
-.healthBar{
-	position: relative;
-	height: 30px;
-	flex-grow: 1;
-	display: flex;
-	align-items: center; /* align vertical */
-}
-
-.healthBarGreen{
-	position: absolute;
-	top: 2px;
-	height: 26px;
-	border-radius: 15px;
-	background-color: #008C00;
-}
-
-.healthBarRed{
-	position: absolute;
-	top: 2px;
-	height: 26px;
-	border-radius: 15px;
-	background-color: #AF0000;
-}
-
-.healthBarYellow{
-	position: absolute;
-	top: 2px;
-	height: 26px;
-	border-radius: 15px;
-	background-color: #CA9548;
-}
-
-.healthBarBorder{
-	position: absolute;
-	top: 0px;
-	left: -1px;
-	height: 0px;
-	width: 302px;
-	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{
-	display: inline-block;
-	width: 30px;
-	height: 30px;
-}
-
-.healthBarPlus{
-	
-}
-
-.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;
-}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/healthBar/healthBar.html b/rpg-docs/client/views/character/healthBar/healthBar.html
deleted file mode 100644
index a23eacda..00000000
--- a/rpg-docs/client/views/character/healthBar/healthBar.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<template name="healthBar">
-	<div class="deltaHpContainer">
-
-	</div>
-	<div class="healthBarContainer">
-		<!--<button class="healthBarMinus healthBarButton"></button>-->
-		{{#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 "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>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/healthBar/healthBar.js b/rpg-docs/client/views/character/healthBar/healthBar.js
deleted file mode 100644
index 4a5466f2..00000000
--- a/rpg-docs/client/views/character/healthBar/healthBar.js
+++ /dev/null
@@ -1,177 +0,0 @@
-Template.healthBar.helpers({
-	healthy: function(){
-		var hp = this.attributeValue("hitPoints");
-		return hp > 0;
-	},
-	dead: function(){
-		var deathSave = this.getField("deathSave");
-		if(deathSave.canDeathSave){
-			return deathSave.fail >= 3;
-		} else{
-			//creatures that can't make death saves die at 0 HP
-			var hp = this.attributeValue("hitPoints");
-			return hp <= 0;
-		}
-	}
-});
-
-Template.hitPointBars.helpers({
-	hpRed: function(){
-		var currentHp = this.attributeValue("hitPoints");
-		var damage = this.getField("hitPoints").base;
-		return 100*(currentHp/(currentHp - damage));
-	},
-	hpGreen: function(){
-		var currentHp = this.attributeValue("hitPoints");
-		var damage = this.getField("hitPoints").base;
-		var maxHp = currentHp - damage;
-		var percent =  100*(currentHp/ maxHp);
-		var change = 100 * Template.instance().deltaHp.get() / maxHp;
-		if(change < 0){
-			return percent + change;
-		}else{
-			return percent;
-		}
-	},
-	hpYellow: function(){
-		var currentHp = this.attributeValue("hitPoints");
-		var damage = this.getField("hitPoints").base;
-		var maxHp = currentHp - damage;
-		var percent =  100*(currentHp/ maxHp);
-		var change = 100 * Template.instance().deltaHp.get() / maxHp;
-		if(change > 0){
-			return percent + change;
-		} else{
-			return percent;
-		}
-	},
-	hpPercentDelta: function(){
-		if(!Template.instance().deltaHp){
-			Template.instance().deltaHp = new ReactiveVar(0);
-		}
-		var currentHp = this.attributeValue("hitPoints");
-		var damage = this.getField("hitPoints").base;
-		var maxHp = currentHp - damage;
-		var percent =  100*(currentHp/ maxHp);
-		var change = 100 * Template.instance().deltaHp.get() / maxHp;
-		return percent + change;
-	},
-	maxHp: function(){
-		var currentHp = this.attributeValue("hitPoints");
-		var damage = this.getField("hitPoints").base;
-		return currentHp - damage;
-	},
-	deltaHp: function(){
-		if(!Template.instance().deltaHp){
-			Template.instance().deltaHp = new ReactiveVar(0);
-		}
-		return Template.instance().deltaHp.get();
-	},
-	showDelta: function(){
-		if(Template.instance().deltaHp){
-			if(Template.instance().deltaHp.get() !== 0) return "initial";
-		}
-		return "none";
-	}
-});
-
-Template.hitPointBars.events({
-	"dragstart .healthBar": function(event) {
-		Template.instance().startDrag = new ReactiveVar(Template.instance().deltaHp.get());
-	},
-	"drag": function(event, templateInstance, handler){
-		//the width of the bar, fetch dynamically if needed
-		var healthBarWidth = 300;
-		var hpLeft = this.attributeValue("hitPoints");
-		var damage = this.getField("hitPoints").base;
-		var maxHp = hpLeft - damage;
-		var dragMultiplier = maxHp / healthBarWidth; 
-		var newValue = dragMultiplier * handler.deltaX + Template.instance().startDrag.get();
-		//don't heal more than -damage
-		newValue = newValue < -damage ? newValue : -damage;
-		//dont damage more than hit points left
-		newValue = newValue > -hpLeft ? newValue : -hpLeft;
-		//floor the value
-		newValue = Math.floor(newValue);
-		//set the value
-		Template.instance().deltaHp.set(newValue);
-	},
-	"click .healthBarPlus": function(event){
-		var newValue = Template.instance().deltaHp.get() + 1;
-		//don't heal more than -damage
-		var damage = this.getField("hitPoints").base;
-		newValue = newValue < -damage ? newValue : -damage;
-		//set value
-		Template.instance().deltaHp.set(newValue);
-	},
-	"click .healthBarMinus": function(event){
-		var newValue = Template.instance().deltaHp.get() - 1;
-		//dont damage more than hit points left
-		var hpLeft = this.getField("hitPoints").base;
-		newValue = newValue > -hpLeft ? newValue : -hpLeft;
-		//set value
-		Template.instance().deltaHp.set(newValue);
-	},
-	"click #applyDelta": function(event){
-		Characters.update(this._id, {$inc: {"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){
-		var deathSave = this.getField("deathSave");
-		if(deathSave.fail > num) return "tickedDeathFail";
-		else return "untickedDeathFail";
-	},
-	deathPassGT: function(num){
-		var deathSave = this.getField("deathSave");
-		if(deathSave.pass > num) return "tickedDeathPass";
-		else return "untickedDeathPass";
-	},
-	stable: function(){
-		var deathSave = this.getField("deathSave");
-		if(deathSave.pass > 0 || deathSave.fail > 0){
-			return "stability";
-		} else{
-			return "heal";
-		}
-	},
-	stabilizeText: function(){
-		var deathSave = this.getField("deathSave");
-		if(deathSave.pass > 0 || 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: {"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}});
-	}
-});
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/healthCard/healthCard.css b/rpg-docs/client/views/character/healthCard/healthCard.css
new file mode 100644
index 00000000..b1664340
--- /dev/null
+++ b/rpg-docs/client/views/character/healthCard/healthCard.css
@@ -0,0 +1,25 @@
+.healthCard paper-slider{
+	width: 100%;
+}
+
+/*Slider knob color*/
+#hitPointSlider::shadow #sliderKnobInner {
+	background-color: #0f9d58;
+}
+
+/*Slider pin*/
+#hitPointSlider::shadow #sliderKnobInner::before {
+	background-color: #0f9d58;
+	height: 32px;
+	width: 32px;
+}
+
+/*Slider pin text*/
+#hitPointSlider::shadow #sliderKnob > #sliderKnobInner::after {
+	font-size: 16px;
+}
+
+/*Slider bar*/
+#hitPointSlider::shadow #sliderBar::shadow #activeProgress {
+	background-color: #0f9d58;
+}
diff --git a/rpg-docs/client/views/character/healthCard/healthCard.html b/rpg-docs/client/views/character/healthCard/healthCard.html
new file mode 100644
index 00000000..49534c6b
--- /dev/null
+++ b/rpg-docs/client/views/character/healthCard/healthCard.html
@@ -0,0 +1,15 @@
+<template name="healthCard">
+	<paper-shadow class="card container healthCard" hero-id="main" {{detailHero}} layout horizontal>
+		<div class="green white-text title padded leftRound" layout horizontal center>
+			Hit Points
+		</div>
+		<div flex layout vertical around-justified>
+			<paper-slider id="hitPointSlider"
+						  value={{attributeValue "hitPoints"}}
+						  max={{attributeBase "hitPoints"}} 
+						  editable pin
+						  role="slider"
+						  ></paper-slider>
+		</div>
+	</paper-shadow>
+</template>
diff --git a/rpg-docs/client/views/character/healthCard/healthCard.js b/rpg-docs/client/views/character/healthCard/healthCard.js
new file mode 100644
index 00000000..fe0d3d23
--- /dev/null
+++ b/rpg-docs/client/views/character/healthCard/healthCard.js
@@ -0,0 +1,7 @@
+Template.healthCard.events({
+	"change #hitPointSlider": function(event){
+		var value = event.currentTarget.value;
+		var adjustment = value - this.attributeBase("hitPoints");
+		Characters.update(this._id, {$set: {"hitPoints.adjustment": adjustment}});
+	}
+});
diff --git a/rpg-docs/client/views/character/inventory/inventory.css b/rpg-docs/client/views/character/inventory/inventory.css
index 3b48002d..7cc208b3 100644
--- a/rpg-docs/client/views/character/inventory/inventory.css
+++ b/rpg-docs/client/views/character/inventory/inventory.css
@@ -1,3 +1,12 @@
+div#stats {
+	-webkit-column-width: 200px;
+	   -moz-column-width: 200px;
+	        column-width: 200px;
+	-webkit-column-count: 4;
+       -moz-column-count: 4;
+            column-count: 4;
+}
+
 .containers {
 	-webkit-column-width: 300px;
 	   -moz-column-width: 300px;
@@ -11,8 +20,7 @@
 }
 
 .containerLeft {
-	padding: 16px;
-	background-color: #2196F3;
+	padding: 16px 16px 16px 24px;
 	display: flex;
 	justify-content: center;
 	flex-direction: row;
@@ -26,6 +34,10 @@
 	letter-spacing: 0;
 }
 
+.statCard .containerLeft {
+	padding: 16px;
+}
+
 .containerRight {
 	padding: 16px;
 	cursor: pointer;
diff --git a/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html b/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html
index ef005bd3..8e7b3c72 100644
--- a/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html
+++ b/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html
@@ -3,12 +3,6 @@
 		<core-toolbar class="deep-purple white-text" hero-id="toolbar" hero>
 			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
 			<div flex hero-id="title" hero>{{name}}</div>
-			<paper-icon-button id="deleteContainer" 
-							   role="button"
-							   tabindex="0"
-							   icon="delete" 
-							   aria-label="Delete Feature" 
-							   noink></paper-icon-button>
 		</core-toolbar>
 		<div class="detailContent">
 			<!--Name-->
diff --git a/rpg-docs/client/views/character/persona/textDialog/textDialog.html b/rpg-docs/client/views/character/persona/textDialog/textDialog.html
index badc22e1..7d280fd3 100644
--- a/rpg-docs/client/views/character/persona/textDialog/textDialog.html
+++ b/rpg-docs/client/views/character/persona/textDialog/textDialog.html
@@ -3,12 +3,6 @@
 		<core-toolbar hero-id="toolbar" hero class={{colorClass}}>
 			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
 			<div flex hero-id="title" hero>{{title}}</div>
-			<paper-icon-button id="deleteContainer" 
-							   role="button"
-							   tabindex="0"
-							   icon="delete" 
-							   aria-label="Delete Feature" 
-							   noink></paper-icon-button>
 		</core-toolbar>
 		<div class="detailContent">
 			<!--Description-->