From d330e15dcec0bd24c2351b27c679c605c643d339 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 11 Oct 2018 16:39:55 +0200
Subject: [PATCH] Added character creation dialog

---
 .../ui/character/CharacterCreationDialog.vue  | 294 ++++++++++++++++++
 app/imports/ui/components/LabeledFab.vue      |   2 +-
 app/imports/ui/dialogStack/DialogBase.vue     |  44 ++-
 app/imports/ui/dialogStack/DialogStack.vue    |  10 +-
 .../ui/dialogStack/dialogStackStore.js        |   6 +-
 .../ui/dialogStack/dialogStackWindowEvents.js |   2 +-
 app/imports/ui/pages/CharacterList.vue        |  18 +-
 7 files changed, 358 insertions(+), 18 deletions(-)
 create mode 100644 app/imports/ui/character/CharacterCreationDialog.vue

diff --git a/app/imports/ui/character/CharacterCreationDialog.vue b/app/imports/ui/character/CharacterCreationDialog.vue
new file mode 100644
index 00000000..6eb14117
--- /dev/null
+++ b/app/imports/ui/character/CharacterCreationDialog.vue
@@ -0,0 +1,294 @@
+<template>
+  <dialog-base>
+    <template slot="toolbar">New Character</template>
+    <v-stepper v-model="step" class="no-shadow">
+      <v-stepper-header class="no-shadow">
+        <v-stepper-step :complete="step > 1" step="1">
+					Name
+				</v-stepper-step>
+        <v-divider></v-divider>
+        <v-stepper-step :complete="step > 2" step="2">
+          Ability Scores
+        </v-stepper-step>
+        <v-divider></v-divider>
+        <v-stepper-step :complete="step > 3" step="3">
+          Class
+        </v-stepper-step>
+      </v-stepper-header>
+
+      <v-stepper-items>
+        <v-stepper-content step="1">
+          <v-text-field label="Name" v-model="name"></v-text-field>
+					<v-text-field label="Gender" v-model="gender"></v-text-field>
+					<v-text-field label="Alignment" v-model="alignment"></v-text-field>
+        </v-stepper-content>
+        <v-stepper-content step="2">
+          <v-text-field label="Race" v-model="race"></v-text-field>
+					<v-layout row justify-center align-center>
+						<h3>Point Cost:</h3>
+						<h1 class="ml-2" :class="cost > 27 ? 'error--text' : ''">{{cost}}</h1>
+						<span class="ml-1">/27</span>
+					</v-layout>
+					<table class="point-buy-table mt-2">
+						<thead>
+							<tr class="font-weight-bold">
+								<td></td>
+								<td>Base Values</td>
+								<td>Race Bonus</td>
+								<td>Score</td>
+								<td>Modifier</td>
+							</tr>
+						</thead>
+						<tr>
+							<td>Strength</td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="baseStrength"
+								min="8"
+								max="15">
+							</v-text-field></td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="strengthBonus">
+							</v-text-field></td>
+							<td>{{baseStrength + strengthBonus}}</td>
+							<td>{{mod(baseStrength + strengthBonus)}}</td>
+						</tr>
+						<tr>
+							<td>Dexterity</td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="baseDexterity"
+								min="8"
+								max="15">
+							</v-text-field></td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="dexterityBonus">
+							</v-text-field></td>
+							<td>{{baseDexterity + dexterityBonus}}</td>
+							<td>{{mod(baseDexterity + dexterityBonus)}}</td>
+						</tr>
+						<tr>
+							<td>Constitution</td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="baseConstitution"
+								min="8"
+								max="15">
+							</v-text-field></td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="constitutionBonus">
+							</v-text-field></td>
+							<td>{{baseConstitution + constitutionBonus}}</td>
+							<td>{{mod(baseConstitution + constitutionBonus)}}</td>
+						</tr>
+						<tr>
+							<td>Intelligence</td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="baseIntelligence"
+								min="8"
+								max="15">
+							</v-text-field></td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="intelligenceBonus">
+							</v-text-field></td>
+							<td>{{baseIntelligence + intelligenceBonus}}</td>
+							<td>{{mod(baseIntelligence + intelligenceBonus)}}</td>
+						</tr>
+						<tr>
+							<td>Wisdom</td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="baseWisdom"
+								min="8"
+								max="15">
+							</v-text-field></td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="wisdomBonus">
+							</v-text-field></td>
+							<td>{{baseWisdom + wisdomBonus}}</td>
+							<td>{{mod(baseWisdom + wisdomBonus)}}</td>
+						</tr>
+						<tr>
+							<td>Charisma</td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="baseCharisma"
+								min="8"
+								max="15">
+							</v-text-field></td>
+							<td><v-text-field
+								type="number"
+								height="20"
+								reverse
+								v-model.number="charismaBonus">
+							</v-text-field></td>
+							<td>{{baseCharisma + charismaBonus}}</td>
+							<td>{{mod(baseCharisma + charismaBonus)}}</td>
+						</tr>
+					</table>
+        </v-stepper-content>
+        <v-stepper-content step="3">
+          <v-text-field
+          	label="Class"
+						v-model="cls"
+          >
+          </v-text-field>
+					<v-select
+						:items="hitDiceItems"
+						label="Hit Dice"
+						v-model="hitDice">
+					</v-select>
+					</v-text-field>
+        </v-stepper-content>
+      </v-stepper-items>
+    </v-stepper>
+    <template slot="actions">
+      <v-btn flat @click="$emit('pop')">Cancel</v-btn>
+			<v-btn flat @click="step--" v-if="step > 1">Back</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn color="accent" @click="step++" v-if="step < 3">Next</v-btn>
+      <v-btn
+				:flat="step < 3"
+				:color="step < 3? '' : 'accent'"
+				@click="submit">
+				Create
+			</v-btn>
+    </template>
+  </dialog-base>
+</template>
+
+<script>
+  import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+	const getCost = function(score){
+		const costs = {
+			8: 0,
+			9: 1,
+			10: 2,
+			11: 3,
+			12: 4,
+			13: 5,
+			14: 7,
+			15: 9,
+		};
+		if (costs[score]){
+			return costs[score];
+		} else {
+			return null;
+		}
+	};
+  export default {
+    data(){return {
+      step: 1,
+			name: "New Character",
+			gender: "",
+			alignment: "",
+			race: "",
+			baseStrength: 10,
+			baseDexterity: 10,
+			baseConstitution: 10,
+			baseIntelligence: 10,
+			baseWisdom: 10,
+			baseCharisma: 10,
+			strengthBonus: 0,
+			dexterityBonus: 0,
+			constitutionBonus: 0,
+			intelligenceBonus: 0,
+			wisdomBonus: 0,
+			charismaBonus: 0,
+			hitDiceItems: ["d6", "d8", "d10", "d12"],
+			hitDice: "",
+			cls: "",
+    }},
+		methods: {
+			mod(score){
+				let mod = Math.floor((score - 10) / 2);
+				if (mod >= 0) {
+					return `+${mod}`;
+				} else {
+					return `${mod}`;
+				}
+			},
+			submit(){
+				let char = {
+					name: this.name,
+					gender: this.gender,
+					alignment: this.alignment,
+					race: this.race,
+					baseStrength: this.baseStrength,
+					baseDexterity: this.baseDexterity,
+					baseConstitution: this.baseConstitution,
+					baseIntelligence: this.baseIntelligence,
+					baseWisdom: this.baseWisdom,
+					baseCharisma: this.baseCharisma,
+					strengthBonus: this.strengthBonus,
+					dexterityBonus: this.dexterityBonus,
+					constitutionBonus: this.constitutionBonus,
+					intelligenceBonus: this.intelligenceBonus,
+					wisdomBonus: this.wisdomBonus,
+					charismaBonus: this.charismaBonus,
+					hitDice: this.hitDice,
+					cls: this.cls,
+				};
+				this.$emit("pop", char);
+			},
+		},
+		computed: {
+			cost(){
+				return [
+					this.baseStrength,
+					this.baseDexterity,
+					this.baseConstitution,
+					this.baseIntelligence,
+					this.baseWisdom,
+					this.baseCharisma,
+				].map(getCost)
+				.reduce((memo, score) => memo + score, 0);
+			},
+		},
+    components: {
+      DialogBase,
+    },
+  };
+</script>
+
+<style scoped>
+	.no-shadow {
+		box-shadow: none;
+	}
+	.point-buy-table {
+		width: 100%;
+	}
+	.point-buy-table td {
+		text-align: center;
+		padding: 0 8px 0 8px;
+		max-width: 50px;
+	}
+</style>
diff --git a/app/imports/ui/components/LabeledFab.vue b/app/imports/ui/components/LabeledFab.vue
index 3c345db1..4ec97905 100644
--- a/app/imports/ui/components/LabeledFab.vue
+++ b/app/imports/ui/components/LabeledFab.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn fab small>
+  <v-btn fab small @click="$emit('click')">
     <v-icon>
       {{icon}}
     </v-icon>
diff --git a/app/imports/ui/dialogStack/DialogBase.vue b/app/imports/ui/dialogStack/DialogBase.vue
index e7b3b142..8c64eb62 100644
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/app/imports/ui/dialogStack/DialogBase.vue
@@ -1,13 +1,39 @@
 <template>
   <v-card>
-    <v-toolbar color="primary" dark>
-      <slot name="toolbar"></slot>
-    </v-toolbar>
-    <v-layout>
-      <slot></slot>
-    </v-layout>
-    <v-card-actions>
-      <slot name="actions"></slot>
-    </v-card-actions>
+		<v-layout column style="height: 100%;">
+	    <v-toolbar color="primary" dark class="base-dialog-toolbar" :flat="!offsetTop">
+	      <slot name="toolbar"></slot>
+	    </v-toolbar>
+			<div id="base-dialog-body" v-scroll:#base-dialog-body="onScroll">
+				<slot></slot>
+			</div>
+			<v-card-actions>
+				<slot name="actions"></slot>
+			</v-card-actions>
+		</v-layout>
   </v-card>
 </template>
+
+<script>
+	export default {
+		data(){ return {
+			offsetTop: 0,
+		}},
+		methods: {
+			onScroll(e){
+				this.offsetTop = e.target.scrollTop
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.base-dialog-toolbar {
+		z-index: 1;
+		border-radius: 2px 2px 0 0;
+	}
+	#base-dialog-body {
+		flex-grow: 1;
+		overflow: auto;
+	}
+</style>
diff --git a/app/imports/ui/dialogStack/DialogStack.vue b/app/imports/ui/dialogStack/DialogStack.vue
index effc4049..5a883b6c 100644
--- a/app/imports/ui/dialogStack/DialogStack.vue
+++ b/app/imports/ui/dialogStack/DialogStack.vue
@@ -12,7 +12,7 @@
         class="dialog"
         :style="getDialogStyle(index)"
       >
-        <component :is="dialog.component" :data="dialog.data"></component>
+        <component :is="dialog.component" :data="dialog.data" @pop="popDialogStack($event)"></component>
       </div>
     </transition-group>
   </v-layout>
@@ -32,8 +32,8 @@
       },
     },
     methods: {
-      popDialogStack(){
-        store.dispatch("popDialogStack");
+      popDialogStack(result){
+        store.dispatch("popDialogStack", result);
       },
       backdropClicked(event){
         if (event.target === event.currentTarget) this.popDialogStack();
@@ -61,8 +61,8 @@
   }
   .dialog-sizer {
     position: relative;
-    height: 500px;
-    width: 500px;
+    height: 600px;
+    width: 600px;
     z-index: 5;
     flex: initial;
   }
diff --git a/app/imports/ui/dialogStack/dialogStackStore.js b/app/imports/ui/dialogStack/dialogStackStore.js
index a2cad8ce..644b9e99 100644
--- a/app/imports/ui/dialogStack/dialogStackStore.js
+++ b/app/imports/ui/dialogStack/dialogStackStore.js
@@ -8,6 +8,7 @@ dialogStack.dialogs = [];
 const dialogStackStore = {
   state: {
     dialogs: [],
+    currentResult: null,
   },
   mutations: {
     pushDialogStack(state, {component, data, element, returnElement, callback}){
@@ -24,15 +25,18 @@ const dialogStackStore = {
       updateHistory();
     },
     popDialogStackMutation (state, result){
+      console.log({popped: result});
       const dialog = state.dialogs.pop();
+      state.currentResult = null;
       updateHistory();
       if (!dialog) return;
-      dialog.callback && dialog.callback(result);
+      if (dialog.callback) dialog.callback(result);
     },
   },
   actions: {
     popDialogStack(context, result){
       if (history && history.state && history.state.openDialogs){
+        context.state.currentResult = result;
         history.back();
       } else {
         context.commit("popDialogStackMutation", result)
diff --git a/app/imports/ui/dialogStack/dialogStackWindowEvents.js b/app/imports/ui/dialogStack/dialogStackWindowEvents.js
index ec728c26..29143286 100644
--- a/app/imports/ui/dialogStack/dialogStackWindowEvents.js
+++ b/app/imports/ui/dialogStack/dialogStackWindowEvents.js
@@ -5,7 +5,7 @@ if (window){
     let state = event.state;
     let numDialogs = store.state.dialogStack.dialogs.length;
     if (_.isFinite(state.openDialogs) && numDialogs > state.openDialogs){
-      store.commit("popDialogStackMutation");
+      store.commit("popDialogStackMutation", store.state.dialogStack.currentResult);
     }
   };
 }
diff --git a/app/imports/ui/pages/CharacterList.vue b/app/imports/ui/pages/CharacterList.vue
index 15208235..2e811abd 100644
--- a/app/imports/ui/pages/CharacterList.vue
+++ b/app/imports/ui/pages/CharacterList.vue
@@ -65,15 +65,17 @@
         <v-icon>add</v-icon>
         <v-icon>close</v-icon>
       </v-btn>
-      <labeled-fab icon="face" label="New Character"></labeled-fab>
+      <labeled-fab icon="face" label="New Character" @click="insertCharacter"></labeled-fab>
       <labeled-fab icon="group" label="New Party"></labeled-fab>
     </v-speed-dial>
   </toolbar-layout>
 </template>
 
 <script>
+  import store from "/imports/ui/vuexStore.js";
   import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
   import LabeledFab from "/imports/ui/components/LabeledFab.vue";
+  import CharacterCreationDialog from "/imports/ui/character/CharacterCreationDialog.vue";
 
   const characterTransform = function(char){
     char.url = `\/character\/${char._id}\/${char.urlName || "-"}`;
@@ -118,6 +120,20 @@
     		).map(characterTransform);
     	},
     },
+    methods: {
+      insertCharacter(e){
+				console.log(e);
+        store.commit("pushDialogStack", {
+           component: CharacterCreationDialog,
+           data: {},
+           element: undefined,
+           returnElement: undefined,
+           callback(result){
+             console.log({result});
+           },
+        });
+      },
+    },
     components: {
       ToolbarLayout,
       LabeledFab,