|
@@ -1,5 +1,5 @@
|
|
|
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
|
|
|
-import state, { gotoNext, resetPlaybackToStart, followBeatPaly } from "/src/state";
|
|
|
+import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from "vue";
|
|
|
+import state, { gotoNext, resetPlaybackToStart, followBeatPaly, skipNotePlay } from "/src/state";
|
|
|
import { IPostMessage } from "/src/utils/native-message";
|
|
|
import { api_cloudFollowTime, api_cloudToggleFollow } from "/src/helpers/communication";
|
|
|
import { storeData } from "/src/store";
|
|
@@ -87,8 +87,10 @@ const onClear = () => {
|
|
|
note.classList.remove("follow-up", "follow-down", "follow-error", "follow-success");
|
|
|
}
|
|
|
const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!;
|
|
|
+ const stemEl = document.getElementById(`vf-${item.id}-stem`);
|
|
|
if (_note) {
|
|
|
- _note.classList.remove("follow-up", "follow-down");
|
|
|
+ _note.classList.remove("follow-up", "follow-down", "follow-success");
|
|
|
+ stemEl?.classList.remove("follow-up", "follow-down", "follow-success");
|
|
|
}
|
|
|
});
|
|
|
};
|
|
@@ -213,8 +215,10 @@ const checked = () => {
|
|
|
startTime = 0;
|
|
|
followData.index = followData.index + 1;
|
|
|
setColor(item, "", true);
|
|
|
- next();
|
|
|
- checking = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ next();
|
|
|
+ checking = false;
|
|
|
+ }, 3000);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
@@ -236,14 +240,38 @@ const setColor = (item: any, state: "follow-up" | "follow-down" | "", isRight =
|
|
|
}
|
|
|
const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!;
|
|
|
if (_note) {
|
|
|
+ const stemEl = document.getElementById(`vf-${item.id}-stem`)
|
|
|
_note.classList.remove("follow-up", "follow-down");
|
|
|
- state && _note.classList.add(state);
|
|
|
+ stemEl?.classList.remove("follow-up", "follow-down","follow-success");
|
|
|
+ if (state) {
|
|
|
+ _note.classList.add(state);
|
|
|
+ stemEl?.classList.add(state)
|
|
|
+ }
|
|
|
if (isRight) {
|
|
|
_note.classList.add("follow-success");
|
|
|
+ stemEl?.classList.add("follow-success")
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+// 进度跟练,点击某个音符开始跟练
|
|
|
+export const skipNotePractice = () => {
|
|
|
+ followData.index = state.activeNoteIndex
|
|
|
+ // 清除其它音符的错误提示
|
|
|
+ const noteFollows: HTMLElement[] = Array.from(document.querySelectorAll(".follow-error"));
|
|
|
+ noteFollows.forEach((noteFollow) => {
|
|
|
+ noteFollow?.classList.remove("follow-up", "follow-down", "follow-error");
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 移动到对应音符的位置
|
|
|
+watch(
|
|
|
+ () => followData.index,
|
|
|
+ () => {
|
|
|
+ skipNotePlay(followData.index);
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: "follow",
|
|
|
setup() {
|