All files / repo/src/components/Sidebar/SidebarGameHistory SidebarGameHistory.vue

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <CollapsiblePanel :title="$t('history.title')">
    <div class="game-history">
      <ul v-if="history.length > 0" class="history-list">
        <li v-for="(entry, index) in history" :key="index" class="history-item">
          <div class="history-seed">
            <b>{{ entry.seed }}</b> ({{ entry.difficulty }})
          </div>
          <div class="history-details">
            {{ $t('history.timeMoves', { time: entry.time, moves: entry.moves }) }}
          </div>
          <div class="history-details">
            {{ $t('history.matchedCount', { matchCount: entry.matchCount, mismatchCount: entry.mismatchCount }) }}
          </div>
          <div class="history-date">
            {{ formatDate(entry?.dateStart ?? '') }}
          </div>
 
          <CollapsiblePanel :title="$t('history.matchedMismatch')" :size="'xs'">
            <div class="match-history-list">
              <div v-if="!entry.matchedPairs.length" class="match-history-list--empty-msg">{{ $t('devToolPanel.matchHistory.empty') }}</div>
              <div v-else class="match-history-list--list">
                <div v-for="(item, index) in entry.matchedPairs" :key="index" class="match-history-list--entry">
                  <div class="type">
                    <span class="time">at: {{ item.timestamp ? useFormattedTime(ref(Number((item.timestamp / 1000).toFixed(1)))) : '' }}</span>
                    <template v-if="item.result === 'match'"
                      ><span class="match"><VIcon name="fa-check" /> {{ $t('devToolPanel.matchHistory.match') }}</span></template
                    >
                    <template v-else
                      ><span class="mismatch"><VIcon name="fa-times" /> {{ $t('devToolPanel.matchHistory.mismatch') }}</span></template
                    >
                  </div>
                  <div class="match-history-list--pair">
                    <TilePreview :tile="item.a" />
                    <span class="vs">vs</span>
                    <TilePreview :tile="item.b" />
                  </div>
                </div>
              </div>
            </div>
          </CollapsiblePanel>
        </li>
      </ul>
      <p v-else class="history-empty">{{ $t('history.error') }}</p>
    </div>
  </CollapsiblePanel>
</template>
 
<script setup lang="ts">
import { useFormattedTime } from '@/hooks/useFormattedTime';
import { formatDate } from '@/shared/utils/formatDate'; // Adjust the path based on your project structure
import { useGameHistoryStore } from '@/stores/useGameHistoryStore';
import './SidebarGameHistory.scss';
 
defineOptions({
  inheritAttrs: false,
});
defineProps<{}>();
 
const { history } = useGameHistoryStore();
</script>