renamed some files, started #3 and #9

package.json

@@ -14,14 +14,16 @@
   "license": "ISC",
   "devDependencies": {
     "css-loader": "^1.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "ts-loader": "^5.3.0",
     "typescript": "^3.1.6",
     "vue": "^2.5.17",
+    "vue-class-component": "^6.3.2",
     "vue-loader": "^15.4.2",
+    "vue-property-decorator": "^7.2.0",
     "vue-template-compiler": "^2.5.17",
     "webpack": "^4.24.0",
     "webpack-cli": "^3.1.2",
-    "html-webpack-plugin": "^3.2.0",
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {

src/app.ts

@@ -2,16 +2,11 @@ import 'vuetify/dist/vuetify.min.css';
 // import 'material-design-icons-iconfont/dist/material-design-icons.css'; //MIKE: need a font file type loader or something for this to work, for now im using a cdn
 import Vue from 'vue';
 import Vuetify from 'vuetify';
-// import 'echarts/lib/chart/radar'
-
-// import fuck from './components/app.vue'; 
-// import fuck from './components/app2.vue'; 
-// import fuck from './components/app3.vue'; 
-import fuck from './components/app4.vue'; 
+import app from './components/App.vue'; 
 
 Vue.use(Vuetify);
 
 new Vue({
   el: '#app',
-  render: h => h(fuck)
+  render: h => h(app)
 });

src/components/CharacterSummary.vue

@@ -26,15 +26,27 @@
                 </v-card-text>
         </v-img>
     </v-card>
-    <!-- <span>fug</span> -->
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({
-    name: 'CharacterSummary',
-    props: {
-        name: {type: String},
-        }
-})
+import { Component, Prop } from 'vue-property-decorator'
+
+//MIKE: define this in the parent or somewhere else as a last resort
+interface CharacterClass {
+    name: string;
+    icon: string;
+}
+
+@Component
+export default class CharacterSummary extends Vue {
+    @Prop({required: true})
+    characterClass!: CharacterClass;
+
+    @Prop({required: true})
+    name!: string;
+
+    @Prop({required: true})
+    bio!: string;
+}
 </script>

src/components/StatsCard.vue

@@ -0,0 +1,120 @@
+<template>
+<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>
+        <!-- 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 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>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+//MIKE: define this in the parent or somewhere else as a last resort
+interface MainStats {
+    ac: number;
+    dex: number;
+    str: number;
+    int: number;
+    char: number;
+}
+
+@Component
+export default class CharacterSummary extends Vue {
+    @Prop({required: true})
+    mainStats!: MainStats;
+
+    formStats!: MainStats;
+
+//     get UpperCaseStat() {
+//     return Math.random()
+//   }
+}
+</script>