From 6f3088d9534fdd50924e4c027b2634cb5cdf9d41 Mon Sep 17 00:00:00 2001
From: Alessio <a.chiffi@ry.com>
Date: Mon, 6 May 2024 11:34:46 +0100
Subject: [PATCH 1/2] Update options.js to include basic-circle - Update style
 immediately without Try it button

---
 src/index.html    |  1 -
 src/js/index.js   |  1 +
 src/js/options.js | 24 ++++++++++++------------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/index.html b/src/index.html
index b107130..c4cacf1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,7 +55,6 @@
             <select class="form-control form-control-sm" v-model="selectedEffect">
               <option v-for="effect in effectList" :value="effect">{{effect}}</option>
             </select>
-            <button class="btn btn-mm-dark magic-hover magic-hover__square" @click="changeEffect()">Try it</button>
           </div>
 
         </div>
diff --git a/src/js/index.js b/src/js/index.js
index 016dcd8..598bab1 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -68,6 +68,7 @@ const app = createApp({
   watch: {
     selectedEffect() {
       this.setSelectedEffect()
+      this.changeEffect()
     },
   },
 })
diff --git a/src/js/options.js b/src/js/options.js
index 2fdd6d7..78b65fc 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -18,7 +18,7 @@ const allowedTypes = [
         type: 'enum',
         required: false,
         default: 'circle',
-        allowed: ['circle', 'square', 'diamond', 'disable']
+        allowed: ['circle', 'square', 'diamond', 'disable', 'circle-basic']
     },
     {
         name: 'hoverEffect',
@@ -48,10 +48,10 @@ export default class Options {
         this.defaultOptions = this.generateDefault()
 
         // push user's options to default options one-by-one:
-        for(let key in options) {            
+        for(let key in options) {
             if(this.isValid(key, options[key])) {
                 this.defaultOptions[key] = options[key]
-            }  
+            }
         }
 
         return this.defaultOptions
@@ -66,7 +66,7 @@ export default class Options {
 
         let output = {}
         for(let key of acceptedKey) {
-            output[key] = this.getOptionByKey(key)['default']            
+            output[key] = this.getOptionByKey(key)['default']
         }
 
         return output
@@ -74,11 +74,11 @@ export default class Options {
 
     /**
      * This function is to check if an option is valid or not
-     * @param {String} key 
-     * @param {Any}} value 
+     * @param {String} key
+     * @param {Any}} value
      * @return {Boolean}
      */
-    isValid(key, value) {             
+    isValid(key, value) {
         // check if key is acceptable:
         const acceptedKey = pluck('name', allowedTypes)
 
@@ -86,8 +86,8 @@ export default class Options {
             // throw new Error(`${key} is not a valid option`)
             console.error(`${key} is not a valid option`)
             return false
-        }        
-        
+        }
+
         // check if the type of value is valid:
         const allowedOption = this.getOptionByKey(key)
         let isTypeValid = false
@@ -106,11 +106,11 @@ export default class Options {
                 isTypeValid = false
                 break;
         }
-        
-        if(!isTypeValid)  {            
+
+        if(!isTypeValid)  {
             console.error(`${value} is not a valid value for ${key}`)
         }
-        
+
         return isTypeValid
     }
 

From 574ed4200297963d6c3237428624224359d1760a Mon Sep 17 00:00:00 2001
From: Alessio <a.chiffi@ry.com>
Date: Tue, 7 May 2024 08:28:17 +0100
Subject: [PATCH 2/2] remove legacy circle-basic

---
 README.md         | 10 +++++-----
 src/js/index.js   |  6 +++---
 src/js/options.js |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 5205302..0b1ee30 100755
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ After that, import to your project by: `import { magicMouse } from 'magicmouse.j
 
 ## CDN
 If you want to include Magicmouse.js directly to your HTML, you can use this CDN. Include the js file to the bottom of your HTML file (right before the end of body tag):
-````html  
+````html
   <script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1684982764/magicmouse-2.0.0.cdn.min.js"></script>
 ````
 ## Initialize
@@ -27,7 +27,7 @@ If you want to include Magicmouse.js directly to your HTML, you can use this CDN
 ````html
 <script type="text/javascript">
     options = {
-	"cursorOuter": "circle-basic",
+	"cursorOuter": "circle",
 	"hoverEffect": "circle-move",
 	"hoverItemMove": false,
 	"defaultCursor": false,
@@ -52,13 +52,13 @@ Sometime you just don't want to use Magicmouse on some specific elements? Then y
 # Configuration list (updating):
 | Variable name | Value |
 |--|--|
-| cursorOuter | Default: "circle-basic", other options : "disable" |
+| cursorOuter | Default: "circle", other options : "disable" |
 | hoverEffect | default: "circle-move", other options : "pointer-blur", "pointer-overlay" |
 
 # License ❤️
-This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I require you to do a good thing for the poor people in your place. You can do whatever you think is "a good thing", like buy them some food, give them some money, etc. 
+This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I require you to do a good thing for the poor people in your place. You can do whatever you think is "a good thing", like buy them some food, give them some money, etc.
 I'm not requiring you to take a photo or do anything to prove it, just do it and you will feel great about yourself :)
-Let's make the world better place. 
+Let's make the world better place.
 
 # What's next?
 You should have the nice effect for your mouse now, of course you can override the CSS code to make it more elegant and suitable with your website (change color, size,..).
diff --git a/src/js/index.js b/src/js/index.js
index 598bab1..b1fb17e 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -25,7 +25,7 @@ const app = createApp({
       switch (this.selectedEffect) {
         case "example #1":
           this.options.hoverEffect = "circle-move"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           break
         case "example #2":
           this.options.hoverEffect = "pointer-overlay"
@@ -39,13 +39,13 @@ const app = createApp({
           this.options.outerWidth = 41
           this.options.outerHeight = 41
           this.options.hoverEffect = "pointer-blur"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           break
         case "example #5":
           this.options.outerWidth = 41
           this.options.outerHeight = 41
           this.options.hoverEffect = "circle-move"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           this.options.defaultCursor = true
           break
       }
diff --git a/src/js/options.js b/src/js/options.js
index 78b65fc..f99ba77 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -18,7 +18,7 @@ const allowedTypes = [
         type: 'enum',
         required: false,
         default: 'circle',
-        allowed: ['circle', 'square', 'diamond', 'disable', 'circle-basic']
+        allowed: ['circle', 'square', 'diamond', 'disable']
     },
     {
         name: 'hoverEffect',