Improve home and game UI

les-conjures-du-temporel · Jan 5, 2024 · e99aa84 · e99aa84
1 parent 658af47
commit e99aa84
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 27 deletions.
diff --git a/src/components/GameItem.vue b/src/components/GameItem.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
   simple?: boolean
   highlights?: Highlights
   relevantScores?: ScoreKind[]
+  showTotalPlays?: boolean
 }>()
 
 const showDetails = ref(false)
@@ -66,7 +67,7 @@ function getIconForScoreKind(scoreKind: ScoreKind): string {
     favoriteMatch: 'thumb_up',
     bggRating: 'emoji_events',
     randomDaily: 'today',
-    recentlyPlayed: 'share'
+    recentlyPlayed: 'flare'
   }[scoreKind]
 }
 
@@ -75,8 +76,8 @@ function getLabelForScoreKind(scoreKind: ScoreKind): string {
     players: 'recommandé pour ce nombre de joueurs',
     playTime: 'probablement dans le temps demandé',
     favoriteMatch: 'similaire aux jeux favoris',
-    bggRating: 'une bonne note sur BGG',
-    randomDaily: 'choix aléatoire du jour',
+    bggRating: 'une bonne note sur Board Game Geek',
+    randomDaily: 'suggestions aléatoires du jour',
     recentlyPlayed: 'joué récemment'
   }[scoreKind]
 }
@@ -99,6 +100,11 @@ function onClickHeader() {
           ({{ game.bgg.yearPublished }})</span
         >
 
+        <div v-if="showTotalPlays && game.lastPlayed" class="row">
+          <div class="col-6">joué le {{ formatDate(game.lastPlayed) }}</div>
+          <div class="col-6">{{ pluralS(game.totalPlays, 'partie') }}</div>
+        </div>
+
         <div class="row">
           <div class="col-6">{{ numPlayers }}</div>
           <div class="col-6">{{ playTime }}</div>
@@ -157,6 +163,16 @@ function onClickHeader() {
           </div>
         </template>
 
+        <div class="details-span-2">
+          Informations retirées du site
+          <a
+            :href="'https://boardgamegeek.com/boardgame/' + encodeURIComponent(game.bgg.id)"
+            target="_blank"
+            >boardgamegeek.com</a
+          >
+          <q-separator spaced inset size="2px" />
+        </div>
+
         <game-item-terms
           :highlights="highlights?.categories"
           :terms="game.bgg.categories"
@@ -193,27 +209,24 @@ function onClickHeader() {
           <div>{{ formatNumber(game.bgg.averageWeight) }} / 5</div>
         </template>
 
+        <div class="details-span-2">
+          Informations du club
+          <q-separator spaced inset size="2px" />
+        </div>
+
         <template v-if="game.clubCode">
           <div>Code conjuré</div>
-          <div>{{ game.clubCode }}</div>
+          <div>
+            <code>{{ game.clubCode }}</code>
+          </div>
         </template>
 
         <template v-if="game.lastPlayed">
-          <div>Parties enregistrées</div>
+          <div>Parties jouées</div>
           <div>{{ game.totalPlays }}</div>
           <div>Dernière partie</div>
           <div>{{ formatDate(game.lastPlayed) }}</div>
         </template>
-
-        <div>Plus d'info</div>
-        <div>
-          Aller sur
-          <a
-            :href="'https://boardgamegeek.com/boardgame/' + encodeURIComponent(game.bgg.id)"
-            target="_blank"
-            >boardgamegeek.com</a
-          >
-        </div>
       </q-card-section>
     </transition>
   </q-card>
@@ -236,4 +249,9 @@ function onClickHeader() {
   grid-template-columns: max-content 1fr;
   grid-gap: 5px;
 }
+
+.details-span-2 {
+  grid-column-end: span 2;
+  text-align: center;
+}
 </style>
diff --git a/src/components/GameItemTerms.vue b/src/components/GameItemTerms.vue
@@ -1,25 +1,47 @@
 <script setup lang="ts">
-defineProps<{
+import { computed, type ComputedRef } from 'vue'
+
+const props = defineProps<{
   label: string
   terms: string[]
   highlights?: Set<string>
   translations?: Map<string, string>
 }>()
+
+const sortedTerms: ComputedRef<
+  { text: string; isHighlight: boolean; isMissingTranslation: boolean }[]
+> = computed(() => {
+  const sortedTerms = []
+
+  for (const term of props.terms) {
+    sortedTerms.push({
+      text: props.translations?.get(term) || term,
+      isHighlight: props.highlights?.has(term) || false,
+      isMissingTranslation: props.translations ? !props.translations.has(term) : false
+    })
+  }
+
+  sortedTerms.sort(
+    (a, b) => Number(b.isHighlight) - Number(a.isHighlight) || a.text.localeCompare(b.text)
+  )
+
+  return sortedTerms
+})
 </script>
 
 <template>
   <template v-if="terms.length">
     <div>{{ label }}</div>
 
     <div>
-      <template v-for="(term, index) in terms" :key="term">
+      <template v-for="(term, index) in sortedTerms" :key="term">
         <br v-if="index > 0" />
         <span
           :class="{
-            highlight: highlights?.has(term),
-            'text-italic': translations && !translations.has(term)
+            highlight: term.isHighlight,
+            'text-italic': term.isMissingTranslation
           }"
-          >{{ translations?.get(term) || term }}</span
+          >{{ term.text }}</span
         >
       </template>
     </div>
@@ -28,11 +50,6 @@ defineProps<{
 
 <style scoped>
 .highlight {
-  text-decoration-line: underline;
-  text-decoration-style: solid;
-  text-decoration-color: #ca5843;
-  text-decoration-thickness: 1px;
-  text-decoration-skip-ink: none;
-  background-color: rgba(202, 88, 67, 0.2);
+  background-color: rgba(110, 190, 177, 0.25);
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -56,7 +56,7 @@ const recentGames = computed(() => {
 
     <template v-for="(game, index) in recentGames" :key="game.bgg.id">
       <q-separator v-if="index > 0" color="secondary" />
-      <game-item :game="game" />
+      <game-item :game="game" show-total-plays />
     </template>
   </div>
 </template>