refactor

src/store/panel.ts

@@ -0,0 +1,5 @@
+// client/src/store/panel.ts
+import { ref } from "vue"
+
+export const show = ref(true)
+export const panelSize = ref(2 / 5)

src/store/task.ts

@@ -1,8 +1,9 @@
 import { ref } from "vue"
 import { TASK_TYPE } from "../utils/const"
 
-const urlParams = new URLSearchParams(window.location.search)
-const currentTask = (urlParams.get("task") as TASK_TYPE) ?? TASK_TYPE.Tutorial
+const currentTask = window.location.pathname.startsWith("/challenge")
+  ? TASK_TYPE.Challenge
+  : TASK_TYPE.Tutorial
 
 export const taskTab = ref(currentTask)
 export const taskId = ref(0)

src/store/tutorial.ts

@@ -4,6 +4,25 @@ const urlParams = new URLSearchParams(window.location.search)
 const currentStep = urlParams.get("step") ?? "1"
 
 export const step = ref(Number(currentStep))
+export const tutorialIds = ref<number[]>([])
 
-export const show = ref(true)
-export const tutorialSize = ref(2 / 5)
+export function prevDisabled(): boolean {
+  const i = tutorialIds.value.indexOf(step.value)
+  return i <= 0
+}
+
+export function nextDisabled(): boolean {
+  const i = tutorialIds.value.indexOf(step.value)
+  return i === -1 || i === tutorialIds.value.length - 1
+}
+
+export function prev(): void {
+  const i = tutorialIds.value.indexOf(step.value)
+  if (i > 0) step.value = tutorialIds.value[i - 1] as number
+}
+
+export function next(): void {
+  const i = tutorialIds.value.indexOf(step.value)
+  if (i !== -1 && i < tutorialIds.value.length - 1)
+    step.value = tutorialIds.value[i + 1] as number
+}