const addUIElement = (gridInfo) => {
const section = document.createElement('fieldset');
section.style.cssText = `display:inline-grid;font:32px system-ui;margin:2px;${gridInfo}`;
const scoreElement = addUIElement('grid-column:1/4');
const diceElement = addUIElement('grid:auto-flow dense 48px/48px 48px 48px 48px');
const critterElement = addUIElement('grid:auto-flow dense 32px/48px 48px 48px 48px');
const shopElement = addUIElement('grid:auto-flow dense 64px/148px');
const diceFaces = '⚀⚁⚂⚃⚄⚅';
const addNewShopItem = (cost, buyCallback, icon) => {
const item = document.createElement('button');
const costElement = document.createElement('div');
item.style.cssText = 'font:32px system-ui';
costElement.style.cssText = 'font:12px system-ui';
costElement.innerHTML = item.cost = cost;
item.append(icon, costElement);
scoreElement.innerHTML = score -= item.cost;
costElement.innerHTML = item.cost = item.cost * 1.2 | 0;
[...shopElement.children].filter(item => item.disabled = score < item.cost);
shopElement.append(item);
const newDice = document.createElement('button');
newDice.style.cssText = `display:flex;font:32px system-ui;padding:2px 8px;${separator && 'grid-column:span 2'}`;
newDice.overlay = document.createElement('div');
newDice.inner1 = document.createElement('div');
newDice.inner2 = document.createElement('div');
newDice.overlay.style.cssText = `font:32px system-ui;margin:0-32px;color:red`;
newDice.inner1.innerHTML = newDice.inner2.innerHTML = diceFaces[5];
newDice.inner1.style.cssText = newDice.inner2.style.cssText = `display:inline-grid;transition:all.5s`;
newDice.append(newDice.inner1);
separator && newDice.append(separator, newDice.inner2);
newDice.append(newDice.overlay);
diceElement.append(newDice);
newDice.onclick = () => {
newDice.result1 = Math.random() * 6 | 0;
newDice.inner1.innerHTML = diceFaces[newDice.result1];
newDice.inner1.style.rotate = `${Math.random()}turn`;
newDice.result2 = Math.random() * 6 | 0;
newDice.inner2.innerHTML = diceFaces[newDice.result2];
newDice.inner2.style.rotate = `${Math.random()}turn`;
scoreElement.innerHTML = score += diceCallback(newDice.result1 + 1, newDice.result2 + 1);
newDice.overlay.innerHTML = '';
[...shopElement.children].filter(item => item.disabled = score < item.cost);
newDice.disabled = false;
separator ? diceFaces[5] + separator + diceFaces[5] : diceFaces[5]
b.style.cssText = `display:inline-grid`;
initDiceType(6, (num1, num2) => num1)();
addNewShopItem(30, () => {
const newRat = document.createElement('div');
const nudgeDice = () => {
const activeDice = [...diceElement.children].filter(d => !d.disabled);
const autoRollDice = activeDice[activeDice.length * Math.random() | 0];
autoRollDice.overlay.innerHTML = '🐀';
newRat.style.opacity = .5;
newRat.style.opacity = 1;
setTimeout(nudgeDice, 8000);
critterElement.append(newRat);
setTimeout(nudgeDice, 1000);
initDiceType(60, (num1, num2) => num1 + num2, '+');
initDiceType(600, (num1, num2) => num1 * num2, '*');
initDiceType(6000, (num1, num2) => num1 ** num2, '^');
scoreElement.innerHTML = score;
[...shopElement.children].filter(item => item.disabled = score < item.cost);