feat: show player titles on result rows and game page

Closes #14

Author: Chew

components/ChessGameResultRow.vue

@@ -3,12 +3,14 @@
     <td>
       <span class="d-flex align-center">
         <span :class="['play-icon', unknownColor ? 'unknown' : 'white', cleanResult[0] == 1 ? 'winner' : '']" />
+        <span v-if="whitePlayer.title"><chess-title :title="whitePlayer.title" size="x-small" />&nbsp;</span>
         <span v-if="whitePlayer.id == null">{{ whitePlayer.name }}</span>
         <PageLink v-else :href="`/profile/${whitePlayer.name}`">{{ whitePlayer.name }}</PageLink>
         <span v-if="whitePlayer.elo" class="text-grey">&nbsp;({{ whitePlayer.elo }})</span>
       </span>
       <span class="d-flex align-center">
         <span :class="['play-icon', unknownColor ? 'unknown' : 'black', cleanResult[1] == 1 ? 'winner' : '']" />
+        <span v-if="blackPlayer.title"><chess-title :title="blackPlayer.title" size="x-small" />&nbsp;</span>
         <span v-if="blackPlayer.id == null">{{ blackPlayer.name }}</span>
         <PageLink v-else :href="`/profile/${blackPlayer.name}`">{{ blackPlayer.name }}</PageLink>
         <span v-if="blackPlayer.elo" class="text-grey">&nbsp;({{ blackPlayer.elo }})</span>
@@ -72,11 +74,11 @@ export default {
   name: 'ChessGameResultRow',
   props: {
     whitePlayer: {
-      type: Object as PropType<{id: string | null, name: string, elo?: string|number}>,
+      type: Object as PropType<{id: string | null, name: string, elo?: string|number, title?: string}>,
       required: true
     },
     blackPlayer: {
-      type: Object as PropType<{id: string | null, name: string, elo?: string|number}>,
+      type: Object as PropType<{id: string | null, name: string, elo?: string|number, title?: string}>,
       required: true
     },
     unknownColor: {

components/ChessTitle.vue

@@ -38,6 +38,11 @@ export default defineComponent({
 
   methods: {
     abbreviation() {
+      // hard coded
+      if (this.title === 'BOT') {
+        return 'BOT'
+      }
+
       const title = this.title.replaceAll('Grandmaster', 'Grand Master').split(' ')
 
       // first letter of every word in the title

pages/game/[id].vue

@@ -51,6 +51,9 @@
         <v-col cols="6">
           <v-card variant="tonal">
             <v-card-text>
+              <span v-if="(whiteOnBottom ? blackTitle : whiteTitle) !== ''">
+                <chess-title :title="whiteOnBottom ? blackTitle : whiteTitle" size="x-small" />
+              </span>
               {{ whiteOnBottom ? black : white }}
               <span v-if="whiteOnBottom ? blackElo : whiteElo" class="text-grey-darken-1">
                 ({{ whiteOnBottom ? blackElo : whiteElo }})
@@ -71,6 +74,9 @@
           <v-col cols="6">
             <v-card variant="tonal">
               <v-card-text>
+                <span v-if="(whiteOnBottom ? whiteTitle : blackTitle) !== ''">
+                  <chess-title :title="whiteOnBottom ? whiteTitle : blackTitle" size="x-small" />
+                </span>
                 {{ whiteOnBottom ? white : black }}
                 <span v-if="whiteOnBottom ? whiteElo : blackElo" class="text-grey-darken-1">
                   ({{ whiteOnBottom ? whiteElo : blackElo }})
@@ -188,8 +194,10 @@ export default defineComponent({
 
       white: 'meow',
       whiteElo: '0',
+      whiteTitle: '',
       black: 'meow',
-      blackElo: '0'
+      blackElo: '0',
+      blackTitle: ''
     }
   },
 
@@ -308,8 +316,10 @@ export default defineComponent({
 
       if (pgn.White) { this.white = pgn.White }
       if (pgn.WhiteElo) { this.whiteElo = pgn.WhiteElo }
+      if (pgn.WhiteTitle) { this.whiteTitle = pgn.WhiteTitle }
       if (pgn.Black) { this.black = pgn.Black }
       if (pgn.BlackElo) { this.blackElo = pgn.BlackElo }
+      if (pgn.BlackTitle) { this.blackTitle = pgn.BlackTitle }
     },
 
     async savePGN(data: Record<string, any>, pgn: Record<string, string>, tournamentInfo: TournamentJson | null) {

utils/games.ts

@@ -1,10 +1,10 @@
 import { Chess } from 'chess.js'
-import { TableGames } from '~/types/supabase'
+import type { TableGames } from '~/types/supabase'
 
 export type CleanedGame = {
     id: string,
-    whitePlayer: {id: string | null, name: string, elo?: string|number},
-    blackPlayer: {id: string | null, name: string, elo?: string|number},
+    whitePlayer: {id: string | null, name: string, elo?: string|number, title?: string},
+    blackPlayer: {id: string | null, name: string, elo?: string|number, title?: string},
     cleanResult: (number|string)[],
     friendlyResult: string,
     date?: string,
@@ -62,8 +62,8 @@ export function cleanGame(game: TableGames, userId?: string, users?: { id: strin
 
     return {
         id: game.id,
-        whitePlayer: { ...white, elo: pgn.WhiteElo },
-        blackPlayer: { ...black, elo: pgn.BlackElo },
+        whitePlayer: { ...white, elo: pgn.WhiteElo, title: pgn.WhiteTitle },
+        blackPlayer: { ...black, elo: pgn.BlackElo, title: pgn.BlackTitle },
         cleanResult: result,
         friendlyResult,
         date