one-time hints; builder touchups

src/components/OneTimeHint.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip v-model="show" :close-on-content-click="true"/>
+  <v-tooltip v-model="show" :close-on-content-click="true" :close-on-back="false" :close-delay="null"/>
 </template>
 
 <script setup>
@@ -8,25 +8,26 @@ import {usePrefStore} from "@/store/store.js";
 
 const prefs = usePrefStore()
 
-const modelValue = defineModel()
-const hasBeenShown = ref(false)
-
 const props = defineProps({
-  key: {type: String, required: true},
-  after: {type: String, default: null},
+  name: {type: String, required: true},
+  when: {type: Boolean, default: true}, // optional conditional for when to show
+  after: {type: String, default: null}, // set to the name of another hint that must happen before this hint, to chain hints into a tutorial.
 })
 
+const forceClose = ref(false)
+
 const show = computed({
   get() {
-    const result = !prefs.hints[props.key] && modelValue.value && (props.after === null || prefs.hints[props.after])
-        && !props.finished
+    const shownBefore = prefs.hints[props.name];
+    const whenOk = props.when;
+    const afterOk = props.after === null || prefs.hints[props.after];
+    const result = !forceClose.value && !shownBefore && whenOk && afterOk
+    // console.log(`show ${props.name}? ${result} <=`, !forceClose.value, whenOk, afterOk, prefs.hints)
     if (result)
-      hasBeenShown.value = true
-    else if (hasBeenShown.value)
-      prefs.hints[props.key] = true
+      prefs.hints[props.name] = true
     return result
   },
-  set(v) { if(!v) prefs.hints[props.key] = true}
+  set(v) { if(!v) forceClose.value=true; }
 })
 </script>