23  Dungeon Maker

How to use

• Input the size of the square grid to create the drawing canvas (note this erases anything you may have already drawn)
• Click or drag to create rooms and hallways. The click toggles between white and blue squares.
• Click on a square and then type a character on your keyboard to annotate a square with a letter or number (multiple characters are possible).
• Right click on a square to erase existing text.

viewof gridsize = Inputs.text({placeholder:"Grid Size"})

viewof grid1 = Inputs.button("Create Grid", {reduce: () =>  draw(Number(gridsize))})

size = 30

viewof form = Inputs.form(
  {
    button1: "  ",
    button2: Inputs.button("Delete Grid", {reduce: () => resetGrid()})
  },
  {
    template: (formParts) => htl.html`
     <div>
       <h3></h3>
       <div style="
         width: 400px;
         display: flex;
       ">
         ${Object.values(formParts)}
       </div>
     </div>`
  }
)

Inputs.button("Export to PNG", {reduce: () => exportToImage(size, "png", Number(gridsize), grid1.col, grid1.chars)})