From 1c2ae9af7c814b876d3b18099fb832a5ec54458d Mon Sep 17 00:00:00 2001
From: Michael Joseph <michael.joseph@member.buzz>
Date: Thu, 6 Dec 2018 11:13:33 -0500
Subject: [PATCH] workin on #9, #3, and #1

---
 .gitignore                   |   1 +
 package-lock.json            |  10 ++
 package.json                 |   2 +
 src/Stat.ts                  |   2 +-
 src/components/StatsCard.vue | 181 ++++++++++++++++-------------------
 src/components/app.vue       | 106 ++------------------
 6 files changed, 108 insertions(+), 194 deletions(-)

diff --git a/.gitignore b/.gitignore
index b947077..02d49ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 dist/
+OnPaste.ts
diff --git a/package-lock.json b/package-lock.json
index 4126550..50d0be5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.2.tgz",
       "integrity": "sha512-53ElVDSnZeFUUFIYzI8WLQ25IhWzb6vbddNp8UHlXQyU0ET2RhV5zg0NfubzU7iNMh5bBXb0htCzfvrSVNgzaQ=="
     },
+    "@types/ramda": {
+      "version": "0.25.42",
+      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.25.42.tgz",
+      "integrity": "sha512-m8IcEWgJZTb47UARqp2d58f+C8yDxpTC6ElU/muO0z1bYhdgf6LHcO2SE9f1Mt3SJnKCh6GtjKEC99hq6vPnDA=="
+    },
     "@types/tapable": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.4.tgz",
@@ -5325,6 +5330,11 @@
       "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
       "dev": true
     },
+    "tsmonad": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/tsmonad/-/tsmonad-0.8.0.tgz",
+      "integrity": "sha1-zjzxMZLzI9uPeMgfVKX1vEohMPw="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
diff --git a/package.json b/package.json
index 499cd40..bc0dd82 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,12 @@
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
+    "@types/ramda": "^0.25.42",
     "@types/webpack": "^4.4.17",
     "chart.js": "^2.7.3",
     "material-design-icons-iconfont": "^4.0.2",
     "ramda": "^0.26.1",
+    "tsmonad": "^0.8.0",
     "vue-chartjs": "^3.4.0",
     "vue-echarts": "^3.1.3",
     "vuetify": "^1.3.5"
diff --git a/src/Stat.ts b/src/Stat.ts
index b2877a6..7e21e61 100644
--- a/src/Stat.ts
+++ b/src/Stat.ts
@@ -22,6 +22,6 @@ export class Stat {
     }
 
     public static Char(val: number) {
-        return new Stat('Char', 'Charisma', val);
+        return new Stat('CHAR', 'Charisma', val);
     }
 }
\ No newline at end of file
diff --git a/src/components/StatsCard.vue b/src/components/StatsCard.vue
index c8ea110..134eb75 100644
--- a/src/components/StatsCard.vue
+++ b/src/components/StatsCard.vue
@@ -1,111 +1,98 @@
 <template>
-<v-card color="grey lighten-2">
-    <v-card-text>
-        <h3>Main Stats</h3>
-        <v-divider></v-divider>
-        <p>
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            <!-- YOU WERE HERE -->
-            DEX: {{ stats.dex }}
-            <br>
-            STR: {{ stats.str }}
-            <br>
-            INT: {{ stats.int }}
-            <br>
-            CHAR: {{ stats.char }}
-        </p>
-    </v-card-text>
-    <v-card-actions>
-        <!-- OLD -->
-        <!-- <v-btn dark small color="indigo" @click="editStats()">EDIT</v-btn> -->
-        <v-spacer></v-spacer>
-        <v-dialog
-            v-model="dialog"
-            width="500"
-        >
-            <v-btn
-                slot="activator"
-                color="indigo"
-                dark
-                small
-            >
-                EDIT
-            </v-btn>
-            <v-card color="grey lighten-2">
-                <v-card-title>
-                    <h2>Edit Main Stats</h2>
-                </v-card-title>
-                    <v-container grid-list-md>
-                        <v-layout row wrap>
-                            <v-flex v-for="(stat, index) in mainStats" :key="`stat-${index}`" xs3>
-                                <v-text-field
-                                    :label="stat.shortName"
-                                    :placeholder="`${stat.val}`"
-                                    outline
-                                    v-model="formStats[index]"
-                                ></v-text-field>
-                            </v-flex>
-                        </v-layout>
-                    </v-container>
-                <v-divider></v-divider>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn
-                        color="indigo"
-                        dark
-                        @click="submitForm()"
-                    >
-                        Save
-                    </v-btn>
-                    <v-btn
-                        color="indigo"
-                        flat
-                        @click="dialog = false"
+    <!-- <v-card color="grey lighten-2"> -->
+    <v-card>
+        <v-card-text>
+            <h3>Main Stats</h3>
+            <v-divider></v-divider>
+                <v-list dense>
+                    <v-list-tile
+                        v-for="(stat, index) in mainStats"
+                        :key="index"
                     >
-                        Cancel
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </v-card-actions>
-</v-card>
+                        <v-list-tile-content>
+                            <v-list-tile-title>{{stat.shortName}}</v-list-tile-title>
+                        </v-list-tile-content>
+                        <v-list-tile-content
+                            class="align-end"
+                        >
+                            <v-list-tile-sub-title>{{stat.val}}</v-list-tile-sub-title>
+                        </v-list-tile-content>
+                    </v-list-tile>
+                </v-list>
+        </v-card-text>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-dialog
+                v-model="dialog"
+                width="500"
+            >
+                <v-btn
+                    slot="activator"
+                    color="indigo"
+                    dark
+                    small
+                >
+                    EDIT
+                </v-btn>
+                <v-card color="grey lighten-2">
+                    <v-card-title>
+                        <h2>Edit Main Stats</h2>
+                    </v-card-title>
+                        <v-container grid-list-md>
+                            <v-layout row wrap>
+                                <v-flex
+                                    v-for="(stat, index) in mainStats" 
+                                    :key="index" 
+                                    xs3
+                                >
+                                    <v-text-field
+                                        :label="stat.shortName"
+                                        :placeholder="`${stat.val}`"
+                                        outline
+                                        v-model="formStats[index].val"
+                                    ></v-text-field>
+                                </v-flex>
+                            </v-layout>
+                        </v-container>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn
+                            color="indigo"
+                            dark
+                            @click="submitForm()"
+                        >
+                            Save
+                        </v-btn>
+                        <v-btn
+                            color="indigo"
+                            flat
+                            @click="dialog = false"
+                        >
+                            Cancel
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </v-card-actions>
+    </v-card>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Prop } from 'vue-property-decorator'
 import { Stat } from '../Stat'
+// import { Maybe }  from 'tsmonad';
 
 @Component
-export default class CharacterSummary extends Vue {
-    @Prop({required: true})
+export default class StatsCard extends Vue {
+    @Prop({
+            default: () => [Stat.Dex(10), Stat.Int(14), Stat.Char(6), Stat.AC(10)]
+        })
     mainStats!: Stat[];
 
+    dialog: boolean = false;
+
     formStats = this.mainStats;
 
     submitForm(): void {
diff --git a/src/components/app.vue b/src/components/app.vue
index f480312..3f11fb6 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -14,102 +14,13 @@
                 <v-layout row wrap>
                     <v-flex xs12 md6>
                         <character-summary 
-                        :character-class="characterClass" 
-                        :name="name"
-                        :bio="bio" 
-                    ></character-summary>
+                            :character-class="characterClass" 
+                            :name="name"
+                            :bio="bio" 
+                        ></character-summary>
                     </v-flex>
                     <v-flex xs4 md2>
-                        <v-card color="grey lighten-2">
-                            <v-card-text>
-                                <h3>Main Stats</h3>
-                                <v-divider></v-divider>
-                                <p>
-                                    DEX: {{ stats.dex }}
-                                    <br>
-                                    STR: {{ stats.str }}
-                                    <br>
-                                    INT: {{ stats.int }}
-                                    <br>
-                                    CHAR: {{ stats.char }}
-                                </p>
-                            </v-card-text>
-                            <v-card-actions>
-                                <v-spacer></v-spacer>
-                                <v-dialog
-                                    v-model="dialog"
-                                    width="500"
-                                >
-                                    <v-btn
-                                        slot="activator"
-                                        color="indigo"
-                                        dark
-                                        small
-                                    >
-                                        EDIT
-                                    </v-btn>
-                                    <v-card color="grey lighten-2">
-                                        <v-card-title>
-                                            <h2>Edit Main Stats</h2>
-                                        </v-card-title>
-                                            <v-container grid-list-md>
-                                                <v-layout row wrap>
-                                                    <v-flex xs3>
-                                                        <v-text-field
-                                                            label="DEX"
-                                                            :placeholder="`${stats.dex}`"
-                                                            outline
-                                                            v-model="formStats.dex"
-                                                        ></v-text-field>
-                                                    </v-flex>
-                                                    <v-flex xs3>
-                                                        <v-text-field
-                                                            label="STR"
-                                                            :placeholder="`${stats.str}`"
-                                                            outline
-                                                            v-model="formStats.str"
-                                                        ></v-text-field>
-                                                    </v-flex>
-                                                    <v-flex xs3>
-                                                        <v-text-field
-                                                            label="INT"
-                                                            :placeholder="`${stats.int}`"
-                                                            outline
-                                                            v-model="formStats.int"
-                                                        ></v-text-field>
-                                                    </v-flex>
-                                                    <v-flex xs3>
-                                                        <v-text-field
-                                                            label="CHAR"
-                                                            :placeholder="`${stats.char}`"
-                                                            outline
-                                                            v-model="formStats.char"
-                                                        ></v-text-field>
-                                                    </v-flex>                         
-                                                </v-layout>
-                                            </v-container>
-                                        <v-divider></v-divider>
-                                        <v-card-actions>
-                                            <v-spacer></v-spacer>
-                                            <v-btn
-                                                color="indigo"
-                                                dark
-                                                @click="submitForm()"
-                                            >
-                                                Save
-                                            </v-btn>
-                                            <v-btn
-                                                color="indigo"
-                                                flat
-                                                @click="dialog = false"
-                                            >
-                                                Cancel
-                                            </v-btn>
-                                        </v-card-actions>
-                                    </v-card>
-                                </v-dialog>
-                            </v-card-actions>
-                        </v-card>
+                        <stats-card></stats-card>
                     </v-flex>
                     <v-flex xs4 md2>
                         <v-card  color="grey lighten-2">
@@ -147,12 +58,16 @@
 import Vue from "vue";
 // import RadarChart from './RadarChart.vue';
 import CharacterSummary from './CharacterSummary.vue'
+import StatsCard from './StatsCard.vue'
+// import R from 'ramda';
+
+
 
 // Vue.extend({components: [CharacterSummary]})
 
 export default Vue.extend({
     name: 'CharacterSheet',
-    components: { CharacterSummary },
+    components: { CharacterSummary, StatsCard },
     data()
     {
         return {
@@ -195,7 +110,6 @@ export default Vue.extend({
         init: function (): number {
             return this.stats.dex
         }
-
     },
     methods: 
     {