Fix infinity symbols looking terrible in ui

ateam_ui/src/package.json

@@ -21,6 +21,7 @@
     "@types/node": "^20.1.3",
     "@types/roslib": "^1.3.1",
     "@babel/types": "^7.21.5",
+    "@mdi/font": "^7.4.47",
     "typescript": "^4.9.5",
     "@vue/tsconfig": "0.1.3",
     "@vitejs/plugin-vue": "^4.2.3",

ateam_ui/src/src/components/PlaybookComponent.vue

@@ -23,6 +23,7 @@
                             <div>{{ name }}</div>
                             <v-spacer class="pr-3"/>
                             <div>{{ this.displayScore(play.score) }}</div>
+                            <v-icon v-if="this.isScoreInf(play.score)" icon="mdi-infinity" class="mx-0 pl-1 justify-center" size="small"/>
                         </v-row>
                     </v-container>
                 </v-list-item>
@@ -47,6 +48,7 @@ import { AIState } from "@/AI";
 import { Play } from "@/play";
 import { Referee, GameStage, GameCommand} from "@/referee";
 import AIRecursiveComponent from "./AIRecursiveComponent.vue";
+import '@mdi/font/css/materialdesignicons.css'
 
 export default {
     inject: ['state'],
@@ -76,15 +78,22 @@ export default {
                 return "NaN";
             } else if (score == Number.MAX_VALUE) {
                 // Infinity symbol
-                return "\u221E";
+                return "";
             } else if (score == -Number.MAX_VALUE) {
                 // Negative Infinity symbol
-                return "-\u221E";
+                return "-";
             } else {
                 // Round to 2 decimal places
                 return score.toFixed(2);
             }
         },
+        isScoreInf(score: number){
+            if (score == Number.MAX_VALUE || score == -Number.MAX_VALUE) {
+                return true
+            } else {
+                return false
+            }
+        },
         setListSelectedPlay() {
             if (this.state.selected_play_name == "") {
                 this.selectedPlay = [];

ateam_ui/src/src/plugins/vuetify.js

@@ -1,5 +1,6 @@
 import 'vuetify/styles';
 import { createVuetify } from 'vuetify';
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
 
 
 export default createVuetify({
@@ -16,6 +17,10 @@ export default createVuetify({
         }
     },
     icons: {
-        iconfont: 'mdi'
+        defaultSet: 'mdi',
+        aliases,
+        sets: {
+            mdi
+        }
     }
 });

ateam_ui/src/yarn.lock

@@ -141,6 +141,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@mdi/font@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
+  integrity sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==
+
 "@pixi/accessibility@7.2.4":
   version "7.2.4"
   resolved "https://registry.yarnpkg.com/@pixi/accessibility/-/accessibility-7.2.4.tgz#3198d0059c230c668b1179457346a3b5dcba6e64"