JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id="app">
<textarea v-model="input" rows="20" cols="50" :placeholder="inputPlaceholder"></textarea>
<textarea v-model="output" rows="20" cols="50" :placeholder="outputPlaceholder" readonly></textarea>
</div>

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: "#app",
    data: {
      input: "",
      inputPlaceholder: `Tab-separated items, one line per item\nexample:\nCobblestone	1s + 3\nDirt	32`,
      outputPlaceholder: `Tab-separated items, one line per item\nexample:\nCobblestone	67\nDirt	32`
    },
    methods: {
      tabulate() {
        let data = {};
        if (this.input !== '') {
          this.input.split(/\r?\n/).forEach(line => {
            let [name, amount] = line.split("\t");
            if (typeof data[name] === 'undefined') {
              data[name] = 0;
            }
            if (/(\d+)s\s*(\+?)\s*(\d*)/i.test(amount)) {
              let match = amount.match(/(\d+)s\s*(\+?)\s*(\d*)/i);
              if (match !== null) {
                let [m, stacks, _, extra] = match;
                amount = 0;
                stacks = parseInt(stacks, 10);
                extra = extra !== '' ? parseInt(extra, 10) : 0;
                amount = stacks * 64;
                if (_ !== '') {
                  amount += extra;
                }
              }
            } else {
              amount = parseInt(amount, 10);
            }
            data[name] += amount;
          });
        }
        return data;
      }
    },
    computed: {
      output() {
        let data = this.tabulate(),
          dataKeys = Object.keys(data).sort();
        console.log(dataKeys);
        return dataKeys.reduce((acc, key) => {
          acc += `${key}\t${data[key]}\n`;
          return acc;
        }, "");
      }
    }
  });
});