Add a shortened displayName for boats for a better mobile experience

src/stores/boat.ts

@@ -5,6 +5,7 @@ import { defineStore } from 'pinia';
 export interface Boat {
   id: number;
   name: string;
+  displayName?: string;
   class?: string;
   year?: number;
   imgsrc?: string;
@@ -27,6 +28,7 @@ const getSampleData = () => [
   {
     id: 1,
     name: 'ProjectX',
+    displayName: 'PX',
     class: 'J/27',
     year: 1981,
     imgsrc: '/tmpimg/j27.png',
@@ -52,6 +54,7 @@ and rough engine performance.`,
   {
     id: 2,
     name: 'Take5',
+    displayName: 'T5',
     class: 'J/27',
     year: 1985,
     imgsrc: '/tmpimg/j27.png',
@@ -60,6 +63,7 @@ and rough engine performance.`,
   {
     id: 3,
     name: 'WeeBeestie',
+    displayName: 'WB',
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',