knime-fe-workshop/composables/useReveal.ts at main · koettert/knime-fe-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import {
  stateMap,
  type HiddenEntry,
  type HiddenLetter,
  type State,
} from "./useLetterState";

import { useIntervalFn } from "@vueuse/core";

const AUTO_REVEAL_TIME = 3 * 1000;

export const useReveal = ({
  name,
  isSolved,
  userIsTyping,
  hiddenEntries,
  updateLetterState,
}: {
  name: Ref<string>;
  isSolved: Ref<boolean>;
  userIsTyping: Ref<boolean>;
  hiddenEntries: Ref<HiddenEntry[]>;
  updateLetterState: ({
    index,
    newState,
  }: {
    index: number;
    newState: State;
  }) => void;
}) => {
  let pause: () => void = () => {};
  let resume: () => void = () => {};
  let isActive = ref(false);

  const startRevealInterval = () => {
    if (isActive.value) {
      return;
    }

    ({ pause, resume, isActive } = useIntervalFn(() => {
      if (hiddenEntries.value.length === 0) {
        pause();
        return;
      }

      const [randomIndex] =
        hiddenEntries.value[
          Math.floor(Math.random() * hiddenEntries.value.length)
        ];

      updateLetterState({ index: randomIndex, newState: stateMap.revealed });
    }, AUTO_REVEAL_TIME));
  };

  const revealIfCorrectLetter = (
    guessedLetter: string,
    nextHiddenLetter: HiddenLetter,
  ) => {
    if (!nextHiddenLetter) {
      return;
    }

    guessedLetter = guessedLetter.toLowerCase();
    const actualLetterObject = nextHiddenLetter;
    const actualLetter = actualLetterObject.letter.toLowerCase();

    if (guessedLetter === actualLetter) {
      updateLetterState({
        index: actualLetterObject.index,
        newState: stateMap.solved,
      });
      // TODO add points to the game store
    }
  };

  const revealNextHiddenLetter = (nextHiddenLetter: HiddenLetter) => {
    if (!nextHiddenLetter) {
      return;
    }

    updateLetterState({
      index: nextHiddenLetter.index,
      newState: stateMap.revealed,
    });
  };

  watch(
    name,
    () => {
      startRevealInterval();
    },
    { immediate: true },
  );

  watch(userIsTyping, (isTyping) => {
    if (isTyping) {
      pause();
    } else {
      resume();
    }
  });

  watch(
    isSolved,
    (newIsSolved) => {
      if (newIsSolved) {
        pause();
      } else {
        resume();
      }
    },
    { immediate: true },
  );

  onMounted(() => {
    startRevealInterval();
  });

  onUnmounted(() => {
    pause();
  });

  return {
    startRevealInterval,
    revealIfCorrectLetter,
    revealNextHiddenLetter,
  };
};