Messing around with image borders

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

@@ -0,0 +1,22 @@
+.floatBox.ability {
+	width: 85px;
+	text-align: center;
+	display: inline-block;
+}
+
+.abilityName {
+	
+}
+
+.abilityScore {
+	font-size: 2em;
+}
+
+.abilityMod {
+	margin: 0 auto -15px;
+	padding: 2px;
+	border: 2px solid black;
+	border-radius: 5px;
+	background: white;
+	width: 40px;
+}

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

@@ -1,4 +1,4 @@
-<template name = "abilities">
+<template name = "bigAbilities">
 	<div class="ability floatBox">
 		<div class ="abilityName">
 			Strength

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

@@ -0,0 +1,63 @@
+.flexContainer {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+#abilityScores {
+	text-align: center;
+	flex-basis: 120px;
+	flex-grow: 1;
+	max-width: 340px;
+}
+
+/*Float boxes are indivisble, have shadows*/
+.floatBox{
+	border-image-width: 90px 54px 50px 54px;
+	border-image-outset: 10px;
+	border-image-source: url('/png/big-border.png');
+	border-image-slice: 271 163 151 163;
+	border-image-repeat: stretch;
+	
+	padding: 5px 10px 5px 10px;
+	margin: 10px;
+	background: white;
+	border-radius: 20px;
+}
+
+.bigborder{
+	
+}
+
+/* headings in floatboxes */
+.floatBox h2{
+	background: black;
+	color: white;
+	font-size: 1em;
+	padding: 2px 15px;
+}
+
+.floatBox h2:first-child{
+	margin: -5px -5px 0px -5px;
+}
+
+.floatBox.rounded {
+	
+	display: inline-block;
+	text-align: center;
+}
+
+/* Stats */
+#armorClassBox {
+	width: 90px;
+	height: 100px;
+	background-image: url('/svg/ac.svg');
+	background-repeat: no-repeat;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.statValue {
+	font-size: 2em;
+}

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

@@ -4,7 +4,7 @@
 	</div>
 	<div class="flexContainer">
 		<div id="abilityScores" class="flexItem">
-			{{> abilities}}
+			{{> bigAbilities}}
 		</div>
 		<div class="flexItem">
 			<div>

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

@@ -0,0 +1,70 @@
+.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;
+}
+
+.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: #AF6700;
+}
+
+.healthBarBorder{
+	position: absolute;
+	left: -1px;
+	height: 0px;
+	border-width: 15px 40px 15px 40px;
+	width: 222px;
+	border-image: url('/png/bar-border.png') 44 120 49 119 stretch;
+	
+	display: flex;
+	justify-content: center; /* align horizontal */
+	align-items: center; /* align vertical */
+}
+
+.healthBarButton{
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+}
+
+.healthBarPlus{
+	
+}
+
+.healthBarMinus{
+	
+}
+
+.deltaHp{
+	position: absolute;
+	top: -20px;
+}

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

@@ -0,0 +1,20 @@
+<template name="healthBar">
+	<div class="deltaHpContainer">
+			
+		</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>
+		<!--<button class="healthBarPlus healthBarButton"></button>-->
+	</div>
+</template>

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

@@ -0,0 +1,102 @@
+Template.healthBar.helpers({
+	hpRed: function(){
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.hitPoints.base;
+		return 100*(currentHp/(currentHp - damage));
+	},
+	hpGreen: function(){
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.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(this.attributes.hitPoints);
+		var damage = this.attributes.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(this.attributes.hitPoints);
+		var damage = this.attributes.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(this.attributes.hitPoints);
+		var damage = this.attributes.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.healthBar.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(this.attributes.hitPoints)
+		var damage = this.attributes.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.attributes.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.attributeValue(this.attributes.hitPoints)
+		newValue = newValue > -hpLeft ? newValue : -hpLeft;
+		//set value
+		Template.instance().deltaHp.set(newValue);
+	},
+	"click #applyDelta": function(event){
+		Characters.update(this._id, {$inc: {"attributes.hitPoints.base": Template.instance().deltaHp.get()}})
+		Template.instance().deltaHp.set(0);
+	}
+});