Skip to content

Commit

Permalink
workin on #9, #3, and #1
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Joseph committed Dec 6, 2018
1 parent 1c2ae9a commit 75318c6
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 126 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
node_modules/
dist/
OnPaste.ts
.vscode/settings.json
80 changes: 43 additions & 37 deletions src/components/CharacterSummary.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,58 @@
<template>
<v-card dark color="transparent">
<v-img
height="190"
src="https://liamrainsford.files.wordpress.com/2013/06/oughaval-wood-s.jpg"
gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
>
<v-card-title>
<h1>
<v-avatar>
<img src="http://www.paolini.net/wp-content/uploads/2017/09/Kvothe-Overlay100.jpg" alt="avatar">
</v-avatar>
{{ name }}
</h1>
</v-card-title>
<v-card-text>
<p>
{{ characterClass.name }}
<v-icon small>
{{ characterClass.icon }}
</v-icon>
</p>
<p>
{{ bio }}
</p>
</v-card-text>
</v-img>
</v-card>
<v-card
dark
color="transparent"
>
<v-img
height="190"
src="https://liamrainsford.files.wordpress.com/2013/06/oughaval-wood-s.jpg"
gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
>
<v-card-title>
<h1>
<v-avatar>
<img
src="http://www.paolini.net/wp-content/uploads/2017/09/Kvothe-Overlay100.jpg"
alt="avatar"
>
</v-avatar>
{{ name }}
</h1>
</v-card-title>
<v-card-text>
<p>
{{ characterClass.name }}
<v-icon small>
{{ characterClass.icon }}
</v-icon>
</p>
<p>
{{ bio }}
</p>
</v-card-text>
</v-img>
</v-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import Vue from "vue";
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;
name: string;
icon: string;
}
@Component
export default class CharacterSummary extends Vue {
@Prop({required: true})
characterClass!: CharacterClass;
@Prop({ required: true })
characterClass!: CharacterClass;
@Prop({required: true})
name!: string;
@Prop({ required: true })
name!: string;
@Prop({required: true})
bio!: string;
@Prop({ required: true })
bio!: string;
}
</script>
176 changes: 88 additions & 88 deletions src/components/StatsCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,103 @@
<template>
<!-- <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"
>
<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-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"
>
<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-dialog
v-model="dialog"
width="500"
<v-btn
color="indigo"
dark
@click="submitForm()"
>
Save
</v-btn>
<v-btn
color="indigo"
flat
@click="dialog = false"
>
<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>
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 } from 'vue-property-decorator'
import { Stat } from '../Stat'
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { Stat } from "../Stat";
// import { Maybe } from 'tsmonad';
@Component
export default class StatsCard extends Vue {
@Prop({
default: () => [Stat.Dex(10), Stat.Int(14), Stat.Char(6), Stat.AC(10)]
})
mainStats!: Stat[];
@Prop({
default: () => [Stat.Dex(10), Stat.Int(14), Stat.Char(6), Stat.AC(10)]
})
mainStats!: Stat[];
dialog: boolean = false;
dialog: boolean = false;
formStats = this.mainStats;
formStats = this.mainStats;
submitForm(): void {
//MIKE: emit something instead of doing this
// this.mainStats = this.formStats;
}
submitForm(): void {
//MIKE: emit something instead of doing this
// this.mainStats = this.formStats;
}
}
</script>

0 comments on commit 75318c6

Please sign in to comment.