Implemented skill list

Proficiency icons
(dis)advantage icons
asterisks for conditionals
"auto fail" notification
better looking border art

rpg-docs/Model/Character/Characters.js

@@ -185,15 +185,9 @@ Characters.helpers({
 
 		return value;
 	},
-
-	skillMod: function(skill){
-		//get the final value of the ability score
-		var ability = this.attributeValue(this.attributes[skill.ability]);
-
-		//base modifier
-		var mod = +getMod(ability)
-
-		//multiply proficiency bonus by largest value in proficiency array
+	
+	proficiency: function(skill){
+		//return largest value in proficiency array
 		var prof = 0;
 		for(var i = 0, l = skill.proficiency.length; i < l; i++){
 			var newProf = pop(skill.proficiency[i].value, this);
@@ -201,6 +195,23 @@ Characters.helpers({
 				prof = newProf;
 			}
 		}
+		return prof;
+	},
+
+	skillMod: function(skill){
+		if(skill === undefined){ 
+			console.log("Cannot get skillMod of undefined");
+			return;
+		}
+		//get the final value of the ability score
+		var ability = this.attributeValue(this.attributes[skill.ability]);
+
+		//base modifier
+		var mod = +getMod(ability)
+
+		//multiply proficiency bonus by largest value in proficiency array
+		var prof = this.proficiency(skill);
+		
 		//add multiplied proficiency bonus to modifier
 		mod += prof * this.attributeValue(this.attributes.proficiencyBonus);
 

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

@@ -1,6 +1,7 @@
 .flexContainer {
 	display: flex;
 	flex-wrap: wrap;
+	justify-content: space-around;
 }
 
 #abilityScores {
@@ -14,12 +15,16 @@
 .floatBox{
 	color: #301d02;
 	
+	/*Fancy image border*/
 	border-image-width: 92px 60px 57px 60px;
 	border-image-outset: 15px;
 	border-image-source: url('/png/big-border.png');
 	border-image-slice: 275 179 171 179;
 	border-image-repeat: stretch;
 	
+	/*Shadow*/
+	box-shadow: 0px 5px 20px rgba(0, 0, 0, 1);
+	
 	padding: 0px 5px 5px 5px;
 	margin: 15px;
 	background: #f0e3d1;

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

@@ -11,7 +11,7 @@
 				Proficiency Bonus {{proficiencyBonus}}
 			</div>
 			<div id="savesAndSkills" class="floatBox">
-				{{> savesAndSkills}}
+				{{> skills}}
 			</div>
 		</div>
 		<div id="stats" class="flexItem">

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

@@ -34,7 +34,7 @@
 	top: 2px;
 	height: 26px;
 	border-radius: 15px;
-	background-color: #AF6700;
+	background-color: #CA9548;
 }
 
 .healthBarBorder{

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

@@ -1,52 +0,0 @@
-<template name="savesAndSkills">
-	<h2>Saving Throws</h2>
-	<div>
-		Strength Save {{skillMod skills.strengthSave}}
-	</div><div>
-		Dexterity Save {{skillMod skills.dexteritySave}}
-	</div><div>
-		Constitution Save {{skillMod skills.constitutionSave}}
-	</div><div>
-		Intelligence Save {{skillMod skills.intelligenceSave}}
-	</div><div>
-		Wisdom Save {{skillMod skills.wisdomSave}}
-	</div><div>
-		Charisma Save {{skillMod skills.charismaSave}}
-	</div>
-	<h2>Skills</h2>
-	<div>
-		Acrobatics {{skillMod skills.acrobatics}}
-	</div><div>
-		Animal Handling {{skillMod skills.animalHandling}}
-	</div><div>
-		Arcana {{skillMod skills.arcana}}
-	</div><div>
-		Athletics {{skillMod skills.athletics}}
-	</div><div>
-		Deception {{skillMod skills.deception}}
-	</div><div>
-		History {{skillMod skills.history}}
-	</div><div>
-		Insight {{skillMod skills.insight}}
-	</div><div>
-		Intimidation {{skillMod skills.intimidation}}
-	</div><div>
-		Investigation {{skillMod skills.investigation}}
-	</div><div>
-		Medicine {{skillMod skills.medicine}}
-	</div><div>
-		Nature {{skillMod skills.nature}}
-	</div><div>
-		Perception {{skillMod skills.perception}}
-	</div><div>
-		Persuasion {{skillMod skills.persuasion}}
-	</div><div>
-		Religion {{skillMod skills.religion}}
-	</div><div>
-		Sleight of Hand {{skillMod skills.sleightOfHand}}
-	</div><div>
-		Stealth {{skillMod skills.stealth}}
-	</div><div>
-		Survival {{skillMod skills.survival}}
-	</div>
-</template>

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

@@ -0,0 +1,38 @@
+.profIcon{
+	display: inline-block;
+	width: 23px;
+	height: 14px;
+	background-size: contain;
+	background-repeat: no-repeat;
+	
+	position: relative;
+	top: 1px;
+}
+
+table.skillTable td:nth-of-type(2) { 
+	text-align: right; 
+}
+
+table.skillTable td:nth-of-type(3) { 
+	padding-left: 8px;
+}
+
+td.fail {
+	color: #AF0000;
+}
+
+.advantage{
+	background-image: url(/png/advantage/greenUp.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+.disadvantage{
+	background-image: url(/png/advantage/redDown.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+td.conditionals::after{
+	content: "*";
+}

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

@@ -0,0 +1,30 @@
+<template name="skills">
+	<h2>Saving Throws</h2>
+	<table class="skillTable">
+		{{#each saveList}}
+			<tr>
+				<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td>
+				{{#if failSkill}}
+					<td class="fail">fail</td>
+				{{else}}
+					<td class="{{advantage}}">{{../skillMod skill}}</td>
+				{{/if}}
+				<td class={{conditionals}}>{{name}}</td>
+			</tr>
+		{{/each}}
+	</table>
+	<h2>Skills</h2>
+	<table class="skillTable">
+		{{#each skillList}}
+			<tr>
+				<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td>
+				{{#if failSkill}}
+					<td class="fail">fail</td>
+				{{else}}
+					<td class="{{advantage}}">{{../skillMod skill}}</td>
+				{{/if}}
+				<td class={{conditionals}}>{{name}}</td>
+			</tr>
+		{{/each}}
+	</table>
+</template>

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

@@ -0,0 +1,53 @@
+Template.skills.helpers({
+	saveList: function(){
+		return [
+			{name: "Strength", skill: this.skills.strengthSave},
+			{name: "Dexterity", skill: this.skills.dexteritySave},
+			{name: "Constitution", skill: this.skills.constitutionSave},
+			{name: "Intelligence", skill: this.skills.intelligenceSave},
+			{name: "Wisdom", skill: this.skills.wisdomSave},
+			{name: "Charisma", skill: this.skills.charismaSave}
+		];
+	},
+	skillList: function(){
+		return [
+			{name: "Acrobatics", skill: this.skills.acrobatics},
+			{name: "Animal Handling", skill: this.skills.animalHandling},
+			{name: "Arcana", skill: this.skills.arcana},
+			{name: "Athletics", skill: this.skills.athletics},
+			{name: "Deception", skill: this.skills.deception},
+			{name: "History", skill: this.skills.history},
+			{name: "Insight", skill: this.skills.insight},
+			{name: "Intimidation", skill: this.skills.intimidation},
+			{name: "Investigation", skill: this.skills.investigation},
+			{name: "Medicine", skill: this.skills.medicine},
+			{name: "Nature", skill: this.skills.nature},
+			{name: "Perception", skill: this.skills.perception},
+			{name: "Performance", skill: this.skills.performance},
+			{name: "Persuasion", skill: this.skills.persuasion},
+			{name: "Religion", skill: this.skills.religion},
+			{name: "Sleight of Hand", skill: this.skills.sleightOfHand},
+			{name: "Stealth", skill: this.skills.stealth},
+			{name: "Survival", skill: this.skills.survival}
+		];
+	},
+	profIcon: function(skill){
+		var prof = Template.parentData(1).proficiency(skill);
+		if(prof > 0 && prof < 1) return "profHalf.png";
+		if(prof === 1) return "profSingle.png";
+		if(prof > 1) return "profDouble.png";
+		return "profNone.png";
+	},
+	failSkill: function(){
+		return this.skill.fail.length > 0;
+	},
+	advantage: function(){
+		var adv = this.skill.advantage.length;
+		var disadv = this.skill.disadvantage.length;
+		if(adv > 0 && disadv === 0) return "advantage";
+		if(disadv > 0 && adv === 0) return "disadvantage";
+	},
+	conditionals: function(){
+		if(this.skill.conditional.length > 0) return "conditionals";
+	}
+});

rpg-docs/client/views/general.css

@@ -4,5 +4,5 @@ root {
 
 body {
 	font-family: sans-serif;
-	background-color: #333;
+	background: #201500;
 }