<commit_before><template>
  <div class="col-12 col-md-4 unselectable">
    <table class="tree mx-auto" :style="build.ascendancy < 3 && treeStyle">
      <tr v-for="(_, row) in 6">
        <td v-for="(_, col) in 4">
          <Skill :id="skillId(build.ascendancy, row, col)"/>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import Skill from './Skill';

  export default {
    computed: {
      ...mapState([
        'job',
        'build',
      ]),
      treeStyle() {
        const slug = this.job.ascendancies[this.build.ascendancy].slug;
        return {
          background: `url(${process.env.ASSETS_URL}/images/${slug}.png)`,
        };
      },
    },
    methods: {
      skillId(ascendancy, row, col) {
        return this.job.tree[ascendancy][(row * 4) + col];
      },
    },
    components: {
      Skill,
    },
  };
</script>

<style>
  .tree {
    background-repeat: no-repeat !important;
    background-position: -4px 5.5px !important;
    background-size: 323px 563px !important;
  }<commit_msg>resolves #38 I believe - increasing the y position of the image from 5.5px to 7px.<commit_after><template>
  <div class="col-12 col-md-4 unselectable">
    <table class="tree mx-auto" :style="build.ascendancy < 3 && treeStyle">
      <tr v-for="(_, row) in 6">
        <td v-for="(_, col) in 4">
          <Skill :id="skillId(build.ascendancy, row, col)"/>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import Skill from './Skill';

  export default {
    computed: {
      ...mapState([
        'job',
        'build',
      ]),
      treeStyle() {
        const slug = this.job.ascendancies[this.build.ascendancy].slug;
        return {
          background: `url(${process.env.ASSETS_URL}/images/${slug}.png)`,
        };
      },
    },
    methods: {
      skillId(ascendancy, row, col) {
        return this.job.tree[ascendancy][(row * 4) + col];
      },
    },
    components: {
      Skill,
    },
  };
</script>

<style>
  .tree {
    background-repeat: no-repeat !important;
    background-position: -4px 7px !important;
    background-size: 323px 563px !important;
  }
{'fraction_non_alphanumeric': 0.17200902934537246, 'fraction_numerical': 0.016252821670428894, 'mean_word_length': 2.1839080459770117, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 31, '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': '2216025', 'n_tokens_mistral': 797, 'n_tokens_neox': 776, 'n_words': 166}