Wrapping up the game flow
Although the game is now functional, it’s not playable since we’re not giving enough feedback to the user. With appStore at our disposal, one of the easiest solutions is to use the dialog! Once we’ve incorporated that, our mini-game will be complete!
First, we’ll update the CameraDetect.vue file by adding the reference to the dialogVisible reactive value. To do this, add the following to the script tag:
// ...abbreviatedimport { useAppStore } from "@/store/app";
const appStore = useAppStore();
const { dialogVisible } = storeToRefs(appStore);
// ...abbreviated
Next, we’ll use dialogVisible in our detectObject function to assess whether it should call the detect function from objectStore:
// ...abbreviatedconst detectObject = async (): Promise<void> => {
if (!props.disabled && !dialogVisible.value) {
await detect(video.value, currentCategory.value);...
