add multi-step models

src/components/ScoreNavigation.vue

@@ -1,41 +1,47 @@
 <template>
   <nav class="grid grid-cols-3 h-header">
-    <score-button
-      v-if="!confirmExit && !scsh.scoresheet.value?.submittedAt"
-      label="Exit"
-      :vibration="500"
-      @click="exit()"
-    />
-
-    <score-button
-      v-if="!confirmExit && !!scsh.scoresheet.value?.submittedAt"
-      label="Exit"
-      @click="immediateExit()"
-    />
-
-    <score-button
-      v-if="confirmExit"
-      label="Submit"
-      @click="exit('submit')"
-    />
-    <score-button
-      v-if="confirmExit"
-      label="Discard"
-      color="red"
-      @click="exit('discard')"
-    />
+    <template v-if="!confirmNext">
+      <score-button
+        v-if="!scsh.scoresheet.value?.submittedAt"
+        label="Next Step"
+        :vibration="500"
+        @click="next()"
+      />
+      <score-button
+        v-else
+        label="Next Step"
+        @click="immediateExit()"
+      />
 
-    <score-button
-      v-if="!disableUndo && !confirmExit"
-      color="orange"
-      label="Undo"
-      @click="scsh.addMark({ schema: 'undo', target: lastMarkSequence })"
-    />
-    <score-button
-      v-else-if="!confirmExit"
-      color="none"
-      label=""
-    />
+      <score-button
+        v-if="!disableUndo"
+        color="orange"
+        label="Undo"
+        @click="scsh.addMark({ schema: 'undo', target: lastMarkSequence })"
+      />
+      <score-button
+        v-else
+        color="none"
+        label=""
+      />
+    </template>
+    <template v-else>
+      <score-button
+        v-if="!isLastStep"
+        label="Next"
+        @click="next('next')"
+      />
+      <score-button
+        v-else
+        label="Submit"
+        @click="next('submit')"
+      />
+      <score-button
+        label="Discard"
+        color="red"
+        @click="next('discard')"
+      />
+    </template>
 
     <score-button
       ref="resetRef"
@@ -49,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, type PropType } from 'vue'
 import { useRouter } from 'vue-router'
 import { useScoresheet, isUndoMark } from '../hooks/scoresheet'
 import { useConfirm } from '../hooks/confirm'
@@ -58,6 +64,23 @@ import ScoreButton from './ScoreButton.vue'
 const router = useRouter()
 const scsh = useScoresheet()
 
+const props = defineProps({
+  steps: {
+    type: Array as PropType<string[]>,
+    default: null
+  },
+  currentStep: {
+    type: String,
+    default: null
+  }
+})
+
+const emit = defineEmits<{
+  'change:step': [step: string]
+}>()
+
+const isLastStep = computed(() => !Array.isArray(props.steps) || props.steps.length === 0 || props.currentStep === props.steps.at(-1))
+
 const lastMarkSequence = computed(() => (scsh.scoresheet.value?.marks.length ?? 0) - 1)
 const disableUndo = computed(() => {
   if (scsh.scoresheet.value?.completedAt) return true
@@ -69,12 +92,18 @@ const resetRef = ref(null)
 const { fire: reset, fireNext: resetNext } = useConfirm(async () => {
   if (!scsh.scoresheet.value) return
   await scsh.addMark({ schema: 'clear' })
+  if (Array.isArray(props.steps) && props.steps.length > 0) emit('change:step', props.steps[0])
 }, resetRef)
 
-const { fire: exit, fireNext: confirmExit } = useConfirm(async (mode?: 'submit' | 'discard') => {
-  if (mode === 'submit') await scsh.complete()
-  await scsh.close(mode === 'submit')
-  router.go(-1)
+const { fire: next, fireNext: confirmNext } = useConfirm(async (mode?: 'submit' | 'discard' | 'next') => {
+  if (mode === 'next') {
+    const nextStep = props.steps[props.steps.indexOf(props.currentStep) + 1]
+    if (nextStep != null) emit('change:step', nextStep)
+  } else {
+    if (mode === 'submit') await scsh.complete()
+    await scsh.close(mode === 'submit')
+    router.go(-1)
+  }
 })
 
 async function immediateExit () {

src/models.ts

@@ -12,12 +12,19 @@ export interface Model {
   rulesId: string | string[]
   judgeType: string | string[]
   name: string
+  // TODO: configure allowScroll per step
   allowScroll?: boolean
   component: Component
   localAlternativeCompetitionEvents?: Array<[string, string]>
   localOptions?: Option[]
   hidden?: boolean
   historic?: boolean
+  /**
+   * If this model has multiple steps that you must pass through before exiting
+   * specify their step "id"'s. Clicking "Exit"/"Next" will advance to the next
+   * step and pass the current step id as the prop `step` to the model component
+   */
+  steps?: string[]
 
   // I would kinda like this broken out somehow, but this will do for now
   converters?: {
@@ -537,6 +544,7 @@ const models: Model[] = [
     name: 'Simplified Presentation',
     component: defineAsyncComponent(async () => import('./views/scoring/experiments/SimplifiedPresentation.vue')),
     hidden: true,
+    historic: true,
     localOptions: [
       { prop: 'scale5', name: 'wider scale', type: 'boolean' },
       { prop: 'noCheck', name: 'no checkmark', type: 'boolean' }
@@ -547,14 +555,16 @@ const models: Model[] = [
     judgeType: 'Pc1',
     name: 'Circular Presentation (Not-scales)',
     component: defineAsyncComponent(async () => import('./views/scoring/experiments/CirclePresentationAlt1.vue')),
-    hidden: true
+    hidden: true,
+    historic: true
   },
   {
     rulesId: 'experiments',
     judgeType: 'Pc2',
     name: 'Circular Presentation (Scales)',
     component: defineAsyncComponent(async () => import('./views/scoring/experiments/CirclePresentationAlt2.vue')),
-    hidden: true
+    hidden: true,
+    steps: ['marks', 'adjust']
   },
 
   {

src/views/Score.vue

@@ -1,5 +1,5 @@
 <template>
-  <score-navigation />
+  <score-navigation :steps="model?.steps" :current-step="currentStep" @change:step="currentStep = $event" />
   <battery-status :hidden="true" />
 
   <div v-if="!scsh.scoresheet.value">
@@ -13,11 +13,12 @@
     :is="model?.component"
     v-else
     :model="model"
+    :step="currentStep"
   />
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted, onUnmounted } from 'vue'
+import { computed, watch, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useWakeLock } from '@vueuse/core'
 import models from '../models'
@@ -33,6 +34,8 @@ const route = useRoute()
 const scsh = useScoresheet()
 const wakeLock = useWakeLock()
 
+const currentStep = ref<string>()
+
 onMounted(async () => {
   document.body.addEventListener('touchmove', preventDefualt, { passive: false })
   await wakeLock.request('screen')
@@ -74,4 +77,23 @@ const model = computed(() => {
 
   return model
 })
+
+watch(model, (newModel, oldModel) => {
+  if (!Array.isArray(newModel?.steps) || newModel?.steps.length === 0) {
+    currentStep.value = undefined
+  } else {
+    // newModel has steps!
+    if (
+      // if the old model didn't have steps
+      !Array.isArray(oldModel?.steps) ||
+      oldModel?.steps.length === 0 ||
+      // or if the old model had different steps
+      newModel?.steps.length !== oldModel?.steps.length ||
+      newModel?.steps.some((step, idx) => oldModel?.steps?.indexOf(step) !== idx)
+    ) {
+      // we reset to the first step
+      currentStep.value = newModel?.steps[0]
+    }
+  }
+})
 </script>

src/views/scoring/experiments/CirclePresentationAlt2.vue

@@ -1,5 +1,6 @@
 <template>
   <main
+    v-if="step === 'marks'"
     class="grid grid-cols-5 grid-rows-score-circle"
   >
     <score-button
@@ -106,6 +107,106 @@
       @click="addMark({ schema: 'miss' })"
     />
   </main>
+
+  <main
+    v-else-if="step === 'adjust'"
+    class="grid grid-cols-4 grid-rows-adjust"
+  >
+    <score-button
+      label="-0.5"
+      color="red"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-musicMinus' })"
+    />
+    <score-button
+      label="Musicality"
+      class="col-span-2"
+      color="none"
+      :value="(tally('exp-musicPlus') - tally('exp-musicMinus')) * factor"
+    />
+    <score-button
+      label="+0.5"
+      color="green"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-musicPlus' })"
+    />
+
+    <score-button
+      label="-0.5"
+      color="red"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-formMinus' })"
+    />
+    <score-button
+      label="Form/Execution"
+      class="col-span-2"
+      color="none"
+      :value="(tally('exp-formPlus') - tally('exp-formMinus')) * factor"
+    />
+    <score-button
+      label="+0.5"
+      color="green"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-formPlus' })"
+    />
+
+    <score-button
+      label="-0.5"
+      color="red"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-creaPlus' })"
+    />
+    <score-button
+      label="Creativity"
+      class="col-span-2"
+      color="none"
+      :value="(tally('exp-creaPlus') - tally('exp-creaMinus')) * factor"
+    />
+    <score-button
+      label="+0.5"
+      color="green"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-creaMinus' })"
+    />
+
+    <score-button
+      label="-0.5"
+      color="red"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-entPlus' })"
+    />
+    <score-button
+      label="Audience Connection/Entertainment"
+      class="col-span-2"
+      color="none"
+      :value="(tally('exp-entPlus') - tally('exp-entMinus')) * factor"
+    />
+    <score-button
+      label="+0.5"
+      color="green"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-entMinus' })"
+    />
+
+    <score-button
+      label="-0.5"
+      color="red"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-varietyPlus' })"
+    />
+    <score-button
+      label="Variety/Repetitiveness"
+      class="col-span-2"
+      color="none"
+      :value="(tally('exp-varietyPlus') - tally('exp-varietyMinus')) * factor"
+    />
+    <score-button
+      label="+0.5"
+      color="green"
+      :disabled="!!scoresheet?.completedAt"
+      @click="addMark({ schema: 'exp-varietyMinus' })"
+    />
+  </main>
 </template>
 
 <script lang="ts" setup>
@@ -124,14 +225,23 @@ defineProps({
   model: {
     type: Object as PropType<Model>,
     required: true
+  },
+  step: {
+    type: String,
+    default: null
   }
 })
 
+const factor = 0.5
+
 const { addMark, tally, scoresheet } = useScoresheet<Schema>()
 </script>
 
 <style scoped>
 .grid-rows-score-circle {
   grid-template-rows: 9vh repeat(9, calc(82vh / 9));
 }
+.grid-rows-adjust {
+  grid-template-rows: repeat(5, calc(91vh / 5));
+}
 </style>