From 6124e909f8f9cc90bdb42dab6d6adfcf2ce8701c Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Fri, 18 Dec 2020 23:18:37 -0600
Subject: [PATCH] katex example rendering inside tooltip has issues on the top
 row where the modal-card-header overlaps

---
 src/components/SettingsMenu.vue | 34 +++++++++++++++++++++------------
 src/main.js                     |  4 +++-
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/SettingsMenu.vue b/src/components/SettingsMenu.vue
index 1531a48..501e472 100644
--- a/src/components/SettingsMenu.vue
+++ b/src/components/SettingsMenu.vue
@@ -7,21 +7,31 @@
         <section class="modal-card-body">
             <b-field addons class="is-flex mb-1" v-for="(problemType, problemIndex) in problems" :key="problemType.id">
                 <p class="control is-flex-grow-0" style="min-width: 150px;">
-                    <b-button class="button-unhoverable is-block darker w-100" :hovered="false" style="cursor: default;">
+                    <b-button class="button-unhoverable is-block darker w-100" :hovered="false"
+                              style="cursor: default;">
                         {{ problemType.name }}
                     </b-button>
                 </p>
                 <p class="control is-flex-grow-2">
-                    <b-button class="w-100" @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
+                    <b-button class="w-100" @click="disableProblem(problemIndex)"
+                              :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
                         Off
                     </b-button>
                 </p>
-                <p class="control is-flex-grow-2" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id">
-                    <b-button class="w-100" :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
-                              :selected="problemType.enabled && problemType.current === difficultyIndex"
-                                @click.native="selectProblemDifficulty(problemIndex, difficultyIndex)">
-                        {{ difficulty.name }}
-                    </b-button>
+                <p class="control is-flex-grow-2" v-for="(difficulty, difficultyIndex) in problemType.difficulties"
+                   :key="difficulty.id">
+                    <b-tooltip class="w-100" type="is-dark" :animated="false">
+                        <b-button class="w-100"
+                                  :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
+                                  :selected="problemType.enabled && problemType.current === difficultyIndex"
+                                  @click.native="selectProblemDifficulty(problemIndex, difficultyIndex)"
+                        >
+                            {{ difficulty.name }}
+                        </b-button>
+                        <template v-slot:content>
+                            <katex-element :expression="getExample(problemIndex, difficultyIndex)"/>
+                        </template>
+                    </b-tooltip>
                 </p>
             </b-field>
         </section>
@@ -40,17 +50,17 @@ export default {
     props: {
         problems
     },
-    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;
+        },
+        getExample(problemIndex, difficultyIndex) {
+            let problemType = this.problems[problemIndex];
+            return problemType.method(problemType.difficulties[difficultyIndex].options).text
         }
     }
 }
diff --git a/src/main.js b/src/main.js
index 5d298e6..686384e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueKatex from 'vue-katex';
-import {ConfigProgrammatic, Input, Field, Button, Icon, Modal} from 'buefy';
+import {ConfigProgrammatic, Input, Field, Button, Icon, Modal, Tooltip} from 'buefy';
 import {library} from '@fortawesome/fontawesome-svg-core';
 import {faCog, faTimes} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
@@ -18,6 +18,8 @@ Vue.use(Field);
 Vue.use(Button);
 Vue.use(Icon);
 Vue.use(Modal);
+Vue.use(Tooltip);
+
 ConfigProgrammatic.setOptions({
     defaultIconComponent: 'vue-fontawesome',
     defaultIconPack: 'fas'