Added basic text fields to character sheet

rpg-docs/Model/Character/Characters.js

@@ -96,7 +96,9 @@ var strings = [
 	"personality",
 	"ideals",
 	"bonds",
-	"flaws"
+	"flaws",
+	"backstory",
+	"notes"
 ];
 
 //Data structure for the character
@@ -126,7 +128,8 @@ Character = function(owner){
 		canDeathSave: true
 	};
 	
-	for(var i = 0, l = string.length; i < l; i++){
+	this.strings = {};
+	for(var i = 0, l = strings.length; i < l; i++){
 		this.strings[strings[i]] = "";
 	};
 	

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

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-around;
+	align-items: flex-start;
 }
 
 #abilityScores {

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

@@ -12,7 +12,26 @@
 			</div>
 		</div>
 		<div class="flexItem floatBox">
+			<h2>Description</h2>
 			{{> textField character=this field="description"}}
 		</div>
+		<div class="flexItem floatBox">
+			<h2>Personality</h2>
+			{{> textField character=this field="personality"}}
+			<h2>Ideals</h2>
+			{{> textField character=this field="ideals"}}
+			<h2>Bonds</h2>
+			{{> textField character=this field="bonds"}}
+			<h2>Flaws</h2>
+			{{> textField character=this field="flaws"}}
+		</div>
+		<div class="flexItem floatBox">
+			<h2>Backstory</h2>
+			{{> textField character=this field="backstory"}}
+		</div>
+		<div class="flexItem floatBox">
+			<h2>Notes</h2>
+			{{> textField character=this field="notes"}}
+		</div>
 	</div>
 </template>

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

@@ -1,11 +1,8 @@
 #textOutput.notEditing{
-	cursor: default;
+	cursor: pointer;
 }
 
-#textInput {
-	width:100%;
-	height:100%; 
-	box-sizing: border-box;         /* For IE and modern versions of Chrome */
-	-moz-box-sizing: border-box;    /* For Firefox                          */
-	-webkit-box-sizing: border-box;
+.editBox {
+	min-height: 36px;
+	width: 300px;
 }

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

@@ -1,8 +1,8 @@
 <template name="textField">
 	{{#if editing}}
-		<div id="textInput" class={{outputClass}} contenteditable=true>{{input}}</div>
+		<div id="textInput" class="editBox {{outputClass}}" contenteditable=true>{{input}}</div>
 	{{else}}
-		<div id="textOutput" class={{outputClass}}>
+		<div id="textOutput" class="editBox {{outputClass}}">
 			{{output}}
 		</div>
 	{{/if}}

rpg-docs/client/views/general.css

@@ -5,4 +5,9 @@ root {
 body {
 	font-family: sans-serif;
 	background: #201500;
+}
+
+.calculatedValue {
+	color: #021C33;
+	font-weight: bold;
 }