SidebarMatches SidebarMatches.vue

0% Statements 0/23

100% Branches 1/1

100% Functions 1/1

0% Lines 0/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <template>
  <div v-if="lastMatch?.result" class="sidebar-last-match" :class="lastMatch?.result">
    <p class="label" :class="lastMatch?.result">
      <template v-if="lastMatch?.result === 'match'"><VIcon name="fa-check" /> {{ $t('sidebar.matches.match') }}</template>
      <template v-else><VIcon name="fa-times" /> {{ $t('sidebar.matches.mismatch') }}</template>
    </p>
    <div class="tiles">
      <div class="tile-preview">
        <LazyImage :src="./lastMatch?.a?.imagePath" :alt="lastMatch?.a?.name" :className="lastMatch?.result" />
        <span class="name">{{ lastMatch?.a?.name }}</span>
      </div>
      <div class="tile-preview">
        <LazyImage :src="./lastMatch?.b?.imagePath" :alt="lastMatch?.b?.name" :className="lastMatch?.result" />
        <span class="name">{{ lastMatch?.b?.name }}</span>
      </div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { useGameStore } from '@/stores/useGameStore';
import './SidebarMatches.scss';
 
const gameStore = useGameStore();
const lastMatch = computed(() => {
  const matches = gameStore.matchedPairs;
  return matches.length ? matches[matches.length - 1] : null;
});
</script>