major redesign

1 files changed, 57 insertions, 0 deletions

diff --git a/src/HeroDraftGrid.vue b/src/HeroDraftGrid.vue
new file mode 100644
index 0000000..a130218
--- /dev/null
+++ b/src/HeroDraftGrid.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="box">
+    <div class="columns is-mobile is-multiline is-centered">
+      <div class="column is-narrow" v-for="actor in actors" :key="actor">
+        <a v-on:click="selectedActor = actor">
+          <hero-image :actor="actor" :class="'is-48x48 ' + (selectedActor == actor? 'highlight-selection' : '')"></hero-image>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '~bulma/sass/utilities/_all';
+@import '~bulma/sass/base/_all';
+@import '~bulma/sass/elements/button.sass';
+
+.highlight-selection {
+  border-color: $button-focus-border-color;
+  color: $button-focus-color;
+  box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+  transform: scale(1.25);
+}
+</style>
+
+<script>
+import Vue from 'vue';
+import TalentImage from './TalentImage.vue';
+import HeroImage from './HeroImage.vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('hero-draft-grid', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      actors: this.reportService.getActors(),
+      getHero: maps.getHero,
+      getTalentName: maps.getTalentName,
+    };
+  },
+  computed: {
+    selectedActor: {
+      get: function() {
+        return this.$route.query.actor;
+      },
+      set: function(value) {
+        const query = Object.assign({}, this.$route.query, { actor: value });
+        this.$router.push({ query });
+      },
+    },
+  },
+  components: {
+    TalentImage,
+    HeroImage,
+  },
+});
+</script>