{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-leo/demos/leo/dice_roller_2.js"],"names":["Morph","DiceRoller","constructor","initialize","updateView","onMouseDownOverAmount","evt","currentAmount","preventDefault","stopPropagation","all","parentElement","querySelectorAll","forEach","e","style","border","amount","onMouseOverType","currentType","type","onMouseOverBonus","currentBonus","currentDigit","bonus","bonusDigit","pane","roller","appendChild","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","makeBonusStack","bonusStack","digit","create","get","table","addAmountInput","addAmountButton","additionalAmount","typeTable","addTypeInput","addTypeButton","additionalType","bonusStacks","lively","notify","stack","innerHTML","livelyExample"],"mappings":"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","file":"dice_roller_2.js","sourcesContent":["import Morph from 'src/components/widgets/lively-morph.js';\n\nexport default class DiceRoller extends Morph {\n  \n  constructor() {\n    super();\n  }\n  \n  async initialize() {\n    this.updateView();\n  }\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, currentDigit) {\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    this.bonusDigit = currentDigit + 1;\n    this.pane = <div></div>\n    var roller = this.updateView();\n    this.pane.appendChild(roller);\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    \n    const currentBonus = value\n    const currentDigit = this.bonusDigit;\n\n    value.addEventListener('mouseover', (evt) => this.onMouseOverBonus(evt, currentBonus, currentDigit));\n\n    var cell = \n        <tr>\n          <td>{value}</td>\n        </tr>\n    return cell;\n  }\n  \n  makeBonusStack() {\n    var bonusStack = <table style=\"width:50px\"></table>;\n    [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"].forEach(e => {\n      var cell = this.makeBonusCell(e);\n      bonusStack.digit = this.bonusDigit;\n      bonusStack.appendChild(cell);\n    })\n    return bonusStack;\n  }\n  \n  create() {\n    this.pane = <div></div>;\n    this.bonusDigit = 1;\n    var roller = this.updateView();\n    this.pane.appendChild(roller);\n    return this.pane;\n  }\n  \n  updateView(){\n    var pane = this.get(\"#pane\")\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 bonusStacks = <tr></tr>;\n    var bonus = <div style=\"padding:5px\">\n        <div style=\"border: 1px solid black; margin:auto\">\n          <table>{bonusStacks}</table>\n        </div>\n      </div>;\n    \n    lively.notify(\"DIGIT\", this.bonusDigit)\n    for (i = 0; i < this.bonusDigit; i++) {\n      var stack = this.makeBonusStack();\n      bonusStacks.appendChild(<td>{stack}</td>);\n    }\n    \n    // result\n    this.output = <input></input>\n    this.result = <input></input>\n    \n    pane.innerHTML = \"\"\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    pane.appendChild(roller)\n  }\n  \n  livelyExample() {\n    this.updateView()\n  }\n}"]}