char_sheet-notes.qmd

```{=html}
<h2>Hirelings</h2>

<div id="hirelingsContainer" class="mb-3">
    <div class="input-group mb-2 rounded">
      <input autocomplete="off" type="text" class="form-control rounded hirelings" placeholder="Hireling 1" id="hireling1">
    </div>
</div>

<button id="addHirelingButton" class="btn btn-primary rounded">Add Hireling</button>

<h2>Background</h2>

<textarea class="form-control auto-textarea me-5" id="background" rows="4"></textarea>

<h2>Misc. Notes</h2>

<textarea class="form-control auto-textarea me-5" id="miscNotes" rows="4" ></textarea>


<script>
    // Auto-resize textarea
    function autoResizeTextarea(id) {
      var textarea = document.getElementById(id);
      textarea.style.height = "auto";
      textarea.style.height = textarea.scrollHeight + "px";
    }

    // Attach input event listener to the textarea
    var textarea1 = document.getElementById("background");
    textarea1.addEventListener("input", () => autoResizeTextarea("background"));
    var textarea2 = document.getElementById("miscNotes");
    textarea2.addEventListener("input", () => autoResizeTextarea("miscNotes"));
</script>

<style>
    .auto-textarea {
      overflow: hidden;
      resize:none;
      height: auto;
      width:80%;
      font-size:1.1rem;
    }
</style>
```


```{ojs}

function addHireling() {
      var inputContainer = d3.select('#hirelingsContainer');
      var inputCount = inputContainer.selectAll('.input-group').size();

      var inputGroup = inputContainer
        .append('div')
        .attr('class', 'input-group mb-2');

      inputGroup
        .append('input')
        .attr('autocomplete',"off")
        .attr('type', 'text')
        .attr('id', 'hireling' + (inputCount + 1))
        .attr('class', 'form-control rounded-start hirelings')
        .attr('placeholder', 'Hireling ' + (inputCount + 1));

      inputGroup
        .append('button')
        .attr('class', 'btn btn-danger delete-button rounded-end')
        .attr('type', 'button')
        .attr('id', 'hirelingDel' + (inputCount + 1))
        .text('-')
        .on('click', function() {
          inputGroup.remove();
        });
    }
hireling = {
      var addInputButton = d3.select('#addHirelingButton');
      addInputButton.on('click', () => addHireling() );
}
```