monstersTab.qmd

---
format: 
  html:
    includes: include-after-body
---

```{=html}

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script> -->


```
# Monsters Index

Select search field(s). Hold `shift` or drag mouse to select multiple. 

Monster name is always part of the search field. 

```{ojs}
data = {
  const d = await FileAttachment("monsters.json").json()
  return d
}
```

```{ojs}
cols = Object.keys(data[0])
cols2 = cols.slice(1)
```

```{ojs}
viewof theseCols =  Inputs.select(cols2, {multiple:true, value:cols2})
```

<br>

```{ojs}
viewof search  = {
  let n = Inputs.search(data,{
  columns:[cols[0]].concat(theseCols)
});
return n
}
```

<br>

<!-- ::: {.column-screen}
```{ojs}
viewof theseStats = Inputs.checkbox(["Armor Class", "Hit Dice", "Attacks", "Damage","Movement","No. Appearing","Save","Morale","Treasure Type","XP"])
```
::: -->

::: {.column-screen .table-responsive}
```{ojs}
// import { jQuery as $ } from "@ddspog/useful-libs"

Inputs.table(search, {width:"auto",
format:{
    Name: id => htl.html`<a href=#\ onclick="test('${id}')">${id}</a>`
}})

```

::: 


```{=html}
<script>

function my_modal(name){
    $(document).ready(function() {
        $.get("monstersAll.html", function(data) {
            var content = $(data).find("[data-tag='" + name + "']").html();
            $("#my").html(content);
        });
    });}
</script>

<div id="my"> </div>

```


```{=html}

<script>

function getMonsterContent(tag) {
  var monsters = document.querySelectorAll('.monster[data-tag*="' + tag + '"], .monster[data-tag2*="' + tag + '"]');
  var content = "";
  for (var i = 0; i < monsters.length; i++) {
    content += monsters[i].innerHTML;
  }
  return content;
}

function test(name){
$(document).ready(function() {
    $.get('monstersAll.html', function(data) {
      var content = $(data).find("[data-tag='" + name + "'], [data-tag2='" + name + "'], [data-tag3='" + name + "']").html();// $(data).find("[data-tag='" + name + "']", "[data-tag2='" + name + "']").html();
      $('#myModal .modal-body').html(content);
      $('#myModal').modal('show');
    });
    }
);}
</script>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="modal-text">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


```