Update the copy button to be translated and include all addons (#65)

src/components/CopyButton.vue

@@ -4,7 +4,7 @@
     :class="{ 'copy-button--has-copied': hasCopied }"
     @click="handleClick"
   >
-    <input  ref="textInput" class="copy-button__input" type="text" :value="text" readonly />
+    <input ref="textInput" class="copy-button__input" type="text" :value="text" readonly />
     <div class="copy-button__icon">
       <svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
         <path d="M456.533 153.6H422.4v-51.2c-.028-23.553-19.114-42.639-42.667-42.667h-35.706A25.556 25.556 0 00320 42.667h-17.067V25.6c-.015-14.132-11.468-25.585-25.6-25.6h-102.4c-14.132.015-25.585 11.468-25.6 25.6v17.067h-17.067a25.559 25.559 0 00-24.028 17.067H72.533c-23.552.027-42.639 19.113-42.666 42.666v332.8c.028 23.553 19.114 42.639 42.667 42.667h102.4v8.533c.015 14.132 11.468 25.585 25.6 25.6h256c14.132-.015 25.585-11.468 25.6-25.6V179.2c-.016-14.132-11.469-25.585-25.601-25.6zM166.4 25.6a8.544 8.544 0 018.533-8.533h102.4a8.544 8.544 0 018.533 8.533v17.067H166.4V25.6zm-42.667 42.667a8.544 8.544 0 018.533-8.533H320a8.544 8.544 0 018.533 8.533V102.4a8.544 8.544 0 01-8.533 8.533H132.267a8.544 8.544 0 01-8.533-8.533V68.267zm51.2 110.933v281.6h-102.4c-14.132-.015-25.585-11.468-25.6-25.6V102.4c.015-14.132 11.468-25.585 25.6-25.6h34.133v25.6c.015 14.132 11.468 25.585 25.6 25.6H320c14.132-.015 25.585-11.468 25.6-25.6V76.8h34.133c14.132.015 25.585 11.468 25.6 25.6v51.2h-204.8c-14.132.015-25.584 11.468-25.6 25.6zm290.134 307.2a8.544 8.544 0 01-8.533 8.533h-256a8.544 8.544 0 01-8.533-8.533V179.2a8.544 8.544 0 018.533-8.533h256a8.544 8.544 0 018.533 8.533v307.2z"/>

src/components/PresetKingdom.vue

@@ -29,11 +29,6 @@
       </template>
     </GridLayout>
 
-    <CopyButton 
-      :text="getCopyText(kingdom)"
-      class="preset-kingdom-copy-button"
-    />
-
     <div v-if="addonIds.length">
       <div class="preset-kingdom__addon-title">
         <AddonTitle
@@ -66,6 +61,8 @@
         </template>
       </GridLayout>
     </div>
+
+    <CopyButton :text="copyText" class="preset-kingdom-copy-button" />
   </div>
 </template>
 
@@ -118,6 +115,10 @@ export default class PresetKingdom extends Vue {
     return this.kingdom.metadata.useColonies || this.kingdom.metadata.useShelters;
   }
 
+  get copyText() {
+    return this.kingdom.supplyIds.concat(this.addonIds).map((id) => this.$t(id)).join(", ");
+  }
+
   getSupplyCards(kingdom: DominionKingdom) {
     const cardIds = this.kingdom.supplyIds.concat();
     if (this.kingdom.baneCardId) {
@@ -136,7 +137,7 @@ export default class PresetKingdom extends Vue {
   }
 
   getCopyText(kingdom: DominionKingdom) {
-    return this.getSupplyCards(kingdom).map((card) => card.name).join(", ");
+
   }
 }
 </script>
@@ -175,7 +176,7 @@ export default class PresetKingdom extends Vue {
 }
 
 .preset-kingdom-copy-button {
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
 .preset-kingdom_metadata {

src/components/Randomizer.vue

@@ -6,6 +6,10 @@
       <Addons />
       <Boons />
       <Modifiers />
+      <CopyButton
+        :text="supplyCardsCopyText"
+        class="randomizer-copy-button"
+      />
     </div>
   </div>
 </template>
@@ -23,6 +27,8 @@ import { LOAD_INITIAL_KINGDOM, RANDOMIZE } from "../stores/randomizer/action-typ
 import { deserializeKingdom, serializeKingdom } from "../randomizer/serializer";
 import Modifiers from "./Modifiers.vue";
 import { Kingdom } from "../randomizer/kingdom";
+import { Card } from "../dominion/card";
+import CopyButton from "./CopyButton.vue";
 
 @Component({
   components: {
@@ -31,6 +37,7 @@ import { Kingdom } from "../randomizer/kingdom";
     Modifiers,
     RandomizerSidebar,
     SortableSupplyCards,
+    CopyButton,
   }
 })
 export default class Randomizer extends Vue {
@@ -40,6 +47,16 @@ export default class Randomizer extends Vue {
   @State(state => state.randomizer.settings.randomizerSettings)
       readonly randomizerSettings!: RandomizerSettings;
 
+  get supplyCardsCopyText() {
+    return (this.kingdom.supply.supplyCards as Card[]).concat(
+      this.kingdom.events,
+      this.kingdom.landmarks,
+      this.kingdom.projects,
+      this.kingdom.ways,
+      this.kingdom.boons,
+    ).map((card) => this.$t(card.id)).join(", ");
+  }
+
   mounted() {
     const kingdomFromUrl = deserializeKingdom(this.$route.query);
     this.$store.dispatch(LOAD_INITIAL_KINGDOM, kingdomFromUrl);
@@ -74,4 +91,10 @@ export default class Randomizer extends Vue {
     return true;
   }
 }
-</script>
+</script>
+
+<style>
+.randomizer-copy-button {
+  margin-top: 4px;
+}
+</style>

src/components/SortableSupplyCards.vue

@@ -25,10 +25,6 @@
         </FlippingCard>
       </template>
     </GridLayout>
-    <CopyButton
-      :text="supplyCardsCopyText"
-      class="sortable-supply-card-copy-button"
-    />
   </div>
 </template>
 
@@ -46,7 +42,6 @@ import { TweenLite, Sine } from "gsap";
 import { Selection } from "../stores/randomizer/selection";
 import { UPDATE_SPECIFYING_REPLACEMENT_SUPPLY_CARD } from "../stores/randomizer/mutation-types";
 import GridLayout from "./GridLayout.vue";
-import CopyButton from "./CopyButton.vue";
 
 interface MoveDescriptor {
   elementIndex: number;
@@ -61,7 +56,6 @@ const WINDOW_RESIZE_DELAY_MSEC = 300;
     GridLayout,
     FlippingCard,
     BaneCardCover,
-    CopyButton,
   }
 })
 export default class SortableSupplyCards extends Vue {
@@ -95,10 +89,6 @@ export default class SortableSupplyCards extends Vue {
     return cards;
   }
 
-  get supplyCardsCopyText() {
-    return this.supplyCards.map((card) => card.name).join(", ");
-  }
-
   @Watch("kingdom")
   handleKingdomChanged() {
     this.updateActiveSupplyCards();
@@ -291,8 +281,4 @@ export default class SortableSupplyCards extends Vue {
 .kingdom-supply--is-enlarged .card-set-description .card-description {
   font-size: 16px !important;
 }
-
-.sortable-supply-card-copy-button {
-  margin-top: 4px;
-}
 </style>