From 0c18156869f932498cbc52207fb71279cbce2e07 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Wed, 25 Mar 2026 12:19:55 +0545
Subject: [PATCH 1/3] feat(locate-features): add screens

---
 src/components/LocateFeaturesProject.vue      | 300 ++++++++++++++++++
 .../LocateFeaturesProjectInstructions.vue     |  78 +++++
 src/components/LocateFeaturesProjectTask.vue  | 131 ++++++++
 .../LocateFeaturesProjectTutorial.vue         |  18 ++
 src/components/TileOverlay.vue                |  79 +++++
 src/components/ValidateImageProject.vue       |   4 +-
 src/config/projectTypes.ts                    |   4 +
 src/utils/buildTasks.ts                       |   1 +
 src/views/ProjectView.vue                     |   9 +-
 9 files changed, 620 insertions(+), 4 deletions(-)
 create mode 100644 src/components/LocateFeaturesProject.vue
 create mode 100644 src/components/LocateFeaturesProjectInstructions.vue
 create mode 100644 src/components/LocateFeaturesProjectTask.vue
 create mode 100644 src/components/LocateFeaturesProjectTutorial.vue
 create mode 100644 src/components/TileOverlay.vue

diff --git a/src/components/LocateFeaturesProject.vue b/src/components/LocateFeaturesProject.vue
new file mode 100644
index 0000000..d10ada7
--- /dev/null
+++ b/src/components/LocateFeaturesProject.vue
@@ -0,0 +1,300 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+import type {
+  Project,
+  TaskGroup,
+  Tutorial,
+  CustomOption,
+  TutorialTileTask,
+  TileTask,
+} from '@/utils/types'
+import { computed, inject, onMounted, ref, shallowRef, useTemplateRef, watchEffect } from 'vue'
+import { isDefined, isNotDefined, listToMap } from '@togglecorp/fujs'
+
+import createInformationPages from '@/utils/createInformationPages'
+import { createFallbackInformationPages } from '@/utils/domain'
+import LocateFeaturesProjectTask from '@/components/LocateFeaturesProjectTask.vue'
+import LocateFeaturesProjectInstructions from '@/components/LocateFeaturesProjectInstructions.vue'
+import LocateFeaturesProjectTutorial from '@/components/LocateFeaturesProjectTutorial.vue'
+import buildTasks from '@/utils/buildTasks'
+
+import ProjectInfo from './ProjectInfo.vue'
+import ProjectHeader from './ProjectHeader.vue'
+import TaskProgress from './TaskProgress.vue'
+import type { VContainer } from 'vuetify/components'
+import TileMap from './TileMap.vue'
+
+interface Props {
+  group: TaskGroup
+  first: boolean
+  options: CustomOption[]
+  project: Project
+  tutorial: Tutorial
+  tutorialTasks: TutorialTileTask[]
+  tasks: TileTask[] | undefined
+}
+
+const taskOffset = ref(0)
+const projectInfoRef = useTemplateRef('projectInfo')
+
+const props = defineProps<Props>()
+const taskContainer = shallowRef<VContainer | null>(null)
+
+const logMappingStarted = inject<(projectType: string) => void>('logMappingStarted')
+const saveResults =
+  inject<(results: Record<string, number[]>, startTime: string) => void>('saveResults')
+const arrowKeys = ref(true)
+const startTime = shallowRef<string>()
+const instruction = computed(() =>
+  isDefined(props.project.projectInstruction)
+    ? props.project.projectInstruction
+    : t('validateProject.doesTheShapeOutline', { feature: props.project.lookFor }),
+)
+
+const emit = defineEmits<{ created: [] }>()
+const results = ref<Record<string, number[]>>({})
+const selectedTaskIndices = ref<Record<string, boolean[]>>({})
+const tileSize = ref<number>(1);
+
+const subGridSizeExponent = computed(() => {
+  const subGridSizeToExponentMapping: Record<string, number> = {
+    '2x2': 1,
+    '4x4': 2,
+    '8x8': 3,
+  }
+
+  if ('subGridSize' in props.project && typeof props.project.subGridSize === 'string') {
+    return subGridSizeToExponentMapping[props.project.subGridSize] ?? 1;
+  }
+
+  return 1;
+})
+
+const processedTasks = computed(() => {
+  const tasks = props.tasks?.length ? props.tasks : buildTasks(props.project, props.group)
+
+  const sortedTasks = tasks.sort((a, b) => (a.taskId > b.taskId ? 1 : -1))
+
+  return sortedTasks
+})
+
+const numSubGridElements = computed(() => ((2 ** subGridSizeExponent.value) ** 2))
+const defaultSelectionValue = computed(() => (
+  Array.from(new Array(numSubGridElements.value).keys()).map(
+    () => false,
+  )
+))
+
+watchEffect(() => {
+  results.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => Array.from(new Array(numSubGridElements.value).keys()).map(
+      () => props.options[0].value,
+    ),
+  )
+
+  selectedTaskIndices.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => defaultSelectionValue.value,
+  )
+
+  startTime.value = new Date().toISOString()
+})
+
+const optionMapping = computed(() =>
+  listToMap(
+    props.options,
+    ({ value }) => value,
+  )
+)
+const nextOptionMapping = computed(() =>
+  listToMap(
+    props.options,
+    ({ value }) => value,
+    (_, __, index) => {
+      if (index === props.options.length - 1) {
+        return props.options[0].value
+      }
+
+      return props.options[index + 1].value
+    },
+  ),
+)
+
+
+const currentTask = computed(() => processedTasks.value?.[taskOffset.value] ?? {})
+const currentTaskValue = computed(() => results.value[currentTask.value.taskId])
+const currentTaskSelections = computed(() => selectedTaskIndices.value[currentTask.value.taskId])
+const numSelectedTasks = computed(() => currentTaskSelections.value.filter((isSelected) => isSelected).length)
+
+onMounted(() => {
+  logMappingStarted?.(props.project.projectType)
+  emit('created')
+})
+
+const isLastTask = computed(() => processedTasks.value.length - 1 === taskOffset.value)
+
+function handleBack() {
+  if (taskOffset.value > 0) {
+    // reset selection
+    selectedTaskIndices.value[currentTask.value.taskId] = defaultSelectionValue.value;
+
+    taskOffset.value = taskOffset.value - 1
+  }
+}
+
+function handleForward() {
+  if (taskOffset.value < processedTasks.value.length - 1) {
+    // reset selection
+    selectedTaskIndices.value[currentTask.value.taskId] = defaultSelectionValue.value;
+
+
+    taskOffset.value = taskOffset.value + 1
+  }
+}
+
+function handleTaskValueChange(taskId: string, newValue: number[]) {
+  results.value[taskId] = newValue
+}
+
+function handleTaskSelectionChange(taskId: string, newValue: boolean[]) {
+  selectedTaskIndices.value[taskId] = newValue
+}
+
+function handleTaskContainerResize() {
+  const el = taskContainer.value?.$el as HTMLDivElement | null;
+  const bcr = el?.getBoundingClientRect();
+
+  if (isNotDefined(bcr)) {
+    return undefined;
+  }
+
+  const { width, height } = bcr;
+  tileSize.value = Math.min(width, height);
+}
+
+function handleClearTaskSelection() {
+  selectedTaskIndices.value[currentTask.value.taskId] = defaultSelectionValue.value;
+}
+
+const tileMapPage = computed(() => [currentTask.value])
+const allTilesSelected = computed(() => numSelectedTasks.value === numSubGridElements.value)
+
+function handleSelectAll() {
+  if (allTilesSelected.value) {
+    handleClearTaskSelection()
+  } else {
+    selectedTaskIndices.value[currentTask.value.taskId] = Array.from(
+      new Array(numSubGridElements.value).keys()).map(() => true
+    )
+  }
+}
+
+</script>
+
+<template>
+  <ProjectHeader :mission="instruction">
+    <v-chip v-if="numSelectedTasks > 0" color="primary" :ripple="false">
+      {{ numSelectedTasks }}
+      <span class="hidden-md-and-down">&nbsp;{{ $t('findProject.selected') }}</span>
+      <v-icon @click="handleClearTaskSelection">mdi-close</v-icon>
+    </v-chip>
+    <v-btn
+      :title="allTilesSelected ? $t('findProject.clearSelection') : $t('findProject.selectAll')"
+      :icon="'mdi-select-'.concat(allTilesSelected ? 'off' : 'all')"
+      @click="handleSelectAll"
+      color="primary"
+    />
+    <TileMap
+      :page="tileMapPage"
+      :zoomLevel="project.zoomLevel"
+    />
+    <ProjectInfo
+      ref="projectInfo"
+      :first="first"
+      :informationPages="createInformationPages(props.tutorial, props.project, createFallbackInformationPages)"
+      :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <LocateFeaturesProjectInstructions
+          :instruction="instruction"
+          :options="props.options"
+          :exampleTileUrl="processedTasks[0].url"
+        />
+      </template>
+      <template #tutorial>
+        <LocateFeaturesProjectTutorial
+          :tutorial="tutorial"
+          :tasks="tutorialTasks"
+          :options="options"
+          @tutorialComplete="projectInfoRef?.toggleDialog"
+        />
+      </template>
+    </ProjectInfo>
+  </ProjectHeader>
+  <v-container
+    class="ma-0 pa-0 container"
+    ref="taskContainer"
+    v-resize="handleTaskContainerResize"
+  >
+    <LocateFeaturesProjectTask
+      :v-if="currentTask"
+      :task="currentTask"
+      :subGridSizeExponent="subGridSizeExponent"
+      :value="currentTaskValue"
+      @onValueChange="handleTaskValueChange"
+      :optionMapping="optionMapping"
+      :nextOptionMapping="nextOptionMapping"
+      :tileSize="tileSize"
+      :selectedIndices="selectedTaskIndices[currentTask.taskId]"
+      @onSelectionChange="handleTaskSelectionChange"
+    />
+  </v-container>
+  <v-toolbar color="white" density="compact" extension-height="20" extended>
+    <v-spacer />
+    <v-btn
+      :title="$t('findProject.moveLeft')"
+      icon="mdi-chevron-left"
+      color="secondary"
+      :disabled="taskOffset <= 0"
+      @click="handleBack"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
+      @shortkey="handleBack"
+    />
+    <v-btn
+      v-if="isDefined(startTime)"
+      :title="$t('projectView.saveResults')"
+      icon="mdi-content-save"
+      color="primary"
+      :disabled="!isLastTask"
+      @click="saveResults?.(results, startTime)"
+    />
+    <v-btn
+      :title="$t('findProject.moveRight')"
+      icon="mdi-chevron-right"
+      color="secondary"
+      :disabled="isLastTask"
+      @click="handleForward"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
+      @shortkey="handleForward"
+    />
+    <v-spacer />
+    <template #extension>
+      <TaskProgress :progress="taskOffset + 1" :total="processedTasks.length" />
+    </template>
+  </v-toolbar>
+</template>
+
+<style scoped>
+.container {
+  height: calc(100vh - 20rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/LocateFeaturesProjectInstructions.vue b/src/components/LocateFeaturesProjectInstructions.vue
new file mode 100644
index 0000000..246eec0
--- /dev/null
+++ b/src/components/LocateFeaturesProjectInstructions.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { CustomOption } from '@/utils/types'
+import TileOverlay from './TileOverlay.vue';
+import ImageTile from './ImageTile.vue';
+
+interface Props {
+  instruction: string;
+  options: CustomOption[];
+  exampleTileUrl?: string;
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+  <v-card-text>
+    <div class="text-h6">
+      {{ $t('findProjectInstructions.classifyTitle') }}
+    </div>
+    <div class="text-p">
+      {{ props.instruction }} {{ $t('findProjectInstructions.classifyInstruction') }}.
+    </div>
+    <v-row class="mt-2" dense>
+      <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
+        <div class="example-tile">
+          <tile-overlay
+            class="tile-overlay"
+            persistentLabel
+            :color="option.iconColor"
+            :label="option.title"
+          />
+          <image-tile
+            :url="exampleTileUrl"
+          />
+        </div>
+      </v-col>
+    </v-row>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">{{ $t('projectInstructions.everyTaskIsViewedBy') }}.</div>
+  </v-card-text>
+</template>
+
+<style scoped>
+.example-tile {
+  width: 7rem;
+  height: 7rem;
+  position: relative;
+  isolation: isolate;
+
+  .tile-overlay {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/LocateFeaturesProjectTask.vue b/src/components/LocateFeaturesProjectTask.vue
new file mode 100644
index 0000000..c384955
--- /dev/null
+++ b/src/components/LocateFeaturesProjectTask.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { CustomOption, TileTask } from '@/utils/types'
+import ImageTile from './ImageTile.vue';
+import { computed } from 'vue';
+import TileOverlay from './TileOverlay.vue';
+
+interface Props {
+  task: TileTask
+  subGridSizeExponent: number;
+  optionMapping: Record<string, CustomOption>;
+  nextOptionMapping: Record<number, number>;
+  value: number[];
+  tileSize: number;
+  selectedIndices: boolean[];
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  onValueChange: [taskId: TileTask['taskId'], newResults: number[]]
+  onSelectionChange: [taskId: TileTask['taskId'], newSelectedIndices: boolean[]]
+}>()
+
+const gridSize = 2 ** props.subGridSizeExponent;
+const overlayGrids = Array.from(new Array(gridSize ** 2).keys());
+
+const taskContainerStyle = computed(() => ({
+  width: `${props.tileSize}px`,
+}))
+
+const overlayGridsStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
+  gridTemplateRows: `repeat(${gridSize}, 1fr)`,
+}))
+
+function getNewValue(oldValue: number) {
+  return props.nextOptionMapping[oldValue];
+}
+
+function handleClick(gridIndex: number) {
+  const newValue = [...props.value]
+
+  const newIndexValue = getNewValue(props.value[gridIndex]);
+
+  if (props.selectedIndices.some((isSelected) => isSelected)) {
+    if (!props.selectedIndices[gridIndex]) {
+      return;
+    }
+
+    props.selectedIndices.forEach((isSelected, index) => {
+      if (isSelected) {
+        newValue[index] = newIndexValue;
+      }
+    })
+  } else {
+    newValue[gridIndex] = newIndexValue;
+  }
+
+  emit('onValueChange', props.task.taskId, newValue)
+}
+
+function handleContextMenu(gridIndex: number) {
+  const newSelectedIndices = [...props.selectedIndices]
+  newSelectedIndices[gridIndex] = !props.selectedIndices[gridIndex]
+  emit('onSelectionChange', props.task.taskId, newSelectedIndices)
+}
+
+const overlayGridColors = computed(() => (
+  props.value.map((subGridValue) => {
+    const selectedOption = props.optionMapping[subGridValue];
+
+    return selectedOption.iconColor;
+  })
+))
+
+const overlayGridLabels = computed(() => (
+  props.value.map((subGridValue) => {
+    const selectedOption = props.optionMapping[subGridValue];
+
+    return selectedOption.title
+  })
+))
+
+</script>
+
+<template>
+  <v-container>
+    <v-row justify="center">
+      <div
+        class="task-container"
+        :style="taskContainerStyle"
+      >
+        <ImageTile
+          :url="task.url"
+          :spinner="true"
+        />
+        <div
+          class="overlay-grids"
+          :style="overlayGridsStyle"
+        >
+          <TileOverlay
+            v-for="gridIndex in overlayGrids"
+            v-bind:key="gridIndex"
+            @click="handleClick(gridIndex)"
+            @contextmenu.prevent.stop="handleContextMenu(gridIndex)"
+            :color="overlayGridColors[gridIndex]"
+            :label="overlayGridLabels[gridIndex]"
+            :isSelected="selectedIndices[gridIndex]"
+          />
+        </div>
+      </div>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.task-container {
+  aspect-ratio: 1;
+  position: relative;
+  isolation: isolate;
+
+  .overlay-grids {
+    display: grid;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/LocateFeaturesProjectTutorial.vue b/src/components/LocateFeaturesProjectTutorial.vue
new file mode 100644
index 0000000..85d09e2
--- /dev/null
+++ b/src/components/LocateFeaturesProjectTutorial.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { CustomOption, Tutorial, TutorialTileTask } from '@/utils/types';
+
+interface Props {
+  tutorial: Tutorial
+  options: CustomOption[]
+  tasks: TutorialTileTask[]
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+  <v-container>
+    Tutorial not implemented yet
+  </v-container>
+</template>
diff --git a/src/components/TileOverlay.vue b/src/components/TileOverlay.vue
new file mode 100644
index 0000000..76c55dd
--- /dev/null
+++ b/src/components/TileOverlay.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+
+interface Props {
+  // FIXME: color should not be undefined
+  color: string | undefined;
+  label: string | undefined;
+  persistentLabel?: boolean;
+  isSelected?: boolean;
+}
+
+const props = defineProps<Props>()
+
+const style = computed(() => ({
+  backgroundColor: props.color,
+  border: props.isSelected
+    ? '10pt solid rgba(255, 255, 255, 1)'
+    : undefined,
+}))
+
+</script>
+
+<template>
+  <div class="tile-overlay">
+    <div
+      class="value-indicator"
+      :style="style"
+    />
+    <div :class="persistentLabel ? 'persistent-label' : 'label'">
+      {{label}}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tile-overlay {
+  aspect-ratio: 1;
+  position: relative;
+  border: 1pt solid rgba(255, 255, 255, .6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  isolation: isolate;
+
+  .persistent-label,
+  .label {
+    z-index: 1;
+    color: white;
+    text-shadow: 0 0 10pt #000;
+    font-weight: bold;
+    text-align: center;
+    user-select: none;
+  }
+
+  .label {
+    opacity: 0;
+  }
+
+  .value-indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .4;
+    filter: brightness(200%);
+  }
+
+  &:hover {
+    background-color: rgba(255, 255, 255, .1);
+
+    .label {
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/src/components/ValidateImageProject.vue b/src/components/ValidateImageProject.vue
index 42ad66a..6bf97eb 100644
--- a/src/components/ValidateImageProject.vue
+++ b/src/components/ValidateImageProject.vue
@@ -111,7 +111,7 @@ function handleForward() {
 
 <template>
   <ProjectHeader :mission="instruction">
-    <Project-info
+    <ProjectInfo
       ref="projectInfo"
       :first="first"
       :informationPages="
@@ -132,7 +132,7 @@ function handleForward() {
         />
       </template>
       <!-- FIXME: add tutorial -->
-    </Project-info>
+    </ProjectInfo>
   </ProjectHeader>
   <v-container class="ma-0 pa-0 container">
     <ValidateImageProjectTask :task="currentTask" />
diff --git a/src/config/projectTypes.ts b/src/config/projectTypes.ts
index 5918646..eba1190 100644
--- a/src/config/projectTypes.ts
+++ b/src/config/projectTypes.ts
@@ -27,6 +27,10 @@ const projectTypes = {
     name: 'Street',
     component: 'streetProject',
   },
+  '9': {
+    name: 'LocateFeatures',
+    component: 'locateFeaturesProject',
+  },
   '10': {
     name: 'Validate Image',
     component: 'validateImageProject',
diff --git a/src/utils/buildTasks.ts b/src/utils/buildTasks.ts
index 632776e..52b9205 100644
--- a/src/utils/buildTasks.ts
+++ b/src/utils/buildTasks.ts
@@ -73,6 +73,7 @@ const buildTasks = (project: Project, group: TaskGroup) => {
         taskY: y,
         taskZ: Number(project.zoomLevel),
         taskId: `${project.zoomLevel}-${x}-${y}`,
+        taskId_real: `${project.zoomLevel}-${x}-${y}`,
         url: getTileUrlFromCoordsAndTileserver(x, y, project.zoomLevel, project.tileServer),
       }
       if (project.tileServerB) {
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index c06d00e..0a9a18b 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -24,8 +24,10 @@ import DigitizeProject from '@/components/DigitizeProject.vue'
 import StreetProject from '@/components/StreetProject.vue'
 import CompletenessProject from '@/components/CompletenessProject.vue'
 import ValidateImageProject from '@/components/ValidateImageProject.vue'
+import LocateFeaturesProject from '@/components/LocateFeaturesProject.vue'
 import projectTypes from '@/config/projectTypes'
 import { decompressTasks } from '@/utils/tasks'
+import { compareNumber } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -34,6 +36,7 @@ export default defineComponent({
     findProject: FindProject,
     completenessProject: CompletenessProject,
     validateImageProject: ValidateImageProject,
+    locateFeaturesProject: LocateFeaturesProject,
     mediaProject: MediaProject,
     validateProject: ValidateProject,
     digitizeProject: DigitizeProject,
@@ -115,8 +118,10 @@ export default defineComponent({
   computed: {
     ...mapStores(useCurrentUserStore),
     options() {
-      var options = this.project?.customOptions
-      options ??= this.project?.answerLabels
+      const optionsTemp = this.project?.customOptions ?? this.project?.answerLabels;
+      const options = optionsTemp
+        ? [...optionsTemp].sort((a, b) => compareNumber(a.value, b.value))
+        : undefined;
       const completedOptions = options?.map(this.completeOptions)
       return completedOptions
     },

From 473b7efb98b1291e868d27d090d818c7ac6d3ddb Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Tue, 7 Apr 2026 10:45:36 +0545
Subject: [PATCH 2/3] feat(locate-features): add tutorial

---
 src/components/LocateFeaturesProject.vue      |   4 +
 .../LocateFeaturesProjectInstructions.vue     |  39 ++-
 .../LocateFeaturesProjectTutorial.vue         | 282 +++++++++++++++++-
 src/components/TileOverlay.vue                |   2 +
 src/utils/types.ts                            |   1 +
 5 files changed, 324 insertions(+), 4 deletions(-)

diff --git a/src/components/LocateFeaturesProject.vue b/src/components/LocateFeaturesProject.vue
index d10ada7..9fbf805 100644
--- a/src/components/LocateFeaturesProject.vue
+++ b/src/components/LocateFeaturesProject.vue
@@ -230,8 +230,12 @@ function handleSelectAll() {
       <template #tutorial>
         <LocateFeaturesProjectTutorial
           :tutorial="tutorial"
+          :project="project"
           :tasks="tutorialTasks"
           :options="options"
+          :optionMapping="optionMapping"
+          :nextOptionMapping="nextOptionMapping"
+          :subGridSizeExponent="subGridSizeExponent"
           @tutorialComplete="projectInfoRef?.toggleDialog"
         />
       </template>
diff --git a/src/components/LocateFeaturesProjectInstructions.vue b/src/components/LocateFeaturesProjectInstructions.vue
index 246eec0..f00d54b 100644
--- a/src/components/LocateFeaturesProjectInstructions.vue
+++ b/src/components/LocateFeaturesProjectInstructions.vue
@@ -2,6 +2,7 @@
 import type { CustomOption } from '@/utils/types'
 import TileOverlay from './TileOverlay.vue';
 import ImageTile from './ImageTile.vue';
+import { ref } from 'vue';
 
 interface Props {
   instruction: string;
@@ -10,6 +11,8 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+const selected = ref(false);
+const allSelected = ref(false);
 
 </script>
 
@@ -36,6 +39,40 @@ const props = defineProps<Props>()
         </div>
       </v-col>
     </v-row>
+    <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
+    <v-row class="align-center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          color="neutral"
+          style="opacity: 0.6"
+          @click.stop="selected = !selected"
+          :icon="selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'"
+          size="small"
+          variant="text"
+        />
+      </v-col>
+      <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
+    </v-row>
+    <v-row class="align-center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
+          @click="allSelected = !allSelected"
+          color="primary"
+          variant="text"
+        />
+      </v-col>
+      <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
+    </v-row>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.whereIamTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.whereIamInstruction') }}</v-col>
+      </v-row>
+    </div>
     <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
@@ -56,8 +93,6 @@ const props = defineProps<Props>()
         <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
-    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
-    <div class="text-p">{{ $t('projectInstructions.everyTaskIsViewedBy') }}.</div>
   </v-card-text>
 </template>
 
diff --git a/src/components/LocateFeaturesProjectTutorial.vue b/src/components/LocateFeaturesProjectTutorial.vue
index 85d09e2..425a25f 100644
--- a/src/components/LocateFeaturesProjectTutorial.vue
+++ b/src/components/LocateFeaturesProjectTutorial.vue
@@ -1,18 +1,296 @@
 <script lang="ts" setup>
-import type { CustomOption, Tutorial, TutorialTileTask } from '@/utils/types';
+import matchIcon from '@/utils/matchIcon';
+import type { CustomOption, Project, Tutorial, TutorialTileTask } from '@/utils/types';
+import { isDefined, isNotDefined, listToGroupList, listToMap, mapToList } from '@togglecorp/fujs';
+import { computed, onMounted, ref, shallowRef, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { VContainer } from 'vuetify/components';
+import LocateFeaturesProjectTask from './LocateFeaturesProjectTask.vue';
+import TaskProgress from './TaskProgress.vue';
+import TutorialCompletionCard from './TutorialCompletionCard.vue';
+
+const { t } = useI18n()
 
 interface Props {
   tutorial: Tutorial
   options: CustomOption[]
   tasks: TutorialTileTask[]
+  project: Project;
+  subGridSizeExponent: number;
+  optionMapping: Record<string, CustomOption>;
+  nextOptionMapping: Record<number, number>;
 }
 
 const props = defineProps<Props>()
+const taskContainer = shallowRef<VContainer | null>(null)
+
+const currentTaskIndex = ref(0)
+const userAttempts = ref(0)
+const answersRevealed = ref(false)
+const results = ref<Record<string, number[]>>({})
+const selectedTaskIndices = ref<Record<string, boolean[]>>({})
+const tileSize = ref<number>(1);
+
+const instruction = computed(() =>
+  isDefined(props.tutorial.projectInstruction)
+    ? props.tutorial.projectInstruction
+    : t('projectView.youAreLookingFor', { lookFor: props.tutorial.lookFor }),
+)
+
+const numSubGridElements = computed(() => ((2 ** props.subGridSizeExponent) ** 2))
+
+const defaultSelectionValue = computed(() => (
+  Array.from(new Array(numSubGridElements.value).keys()).map(
+    () => false,
+  )
+))
+
+const processedTasks = computed(() => (
+  mapToList(
+    listToGroupList(
+      props.tasks,
+      (task) => task.screen,
+      undefined,
+      (group) => {
+        const referenceAnswer = listToMap(
+          group,
+          ({ taskPartitionIndex }) => taskPartitionIndex ?? -1,
+          ({ referenceAnswer }) => referenceAnswer,
+        );
+
+        return {
+          ...group[0],
+          reference: defaultSelectionValue.value.map((_, i) => (
+            referenceAnswer[i] ?? props.options[0].value
+          )),
+        }
+      }
+    )
+  )
+))
+
+const hasTasks = computed(() => isDefined(processedTasks) && processedTasks.value.length !== 0)
+
+watchEffect(() => {
+  results.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => Array.from(new Array(numSubGridElements.value).keys()).map(
+      () => props.options[0].value,
+    ),
+  )
+
+  selectedTaskIndices.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => defaultSelectionValue.value,
+  )
+})
+
+const currentTask = computed(() => processedTasks.value?.[currentTaskIndex.value])
+const currentResult = computed(() => results.value[currentTask.value?.taskId])
+
+const hasCompletedAllTasks = computed(() => {
+  if (!hasTasks.value) {
+    return false
+  }
+
+  const maxIndex = processedTasks.value.length
+  return currentTaskIndex.value === maxIndex
+})
+
+const currentScreen = computed(() => props.tutorial?.screens[currentTaskIndex.value])
+
+const answeredCorrectly = computed(() => {
+  if (!hasTasks.value) {
+    return false
+  }
+
+  if (hasCompletedAllTasks.value) {
+    return true
+  }
+
+  const currentResultMapping = listToMap(
+    currentResult.value,
+    (_, i) => i,
+    (referenceAnswser) => referenceAnswser,
+  );
+
+  const hasWrongAnswer = currentTask.value.reference.some(
+    (referenceAnswser, i) => currentResultMapping[i] !== referenceAnswser
+  )
+
+  return !hasWrongAnswer;
+})
+
+const alertContent = computed(() => {
+  if (!currentScreen.value) {
+    return undefined
+  }
+
+  // FIXME: we may not have success and hint for this project type
+  const { instructions, success, hint } = currentScreen.value
+
+  if (answeredCorrectly.value && success) {
+    const icon = success.icon
+
+    return {
+      type: 'success' as const,
+      title: success.title,
+      text: success.description,
+      icon: icon ? matchIcon(icon) : undefined,
+    }
+  }
+
+  // FIXME: max allowed user attempts should be dynamic?
+  if (userAttempts.value > 0 && hint) {
+    const icon = hint.icon
+
+    return {
+      type: undefined,
+      title: hint.title,
+      text: hint.description,
+      icon: icon ? matchIcon(icon) : undefined,
+    }
+  }
+
+  if (!instructions) {
+    return undefined
+  }
+
+  const icon = instructions.icon
+
+  return {
+    type: 'info' as const,
+    title: instructions.title,
+    text: instructions.description,
+    icon: icon ? matchIcon(icon) : undefined,
+  }
+})
+
+function showAnswer() {
+  answersRevealed.value = true
+  results.value[currentTask.value?.taskId] = currentTask.value.reference
+}
+
+function nextTask() {
+  if (!hasCompletedAllTasks.value) {
+    currentTaskIndex.value += 1
+    userAttempts.value = 0
+    answersRevealed.value = false
+  }
+}
+
+function handleTaskContainerResize() {
+  // NOTE: we need timeout due to tab animation
+  window.setTimeout(() => {
+    const el = taskContainer.value?.$el as HTMLDivElement | null;
+    const bcr = el?.getBoundingClientRect();
+
+    if (isNotDefined(bcr)) {
+      return undefined;
+    }
+
+    const { width, height } = bcr;
+    tileSize.value = Math.min(width, height);
+  }, 200);
+}
+
+onMounted(() => {
+  handleTaskContainerResize()
+})
+
+function handleTaskValueChange(taskId: string, newValue: number[]) {
+  if (!answersRevealed.value) {
+    userAttempts.value += 1
+    results.value[taskId] = newValue
+  }
+}
 
 </script>
 
 <template>
   <v-container>
-    Tutorial not implemented yet
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ instruction }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col />
+    </v-row>
+    <v-container
+      class="ma-0 pa-0 task-container"
+      ref="taskContainer"
+      v-resize="handleTaskContainerResize"
+      v-if="currentTask && !hasCompletedAllTasks"
+    >
+      <LocateFeaturesProjectTask
+        :task="currentTask"
+        :subGridSizeExponent="subGridSizeExponent"
+        :value="currentResult"
+        @onValueChange="handleTaskValueChange"
+        :optionMapping="optionMapping"
+        :nextOptionMapping="nextOptionMapping"
+        :tileSize="tileSize"
+        :selectedIndices="selectedTaskIndices[currentTask?.taskId]"
+      />
+    </v-container>
+    <v-row>
+      <v-col />
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="12">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <TaskProgress :progress="currentTaskIndex" :total="tutorial?.screens.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <TutorialCompletionCard @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
   </v-container>
 </template>
+
+<style scoped>
+.task-container {
+  width: 100%;
+  height: calc(100vh - 22rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/TileOverlay.vue b/src/components/TileOverlay.vue
index 76c55dd..0991017 100644
--- a/src/components/TileOverlay.vue
+++ b/src/components/TileOverlay.vue
@@ -43,6 +43,7 @@ const style = computed(() => ({
   justify-content: center;
   cursor: pointer;
   isolation: isolate;
+  container-type: inline-size;
 
   .persistent-label,
   .label {
@@ -52,6 +53,7 @@ const style = computed(() => ({
     font-weight: bold;
     text-align: center;
     user-select: none;
+    font-size: min(1rem, 20cqi, 2vh, 2vw);
   }
 
   .label {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 2851019..7939d94 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -32,6 +32,7 @@ export interface TileTask {
 export interface TutorialTileTask extends TileTask {
   screen: number
   referenceAnswer: number
+  taskPartitionIndex?: number
 }
 
 interface SubOption {

From 68401b1ed31a2c9eac9a8156b85e099a85366eb8 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 26 Jun 2026 00:48:39 +0545
Subject: [PATCH 3/3] feat: show project type on project cards

- add project type tag to cards in ProjectsView
- make project card images cover their container
- rename "LocateFeatures" project type to "Locate Objects"
- sort answer options inside LocateFeaturesProject instead of ProjectView
---
 src/components/LocateFeaturesProject.vue | 18 ++++++++++--------
 src/config/projectTypes.ts               |  2 +-
 src/views/ProjectView.vue                |  6 +-----
 src/views/ProjectsView.vue               | 23 +++++++++++++++++++++++
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/LocateFeaturesProject.vue b/src/components/LocateFeaturesProject.vue
index 9fbf805..730aa8e 100644
--- a/src/components/LocateFeaturesProject.vue
+++ b/src/components/LocateFeaturesProject.vue
@@ -11,7 +11,7 @@ import type {
   TileTask,
 } from '@/utils/types'
 import { computed, inject, onMounted, ref, shallowRef, useTemplateRef, watchEffect } from 'vue'
-import { isDefined, isNotDefined, listToMap } from '@togglecorp/fujs'
+import { compareNumber, isDefined, isNotDefined, listToMap } from '@togglecorp/fujs'
 
 import createInformationPages from '@/utils/createInformationPages'
 import { createFallbackInformationPages } from '@/utils/domain'
@@ -42,6 +42,8 @@ const projectInfoRef = useTemplateRef('projectInfo')
 const props = defineProps<Props>()
 const taskContainer = shallowRef<VContainer | null>(null)
 
+const options = computed(() => [...props.options ?? []].sort((a, b) => compareNumber(a.value, b.value)))
+
 const logMappingStarted = inject<(projectType: string) => void>('logMappingStarted')
 const saveResults =
   inject<(results: Record<string, number[]>, startTime: string) => void>('saveResults')
@@ -92,7 +94,7 @@ watchEffect(() => {
     processedTasks.value,
     ({ taskId }) => taskId,
     () => Array.from(new Array(numSubGridElements.value).keys()).map(
-      () => props.options[0].value,
+      () => options.value[0].value,
     ),
   )
 
@@ -107,20 +109,20 @@ watchEffect(() => {
 
 const optionMapping = computed(() =>
   listToMap(
-    props.options,
+    options.value,
     ({ value }) => value,
   )
 )
 const nextOptionMapping = computed(() =>
   listToMap(
-    props.options,
+    options.value,
     ({ value }) => value,
     (_, __, index) => {
-      if (index === props.options.length - 1) {
-        return props.options[0].value
+      if (index === options.value.length - 1) {
+        return options.value[0].value
       }
 
-      return props.options[index + 1].value
+      return options.value[index + 1].value
     },
   ),
 )
@@ -223,7 +225,7 @@ function handleSelectAll() {
       <template #instructions>
         <LocateFeaturesProjectInstructions
           :instruction="instruction"
-          :options="props.options"
+          :options="options"
           :exampleTileUrl="processedTasks[0].url"
         />
       </template>
diff --git a/src/config/projectTypes.ts b/src/config/projectTypes.ts
index eba1190..04571e9 100644
--- a/src/config/projectTypes.ts
+++ b/src/config/projectTypes.ts
@@ -28,7 +28,7 @@ const projectTypes = {
     component: 'streetProject',
   },
   '9': {
-    name: 'LocateFeatures',
+    name: 'Locate Objects',
     component: 'locateFeaturesProject',
   },
   '10': {
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 0a9a18b..72c8910 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -27,7 +27,6 @@ import ValidateImageProject from '@/components/ValidateImageProject.vue'
 import LocateFeaturesProject from '@/components/LocateFeaturesProject.vue'
 import projectTypes from '@/config/projectTypes'
 import { decompressTasks } from '@/utils/tasks'
-import { compareNumber } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -118,10 +117,7 @@ export default defineComponent({
   computed: {
     ...mapStores(useCurrentUserStore),
     options() {
-      const optionsTemp = this.project?.customOptions ?? this.project?.answerLabels;
-      const options = optionsTemp
-        ? [...optionsTemp].sort((a, b) => compareNumber(a.value, b.value))
-        : undefined;
+      const options = this.project?.customOptions ?? this.project?.answerLabels;
       const completedOptions = options?.map(this.completeOptions)
       return completedOptions
     },
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index a6ff018..3c87380 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -21,6 +21,7 @@ export default defineComponent({
     currentProject: null,
     selectedItems: projectFilters.map((f) => f.defaultItems),
     showFilterCard: false,
+    projectTypes: projectTypes,
   }),
   computed: {
     ...mapStores(useCurrentUserStore),
@@ -210,10 +211,15 @@ export default defineComponent({
               width="350"
               tile
             >
+              <div class="project-type-tag">
+                {{ projectTypes[project.projectType].name }}
+              </div>
               <v-img
+                class="cover-image"
                 height="250"
                 :src="project.image"
                 @error="() => (project.image = fallbackImage)"
+                cover
               />
               <v-card-title class="text-wrap">{{ project.projectTopic }}</v-card-title>
               <v-card-text>
@@ -257,3 +263,20 @@ export default defineComponent({
     </v-row>
   </basic-page>
 </template>
+<style scoped>
+.project-type-tag {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  background-color: white;
+  z-index: 1;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.cover-image {
+  background-color: #999;
+}
+</style>