Минимальная заготовка. Без стилей, но уже ведёт расчёты

src/App.vue

@@ -1,8 +1,98 @@
+<script setup>
+import { ref, onMounted  } from 'vue';
+import izitoast from "./izitoast";
+
+// const numbers = ref(Array(100).fill('')); // Инициализируем массив с пустыми строками
+const numbers = ref([]); // Инициализируем массив с пустыми строками
+const clickCount = ref(1); // Счетчик нажатий
+const listOfTrips = ref([])
+
+onMounted(()=>{
+  for (let i = 0; i < 100; i++) {
+    numbers.value.push({
+      variable: '',
+      x: (i + 1) % 10 === 0 ? 10: (i + 1) % 10,
+      y: 10 - Math.floor(i / 10),
+      index: i
+    })
+  }
+})
+
+function setNumber(item) {
+  let valueOfMarker = numbers.value[item.index].variable
+  // Если строка пустая, то ставим счётчик
+  if (valueOfMarker === '') {
+    numbers.value[item.index].variable = clickCount.value;
+    clickCount.value++;
+  }
+  // Если нажали на последнее число, то удаляем его
+  else if (valueOfMarker === clickCount.value - 1) {
+    numbers.value[item.index].variable = '';
+    clickCount.value--;
+  }
+  // Если нажали на уже заполненную клетку, то выводим сообщение
+  else {
+    izitoast.info({
+      title: 'Информация',
+      message: "Удалять можно только последний пункт маршрута"
+    })
+  }
+}
+
+function saveResult() {
+  let finallyText = ''
+  const timeArr = numbers.value.reduce((acc, curr) => [curr, ...acc], [])
+  timeArr.map((item)=>{
+    if (item.variable) {
+      listOfTrips.value.push(item)
+      finallyText += `navigate_wait(${item.x}, ${item.y})\n`
+    }
+  })
+  console.log(finallyText)
+  // console.log(listOfTrips)
+  izitoast.info({
+    title: 'Информация',
+    message: "Посмотри в консоли путь дрона. Ctrl + Shift + I или F12"
+  })
+}
+</script>
+
 <template>
-  <h1>💖 Hello World!</h1>
-  <p>Welcome to your Electron application.</p>
+  <div class="grid">
+    <div
+        class="square"
+        v-for="(item, index) in numbers"
+        :data-key="index"
+        :key="index"
+        @click="setNumber(item)"
+    >
+      {{ item.variable }}
+    </div>
+  </div>
+  <button
+    @click="saveResult"
+  >Сохранить</button>
 </template>
 
-<script setup>
-console.log('👋 This message is being logged by "App.vue", included via Vite');
-</script>
+<style>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(10, 50px);
+  gap: 10px;
+}
+
+.square {
+  width: 50px;  /* Ширина квадрата */
+  height: 50px; /* Высота квадрата */
+  background-color: #e0e0e0;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.square:hover {
+  background-color: #d0d0d0;
+}
+.square[data-key='90'] {
+  background-color: red;
+}
+</style>