const bodies = ["https://classiccachecloudcor.quattroplay.com/bodies/body_castleguard.png", "https://classiccachecloudcor.quattroplay.com/bodies/body_farmer.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody19.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody10.png", "https://classiccachecloudcor.quattroplay.com/bodies/body_shadow.png", "https://classiccachecloudcor.quattroplay.com/bodies/classiciphone_mattbody1.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody15.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody6.png", "https://classiccachecloudcor.quattroplay.com/bodies/classiciphone_mattbody3.png", "https://classiccachecloudcor.quattroplay.com/bodies/dc8bit_body0.png", "https://classiccachecloudcor.quattroplay.com/bodies/rainspearbody-fixed.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody20.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody1.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody2.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody3.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody4.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody5.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody6.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody7.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody8.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody9.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody10.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody11.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody12.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody13.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody14.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody15.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody16.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody17.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody18.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody19.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody20.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody21.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody22.png", "https://classiccachecloudcor.quattroplay.com/bodies/newbody23.png"];

let html_bodies = bodies.map((elem, index) => "\n\n<div style=\"border-radius: 12px; margin: 3px; width: 20%; display: flex; justify-content: center; index=\"" + index + "; cursor: pointer\" onclick=\"set_body_call(" + index + ")\">\n<div  style=\"overflow: hidden; width: 32px; height: 32px; \" class=\"waves-effect waves-light bt\" >\n<img  src=" + elem + " style=\"left: -64px; position: relative\">\n</div>\n</div>\n\n").join("<br>");
async function set_body_call(element) {
    M.toast({
      'html': "set body with id: <b>" + element + "</b>"
    });
    await post("http://localhost:3436/setbody" + element, [btoa('')]);
  }

document.getElementById("bodys").innerHTML = html_bodies;