JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div id="app" class="container-fluid">
  <div class="row row-pad row-top">
    <div class="col">
      <input type="text" class="form-control" v-model="passenger" placeholder="mob identifier" @keypress.enter="addStack" ref="passengerInput" />
    </div>
    <div class="col">
      <input type="text" class="form-control" v-model="helmet" placeholder="optional mob helmet" @keypress.enter="addStack" />
    </div>
    <div class="col">
      <input type="text" class="form-control" v-model="player" placeholder="optional player name" title="if player_head helmet" @keypress.enter="addStack" />
    </div>
    <div class="col-auto">
      <button type="button" @click="addStack" class="btn btn-primary">
        Stack
      </button>
    </div>
    <div class="col">
      {{stacks.length}} stack height
    </div>
  </div>
  <div class="row row-pad">
    <div class="col">
      <div class="form-check">
        <input type="checkbox" id="maintain-inputs" class="form-check-input" v-model="dontClearInputs" />
        <label for="maintain-inputs" class="form-check-label">Maintain inputs on stack add</label>
      </div>
    </div>
    <div class="col">
      <button @click="copy" class="btn btn-primary">
        Copy command to clipboard
      </button>
    </div>
    <div class="col">
      {{feedback}}
    </div>
    <div class="col"></div>
  </div>
  <div class="row row-pad">
    <div class="col-6">
      <div class="row row-pad">
        <div class="col">
          <textarea id="output" class="form-control" v-model="command" readonly></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button @click="clearCmd" class="btn btn-danger">
            Clear command
          </button>
        </div>
      </div>
    </div>
    <div class="col-6">
      <table class="table table-sm">
        <tr v-for="(stack, i) in stacks">
        ...

CSS

textarea {
  height: 200px;
}

.row-top {
  margin-top: 5px;
}

.row-pad {
  margin-bottom: 5px;
}

JavaScript

const app = new Vue({
  el: "#app",
  data: {
    passenger: "",
    helmet: "",
    player: "",
    dontClearInputs: false,
    feedback: "",
    stacks: []
  },
  methods: {
    addStack() {
      if (this.passenger !== "") {
        this.stacks.push({
          passenger: this.passenger,
          helmet: this.helmet,
          player: this.player
        });
        if (!this.dontClearInputs) {
          this.passenger = "";
          this.helmet = "";
          this.player = "";
        	this.$refs.passengerInput.focus();
				}
      }
    },
    remStack(idx) {
    	this.stacks.splice(idx, 1);
    },
    copy() {
      let copyText = document.querySelector("#output");
      copyText.select();
      document.execCommand("copy");
      this.feedback = 'Copied!';
      window.setTimeout(() => {
        this.feedback = '';
      }, 2500);
    },
    clearCmd() {
      this.stacks = [];
    }
  },
  computed: {
    obj() {
      let obj = {},
        tempObj = obj,
        i = 0;
      while (i < this.stacks.length) {
        let {
          helmet,
          passenger,
          player
        } = this.stacks[i], head = {
          Count: 1
        };
        if (helmet !== '') {
          head.id = helmet;
        }
        if (player !== '') {
          head.tag = {
            SkullOwner: player
          };
        }
        if (i === 0 && typeof head.id !== 'undefined') {
          tempObj.ArmorItems = [{}, {}, {}, head];
        }
        if (i > 0) {
          let Passengers = [{
            id: passenger,
            Passengers: []
          }],
          	 ArmorItems = [];
          if (helmet !== '' && typeof head.id !== 'undefined') {
            ArmorItems = [{}, {}, {}, head];
            Passengers[0].ArmorItems = ArmorItems;
          }
          tempObj.Passengers = Passengers;
          tempObj = tempObj.Passengers[0];
        }
        i++;
      }
      return obj;
    },
    command() {
      return `/summon ${this.stacks.length > 0 ?...