Added XP, changed spellslot display

rpg-docs/.meteor/packages

@@ -17,3 +17,4 @@ aldeed:collection2
 differential:vulcanize
 aldeed:autoform
 conielo:autoform-polymer-paper
+msavin:mongol

rpg-docs/.meteor/versions

@@ -52,6 +52,7 @@ minimongo@1.0.6
 mobile-status-bar@1.0.2
 momentjs:moment@2.8.4
 mongo@1.0.11
+msavin:mongol@0.1.1
 npm-bcrypt@0.7.7
 observe-sequence@1.0.4
 ordered-dict@1.0.2

rpg-docs/Model/Character/Characters.js

@@ -188,8 +188,9 @@ Schemas.Character = new SimpleSchema({
 	owner: { type: String, regEx: SimpleSchema.RegEx.Id },
 	readers: { type: [String], regEx: SimpleSchema.RegEx.Id },
 	writers: { type: [String], regEx: SimpleSchema.RegEx.Id },
-	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"},
 	//TODO add per-character settings
+	"settings.experiencesInc": {type: Number, defaultValue: 20},
 });
 
 Characters.attachSchema(Schemas.Character);
@@ -431,7 +432,7 @@ Characters.helpers({
 	},
 
 	level: function(){
-		var xp = this.attributeValue("experience");
+		var xp = this.experience();
 		var xpTable = [0, 300, 900, 2700, 6500, 14000, 23000, 34000, 48000, 64000,
 					   85000, 100000, 120000, 140000, 165000, 195000, 225000, 265000,
 					   305000, 355000];
@@ -442,5 +443,13 @@ Characters.helpers({
 		};
 		if(xp > 355000) return 20;
 		return 0;
+	},
+	
+	experience: function(){
+		var xp = 0;
+		Experiences.find({charId: this._id}, {fields: {value: 1}}).forEach(function(e){
+			xp += e.value;
+		})
+		return xp;
 	}
 });

rpg-docs/Model/Character/Experience.js

@@ -0,0 +1,22 @@
+Experiences = new Meteor.Collection("experience");
+
+Schemas.Experience = new SimpleSchema({
+	charId:      {type: String, regEx: SimpleSchema.RegEx.Id},
+	name:		 {type: String, defaultValue: "New Experience"},
+	description: {type: String, optional: true},
+	value:       {type: Number, defaultValue: 0},
+	dateAdded:   {
+		type: Date,
+		autoValue: function() {
+			if (this.isInsert) {
+				return new Date;
+			} else if (this.isUpsert) {
+				return {$setOnInsert: new Date};
+			} else {
+				this.unset();
+			}
+		}
+	},
+});
+
+Experiences.attachSchema(Schemas.Experience);

rpg-docs/client/globalHelpers/mongol.js

@@ -0,0 +1,17 @@
+Session.set("Mongol", {
+	'collections': [
+		"Characters",
+		"Containers",
+		"Items",
+		"Features",
+		"Effects",
+		"Spells",
+		"SpellLists",
+		"Notes",
+		"Experiences"
+	],
+	'display': true,
+	'opacity_normal': ".7",
+	'opacity_expand': ".9",
+	'disable_warning': 'false',
+});

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

@@ -5,6 +5,8 @@
 	-webkit-column-gap: 8px;
 	   -moz-column-gap: 8px;
 	        column-gap: 8px;
+	-moz-column-fill: balance;
+	     column-fill: balance;
 	padding: 8px;
 }
 

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

@@ -36,11 +36,11 @@
 						</div>
 						<div flex class="containerMain">
 							{{#each items ../_id _id}}
-							<div class="itemSlot">
+								<div class="itemSlot">
-								<paper-item class="inventoryItem" hero-id="main" {{detailHero}} layout horizontal>
+									<paper-item class="inventoryItem" hero-id="main" {{detailHero}} layout horizontal>
-									{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
+										{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
-								</paper-item>
+									</paper-item>
-							</div>
+								</div>
 							{{/each}}
 						</div>
 					</paper-shadow>

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

@@ -0,0 +1,3 @@
+.noteDialog .colorDropdown {
+	top: 0;
+}

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

@@ -0,0 +1,32 @@
+<template name="experienceDialog">
+	{{#with experience}}
+		<core-header-panel fit class="experienceDialog">
+			<core-toolbar hero-id="toolbar" class={{colorClass}} 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="deleteExperience" 
+								   role="button"
+								   tabindex="0"
+								   icon="delete" 
+								   aria-label="Delete Feature" 
+								   noink></paper-icon-button>
+			</core-toolbar>
+			<div class="detailContent">
+				<div horizontal layout>
+					<!--Name-->
+					<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
+					<!--Value-->
+					<paper-input-decorator label="Value" floatinglabel>
+						<input id="valueInput" type="number" value={{value}}>
+					</paper-input-decorator>
+				</div>
+				<!--Description-->
+				<paper-input-decorator label="Description" floatinglabel layout vertical>
+					<paper-autogrow-textarea>
+						<textarea id="experienceDescriptionInput" placeholder value={{description}}></textarea>
+					</paper-autogrow-textarea>
+				</paper-input-decorator>
+			</div>
+		</core-header-panel>
+	{{/with}}
+</template>

rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.js

@@ -0,0 +1,49 @@
+Template.experienceDialog.rendered = function(){
+	var self = this;
+	//update all autogrows after they've been filled
+	var pata = this.$("paper-autogrow-textarea");
+	pata.each(function(index, el){
+		el.update($(el).children().get(0));
+	})
+	//update all input fields as well
+	var input = this.$("paper-input");
+	input.each(function(index, el){
+		el.valueChanged();
+	})
+	//after the dialog is built, open it
+	if (!this.alreadyRendered){
+		Session.set("global.ui.detailShow", true);
+		this.alreadyRendered = true;
+	}
+}
+
+Template.experienceDialog.events({
+	"tap #backButton": function(){
+		GlobalUI.closeDetail();
+	},
+	"tap #deleteExperience": function(){
+		Experiences.remove(this._id);
+		GlobalUI.closeDetail();
+	},
+	//TODO clean up String -> num here so they don't need casting by Schema.clean
+	//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors
+	"change #experienceNameInput, input #experienceNameInput": function(event){
+		var value = event.currentTarget.value
+		Experiences.update(this._id, {$set: {name: value}});
+	},
+	"change #valueInput": function(event){
+		var value = event.currentTarget.value
+		Experiences.update(this._id, {$set: {value: value}});
+	},
+	"change #experienceDescriptionInput": function(event){
+		var value = event.currentTarget.value
+		Experiences.update(this._id, {$set: {description: value}});
+	}
+});
+
+Template.experienceDialog.helpers({
+	experience: function(){
+		Experiences.findOne(this.experienceId);
+		return Experiences.findOne(this.experienceId);
+	}
+});

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

@@ -0,0 +1,7 @@
+.experiences {
+	padding: 0 0 16px 0;	
+}
+
+.experience {
+	height: 48px;
+}

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

@@ -2,9 +2,30 @@
 	<div fit>
 		<div id="journal" class="scroll-y" fit>
 			<div class="containers">
+				<paper-shadow class="card container experiencesCard"  hero-id="main" {{detailHero}}>
+					<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+						<div class="containerName subhead" flex>Experience</div>
+						<div class="subhead">{{experience}}XP</div>
+					</div>
+					<div class="containerMain experiences">
+						{{#each experiences}}
+							<div class="itemSlot">
+								<paper-item class="inventoryItem experience" hero-id="main" {{detailHero}} layout horizontal>
+									<div flex>{{name}}</div><div class="xpValue">{{value}}</div>
+								</paper-item>
+							</div>
+						{{/each}}
+					</div>
+					{{#if moreExperiencesOrCollapse}}
+						<div class="containerFoot" layout="" horizontal="" center="" end-justified="">
+							<paper-button id="moreExperiences" disabled={{notMoreExperiences}}>Load More</paper-button>
+							<paper-button id="lessExperiences" disabled={{cantCollapse}}>Collapse</paper-button>
+						</div>
+					{{/if}}
+				</paper-shadow>
 				{{#each notes}}
 					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+						<div class="containerTop {{colorClass}} noteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
 							<div flex>
 								<div class="containerName subhead">{{name}}</div>
 							</div>

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

@@ -1,22 +1,47 @@
+Template.journal.created = function(){
+	var self = this;
+	self.experiencesLimit = new ReactiveVar(self.data.settings && self.data.settings.experiencesInc || 10);
+};
+
 Template.journal.helpers({
 	notes: function(){
 		return Notes.find({charId: this._id}, {sort: {color: 1, name: 1}});
+	},
+	experiences: function(){
+		return Experiences.find({charId: this._id}, {sort: {dateAdded: -1}, limit: Template.instance().experiencesLimit.get()});
+	},
+	notMoreExperiences: function(){
+		return Experiences.find({charId: this._id}).count() < Template.instance().experiencesLimit.get();
+	},
+	cantCollapse: function(){
+		return Template.instance().experiencesLimit.get() <= (this.settings && this.settings.experiencesInc || 10);
+	},
+	moreExperiencesOrCollapse: function(){
+		return (!(Experiences.find({charId: this._id}).count() < Template.instance().experiencesLimit.get())) ||
+			Template.instance().experiencesLimit.get() > (this.settings && this.settings.experiencesInc || 10);
 	}
 });
 
 Template.journal.events({
-	"tap .containerTop": function(event){
+	"tap .noteTop": function(event){
 		GlobalUI.setDetail({
 			template: "noteDialog",
 			data:     {noteId: this._id, charId: this.charId},
 			heroId:   this._id
 		});
 	},
+	"tap .experience": function(event){
+		GlobalUI.setDetail({
+			template: "experienceDialog",
+			data: {experienceId: this._id, charId: this.charId},
+			heroId: this._id
+		});
+	},
 	"tap #addNote": function(event){
-		var charId = this.charId;
+		var charId = this._id;
 		Notes.insert({
 			name: "New Note", 
-			charId: this._id
+			charId: charId
 		}, function(error, id){
 			if(!error){
 				GlobalUI.setDetail({
@@ -28,21 +53,32 @@ Template.journal.events({
 		});
 	},
 	"tap #addXP": function(event){
-		var charId = this.charId;
+		var charId = this._id;
-		var listId = this.listId;
+		Experiences.insert({
-		throw new Error("not implemented")/*
+			charId: charId
-		Spells.insert({
-			name: "New Spell", 
-			charId: this._id,
-			listId: SpellLists.findOne({charId: this._id})._id
 		}, function(error, id){
 			if(!error){
 				GlobalUI.setDetail({
-					template: "spellDialog",
+					template: "experienceDialog",
-					data:     {spellId: id, charId: charId, listId: listId},
+					data: {experienceId: id, charId: charId},
-					heroId:   id
+					heroId: id
 				});
 			}
-		});*/
+		})
+	},
+	"tap #moreExperiences": function(event){
+		var inst = Template.instance();
+		inst.experiencesLimit.set(inst.experiencesLimit.get() + (this.settings && this.settings.experiencesInc || 10));
+	},
+	"tap #lessExperiences": function(event){
+		var inst = Template.instance();
+		inst.experiencesLimit.set(this.settings && this.settings.experiencesInc || 10);
+		//scroll to the top of the div
+		inst.$(".scroll-y").animate({
+			scrollTop: inst.$(".scroll-y").scrollTop() + inst.$(".experiencesCard").position().top - 8
+		}, 300);
+		//HACK giggle the columns :( to workaround chrome bug that stops .containers height from updating
+		var cs = inst.$(".containers").removeClass("containers");
+		_.defer(function(){cs.addClass("containers")});
 	}
 });

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

@@ -11,10 +11,44 @@
 	height: 32px;
 }
 
+#spells .inventoryItem[disabled] {
+	color: #ccc !important;
+	color: rgba(0,0,0,0.26) !important;
+	pointer-events: initial !important;
+	cursor: pointer !important;
+}
+
+#spells .inventoryItem[disabled] core-icon{
+	color: #ccc !important;
+	color: rgba(0,0,0,0.26) !important;
+}
+
 #spells .inventoryItem paper-checkbox{
-	pointer-events: initial;
+	pointer-events: initial !important;
 }
 
 #spells paper-checkbox /deep/ #ink {
 	color: #009688;
 }
+
+#spells .inventoryItem.spellSlot {
+	height: 48px;
+}
+
+.slotName {
+	margin-right: 16px;
+}
+
+.slotBubble {
+	pointer-events: initial !important;
+}
+
+.slotBubble {
+	color: #000;
+	color: rgba(0,0,0,0.54);
+}
+
+.slotBubble[disabled] {
+	color: #cccccc;
+	color: rgba(0,0,0,0.26);
+}

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

@@ -1,19 +1,28 @@
 <template name="spells">
 	<div fit>
 		<div id="spells" class="scroll-y" fit>
-			<div class="resourceCards" layout horizontal wrap>
-				{{>resource name="level1SpellSlots" title="Level 1" char=this}}
-				{{>resource name="level2SpellSlots" title="Level 2" char=this}}
-				{{>resource name="level3SpellSlots" title="Level 3" char=this}}
-				{{>resource name="level4SpellSlots" title="Level 4" char=this}}
-				{{>resource name="level5SpellSlots" title="Level 5" char=this}}
-				{{>resource name="level6SpellSlots" title="Level 6" char=this}}
-				{{>resource name="level7SpellSlots" title="Level 7" char=this}}
-				{{>resource name="level8SpellSlots" title="Level 8" char=this}}
-				{{>resource name="level9SpellSlots" title="Level 9" char=this}}
-				{{>gridPadding num="8" class="card container"}}
-			</div>
 			<div class="containers">
+				<paper-shadow class="card container"  hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
+					<div class="containerTop {{colorClass}}" layout horizontal center>
+						<div class="containerName subhead" hero-id="title" flex>Spell Slots</div>
+					</div>
+					<div flex class="containerMain">
+						{{#each levels}}{{#if showSlots ..}}
+							<div class="itemSlot">
+								<paper-item class="inventoryItem spellSlot" hero-id="main" {{detailHero}} layout horizontal>
+									<div class="slotName">
+										{{name}}
+									</div>
+									<div flex layout horizontal center>
+										{{#each slotBubbles ..}}
+											<paper-icon-button class="slotBubble" icon={{icon}} disabled={{disabled}}></paper-icon-button>
+										{{/each}}
+									</div>
+								</paper-item>
+							</div>
+						{{/if}}{{/each}}
+					</div>
+				</paper-shadow>
 				{{#each spellLists}}
 					<paper-shadow class="card container"  hero-id="main" {{detailHero}} style="order: {{order}};">
 						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
@@ -39,17 +48,24 @@
 						<div class="containerMain">
 							{{#each levels}}
 								{{#if spellCount .. ../../_id}}
-									<div class="list-subhead" layout horizontal center>{{name}}</div>
+									<div class="list-subhead" layout horizontal center>
+										{{name}}
+									</div>
 								{{/if}}
 								{{#each spells ../_id ../../_id}}
 									{{#if showSpell ../../settings.showUnprepared}}
 										<div class="itemSlot">
-											<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}} layout horizontal center>
+											<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}} 
-												<core-icon icon="social:whatshot" style="color: {{hexColor color}};"></core-icon>
+														layout horizontal center>
+													<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
+												<core-icon icon="social:whatshot" 
+														   style="color: {{hexColor color}};"
+														   ></core-icon>
 												<div flex layout vertical>
 													<div>{{name}}</div>
 													<div class="caption">
-														{{school}} {{castingTime}}{{#if ritual}} (ritual){{/if}} - {{spellComponents}}
+														{{school}} {{castingTime}}
+														{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
 													</div>
 												</div>
 												{{#if ../../settings.showUnprepared}}

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

@@ -18,10 +18,10 @@ Template.spells.helpers({
 	spellCount: function(list, charId){
 		if(list.settings.showUnprepared){
 			return Spells.find( {charId: charId, listId: list._id, level: this.level}, 
-							    {fields: {_id: 1, level: 1}} ).count() > 0;
+							   {fields: {_id: 1, level: 1}} ).count() > 0;
 		} else{
 			return Spells.find( {charId: charId, listId: list._id, level: this.level, prepared: {$in: ["prepared", "always"]} }, 
-								{fields: {_id: 1, level: 1}} ).count() > 0;
+							   {fields: {_id: 1, level: 1}} ).count() > 0;
 		}
 	},
 	spells: function(listId, charId){
@@ -65,10 +65,69 @@ Template.spells.helpers({
 	},
 	cantUnprepare: function(){
 		return this.prepared === "always";
+	},
+	cantCast: function(level, char){
+		for(var i = level; i <= 9; i++){
+			if (char.attributeValue("level"+i+"SpellSlots") > 0){
+				return false;
+			}
+		}
+		return true;
+	},
+	baseSlots: function(char){
+		return char.attributeBase("level" + this.level +"SpellSlots");
+	},
+	slots: function(char){
+		return char.attributeValue("level" + this.level +"SpellSlots");
+	},
+	showSlots: function(char){
+		return this.level && char.attributeBase("level" + this.level +"SpellSlots");
+	},
+	slotBubbles: function(char){
+		var baseSlots = char.attributeBase("level" + this.level +"SpellSlots"),
+			currentSlots = char.attributeValue("level" + this.level +"SpellSlots"),
+			slotsUsed = baseSlots - currentSlots,
+			bubbles = [], i;
+		for(i = 0; i < currentSlots; i++){
+			bubbles.push({
+				icon: "radio-button-on", 
+				disabled: i !== currentSlots -1, //last full slot not disabled
+				attribute: "level" + this.level +"SpellSlots",
+				charId: char._id
+			});
+		}
+		for(i = 0; i < slotsUsed; i++){
+			bubbles.push({
+				icon: "radio-button-off", 
+				disabled: i !== 0, //first empty slot not disabled
+				attribute: "level" + this.level +"SpellSlots",
+				charId: char._id
+			});
+		}
+		return bubbles;
 	}
 });
 
 Template.spells.events({
+	"tap .slotBubble": function(event){
+		if(!event.currentTarget.disabled){
+			var char = Characters.findOne(this.charId);
+			if(event.currentTarget.icon === "radio-button-off"){
+				if(char.attributeValue(this.attribute) < char.attributeBase(this.attribute)){
+					var modifier = {$inc: {}};
+					modifier.$inc[this.attribute + ".adjustment"] = 1;
+					Characters.update(this.charId, modifier, {validate: false});
+				}
+			} else {
+				if(char.attributeValue(this.attribute) > 0){
+					var modifier = {$inc: {}};
+					modifier.$inc[this.attribute + ".adjustment"] = -1;
+					Characters.update(this.charId, modifier, {validate: false});
+				}
+			}
+		}
+		event.stopPropagation();
+	},
 	"tap .containerTop": function(event){
 		GlobalUI.setDetail({
 			template: "spellListDialog",

rpg-docs/lib/constants/colorOptions.js

@@ -25,11 +25,11 @@ var colorOptionMap = _.pluck(colorOptions, "key");
 
 getColorClass = function(key){
 	if(!key){
-		return "brown white-text";
+		return "grey white-text";
 	}
 	var index = _.indexOf(colorOptionMap, key);
 	if(index == -1){
-		return "brown white-text";
+		return "grey white-text";
 	}
 	var option = colorOptions[index];
 	var colorClass = option.className;

rpg-docs/server/publications/singleCharacter.js

@@ -8,6 +8,7 @@ Meteor.publish("singleCharacter", function(characterId, userId){
 		Effects.find({charId: characterId}),
 		Spells.find({charId: characterId}),
 		SpellLists.find({charId: characterId}),
-		Notes.find({charId: characterId})
+		Notes.find({charId: characterId}),
+		Experiences.find({charId: characterId})
 	];
 });