<commit_before><template>
  <div class="modifiers-container">
    <transition name="fade">
      <div v-if="isVisible" class="modifiers-header">Additional</div> 
    </transition>
    <div class="modifiers" :class=[columnClass]>
      <div class="clear-left"></div>
      <transition name="fade">
        <div class="kingdom-supply_card" v-if="metadata.useColonies">
          <static-card-component
              :cardImageUrl="'/img/cards/prosperity_coloniesplatinums.png'"
              :description="'Colonies & Platinums'" />
        </div>
      </transition>
      <transition name="fade">
        <div class="kingdom-supply_card" v-if="metadata.useShelters">
          <static-card-component
              :cardImageUrl="'/img/cards/darkages_shelters.png'"
              :description="'Shelters'" />
        </div>
      </transition>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script lang="ts">
import StaticCardComponent from "./static-card.vue";
import { Metadata } from "../models/kingdom";
import { Vue, Component } from "vue-property-decorator";
import { State } from "vuex-class";

@Component
export default class ModifiersComponent extends Vue {
  constructor() {
    super({components: {"static-card-component": StaticCardComponent}});
  }
  @State(state => state.randomizer.kingdom.metadata) readonly metadata!: Metadata;
  @State(state => state.window.width) readonly windowWidth!: number;
  
  get isVisible() {
    return this.metadata.useColonies || this.metadata.useShelters;
  }

  get columnClass() {
    return this.windowWidth > 450 ? "five-columns" : "four-columns";
  }

}
Vue.component("modifiers-component", ModifiersComponent);
</script>

<style>
.modifiers-header.fade-enter-active,
.modifiers-header.fade-leave-active,
.kingdom-supply_card.fade-enter-active,
.kingdom-supply_card.fade-leave-active {
  transition: opacity .3s;
}
.modifiers-header.fade-enter,
.modifiers-header.fade-leave-to,
.modifiers-container .kingdom-supply_card.fade-enter,
.modifiers-container .kingdom-supply_card.fade-leave-to {
  opacity: 0;
}
</style><commit_msg>Shrinks the text size of the colonies modifier<commit_after><template>
  <div class="modifiers-container">
    <transition name="fade">
      <div v-if="isVisible" class="modifiers-header">Additional</div> 
    </transition>
    <div class="modifiers" :class=[columnClass]>
      <div class="clear-left"></div>
      <transition name="fade">
        <div class="kingdom-supply_card use-colonies" v-if="metadata.useColonies">
          <static-card-component
              :cardImageUrl="'/img/cards/prosperity_coloniesplatinums.png'"
              :description="'Colonies & Platinums'" />
        </div>
      </transition>
      <transition name="fade">
        <div class="kingdom-supply_card" v-if="metadata.useShelters">
          <static-card-component
              :cardImageUrl="'/img/cards/darkages_shelters.png'"
              :description="'Shelters'" />
        </div>
      </transition>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script lang="ts">
import StaticCardComponent from "./static-card.vue";
import { Metadata } from "../models/kingdom";
import { Vue, Component } from "vue-property-decorator";
import { State } from "vuex-class";

@Component
export default class ModifiersComponent extends Vue {
  constructor() {
    super({components: {"static-card-component": StaticCardComponent}});
  }
  @State(state => state.randomizer.kingdom.metadata) readonly metadata!: Metadata;
  @State(state => state.window.width) readonly windowWidth!: number;
  
  get isVisible() {
    return this.metadata.useColonies || this.metadata.useShelters;
  }

  get columnClass() {
    return this.windowWidth > 450 ? "five-columns" : "four-columns";
  }

}
Vue.component("modifiers-component", ModifiersComponent);
</script>

<style>
.modifiers-header.fade-enter-active,
.modifiers-header.fade-leave-active,
.modifiers-container .kingdom-supply_card.fade-enter-active,
.modifiers-container .kingdom-supply_card.fade-leave-active {
  transition: opacity .3s;
}
.modifiers-header.fade-enter,
.modifiers-header.fade-leave-to,
.modifiers-container .kingdom-supply_card.fade-enter,
.modifiers-container .kingdom-supply_card.fade-leave-to {
  opacity: 0;
}
.use-colonies .supply-card__front-set-name {
  font-size: 16px;
}
</style>
{'fraction_non_alphanumeric': 0.15515653775322283, 'fraction_numerical': 0.0027624309392265192, 'mean_word_length': 3.627263045793397, 'pattern_counts': {'":': 2, '<': 59, '<?xml version=': 0, '>': 65, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7632225', 'n_tokens_mistral': 1432, 'n_tokens_neox': 1369, 'n_words': 237}