improve settings menu programatic organization, better button styling

src/arithmetic.js

@@ -1,4 +1,4 @@
-import utils from './utils.js';
+import utils from '@/utils';
 
 export default {
     methods: {
@@ -14,18 +14,17 @@ export default {
         subtraction(mult = 1) {
             let a = utils.methods.getRandomInt(5 * mult, 100 * mult);
             let b = utils.methods.getRandomInt(5 * mult, 100 * mult);
-            if (Math.random() > 0.5) {
+            if (Math.random() > 0.5)
                 return {
                     text: `${a} - ${b}`,
                     answer: a - b,
                 }
-            }
-            else {
+            else
                 return {
                     text: `-${a} + ${b}`,
                     answer: -a + b
                 }
-            }
+
         },
         multiplication(mult = 1) {
             let a = utils.methods.getRandomInt(3 * mult, 30 * mult);
@@ -56,5 +55,42 @@ export default {
             let index = utils.methods.getRandomInt(0, possible.length);
             return possible[index]();
         }
+    },
+    data() {
+        let self = this;
+        return {
+            problems: [
+                {
+                    name: 'Addition',
+                    id: 'addition',
+                    difficulties: [
+                        {
+                            id: 'easy',
+                            name: 'Easy',
+                            options: {
+                                multiplier: 1
+                            }
+                        },
+                        {
+                            id: 'hard',
+                            name: 'Hard',
+                            options: {
+                                multiplier: 2.5
+                            }
+                        },
+                        {
+                            id: 'very_hard',
+                            name: 'Very Hard',
+                            options: {
+                                multiplier: 4
+                            }
+                        }
+                    ],
+                    method: self.addition,
+                    enabled: true,
+                    current: 0
+                }
+            ]
+        }
     }
 }

src/components/SettingsMenu.vue

@@ -5,6 +5,25 @@
             <b-icon @click.native="$parent.close()" class="is-clickable" pack="fas" icon="times"></b-icon>
         </header>
         <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;">
+                        {{ problemType.name }}
+                    </b-button>
+                </p>
+                <p class="control">
+                    <b-button @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
+                        Off
+                    </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' : ''"
+                              :selected="problemType.enabled && problemType.current === difficultyIndex"
+                                @click.native="selectProblemDifficulty(problemIndex, difficultyIndex)">
+                        {{ difficulty.name }}
+                    </b-button>
+                </p>
+            </b-field>
         </section>
     </div>
 </template>
@@ -14,14 +33,27 @@
 </style>
 
 <script>
+import problems from "@/problems";
+
 export default {
     name: 'SettingsMenu',
     data() {
         return {
-            levels: []
+            problems: problems.data()
         }
     },
     created() {
+    },
+    methods: {
+        selectProblemDifficulty(problemIndex, difficultyIndex) {
+            console.log(`Selected problem ${this.problems[problemIndex].name}, difficulty ${this.problems[problemIndex].difficulties[difficultyIndex].name}`)
+            this.problems[problemIndex].enabled = true;
+            this.problems[problemIndex].current = difficultyIndex;
+        },
+        disableProblem(problemIndex) {
+            console.log(`Disabled problem ${this.problems[problemIndex].name}`)
+            this.problems[problemIndex].enabled = false;
+        }
     }
 }
 </script>

src/problems.js

@@ -0,0 +1,7 @@
+import arithmetic from "@/arithmetic";
+
+export default {
+    data: () => {
+        return arithmetic.data().problems
+    }
+}

src/scss/buefy.scss

@@ -13,6 +13,23 @@ $modal-background-background-color: bulmaRgba($scheme-main, 0.6);
 $modal-card-body-background-color: darken($background, 4%);
 $border: darken($modal-background-background-color, 30%);
 
+$grey-darker: hsl(0, 0%, 58%);
+$grey-dark: hsl(0, 0%, 53%);
+$grey: hsl(0, 0%, 42%);
+$grey-light: hsl(0, 0%, 32%);
+$grey-lightest: hsl(0, 0%, 22%);
+
+$button-border-width: 0;
+$button-hover-color: $grey-darker;
+
 // Import Bulma and Buefy styles
 @import "~bulma";
 @import "~buefy/src/scss/buefy";
+
+// Special button class that disables hover/active/focus effects
+.button.button-unhoverable {
+  &:hover, &:active, &:focus, .is-hovered, .is-active, .is-focused {
+    border-color: $button-border-color;
+    color: $text-strong !important;
+  }
+}