Add 'mana' component, Updated README

README.md

@@ -1,3 +1,9 @@
 # kaplay-comps
 
-A Collection of Kaplay.js components
+A Collection of Kaplay.js components
+
+> Making a custom component documentation: [https://kaplayjs.com/guides/custom_components/](https://kaplayjs.com/guides/custom_components/)
+
+## Components Listing
+
+- Mana, Similar to the built-in [health](https://kaplayjs.com/doc/ctx/health/) component

mana.js

@@ -0,0 +1,94 @@
+/*
+Mana
+A Magic Component
+Version: 1.0
+
+Docs:
+- mana(maximum=0)
+  - add()
+  - mp() number
+  - setMP(mp=0)
+  - maxMP() number
+  - setMaxMP(mp=0)
+  - gain(mp=1)
+  - cast(mp=1)
+  - canCast(mp=1) bool
+  - tryCast(mp=1) bool
+  - onGain(function)
+  - onCast(function)
+
+> mana renders information in debug.inspect mode
+*/
+
+function mana(max_mana=0) {
+    let val = 0
+    let max_val = max_mana
+    return {
+        id: "mana",
+        add() {
+            val = max_val;
+        },
+        mp() {
+            return val;
+        },
+        setMP(mp=0) {
+            val = mp;
+            if (val > max_val) {
+                val = max_val;
+            }
+            if (val < 0) {
+                val = 0;
+            }
+        },
+        maxMP() {
+            return max_val;
+        },
+        setMaxMP(mp=0) {
+            max_val = mp;
+            if (max_val < 0) {
+                max_val = 0;
+            }
+            if (val > max_val) {
+                val = max_val;
+            }
+        },
+        gain(mp=1) {
+            if (this.mp() >= this.maxMP()) {
+                return;
+            } else if (this.mp() + mp <= this.maxMP()) {
+                this.setMP(this.mp()+mp);
+                this.trigger("gain", mp);
+            } else {
+                let diff = this.maxMP() - (this.mp()+mp);
+                this.setMP(this.mp()+mp);
+                this.trigger("gain", diff);
+            }
+        },
+        cast(mp=1) {
+            if (this.mp() - mp >= 0) {
+                this.setMP(this.mp()-mp);
+                this.trigger("cast", mp);
+            }
+        },
+        canCast(mp=1) {
+            return (this.mp() >= mp);
+        },
+        tryCast(mp=1) {
+            if (this.canCast(mp)) {
+                this.cast(mp);
+                return true;
+            } else {
+                return false;
+            }
+        },
+        onGain(func) {
+            this.on("gain", func);
+        },
+        onCast(func) {
+            this.on("cast", func);
+        },
+        inspect() {
+            return "MP: " + this.mp() + "/" + this.maxMP();
+        }
+    }
+}