Bettter opening showing

agadmator-library · Nov 24, 2023 · d21a93d · d21a93d
1 parent fbdcd33
commit d21a93d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 52 deletions.
diff --git a/src/components/VideoDetails.vue b/src/components/VideoDetails.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
 import {Video} from "@/model/Video";
-import { parse } from 'tinyduration'
+import {parse} from 'tinyduration'
 import humanizeDuration from "humanize-duration"
+import {useOpeningsStore} from "@/stores/openingsStore";
+import {Opening} from "@/model/Opening";
 
 const props = defineProps({
   video: Video
 })
 
 const videoId = props.video.id
 
+const openingsStore = useOpeningsStore()
+
 const videoDetails = ref({})
 
 onMounted(() => {
@@ -30,7 +34,12 @@ function formatDuration(videoDetails: any): string {
     return ""
   }
   const duration = parse(videoDetails.videoContentDetails.duration)
-  return humanizeDuration((duration.seconds || 0) * 1000 + (duration.minutes || 0) * 60 * 1000 + (duration.hours|| 0) * 60 * 60 * 1000)
+  return humanizeDuration((duration.seconds || 0) * 1000 + (duration.minutes || 0) * 60 * 1000 + (duration.hours || 0) * 60 * 60 * 1000)
+}
+
+function getOpeningsForGame(idx: number): string[] {
+  return openingsStore.getOpeningsForVideoGame(props.video.id, idx)
+      .map((opening: Opening) => opening.name)
 }
 
 </script>
@@ -107,7 +116,15 @@ function formatDuration(videoDetails: any): string {
               </tr>
               <tr>
                 <th>Result</th>
-                <td>{{(video.games[idx] || {}).result || "n/a"}}</td>
+                <td>{{ (video.games[idx] || {}).result || "n/a" }}</td>
+              </tr>
+              <tr>
+                <th>Openings</th>
+                <td>
+                  <span v-for="opening in getOpeningsForGame(idx)" style="display: block; background: inherit;">
+                    {{ opening }}
+                  </span>
+                </td>
               </tr>
             </table>
           </div>
@@ -119,123 +136,126 @@ function formatDuration(videoDetails: any): string {
               </tr>
               <tr>
                 <th>White</th>
-                <td>{{videoDetails.chessCom.playerWhite}}</td>
+                <td>{{ videoDetails.chessCom.playerWhite }}</td>
               </tr>
               <tr>
                 <th>Black</th>
-                <td>{{videoDetails.chessCom.playerBlack}}</td>
+                <td>{{ videoDetails.chessCom.playerBlack }}</td>
               </tr>
               <tr>
                 <th>Result</th>
-                <td>{{videoDetails.chessCom.result}}</td>
+                <td>{{ videoDetails.chessCom.result }}</td>
               </tr>
               <tr>
                 <th>Moves count</th>
-                <td>{{videoDetails.chessCom.movesCount}}</td>
+                <td>{{ videoDetails.chessCom.movesCount }}</td>
               </tr>
               <tr>
                 <th>Year</th>
-                <td>{{videoDetails.chessCom.year}}</td>
+                <td>{{ videoDetails.chessCom.year }}</td>
               </tr>
             </table>
           </div>
           <div class="col" v-if="videoDetails.chesstempoCom && videoDetails.chesstempoCom.id">
             <table class="table table-bordered">
               <tr>
                 <th>Source</th>
-                <td><a :href="`https://old.chesstempo.com/gamedb/game/${videoDetails.chesstempoCom.id}`" target="_blank" style="background: inherit">chesstempo.com</a></td>
+                <td><a :href="`https://old.chesstempo.com/gamedb/game/${videoDetails.chesstempoCom.id}`" target="_blank"
+                       style="background: inherit">chesstempo.com</a></td>
               </tr>
               <tr>
                 <th>White</th>
-                <td>{{videoDetails.chesstempoCom.playerWhite}}</td>
+                <td>{{ videoDetails.chesstempoCom.playerWhite }}</td>
               </tr>
               <tr>
                 <th>Black</th>
-                <td>{{videoDetails.chesstempoCom.playerBlack}}</td>
+                <td>{{ videoDetails.chesstempoCom.playerBlack }}</td>
               </tr>
               <tr>
                 <th>Result</th>
-                <td>{{videoDetails.chesstempoCom.result}}</td>
+                <td>{{ videoDetails.chesstempoCom.result }}</td>
               </tr>
               <tr>
                 <th>Moves count</th>
-                <td>{{videoDetails.chesstempoCom.movesCount}}</td>
+                <td>{{ videoDetails.chesstempoCom.movesCount }}</td>
               </tr>
               <tr v-if="videoDetails.chesstempoCom.date">
                 <th>Date</th>
-                <td>{{videoDetails.chesstempoCom.date}}</td>
+                <td>{{ videoDetails.chesstempoCom.date }}</td>
               </tr>
               <tr v-if="videoDetails.chesstempoCom.site">
                 <th>Site</th>
-                <td>{{videoDetails.chesstempoCom.site}}</td>
+                <td>{{ videoDetails.chesstempoCom.site }}</td>
               </tr>
               <tr v-if="videoDetails.chesstempoCom.event">
                 <th>Event</th>
-                <td>{{videoDetails.chesstempoCom.event}}</td>
+                <td>{{ videoDetails.chesstempoCom.event }}</td>
               </tr>
               <tr v-if="videoDetails.chesstempoCom.round">
                 <th>Round</th>
-                <td>{{videoDetails.chesstempoCom.round}}</td>
+                <td>{{ videoDetails.chesstempoCom.round }}</td>
               </tr>
             </table>
           </div>
           <div class="col" v-if="videoDetails.chess365 && videoDetails.chess365.href">
             <table class="table table-bordered">
               <tr>
                 <th>Source</th>
-                <td><a :href="videoDetails.chess365.href" target="_blank" style="background: inherit">365chess.com</a></td>
+                <td><a :href="videoDetails.chess365.href" target="_blank" style="background: inherit">365chess.com</a>
+                </td>
               </tr>
               <tr>
                 <th>White</th>
-                <td>{{videoDetails.chess365.playerWhite}}</td>
+                <td>{{ videoDetails.chess365.playerWhite }}</td>
               </tr>
               <tr>
                 <th>Black</th>
-                <td>{{videoDetails.chess365.playerBlack}}</td>
+                <td>{{ videoDetails.chess365.playerBlack }}</td>
               </tr>
               <tr>
                 <th>Result</th>
-                <td>{{videoDetails.chess365.result}}</td>
+                <td>{{ videoDetails.chess365.result }}</td>
               </tr>
               <tr>
                 <th>Moves count</th>
-                <td>{{videoDetails.chess365.movesCount}}</td>
+                <td>{{ videoDetails.chess365.movesCount }}</td>
               </tr>
               <tr v-if="videoDetails.chess365.year">
                 <th>Year</th>
-                <td>{{videoDetails.chess365.year}}</td>
+                <td>{{ videoDetails.chess365.year }}</td>
               </tr>
               <tr v-if="videoDetails.chess365.tournament">
                 <th>Tournament</th>
-                <td>{{videoDetails.chess365.tournament}}</td>
+                <td>{{ videoDetails.chess365.tournament }}</td>
               </tr>
             </table>
           </div>
           <div class="col" v-if="videoDetails.lichessMasters && videoDetails.lichessMasters.id">
             <table class="table table-bordered">
               <tr>
                 <th>Source</th>
-                <td><a :href="`https://lichess.org/${videoDetails.lichessMasters.id}`" target="_blank" style="background: inherit">lichess.org</a></td>
+                <td><a :href="`https://lichess.org/${videoDetails.lichessMasters.id}`" target="_blank"
+                       style="background: inherit">lichess.org</a></td>
               </tr>
               <tr>
                 <th>White</th>
-                <td>{{videoDetails.lichessMasters.playerWhite}}</td>
+                <td>{{ videoDetails.lichessMasters.playerWhite }}</td>
               </tr>
               <tr>
                 <th>Black</th>
-                <td>{{videoDetails.lichessMasters.playerBlack}}</td>
+                <td>{{ videoDetails.lichessMasters.playerBlack }}</td>
               </tr>
               <tr>
                 <th>Winner</th>
-                <td>{{videoDetails.lichessMasters.winner}}</td>
+                <td>{{ videoDetails.lichessMasters.winner }}</td>
               </tr>
               <tr v-if="videoDetails.lichessMasters.year">
                 <th>Year</th>
-                <td>{{videoDetails.lichessMasters.year}}</td>
+                <td>{{ videoDetails.lichessMasters.year }}</td>
               </tr>
               <tr v-if="videoDetails.lichessMasters.month">
                 <th>Month</th>
-                <td>{{videoDetails.lichessMasters.month}}</td>
+                <td>{{ videoDetails.lichessMasters.month }}</td>
               </tr>
             </table>
           </div>

diff --git a/src/components/VideoTable.vue b/src/components/VideoTable.vue
@@ -46,7 +46,7 @@ const whiteVisible = ref(true)
 const blackVisible = ref(true)
 const gamesDatesVisible = ref(window.innerWidth > 1000)
 const resultVisible = ref(false)
-const openingsVisible = ref(false)
+const openingVisible = ref(false)
 
 const pgnsStore = usePgnsStore();
 const openingsStore = useOpeningsStore()
@@ -73,19 +73,10 @@ function formatResult(gameResult: GameResult): string {
   }
 }
 
-function getOpeningsForGame(video: Video, game: Game): string[] {
+function getOpeningForGame(video: Video, game: Game): string {
   const idx = video.games.indexOf(game);
-  const pgns = pgnsStore.getPgnsForVideo(video.id)
-  const pgn = pgns[idx]
-  if (pgn) {
-    return openingsStore
-        .openings
-        .filter((opening: Opening) => pgn.pgn.startsWith(opening.moves))
-        .sort((left: Opening, right: Opening) => right.moves.length - left.moves.length)
-        .map((opening: Opening) => opening.name)
-  } else {
-    return []
-  }
+  return openingsStore.getOpeningsForVideoGame(video.id, idx)
+      .map((opening: Opening) => opening.name)[0] || ""
 }
 
 </script>
@@ -133,8 +124,8 @@ function getOpeningsForGame(video: Video, game: Game): string[] {
               <label for="resultVisible" class="ms-1">Result</label>
             </div>
             <div class="col">
-              <Checkbox v-model="openingsVisible" :binary="true" inputId="openingsVisible"/>
-              <label for="openingsVisible" class="ms-1">Openings</label>
+              <Checkbox v-model="openingVisible" :binary="true" inputId="openingVisible"/>
+              <label for="openingVisible" class="ms-1">Opening</label>
             </div>
           </div>
         </div>
@@ -191,14 +182,12 @@ function getOpeningsForGame(video: Video, game: Game): string[] {
           </template>
         </template>
       </Column>
-      <Column header="Openings" v-if="openingsVisible">
+      <Column header="Opening" v-if="openingVisible">
         <template #body="slotProps">
           <template v-for="(game, idx) in slotProps.data.video.games">
             <hr v-if="idx > 0"/>
             <span style="display: block">
-            <span v-for="opening in getOpeningsForGame(slotProps.data.video, game)" style="display: block">
-              {{ opening }}
-            </span>
+              {{ getOpeningForGame(slotProps.data.video, game) }}
           </span>
           </template>
         </template>
@@ -226,7 +215,7 @@ function getOpeningsForGame(video: Video, game: Game): string[] {
 
 :deep(.p-datatable .p-datatable-thead > tr > th) {
   padding: 0.5rem 0.5rem;
-  background:rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.25);
 }
 
 :deep(.p-datatable .p-datatable-header) {

diff --git a/src/stores/openingsStore.ts b/src/stores/openingsStore.ts
@@ -1,11 +1,26 @@
-
 import {defineStore} from 'pinia'
 import {Opening} from "@/model/Opening";
+import {usePgnsStore} from "./pgnsStore";
 
 export const useOpeningsStore = defineStore('openings', {
     state: () => ({
         openings: new Array<Opening>()
     }),
+    getters: {
+        getOpeningsForVideoGame: (state) => {
+            return (videoId: string, gameIdx: number) => {
+                const pgns = usePgnsStore().getPgnsForVideo(videoId)
+                const pgn = pgns[gameIdx]
+                if (pgn) {
+                    return state.openings
+                        .filter((opening: Opening) => pgn.pgn.startsWith(opening.moves))
+                        .sort((left: Opening, right: Opening) => right.moves.length - left.moves.length)
+                } else {
+                    return []
+                }
+            }
+        }
+    },
     actions: {
         async fetchOpenings() {
             if (this.openings.length > 0) {

diff --git a/src/stores/playersStore.ts b/src/stores/playersStore.ts
@@ -8,7 +8,6 @@ export const usePlayersStore = defineStore('players', {
     }),
     getters: {
         playersByOccurrences: (state) => {
-            console.log("AAAA")
             let videos = useVideosStore().videos;
             let tmpPlayerNames = {}
             videos.filter(video => video.games.length > 0)