refactor: standardize icons and remove dependencies

- fully replaced remaining fa icons with bootstrap equivalents
- standardized icons to use individual components rather than the BIcon
  helper component

* attempt to do some tree shaking and only bundle the bootstrap icons we
  are using failed, need to revisit later

ref #834

client/package.json

@@ -12,10 +12,6 @@
   },
   "dependencies": {
     "@colyseus/schema": "^1.0.9",
-    "@fortawesome/fontawesome-svg-core": "^6.0.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/vue-fontawesome": "^2.0.6",
     "@sentry/browser": "^5.29.2",
     "@sentry/integrations": "^5.29.2",
     "@sentry/tracing": "^5.29.2",
@@ -46,7 +42,6 @@
     "vuex-class-component": "^2.3.5"
   },
   "devDependencies": {
-    "@fortawesome/free-brands-svg-icons": "^6.0.0",
     "@types/blessed": "^0.1.17",
     "@types/howler": "^2.2.4",
     "@types/jest": "^26.0.20",

client/src/components/admin/AdminStatCard.vue

@@ -8,7 +8,7 @@
         <b-row><h5>{{ title }}</h5></b-row>
       </b-col>
       <b-col cols="4" class="pr-0">
-        <b-icon :icon="icon" :variant="variant" font-scale="3"></b-icon>
+        <slot></slot>
       </b-col>
     </b-row>
   </b-container>
@@ -24,12 +24,6 @@ export default class AdminStatCard extends Vue {
 
   @Prop()
   stat!: number;
-
-  @Prop()
-  icon!: string;
-
-  @Prop()
-  variant!: string;
 }
 </script>
 

client/src/components/dashboard/ActionItem.vue

@@ -11,13 +11,13 @@
           :to="actionItem.link.data"
           class="button"
           v-if="isInternal(actionItem.link)">Go
-          <b-icon icon="arrow-right"></b-icon>
+          <b-icon-arrow-right></b-icon-arrow-right>
         </b-button>
         <b-button :href="toUrl(actionItem.link.data)" class="button" v-else>Go
-          <b-icon icon="box-arrow-up-right"></b-icon>
+          <b-icon-box-arrow-up-right></b-icon-box-arrow-up-right>
         </b-button>
-        <b-icon font-scale="3" icon="check-box" v-if="actionItem.done" variant="success"></b-icon>
-        <b-icon font-scale="3" icon="x-circle-fill" v-else variant="warning"></b-icon>
+        <b-icon-check-circle-fill font-scale="3" v-if="actionItem.done" variant="success"></b-icon-check-circle-fill>
+        <b-icon-x-circle-fill font-scale="3" v-else variant="warning"></b-icon-x-circle-fill>
       </div>
     </div>
   </div>

client/src/components/dashboard/Consent.vue

@@ -66,7 +66,7 @@
     </b-collapse>
     <div v-if="isVerified" class="mt-4 align-self-start text-success">
       <p>
-        <b-icon icon="patch-check-fill"></b-icon>
+        <b-icon-patch-check-fill></b-icon-patch-check-fill>
         <small> You have agreed to the consent form and successfully been verified!</small>
       </p>
     </div>
@@ -153,7 +153,7 @@
           </b-form-input>
         </b-form-group>
         <b-alert v-if="!isVerified" variant="warning">
-          <b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon>
+          <b-icon-exclamation-triangle-fill variant="danger"></b-icon-exclamation-triangle-fill>
           Please check your email and click on the link to verify your email.
         </b-alert>
         <b-button

client/src/components/dashboard/Schedule.vue

@@ -32,15 +32,15 @@
             title="add to Google Calendar"
             target="_blank"
           >
-            <font-awesome-icon :icon="['fab', 'google']"></font-awesome-icon>
+            <b-icon-google scale=".8"></b-icon-google>
           </a>
           <a
             class="btn btn-info"
             :href="icsInviteLink(game.addToCalendar)"
             title="download as ics"
             target="_blank"
           >
-            <font-awesome-icon :icon="['fas', 'calendar-plus']"></font-awesome-icon>
+            <b-icon-calendar-plus-fill scale=".8"></b-icon-calendar-plus-fill>
           </a>
         </b-button-group>
       </b-list-group-item>

client/src/components/game/HUDLeftButtons.vue

@@ -43,15 +43,6 @@ import {GameRequestAPI} from '@port-of-mars/client/api/game/request';
 import {HUDLeftView} from '@port-of-mars/shared/game/client/panes';
 import {Phase} from "@port-of-mars/shared/types";
 
-import {library} from '@fortawesome/fontawesome-svg-core';
-import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
-import {faBriefcase} from '@fortawesome/free-solid-svg-icons/faBriefcase';
-import {faStar} from '@fortawesome/free-solid-svg-icons/faStar';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
-
-library.add(faUsers, faBriefcase, faStar);
-Vue.component('font-awesome-icon', FontAwesomeIcon);
-
 @Component({})
 export default class HUDLeftButtons extends Vue {
   @Inject() readonly api!: GameRequestAPI;

client/src/components/game/HUDRightButtons.vue

@@ -7,7 +7,7 @@
         class="hud-button"
         @click="switchCurrentView(view.PhaseInformation)"
       >
-        <font-awesome-icon :icon="['fas', 'info']" class="icon" size="lg" />
+        <b-icon-info-lg scale="1.5"></b-icon-info-lg>
       </button>
     </b-col>
     <b-col cols="3">
@@ -17,12 +17,12 @@
         class="hud-button"
         @click="switchCurrentView(view.ActiveEvents)"
       >
-        <font-awesome-icon :icon="['fas', 'meteor']" class="icon" size="lg" />
+        <b-icon-cloud-lightning-rain scale="1.5"></b-icon-cloud-lightning-rain>
       </button>
     </b-col>
     <b-col cols="3">
       <b-button class="hud-button" v-b-tooltip.hover.top="'Game Manual'" :to="manual" target="_blank">
-        <font-awesome-icon :icon="['fas', 'question-circle']" class="icon mt-2" size="lg" />
+        <b-icon-question-lg scale="1.2" shift-v="-5"></b-icon-question-lg>
       </b-button>
     </b-col>
   </b-row>
@@ -32,16 +32,8 @@
 import { Vue, Component, Inject } from "vue-property-decorator";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 import { HUDRightView } from "@port-of-mars/shared/game/client/panes";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faInfo } from "@fortawesome/free-solid-svg-icons/faInfo";
-import { faMeteor } from "@fortawesome/free-solid-svg-icons/faMeteor";
-import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { MANUAL_PAGE } from "@port-of-mars/shared/routes";
 
-library.add(faMeteor, faInfo, faQuestionCircle);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({})
 export default class HUDRightButtons extends Vue {
   @Inject() readonly api!: GameRequestAPI;
@@ -89,16 +81,6 @@ export default class HUDRightButtons extends Vue {
   &.selected {
     color: $dark-shade;
     background-color: $light-shade;
-
-    .icon {
-      color: $dark-shade;
-    }
-  }
-
-  .icon {
-    height: 50%;
-    width: 50%;
-    color: $light-shade;
   }
 }
 </style>

client/src/components/game/Inventory.vue

@@ -14,12 +14,10 @@
       <!-- costs -->
       <b-col v-if="!hideCosts" v-show="costsVisible" md="4" class="m-0 p-0 text-left">
         <p v-b-tooltip.hover.bottom class="mx-2 my-auto" title="Time Block Cost">
-          {{ canInvest(investment.cost) ? investment.cost : "-" }}
-          <font-awesome-icon
-            :icon="['fas', 'clock']"
-            class="mx-2"
-            style="color: rgb(241, 224, 197)"
-          />
+          <span v-if="canInvest(investment.cost)">
+            {{ investment.cost }} <b-icon-clock-fill class="ml-1"></b-icon-clock-fill>
+          </span>
+          <span v-else>N/A</span>
         </p>
       </b-col>
       <!-- influence -->
@@ -47,18 +45,9 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
 import { Role, RESEARCHER } from "@port-of-mars/shared/types";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
-import { faBriefcase } from "@fortawesome/free-solid-svg-icons/faBriefcase";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { Investment, Resource, RESOURCES, Phase } from "@port-of-mars/shared/types";
 import { Constants } from "@port-of-mars/shared/settings";
 
-library.add(faClock);
-library.add(faBriefcase);
-
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({
   components: {}
 })

client/src/components/game/accomplishments/AccomplishmentCard.vue

@@ -144,17 +144,11 @@ import {
   Resource,
   ResourceAmountData
 } from "@port-of-mars/shared/types";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 import { canPurchaseAccomplishment } from "@port-of-mars/shared/validation";
 import AccomplishmentModal from "@port-of-mars/client/components/game/modals/AccomplishmentModal.vue";
 import * as _ from "lodash";
 
-library.add(faInfoCircle);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({
   components: {
     AccomplishmentModal

client/src/components/game/modals/PlayerModal.vue

@@ -87,14 +87,8 @@ import { Component, Vue, Prop, Inject } from "vue-property-decorator";
 import { Role, Phase } from "@port-of-mars/shared/types";
 import Inventory from "@port-of-mars/client/components/game/Inventory.vue";
 import AccomplishmentCard from "@port-of-mars/client/components/game/accomplishments/AccomplishmentCard.vue";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 
-library.add(faTimes);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({
   components: {
     Inventory,

client/src/components/game/phases/investment/InvestmentCard.vue

@@ -43,9 +43,9 @@
         </b-form-spinbutton>
       </b-col>
       <div class="w-100"></div>
-      <b-col v-if="!cannotPurchase" align-self="end" class="text-left mx-1 p-1">
+      <b-col v-if="!cannotPurchase" align-self="end" class="text-left mx-3 mb-1 p-0">
         <!-- cost -->
-        <font-awesome-icon :icon="['fas', 'clock']" size="lg"></font-awesome-icon>
+        <b-icon-clock-fill scale="1.2"></b-icon-clock-fill>
         <span class="mx-2">{{ cost }}</span>
       </b-col>
       <b-col v-else align-self="end" class="text-left mx-1 p-1">
@@ -56,18 +56,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Inject, Prop, Vue } from "vue-property-decorator";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
-import { faBriefcase } from "@fortawesome/free-solid-svg-icons/faBriefcase";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import { Investment, Resource } from "@port-of-mars/shared/types";
 import { Constants } from "@port-of-mars/shared/settings";
 
-library.add(faClock);
-library.add(faBriefcase);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({})
 export default class InvestmentCard extends Vue {
   @Prop()

client/src/components/game/phases/trade/ActiveTrade.vue

@@ -103,19 +103,9 @@
 <script lang="ts">
 import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
-import { RESOURCES, Role, TradeAmountData } from "@port-of-mars/shared/types";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faExchangeAlt } from "@fortawesome/free-solid-svg-icons/faExchangeAlt";
-import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
-import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
+import { Role, TradeAmountData } from "@port-of-mars/shared/types";
 import { canPlayerMakeTrade } from "@port-of-mars/shared/validation";
 
-library.add(faExchangeAlt);
-library.add(faTimes);
-library.add(faCheck);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({})
 export default class ActiveTrade extends Vue {
   @Inject() api!: GameRequestAPI;

client/src/components/game/static/chat/Chat.vue

@@ -42,25 +42,27 @@
     within the height constraints of b-container -->
     <b-row v-if="!readOnly"
       class="w-100 h-auto align-items-center flex-shrink-1 my-2 mx-auto">
-      <b-col cols="10" class="w-100">
-        <b-form-input
+      <b-col class="w-100 px-0">
+        <b-form-textarea
+          no-resize
+          rows="2"
           :readonly="isMuted"
           ref="chatInputRef"
-          class="h-100 flex-grow-1"
-          style="color: rgb(241, 224, 197); background-color: transparent; font-size: 1rem;"
+          class="h-100 flex-grow-1 backdrop"
+          style="color: rgb(241, 224, 197); font-size: 1rem; padding-right: 2rem;"
           @keydown.enter="submitToChat"
           v-model="pendingMessage"
-          :placeholder="isMuted ? 'You are currently muted' : 'Send a message'"
-        />
-      </b-col>
-      <b-col cols="2" class="w-100 m-0 p-0">
-        <b-button icon :disabled="isMuted" v-b-tooltip.hover="'Send chat message'" @click="submitToChat">
-          <font-awesome-icon
-            :icon="['far', 'paper-plane']"
-            :class="sendBtnClass"
-            size="lg"
-            style="color: rgb(241, 224, 197)"
-          />
+          :placeholder="isMuted ? 'You are currently muted' : 'Type and press enter to send a message'"
+        ></b-form-textarea>
+        <b-button
+          variant="link"
+          size="lg"
+          style="position: relative; float: right; bottom: 50px; margin-bottom: -50px; padding: 0.5rem; color: var(--light)"
+          :disabled="isMuted"
+          v-b-tooltip.hover="'Send chat message'"
+          @click="submitToChat"
+        >
+          <b-icon-cursor></b-icon-cursor>
         </b-button>
       </b-col>
     </b-row>
@@ -80,15 +82,9 @@
 <script lang="ts">
 import { Vue, Prop, Component, Inject } from "vue-property-decorator";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPaperPlane } from "@fortawesome/free-regular-svg-icons/faPaperPlane";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import ChatMessage from "@port-of-mars/client/components/game/static/chat/ChatMessage.vue";
 import ReportButton from "@port-of-mars/client/components/game/static/chat/ReportButton.vue";
 
-library.add(faPaperPlane);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 @Component({
   components: {
     ChatMessage,
@@ -116,14 +112,9 @@ export default class Chat extends Vue {
   }
 
   get pendingMessageCleaned(): string {
-    // TODO: CAN ADD MORE CLEANING AS NECESSARY
-    return this.pendingMessage.trim();
-  }
-
-  get sendBtnClass(): string {
-    return this.pendingMessageCleaned.length === 0
-      ? "chat-input-sendbtn"
-      : "chat-input-sendbtn--ready";
+    return this.pendingMessage
+      .trim()
+      .replace(/(\n)/gm, " ");
   }
 
   get isChatAvailable(): any {
@@ -142,26 +133,14 @@ export default class Chat extends Vue {
     }
   }
 
-  submitToChat(): void {
+  async submitToChat() {
     if (this.pendingMessageCleaned && this.pendingMessageCleaned !== "") {
-      this.api.sendChatMessage(this.pendingMessageCleaned);
+      await this.api.sendChatMessage(this.pendingMessageCleaned);
       this.pendingMessage = "";
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.chat-input-sendbtn {
-  margin: 0 0.5rem;
-  color: $light-accent-25;
-  @include default-transition-base;
-  cursor: pointer;
-
-  &--ready {
-    @extend .chat-input-sendbtn;
-    color: $light-accent;
-    @include default-scale-up;
-  }
-}
 </style>