Improve performance

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

Hide file tree

Showing 18 changed files with 4,570 additions and 2,800 deletions.
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -14,19 +14,59 @@
 // 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,
+} 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';
@@ -53,11 +93,51 @@ const lightTheme = {
 };
 
 const vuetify = createVuetify({
-  components,
-  directives,
+  components: {
+    VApp,
+    VLayout,
+    VMain,
+    VContainer,
+    VProgressCircular,
+    VDialog,
+    VBtn,
+    VCard,
+    VCardTitle,
+    VCardText,
+    VRow,
+    VCol,
+    VCardActions,
+    VTooltip,
+    VSheet,
+    VToolbar,
+  },
   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>

diff --git a/app/javascript/src/views/Game.vue b/app/javascript/src/views/Game.vue
@@ -6,7 +6,7 @@
     >
       <template #activator="{ props }">
         <v-btn
-          prepend-icon="mdi-help-circle-outline"
+          prepend-icon="$helpCircleOutline"
           variant="plain"
           size="x-large"
           style="position: fixed; z-index: 1; top: calc(100vh - 60px); height: 0px;"
@@ -24,7 +24,7 @@
                   How to Play Imperial
                   <template #append>
                     <v-btn
-                      icon="mdi-close"
+                      icon="$close"
                       @click="rulesDialogFromSidebar = false"
                     />
                   </template>
@@ -75,7 +75,7 @@
         </v-btn>
       </v-col>
       <v-col class="text-right my-auto mx-2">
-        <span><v-icon icon="mdi-timer-sand" /> <b>Time Commitment:</b> {{ timeCommitment(gameData.timeCommitment) }}</span>
+        <span><v-icon icon="$timerSand" /> <b>Time Commitment:</b> {{ timeCommitment(gameData.timeCommitment) }}</span>
       </v-col>
       <v-col
         v-if="playersInGame.length === 1"
@@ -91,7 +91,7 @@
             <v-btn
               class="text-none"
               color="primary"
-              prepend-icon="mdi-book-open-variant"
+              prepend-icon="$bookOpenVariant"
               v-bind="props"
             >
               How do I play Imperial?
@@ -103,7 +103,7 @@
                 How to Play Imperial
                 <template #append>
                   <v-btn
-                    icon="mdi-close"
+                    icon="$close"
                     @click="rulesDialog = false"
                   />
                 </template>
@@ -161,7 +161,7 @@
                     v-bind="props"
                     size="x-large"
                   >
-                    mdi-fullscreen
+                    $fullscreen
                   </v-icon>
                 </template>
               </v-tooltip>
@@ -176,7 +176,7 @@
                     v-bind="props"
                     size="x-large"
                   >
-                    mdi-flag
+                    $flag
                   </v-icon>
                 </template>
               </v-tooltip>
@@ -191,7 +191,7 @@
                     v-bind="props"
                     size="x-large"
                   >
-                    mdi-account-group
+                    $accountGroup
                   </v-icon>
                 </template>
               </v-tooltip>
@@ -206,7 +206,7 @@
                     v-bind="props"
                     size="x-large"
                   >
-                    mdi-script-text-outline
+                    $scriptTextOutline
                   </v-icon>
                 </template>
               </v-tooltip>

diff --git a/app/javascript/src/views/Home.vue b/app/javascript/src/views/Home.vue
@@ -106,4 +106,4 @@ export default {
 };
 </script>
 
-<style src="../assets/tailwind.css" />
+<style src="../assets/styles.css" />