<commit_before><template>
  <div v-show="isOpen" id="inventory">
    <div id="content">
      <h1>Inventory</h1>

      <h2>Items</h2>
      <ul>
        <li v-for="item in allItemTypes" v-if="!inToolbar(item)" class="item" @click="addToToolbar('item', item.id)">
          <img class="icon" :src="'assets/img/icons/' + item.icon + '.png'">
          <span>{{ item.name }}</span>
        </li>
      </ul>

      <h2>Blocks</h2>
      <ul>
        <li v-for="block in allBlockTypes" v-if="!inToolbar(block)" class="item" @click="addToToolbar('block', block.id)">
          <img class="icon" :src="'assets/img/icons/' + block.icon + '.png'">
          <span>{{ block.name }}</span>
        </li>
      </ul>

      <h2>Toolbar</h2>
      <ul>
        <li v-for="item in toolbarItems" track-by="$index" class="item" @click="removeFromToolbar($index, item.type, item.id)">
          <div>
            <img v-if="item.icon" class="icon" :src="'assets/img/icons/' + item.icon + '.png'">
            <div v-else class="nothing"></div>

            <span v-if="item.name">{{ item.name }}</span>
            <span v-else>Nothing</span>
          </div>
          <span>({{ $index + 1 }})</span>
        </li>
      </ul>

      <div v-el:close class="closeButton" @click="closeInventory"></div>
    </div>
  </div>
</template>

<script>
import controller from './controller';

export default {
  name: 'InventoryComponent',
  data() {
    return controller;
  },
  methods: {
    closeInventory() {
      controller.close();
    },
    inToolbar(item) {
      return this.toolbarItems.map(item => item.id).includes(item.id);
    }
  },
  ready() {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', 32);
    svg.setAttribute('height', 32);
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', 'M 12,12 L 22,22 M 22,12 12,22');
    path.setAttribute('stroke', '#fff');
    svg.appendChild(path);
    this.$els.close.appendChild(svg);
  },
  destroyed() {

  }
};
</script>

<style lang="scss">
  #inventory {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.9);

    #content {
      margin: 15px;
    }

    .closeButton {
      position: absolute;
      top: 3px;
      right: 1px;
      cursor: pointer;
    }

    .item {
      display: inline-block;
      margin: 10px;
      padding: 5px;
      width: 90px;
      height: 100px;
      text-align: center;
      cursor: pointer;
      outline: 1px dashed #ccc;

      .icon {
        width: 64px;
        height: 64px;
      }

      .nothing {
        width: 64px;
        height: 69px;
      }
    }
  }
</style>
<commit_msg>fixing minor html/css issue<commit_after><template>
  <div v-show="isOpen" id="inventory">
    <div id="content">
      <h1>Inventory</h1>

      <h2>Items</h2>
      <ul>
        <li v-for="item in allItemTypes" v-if="!inToolbar(item)" class="item" @click="addToToolbar('item', item.id)">
          <img class="icon" :src="'assets/img/icons/' + item.icon + '.png'">
          <div>{{ item.name }}</div>
        </li>
      </ul>

      <h2>Blocks</h2>
      <ul>
        <li v-for="block in allBlockTypes" v-if="!inToolbar(block)" class="item" @click="addToToolbar('block', block.id)">
          <img class="icon" :src="'assets/img/icons/' + block.icon + '.png'">
          <div>{{ block.name }}</div>
        </li>
      </ul>

      <h2>Toolbar</h2>
      <ul>
        <li v-for="item in toolbarItems" track-by="$index" class="item" @click="removeFromToolbar($index, item.type, item.id)">
          <div>
            <img v-if="item.icon" class="icon" :src="'assets/img/icons/' + item.icon + '.png'">
            <div v-else class="nothing"></div>

            <div v-if="item.name">{{ item.name }}</div>
            <div v-else>Nothing</div>
          </div>
          <span>({{ $index + 1 }})</span>
        </li>
      </ul>

      <div v-el:close class="closeButton" @click="closeInventory"></div>
    </div>
  </div>
</template>

<script>
import controller from './controller';

export default {
  name: 'InventoryComponent',
  data() {
    return controller;
  },
  methods: {
    closeInventory() {
      controller.close();
    },
    inToolbar(item) {
      return this.toolbarItems.map(item => item.id).includes(item.id);
    }
  },
  ready() {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', 32);
    svg.setAttribute('height', 32);
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', 'M 12,12 L 22,22 M 22,12 12,22');
    path.setAttribute('stroke', '#fff');
    svg.appendChild(path);
    this.$els.close.appendChild(svg);
  },
  destroyed() {

  }
};
</script>

<style lang="scss">
  #inventory {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.9);

    #content {
      margin: 15px;
    }

    .closeButton {
      position: absolute;
      top: 3px;
      right: 1px;
      cursor: pointer;
    }

    .item {
      display: inline-block;
      margin: 10px;
      padding: 5px;
      width: 90px;
      height: 100px;
      text-align: center;
      cursor: pointer;
      outline: 1px dashed #ccc;

      .icon {
        width: 64px;
        height: 64px;
      }

      .nothing {
        width: 64px;
        height: 69px;
      }
    }
  }
</style>

{'fraction_non_alphanumeric': 0.18952483801295897, 'fraction_numerical': 0.026277897768178547, 'mean_word_length': 2.225188624492165, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 103, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '5883481', 'n_tokens_mistral': 2077, 'n_tokens_neox': 1926, 'n_words': 395}