front/src/components/Game.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { UseDraggable } from '@vueuse/components';
-import type { Position } from '@vueuse/core';
+import { type Position } from '@vueuse/core';
 import { random_сolor, shuffle_array, getRandomIntInclusive } from '../helpers';
 
 import icon1 from '~icons/mdi/square';
@@ -12,73 +12,96 @@ import icon3 from '~icons/mdi/circle';
 import icon3_o from '~icons/mdi/circle-outline';
 import icon4 from '~icons/mdi/hexagon';
 import icon4_o from '~icons/mdi/hexagon-outline';
-
+const icons_list = [
+    icon1,
+    icon1_o,
+    icon2,
+    icon2_o,
+    icon3,
+    icon3_o,
+    icon4,
+    icon4_o,
+]
+const colors = ref([
+    random_сolor(),
+    random_сolor(),
+    random_сolor(),
+    random_сolor(),
+])
 const icons = [
     {
-        fill: icon1,
-        outline: icon1_o,
-        color: random_сolor(),
-        ref: ref<HTMLElement | null>(null)
+        id: 1, fill: 0, outline: 1,
     },
     {
-        fill: icon2,
-        outline: icon2_o, color: random_сolor(),
-        ref: ref<HTMLElement | null>(null)
+        id: 2, fill: 2, outline: 3,
     },
     {
-        fill: icon3,
-        outline: icon3_o, color: random_сolor(),
-        ref: ref<HTMLElement | null>(null)
+        id: 3, fill: 4, outline: 5,
     },
     {
-        fill: icon4,
-        outline: icon4_o, color: random_сolor(),
-        ref: ref<HTMLElement | null>(null)
+        id: 4, fill: 6, outline: 7,
     },
 ]
+const source_icons = ref(shuffle_array(icons))
+const target_icons = ref(shuffle_array(icons))
 
 const active_drag = ref<string | null>(null)
 const dragStart = (_: Position, event: PointerEvent) => {
     const element = event.currentTarget
     if (element instanceof HTMLElement && element.dataset.id) {
         active_drag.value = element.dataset.id
-        console.log(`update active drag ${element.dataset.id}`)
     }
 }
-const dragEnd = (position: Position, event: PointerEvent) => {
+const dragEnd = (position: Position, _: PointerEvent) => {
     const target = document.elementsFromPoint(position.x, position.y).find(el => el.className == 'target-item')
     if (target instanceof HTMLElement && target.dataset.id) {
         const targetId = target.dataset.id
         const sourceId = active_drag.value
         if (targetId == sourceId) {
-            console.log('n')
+            success.value.push(parseInt(targetId))
         }
     }
 }
+const componentKey = ref(0)
+const success = ref<number[]>([])
+
+const updateGame = () => {
+    success.value = []
+    componentKey.value += 1
+    source_icons.value = shuffle_array(icons)
+    target_icons.value = shuffle_array(icons)
+    colors.value = [random_сolor(), random_сolor(), random_сolor(), random_сolor()]
+}
 </script>
 <template>
-    <div class="game">
+    <div class="game" :key="componentKey">
         <div class="target">
-            <span class="target-item" v-for="(item, i) in shuffle_array(icons)" :data-id="i">
-                <component :is="item.outline" :style="{ 'color': item.color }"></component>
+            <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>
             </span>
         </div>
 
-        <UseDraggable v-for="(item, i) in shuffle_array(icons)" class="source-item" :data-id="i"
+        <UseDraggable v-for="item in source_icons" class="source-item" :data-id="item.id"
             :initial-value="{ x: getRandomIntInclusive(100, 1400), y: getRandomIntInclusive(300, 700) }"
             :on-start="dragStart" :on-end="dragEnd">
-            <component :is="item.fill" :style="{ 'color': item.color }" :ref="item.ref"></component>
+            <component v-if="!success.includes(item.id)" :is="icons_list[item.fill]"
+                :style="{ 'color': colors[item.id - 1] }" :ref="item.ref"></component>
         </UseDraggable>
-
+        <div class="links" v-if="success.length >= icons.length">
+            <RouterLink to="/">На главную</RouterLink>
+            <RouterLink to="/game" @click="updateGame">Еще раз</RouterLink>
+        </div>
     </div>
 </template>
 <style scoped lans="scss">
 .game {
     position: fixed;
-    display: flex;
     height: 100vh;
     width: 100vw;
-    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 
 .target {
@@ -96,4 +119,17 @@ const dragEnd = (position: Position, event: PointerEvent) => {
     font-size: 7rem;
     position: absolute;
 }
+
+.links {
+    display: flex;
+    flex-direction: column;
+    font-size: 5rem;
+    align-items: center;
+    gap: 1rem;
+}
+
+.links a {
+    text-decoration: none;
+    color: black;
+}
 </style>

front/src/components/Home.vue

@@ -12,6 +12,9 @@
                 <li>
                     <RouterLink to="projects">Проекты</RouterLink>
                 </li>
+                <li>
+                    <RouterLink to="game">Игра</RouterLink>
+                </li>
                 <li>
                     <a href="https://timesheet.kustarshina.ru/">Табель рабочего времени</a>
                 </li>