1 files changed, 64 insertions, 0 deletions
diff --git a/die.mjs b/die.mjs
new file mode 100644
index 0000000..6b3d4fc
--- /dev/null
+++ b/die.mjs
@@ -0,0 +1,64 @@
+class Die {
+    constructor(elt) {
+	this.elt = elt
+
+        this.value = '--'
+        this._boundRollHandler = this.rollHandler.bind(this)
+        this.disable()
+    }
+
+    get valueElt() {
+        if (this._valueElt === undefined) {
+            this._valueElt = this.elt.querySelector('.value')
+        }
+        return this._valueElt
+    }
+
+    get value() {
+        return this.valueElt.innerText
+    }
+
+    set value(val) {
+        this.valueElt.innerText = val
+    }
+
+    get button() {
+        if (this._button === undefined) {
+            this._button = this.elt.querySelector('button')
+        }
+        return this._button
+    }
+
+    enable() {
+        this.elt.classList.add('enabled')
+	this.elt.classList.remove('disabled')
+	this.button.disabled = false
+	this.button.addEventListener('click', this._boundRollHandler)
+    }
+
+    disable() {
+	this.elt.classList.add('disabled')
+	this.elt.classList.remove('enabled')
+	this.button.disabled = true
+	this.button.removeEventListener('click', this._boundRollHandler)
+    }
+
+    get onChanged() {
+	if (this._onChanged !== undefined) {
+	    return this._onChanged
+	}
+	return () => {}
+    }
+
+    set onChanged(fn) {
+	this._onChanged = fn
+    }
+
+    rollHandler() {
+	this.value = Math.floor(Math.random() * Die.size) + 1
+	this.onChanged(this.value)
+    }
+}
+Die.size = 20
+
+export default Die