style unhoverable button away from rest of group, add special difficulty level button styling, implement custom options for difficulty-based method execution, problems.getProblem mixin

src/App.vue

@@ -36,11 +36,12 @@
 </style>
 
 <script>
-import arithmetic from './arithmetic.js';
+import problems from "@/problems";
 import SettingsMenu from "@/components/SettingsMenu";
 
 export default {
     name: 'App',
+    mixins: [problems],
     components: {SettingsMenu},
     data() {
         return {
@@ -78,7 +79,7 @@ export default {
     },
     methods: {
         nextQuestion(fail = false) {
-            let problem = arithmetic.methods.getProblem();
+            let problem = this.getProblem();
             if (this.currentQuestion == null)
                 this.currentQuestion = problem;
             else {

src/arithmetic.js

@@ -3,17 +3,17 @@ import utils from '@/utils';
 export default {
     methods: {
         // Generate a addition problem
-        addition(mult = 1) {
+        addition(options) {
-            let a = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            let a = utils.methods.getRandomInt(options.low, options.high);
-            let b = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            let b = utils.methods.getRandomInt(options.low, options.high);
             return {
                 text: `${a} + ${b}`,
                 answer: a + b
             }
         },
-        subtraction(mult = 1) {
+        subtraction(options) {
-            let a = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            let a = utils.methods.getRandomInt(options.low, options.high);
-            let b = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            let b = utils.methods.getRandomInt(options.low, options.high);
             if (Math.random() > 0.5)
                 return {
                     text: `${a} - ${b}`,
@@ -49,11 +49,6 @@ export default {
                 text: `\\sqrt{${a * a}}`,
                 answer: a
             }
-        },
-        getProblem: function () {
-            let possible = [this.addition, this.subtraction, this.multiplication, this.division, this.square_root];
-            let index = utils.methods.getRandomInt(0, possible.length);
-            return possible[index]();
         }
     },
     data() {
@@ -63,30 +58,37 @@ export default {
                 {
                     name: 'Addition',
                     id: 'addition',
+                    description: 'Find the sum of two integers',
                     difficulties: [
                         {
                             id: 'easy',
                             name: 'Easy',
                             options: {
-                                multiplier: 1
+                                low: 7,
-                            }
+                                high: 50
+                            },
+                            style: 'is-success'
+                        },
+                        {
+                            id: 'medium',
+                            name: 'Medium',
+                            options: {
+                                low: 9,
+                                high: 100
+                            },
+                            style: 'is-warning'
                         },
                         {
                             id: 'hard',
                             name: 'Hard',
                             options: {
-                                multiplier: 2.5
+                                low: 15,
-                            }
+                                high: 150
                             },
-                        {
+                            style: 'is-danger'
-                            id: 'very_hard',
-                            name: 'Very Hard',
-                            options: {
-                                multiplier: 4
-                            }
                         }
                     ],
-                    method: self.addition,
+                    method: self.methods.addition,
                     enabled: true,
                     current: 0
                 }

src/components/SettingsMenu.vue

@@ -7,7 +7,7 @@
         <section class="modal-card-body">
             <b-field addons v-for="(problemType, problemIndex) in problems" :key="problemType.id">
                 <p class="control">
-                    <b-button class="button-unhoverable" :hovered="false" style="cursor: default;">
+                    <b-button class="button-unhoverable darker" :hovered="false" style="cursor: default;">
                         {{ problemType.name }}
                     </b-button>
                 </p>
@@ -17,7 +17,7 @@
                     </b-button>
                 </p>
                 <p class="control" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id">
-                    <b-button :type="problemType.enabled && problemType.current === difficultyIndex ? 'is-info' : ''"
+                    <b-button :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
                               :selected="problemType.enabled && problemType.current === difficultyIndex"
                                 @click.native="selectProblemDifficulty(problemIndex, difficultyIndex)">
                         {{ difficulty.name }}

src/problems.js

@@ -1,7 +1,16 @@
 import arithmetic from "@/arithmetic";
+import utils from "@/utils";
 
 export default {
-    data: () => {
+    methods: {
-        return arithmetic.data().problems
+        getProblem() {
+            let problem = this.problems[utils.methods.getRandomInt(0, this.problems.length)];
+            return problem.method(problem.difficulties[problem.current].options);
+        }
+    },
+    data() {
+        return {
+            problems: arithmetic.data().problems
+        }
     }
 }

src/scss/buefy.scss

@@ -21,15 +21,28 @@ $grey-lightest: hsl(0, 0%, 22%);
 
 $button-border-width: 0;
 $button-hover-color: $grey-darker;
+$button-background-color: lighten($scheme-main, 0.5%);
 
 // Import Bulma and Buefy styles
 @import "~bulma";
 @import "~buefy/src/scss/buefy";
 
 // Special button class that disables hover/active/focus effects
-.button.button-unhoverable {
+.button {
-  &:hover, &:active, &:focus, .is-hovered, .is-active, .is-focused {
+  // Text/border changes
-    border-color: $button-border-color;
+  &.button-unhoverable {
+    &:hover, &:active, &:focus, &.is-hovered, &.is-active, &.is-focused {
+      border-color: $button-border-color !important;
       color: $text-strong !important;
     }
+  }
+  // Focused button link box shadow
+  &:not(:active) {
+    &:focus, &.is-focused {
+      box-shadow: none;
+    }
+  }
+  &.darker {
+    background-color: darken($scheme-main, 3%);
+  }
 }