added informations about individual plates

sharknoon · Feb 23, 2024 · 9616a66 · 9616a66
1 parent 3defc14
commit 9616a66
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.22.0",
     "npm-run-all2": "^6.1.2",
     "prettier": "^3.2.5",

diff --git a/src/components/common/TileThumbnail.vue b/src/components/common/TileThumbnail.vue
@@ -7,13 +7,13 @@
       width="75"
       class="img-pixelated rounded"
     />
-    <div class="position-absolute top-0 end-0">
+    <div class="position-absolute top-0 end-0 d-flex gap-1">
       <slot name="top-end"></slot>
     </div>
     <div class="thumbnail-footer position-absolute bottom-0 text-dark w-100 fw-bold rounded-bottom">
       {{ tile?.title }}
     </div>
-    <div class="position-absolute bottom-0 end-0">
+    <div class="position-absolute bottom-0 end-0 d-flex gap-1">
       <slot name="bottom-end"></slot>
     </div>
   </div>

diff --git a/src/components/templates/TileList.vue b/src/components/templates/TileList.vue
@@ -4,9 +4,50 @@
       <div v-for="tile in tiles" :key="tile" class="position-relative m-2" @click="openTile(tile)">
         <TileThumbnail :number="tile">
           <template #bottom-end>
+            <div>
+              <svg
+                v-if="progressStore.finished.includes(tile)"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="currentColor"
+                class="bi bi-flag-fill"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A20 20 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a20 20 0 0 0 1.349-.476l.019-.007.004-.002h.001"
+                />
+              </svg>
+              <svg
+                v-else-if="progressStore.inProgress.includes(tile)"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="currentColor"
+                class="bi bi-clock-fill"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"
+                />
+              </svg>
+              <svg
+                v-else-if="progressStore.reserved.includes(tile)"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="currentColor"
+                class="bi bi-lock-fill"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+                />
+              </svg>
+            </div>
             <div class="favorite-button" @click.stop="toggleTileFavorite(tile)">
               <svg
-                v-if="store.favoriteTiles.includes(tile)"
+                v-if="favoriteTileStore.favoriteTiles.includes(tile)"
                 xmlns="http://www.w3.org/2000/svg"
                 class="text-warning"
                 style="height: 1.5rem; width: 1.5rem"
@@ -44,10 +85,12 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFavoriteTilesStore } from '@/stores/favorite-tiles'
+import { useProgressStore } from '@/stores/progress'
 import TileThumbnail from '@/components/common/TileThumbnail.vue'
 
 const router = useRouter()
-const store = useFavoriteTilesStore()
+const favoriteTileStore = useFavoriteTilesStore()
+const progressStore = useProgressStore()
 
 const props = defineProps({
   filter: {
@@ -61,7 +104,7 @@ const props = defineProps({
 
 const tiles = computed(() => {
   if (props.filter === 'favorites') {
-    return store.favoriteTiles
+    return favoriteTileStore.favoriteTiles
       .concat() // basically copies the array
       .sort(function (tileA, tileB) {
         return tileA - tileB
@@ -76,7 +119,7 @@ const tiles = computed(() => {
 })
 
 function toggleTileFavorite(number: number) {
-  store.toggleFavoriteTile(number)
+  favoriteTileStore.toggleFavoriteTile(number)
 }
 
 function openTile(number: number) {

diff --git a/src/stores/progress.ts b/src/stores/progress.ts
@@ -4,11 +4,11 @@ export const useProgressStore = defineStore('progress', {
   state: () => {
     return {
       error: false,
-      finished: [],
-      inProgress: [],
-      reserved: [],
-      availableInStock: [],
-      availableOutOfStock: []
+      finished: [] as number[],
+      inProgress: [] as number[],
+      reserved: [] as number[],
+      availableInStock: [] as number[],
+      availableOutOfStock: [] as number[]
     }
   },
   getters: {