{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-leo/demos/leo/dice_roller.js"],"names":["DiceRoller","onMouseDownOverAmount","evt","currentAmount","preventDefault","stopPropagation","all","parentElement","querySelectorAll","forEach","e","style","border","amount","onMouseOverType","currentType","type","onMouseOverBonus","currentBonus","bonus","rollDice","roll","regex","matchArray","matchAll","diceResults","map","array","sign","trim","undefined","faces","parseInt","count","result","i","Math","floor","random","modifier","join","reduce","acc","val","onMouseUp","output","value","makeAmountCell","del","cell","addEventListener","makeTypeCell","makeBonusCell","create","table","appendChild","addAmountInput","addAmountButton","additionalAmount","typeTable","addTypeInput","addTypeButton","additionalType","bonusTable","addBonusInput","addBonusButton","newBonus","additionalBonus","roller"],"mappings":"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","file":"dice_roller.js","sourcesContent":["export default class DiceRoller {\n  \n  onMouseDownOverAmount(evt, currentAmount) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    \n    // reset\n    var all = currentAmount.parentElement.parentElement.parentElement.querySelectorAll(\"div[name='value']\")\n    all.forEach(e => e.style.border = \"1px lightgray solid\")\n    // mark and save new\n    currentAmount.style.border = \"1px black solid\";\n    this.amount = currentAmount;\n  }\n  \n  onMouseOverType(evt, currentType) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    \n    if (this.amount) {\n      // reset\n      var all = currentType.parentElement.parentElement.parentElement.querySelectorAll(\"div[name='value']\")\n      all.forEach(e => e.style.border = \"1px lightgray solid\")\n      // mark and save new\n      currentType.style.border = \"1px black solid\";\n      this.type = currentType;\n    }\n  }\n  \n  onMouseOverBonus(evt, currentBonus) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    \n    if (this.amount) {\n      // reset\n      var all = currentBonus.parentElement.parentElement.parentElement.querySelectorAll(\"div[name='value']\")\n      all.forEach(e => e.style.border = \"1px lightgray solid\")\n      // mark and save new\n      currentBonus.style.border = \"1px black solid\";\n      this.bonus = currentBonus;\n    }\n  }\n  \n  rollDice(roll) {\n    const regex = /(^| *[+-] *)(?:(\\d*)d(\\d+)|(\\d+))/g;\n    const matchArray = [...roll.matchAll(regex)];\n    const diceResults = matchArray.map((array) => {\n      const sign = array[1].trim() === \"-\" ? -1 : 1;\n      if (array[2] !== undefined && array[3] !== undefined) {\n        // die\n        const faces = parseInt(array[3]);\n        const count = array[2] === \"\" ? 1 : parseInt(array[2]);\n        let result = 0;\n        for (let i = 1; i <= count; i++) {\n          result += Math.floor(Math.random() * faces) + 1;\n        }\n        result *= sign;\n        return result;\n      } else if (array[4]) {\n        // mod\n        const modifier = parseInt(array[4]) * sign;\n        return modifier;\n      }\n    })\n    return \"\" + diceResults.join(\"+\") + \"=\" + diceResults.reduce((acc, val) => acc + val);\n  }\n  \n  onMouseUp(evt) {\n    if (this.amount && this.type) {\n      var output = this.amount.value + this.type.value\n      if (this.bonus){\n        output = output + this.bonus.value\n      }\n      this.output.value = output;\n      this.result.value = this.rollDice(output);\n    }\n    [this.amount, this.type, this.bonus].forEach(e => {\n      if (e) e.style.border = \"1px lightgray solid\";\n    })\n    this.amount = undefined;\n    this.type = undefined;\n    this.bonus = undefined;\n  }\n  \n  makeAmountCell(i) {\n    var value = <div name=\"value\" style=\"width:max; text-align:center; background-color: lightgray; border: 1px lightgray solid\">{i}</div>\n    value.value = i;\n    var del = <div name=\"del\" style=\"width:max; text-align:right; cursor: pointer\">X</div>;\n\n    const currentAmount = value\n\n    var cell = \n        <tr style=\"cursor: grab\">\n          <td style=\"width: 33%\"></td>\n          <td style=\"width: 33%\">{value}</td>\n          <td style=\"width: 33%\">{del}</td>\n        </tr>\n    cell.addEventListener('mousedown', (evt) => this.onMouseDownOverAmount(evt, currentAmount));\n    return cell;\n  }\n  \n  makeTypeCell(e) {\n    var value = <div name=\"value\" style=\"width:max; text-align:center; background-color: lightgray; border: 1px lightgray solid; cursor: grab\">{e}</div>\n    value.value = e;\n    var del = <div name=\"del\" style=\"width:max; text-align:right; cursor: pointer\">X</div>;\n\n    const currentType = value\n\n    value.addEventListener('mouseover', (evt) => this.onMouseOverType(evt, currentType));\n\n    var cell = \n        <tr>\n          <td style=\"width: 33%\"></td>\n          <td style=\"width: 33%\">{value}</td>\n          <td style=\"width: 33%\">{del}</td>\n        </tr>\n    return cell;\n  }\n  \n  makeBonusCell(e) {\n    var value = <div name=\"value\" style=\"width:max; text-align:center; background-color: lightgray; border: 1px lightgray solid; cursor: grab\">{e}</div>\n    value.value = e;\n    var del = <div style=\"width:max; text-align:right; cursor: pointer\">X</div>;\n\n    const currentBonus = value\n\n    value.addEventListener('mouseover', (evt) => this.onMouseOverBonus(evt, currentBonus));\n\n    var cell = \n        <tr>\n          <td style=\"width: 33%\"></td>\n          <td style=\"width: 33%\">{value}</td>\n          <td style=\"width: 33%\">{del}</td>\n        </tr>\n    return cell;\n  }\n  \n  create() {\n\n    // amount\n    var table = <table style=\"width:100%\"></table>\n    var amount = <div style=\"padding:5px\">\n        <div style=\"border: 1px solid black; margin:auto\">\n          {table}\n        </div>\n      </div>\n\n    for (var i = 1; i <= 6; i++) {\n      var cell = this.makeAmountCell(i);\n      table.appendChild(cell)\n    }\n    // to add amounts\n    var addAmountInput = <input type=\"number\" style=\"width: 70%; margin-top: 5px\"></input>\n    var addAmountButton = \n      <button style=\"float: right\" click={() => {\n          var cell = this.makeAmountCell(addAmountInput.value);\n          table.appendChild(cell);\n        }}>add</button>\n    var additionalAmount = \n        <div>\n          {addAmountInput}\n          {addAmountButton}\n        </div>\n    amount.appendChild(additionalAmount)\n\n    // type\n    var typeTable = <table style=\"width:100%\"></table>;\n    var type = <div style=\"padding:5px\">\n        <div style=\"border: 1px solid black; margin:auto\">\n          {typeTable}\n        </div>\n      </div>;\n    \n    [\"d4\", \"d6\", \"d8\", \"d10\", \"d12\", \"d20\"].forEach(e => {\n      var cell = this.makeTypeCell(e);\n      typeTable.appendChild(cell)\n    })\n    // to add dice types\n    var addTypeInput = <input type=\"number\" min=\"0\" style=\"width: 70%; margin-top: 5px\"></input>\n    var addTypeButton = \n      <button style=\"float: right\" click={() => {\n          var cell = this.makeTypeCell(\"d\" + addTypeInput.value);\n          typeTable.appendChild(cell);\n        }}>add</button>\n    var additionalType = \n        <div>\n          {addTypeInput}\n          {addTypeButton}\n        </div>\n    type.appendChild(additionalType)\n    \n    \n    // bonus\n    var bonusTable = <table style=\"width:100%\"></table>;\n    var bonus = <div style=\"padding:5px\">\n        <div style=\"border: 1px solid black; margin:auto\">\n          {bonusTable}\n        </div>\n      </div>;\n    \n    [\"-1\", \"+0\", \"+1\", \"+2\", \"+3\", \"+4\"].forEach(e => {\n      var cell = this.makeBonusCell(e);\n      bonusTable.appendChild(cell)\n    })\n    // to add bonuses\n    var addBonusInput = <input type=\"number\" style=\"width: 70%; margin-top: 5px\"></input>\n    var addBonusButton = \n      <button style=\"float: right\" click={() => {\n          var newBonus = addBonusInput.value;\n          if (newBonus >= 0) {\n            newBonus = \"+\" + newBonus;\n          } else {\n            newBonus = \"\" + newBonus;\n          }\n          var cell = this.makeBonusCell(newBonus);\n          bonusTable.appendChild(cell);\n        }}>add</button>\n    var additionalBonus = \n        <div>\n          {addBonusInput}\n          {addBonusButton}\n        </div>\n    bonus.appendChild(additionalBonus)\n    \n    // result\n    this.output = <input></input>\n    this.result = <input></input>\n    \n    var roller = \n        <div>\n          <table style=\"width:100%, height:100%; border: 1px lightgray solid\">\n            <tr>\n              <th style=\"width:33%\">Amount</th>\n              <th style=\"width:33%\">Type</th>\n              <th style=\"width:33%\">Bonus</th>\n            </tr>\n            <tr>\n              <td>{amount}</td>\n              <td>{type}</td>\n              <td>{bonus}</td>\n            </tr>\n          </table>\n          <span>Roll: </span> {this.output} <span>Result: </span> {this.result}\n        </div>\n    roller.addEventListener('mouseleave', (evt) => this.onMouseUp(evt));\n    roller.addEventListener('mouseup', (evt) => this.onMouseUp(evt));\n    \n    return roller\n  }\n}"]}