init

src/views/games/GamesView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>Games</div>
+</template>
+
+<style scoped lang="scss"></style>

src/views/games/memo/MemoRoot.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+const cards = ref<string[]>([])
+
+const size = ref(2)
+const data = ['1', '2', '3', '4', '5', '6']
+const result = ref(new Map<string, [string, number]>())
+const currentCheck = ref(new Map<string, [string, number]>())
+const checking = ref(false)
+const startDate = ref<Date>()
+
+const timeout = ref<number>(0)
+
+const generate = () => {
+  checking.value = false
+  result.value.clear()
+  currentCheck.value.clear()
+
+  const arr = Array.from({ length: size.value }, () => data).flat()
+  cards.value = shuffle(arr)
+
+  startDate.value = new Date()
+}
+
+function shuffle(array: string[]) {
+  const arr = array.slice()
+
+  let i = arr.length
+  let j = 0
+  let temp: string
+
+  while (--i > 0) {
+    j = Math.floor(Math.random() * (i + 1))
+    temp = arr[j]!
+    arr[j] = arr[i]!
+    arr[i] = temp
+  }
+
+  return arr
+}
+
+function compareCards(dataMap: Map<string, [string, number]>) {
+  const set = new Set()
+  dataMap.forEach((el) => set.add(el[0]))
+  return set.size === 1
+}
+
+function addCorrect(dataMap: Map<string, [string, number]>) {
+  for (const [key, value] of dataMap) {
+    result.value.set(key, value)
+  }
+}
+
+function checkCard(card: string, idx: number) {
+  if (checking.value) return
+  if (currentCheck.value.has(`${card}:${idx}`)) return
+
+  currentCheck.value.set(`${card}:${idx}`, [card, idx])
+
+  if (currentCheck.value.size === size.value) {
+    checking.value = true
+    const ok = compareCards(currentCheck.value)
+
+    if (ok) {
+      addCorrect(currentCheck.value)
+      currentCheck.value.clear()
+      checking.value = false
+    } else {
+      timeout.value = setTimeout(() => {
+        currentCheck.value.clear()
+        checking.value = false
+      }, 1000)
+    }
+  }
+}
+
+const isWin = computed(() => data.length === result.value.size / size.value)
+
+const roundTime = computed(() => {
+  const endDate = new Date()
+  return isWin.value && startDate.value ? endDate.valueOf() - startDate.value.valueOf() / 1000 : null
+})
+
+function checkPressed(card: string, idx: number) {
+  return result.value.has(`${card}:${idx}`) || currentCheck.value.has(`${card}:${idx}`)
+}
+
+onUnmounted(() => {})
+</script>
+
+<template>
+  <div class="d-flex flex-column ga-2">
+    <div class="d-flex ga-2 align-center">
+      <v-btn height="40px" @click="generate">Generate</v-btn>
+      <v-text-field v-model="size" />
+    </div>
+    <div v-if="cards.length" class="field rounded">
+      <div class="card" v-for="(card, idx) in cards" :key="idx">
+        <v-img v-if="checkPressed(card, idx)" :src="`${card}.jpeg`" rounded />
+        <v-img v-else src="back.jpeg" @click="checkCard(card, idx)" rounded />
+      </div>
+    </div>
+    <v-alert v-if="isWin" :text="`Congratulations ${roundTime} sec`" type="success"></v-alert>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.field {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.5rem;
+  width: 50rem;
+}
+</style>