front/src/components/Game.vue

@@ -72,18 +72,34 @@ const updateGame = () => {
     target_icons.value = shuffle_array(icons)
     colors.value = [random_сolor(), random_сolor(), random_сolor(), random_сolor()]
 }
+
+const coor = (n: number) => {
+    let x = 0
+    let y = 0
+
+    const groups = [
+        { x: [100, 1400], y: [100, 300] },
+        { x: [1400, 1600], y: [100, 800] },
+        { x: [100, 1600], y: [700, 800] },
+        { x: [100, 200], y: [100, 800] },
+    ]
+    const d = groups[n]
+    x = getRandomIntInclusive(d.x[0], d.x[1])
+    y = getRandomIntInclusive(d.y[0], d.y[1])
+    return { x, y }
+}
 </script>
 <template>
     <div class="game" :key="componentKey">
         <div class="target">
             <span class="target-item" v-for="item in target_icons" :data-id="item.id">
-                <component :is="icons_list[item.outline]" :style="{ 'color': colors[item.id - 1] }"></component>
+                <component :is="success.includes(item.id) ? icons_list[item.fill] : icons_list[item.outline]"
+                    :style="{ 'color': colors[item.id - 1] }"></component>
             </span>
         </div>
 
         <UseDraggable v-for="item in source_icons" class="source-item" :data-id="item.id"
-            :initial-value="{ x: getRandomIntInclusive(100, 1400), y: getRandomIntInclusive(300, 700) }"
+            :initial-value="coor(getRandomIntInclusive(1, 3))" :on-start="dragStart" :on-end="dragEnd">
-            :on-start="dragStart" :on-end="dragEnd">
             <component v-if="!success.includes(item.id)" :is="icons_list[item.fill]"
                 :style="{ 'color': colors[item.id - 1] }" :ref="item.ref"></component>
         </UseDraggable>