Improve performance

Thrillberg · Jul 7, 2024 · 86ee4d7 · 86ee4d7
1 parent bea8613
commit 86ee4d7
Show file tree

Hide file tree

Showing 17 changed files with 3,615 additions and 2,615 deletions.
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -14,19 +14,65 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-import '@mdi/font/css/materialdesignicons.css';
 import { createApp } from 'vue';
 import VueCookies from 'vue3-cookies';
 
 import * as Sentry from '@sentry/vue';
 
 import { createVuetify } from 'vuetify';
 /* eslint-disable import/no-unresolved */
-import * as components from 'vuetify/components';
-import * as directives from 'vuetify/directives';
-import { aliases, mdi } from 'vuetify/iconsets/mdi';
-import '../styles/site.scss';
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
+// import {
+//   VApp,
+//   VContainer,
+//   VLayout,
+//   VMain,
+//   VProgressCircular,
+//   VDialog,
+//   VBtn,
+//   VCard,
+//   VCardTitle,
+//   VCardText,
+//   VRow,
+//   VCol,
+//   VCardActions,
+//   VTooltip,
+//   VSheet,
+//   VToolbar,
+//   VTable,
+//   VTextField,
+//   VRadio,
+//   VRadioGroup,
+//   VForm,
+// } from 'vuetify/components';
+import * as components from 'vuetify/components'
 /* eslint-enable import/no-unresolved */
+import {
+  mdiAccount,
+  mdiAccountGroup,
+  mdiAccountPlus,
+  mdiBookOpenVariant,
+  mdiCircle,
+  mdiCircleMedium,
+  mdiClose,
+  mdiContentDuplicate,
+  mdiCrown,
+  mdiEmailOutline,
+  mdiFlag,
+  mdiFullscreen,
+  mdiHelpCircleOutline,
+  mdiHome,
+  mdiIncognito,
+  mdiInformation,
+  mdiLogout,
+  mdiScriptTextOutline,
+  mdiStar,
+  mdiThemeLightDark,
+  mdiTimerSand,
+  mdiTrophy,
+} from '@mdi/js';
+import '../styles/site.scss';
+
 import { VueMasonryPlugin } from 'vue-masonry';
 import { nationColors } from '../../../nationColors';
 import App from '../src/App.vue';
@@ -54,10 +100,56 @@ const lightTheme = {
 
 const vuetify = createVuetify({
   components,
-  directives,
+  // components: {
+  //   VApp,
+  //   VLayout,
+  //   VMain,
+  //   VContainer,
+  //   VProgressCircular,
+  //   VDialog,
+  //   VBtn,
+  //   VCard,
+  //   VCardTitle,
+  //   VCardText,
+  //   VRow,
+  //   VCol,
+  //   VCardActions,
+  //   VTooltip,
+  //   VSheet,
+  //   VToolbar,
+  //   VTable,
+  //   VTextField,
+  //   VRadio,
+  //   VRadioGroup,
+  //   VForm,
+  // },
   icons: {
     defaultSet: 'mdi',
-    aliases,
+    aliases: {
+      ...aliases,
+      account: mdiAccount,
+      accountGroup: mdiAccountGroup,
+      accountPlus: mdiAccountPlus,
+      bookOpenVariant: mdiBookOpenVariant,
+      close: mdiClose,
+      circle: mdiCircle,
+      circleMedium: mdiCircleMedium,
+      contentDuplicate: mdiContentDuplicate,
+      crown: mdiCrown,
+      emailOutline: mdiEmailOutline,
+      flag: mdiFlag,
+      fullscreen: mdiFullscreen,
+      helpCircleOutline: mdiHelpCircleOutline,
+      home: mdiHome,
+      incognito: mdiIncognito,
+      information: mdiInformation,
+      logout: mdiLogout,
+      scriptTextOutline: mdiScriptTextOutline,
+      star: mdiStar,
+      themeLightDark: mdiThemeLightDark,
+      timerSand: mdiTimerSand,
+      trophy: mdiTrophy,
+    },
     sets: {
       mdi,
     },

diff --git a/app/javascript/src/assets/tailwind.css → app/javascript/src/assets/styles.css b/app/javascript/src/assets/tailwind.css → app/javascript/src/assets/styles.css
diff --git a/app/javascript/src/components/BondPurchase.vue b/app/javascript/src/components/BondPurchase.vue
@@ -29,7 +29,7 @@
 
           <template #append>
             <v-btn
-              icon="mdi-close"
+              icon="$close"
               @click="dialog = false"
             />
           </template>

diff --git a/app/javascript/src/components/CurrentGames.vue b/app/javascript/src/components/CurrentGames.vue
@@ -41,7 +41,7 @@
                       <v-icon
                         v-if="users.includes(player.name)"
                         color="success"
-                        icon="mdi-circle"
+                        icon="$circle"
                         size="small"
                       />
                       {{ player.name }}

diff --git a/app/javascript/src/components/Header.vue b/app/javascript/src/components/Header.vue
@@ -7,7 +7,7 @@
     <v-btn
       v-if="$route.path !== '/'"
       to="/"
-      prepend-icon="mdi-home"
+      prepend-icon="$home"
       stacked
     >
       Home
@@ -31,7 +31,7 @@
         <!-- User is registered and signed in -->
         <v-btn
           v-if="profile.email"
-          prepend-icon="mdi-account"
+          :prepend-icon="mdiAccount"
           class="text-none"
           stacked
           v-bind="props"
@@ -41,8 +41,8 @@
         <!-- User is anonymous (not registered) and signed in -->
         <v-btn
           v-if="profile.anonymityConfirmedAt && !profile.email"
-          prepend-icon="mdi-incognito"
-          class="text-none"
+          prepend-icon="$incognito"
+          class="text-none incognito"
           stacked
           v-bind="props"
         >
@@ -51,8 +51,8 @@
         <!-- User is not signed in -->
         <v-btn
           v-if="!profile.anonymityConfirmedAt && !profile.email"
-          icon="mdi-incognito"
-          class="text-none"
+          icon="$incognito"
+          class="text-none incognito"
           stacked
           v-bind="props"
         />
@@ -61,53 +61,54 @@
         <!-- User is registered and signed in -->
         <v-list-item
           v-if="profile.email"
-          prepend-icon="mdi-account"
+          prepend-icon="$account"
           title="Profile"
           :to="'/users/' + profile.id"
         />
         <v-list-item
           v-if="profile.email"
-          prepend-icon="mdi-logout"
+          prepend-icon="$logout"
           title="Sign out"
           @click="signOut"
         />
         <!-- User is anonymous (not registered) and signed in -->
         <v-list-item
           v-if="profile.anonymityConfirmedAt && !profile.email"
-          prepend-icon="mdi-account-plus"
+          prepend-icon="$accountPlus"
           title="Register"
           @click="register"
         />
         <v-list-item
           v-if="profile.anonymityConfirmedAt && !profile.email"
-          prepend-icon="mdi-logout"
+          prepend-icon="$logout"
           title="Permanently sign out"
           @click="signOut"
         />
         <!-- User is not signed in -->
         <v-list-item
           v-if="!profile.anonymityConfirmedAt && !profile.email"
-          prepend-icon="mdi-account"
+          prepend-icon="$account"
           title="Sign In"
           @click="signIn"
         />
         <v-list-item
           v-if="!profile.anonymityConfirmedAt && !profile.email"
-          prepend-icon="mdi-account-plus"
+          prepend-icon="$accountPlus"
           title="Register"
           @click="register"
         />
         <v-list-item
           v-if="!profile.anonymityConfirmedAt && !profile.email && Object.keys(profile).length > 0"
-          prepend-icon="mdi-incognito"
+          prepend-icon="$incognito"
+          class="incognito"
           @click="setAnonymous"
         >
           Play anonymously as {{ profile.username }}
         </v-list-item>
       </v-list>
     </v-menu>
     <v-btn
-      icon="mdi-theme-light-dark"
+      icon="$themeLightDark"
       @click="toggleTheme"
     />
   </v-app-bar>
@@ -119,7 +120,7 @@
       >
         <template #prepend>
           <v-icon color="primary-darken-1">
-            mdi-crown
+            $crown
           </v-icon>
         </template>
       </v-list-item>
@@ -130,7 +131,7 @@
       >
         <template #prepend>
           <v-icon color="primary-darken-1">
-            mdi-content-duplicate
+            $contentDuplicate
           </v-icon>
         </template>
       </v-list-item>
@@ -140,7 +141,7 @@
       >
         <template #prepend>
           <v-icon color="primary-darken-1">
-            mdi-information
+            $information
           </v-icon>
         </template>
       </v-list-item>
@@ -150,7 +151,7 @@
       >
         <template #prepend>
           <v-icon color="primary-darken-1">
-            mdi-trophy
+            $trophy
           </v-icon>
         </template>
       </v-list-item>

diff --git a/app/javascript/src/components/Player.vue b/app/javascript/src/components/Player.vue
@@ -28,7 +28,7 @@
                 v-if="onlineUsers.includes(player.name)"
                 color="blue"
               >
-                mdi-circle-medium
+                $circleMedium
               </v-icon>
             </template>
             {{ player.name }}

diff --git a/app/javascript/src/components/YourGames.vue b/app/javascript/src/components/YourGames.vue
@@ -32,7 +32,7 @@
                 #prepend
               >
                 <v-btn
-                  icon="mdi-star"
+                  icon="$star"
                   color="yellow"
                 />
               </template>
@@ -52,7 +52,7 @@
                       <v-icon
                         v-if="users.includes(player.name)"
                         color="success"
-                        icon="mdi-circle"
+                        icon="$circle"
                         size="small"
                       />
                       {{ player.name }}
@@ -67,7 +67,7 @@
                     />
                   </v-col>
                   <v-divider class="my-2" />
-                  <span><v-icon icon="mdi-timer-sand" />Time Commitment: {{ timeCommitment(game.timeCommitment) }}</span>
+                  <span><v-icon icon="$timerSand" />Time Commitment: {{ timeCommitment(game.timeCommitment) }}</span>
                 </v-row>
               </v-card-text>
             </v-card>