BREAKING CHANGE: restructure folder that contains events components

made breaking renames and refactors to implement better naming
conventions for components and types
remove duplicate nested events/events dir

refactored file structure:

events
|
|-- case (contains specific occurrences of a given event)
|
|-- type (categorizes events into 2 types: Basic and Interactive)
|
|-- Card.vue, Container.vue

naming convention for case/ components is: verb + noun/thing (e.g. VotePlayer)

other refactors:
EventClientView -> EventCase
currentEventView -> currentEventCase
clientViewHandler -> eventCaseClientHandler

refs virtualcommons#764

client/src/api/tutorial/steps/events.ts

@@ -35,7 +35,7 @@ const steps: Array<Step> = [
           of this round.)`,
           flavorText: `Create contingencies for your contingencies and contingencies for
           those contingencies. Then prepare to improvise.`,
-          clientViewHandler: "NO_CHANGE" as const,
+          eventCaseClientHandler: "NO_CHANGE" as const,
           duration: 1
         }
       }

client/src/components/game/HUDRight.vue

@@ -51,7 +51,7 @@ import { Vue, Component } from "vue-property-decorator";
 import HUDRightButtons from "@port-of-mars/client/components/game/HUDRightButtons.vue";
 import GameInformation from "./static/panels/GameInformation.vue";
 import PhaseInstructions from "./static/panels/PhaseInstructions.vue";
-import EventCard from "@port-of-mars/client/components/game/phases/events/EventCard.vue";
+import EventCard from "@port-of-mars/client/components/game/phases/events/Card.vue";
 import { Phase } from "@port-of-mars/shared/types";
 import { HUDRightView } from "@port-of-mars/shared/game/client/panes";
 

client/src/components/game/phases/Events.vue

@@ -43,8 +43,8 @@
 
 <script lang="ts">
 import { Component, Inject, Vue, Watch } from "vue-property-decorator";
-import EventCard from "./events/EventCard.vue";
-import EventContainer from "./events/events/EventContainer.vue";
+import EventCard from "@port-of-mars/client/components/game/phases/events/Card.vue";
+import EventContainer from "@port-of-mars/client/components/game/phases/events/Container.vue";
 import AccomplishmentCard from "@port-of-mars/client/components/game/accomplishments/AccomplishmentCard.vue";
 import { MarsEventData, Phase } from "@port-of-mars/shared/types";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";

client/src/components/game/phases/events/EventCard.vue → client/src/components/game/phases/events/Card.vue

@@ -81,15 +81,15 @@
 
 <script lang="ts">
 import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
-import { EventClientView, MarsEventData, Phase } from "@port-of-mars/shared/types";
+import { EventCase, MarsEventData, Phase } from "@port-of-mars/shared/types";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 import EventModal from "@port-of-mars/client/components/game/modals/EventModal.vue";
 import { isUndefined } from "lodash";
 
 @Component({
   components: { EventModal }
 })
-export default class EventCard extends Vue {
+export default class Card extends Vue {
   @Inject() readonly api!: GameRequestAPI;
 
   @Prop({
@@ -117,7 +117,7 @@ export default class EventCard extends Vue {
   currentEventModalId!: string;
 
   //determining which type of events require which interactions
-  eventNoChangeViews: Array<EventClientView> = ["NO_CHANGE", "AUDIT", "DISABLE_CHAT"];
+  eventNoChangeViews: Array<EventCase> = ["NO_CHANGE", "AUDIT", "DISABLE_CHAT"];
   modalIds: string[] = [];
 
   mounted() {
@@ -142,7 +142,7 @@ export default class EventCard extends Vue {
   }
 
   get requiresInteraction() {
-    return !this.eventNoChangeViews.includes(this.event.clientViewHandler);
+    return !this.eventNoChangeViews.includes(this.event.eventCaseClientHandler);
   }
 
   async readyUp() {

client/src/components/game/phases/events/Container.vue

@@ -0,0 +1,47 @@
+<template>
+  <b-container class="h-100" fluid style="color: var(--light-shade)">
+    <b-row align-v="center" class="h-100 w-100">
+      <component :is="type" :case="eventCase"></component>
+    </b-row>
+  </b-container>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+import { MarsEventData, EventCase } from "@port-of-mars/shared/types";
+
+@Component({})
+export default class Container extends Vue {
+  @Prop() event!: MarsEventData;
+  basicCases: Array<EventCase> = ["NO_CHANGE", "AUDIT", "DISABLE_CHAT"];
+
+  interactionCases: Array<EventCase> = [
+    // inventory
+    "DRAW_RESOURCE",
+    "SAVE_RESOURCE",
+    "DISCARD_ACCOMPLISHMENT",
+    // votes
+    "VOTE_YES_NO",
+    "VOTE_PLAYER",
+    "VOTE_HERO_PARIAH"
+  ];
+
+  get eventCase() {
+    return this.event.eventCaseClientHandler;
+  }
+
+  get type(): string {
+    // TODO: NO_CHANGE VIEW (MAYBE)
+    if (this.basicCases.includes(this.eventCase)) {
+      return "Basic";
+    } else if (this.interactionCases.includes(this.eventCase)) {
+      return "Interaction";
+    }
+    return "";
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~animate.css/source/attention_seekers/pulse.css";
+</style>

client/src/components/game/phases/events/events/views/AccomplishmentsSelectPurchased.vue → client/src/components/game/phases/events/case/DiscardAccomplishment.vue

@@ -54,7 +54,7 @@ import _ from "lodash";
     AccomplishmentCard
   }
 })
-export default class AccomplishmentsSelectPurchased extends Vue {
+export default class DiscardAccomplishment extends Vue {
   @Inject() readonly api!: GameRequestAPI;
 
   purchasedAccomplishmentsLength: number = Object.keys(this.purchasedAccomplishments).length;

client/src/components/game/phases/events/events/views/InfluencesDraw.vue → client/src/components/game/phases/events/case/DrawResource.vue

@@ -44,7 +44,7 @@ import { Role, Resource } from "@port-of-mars/shared/types";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 
 @Component({})
-export default class InfluencesDraw extends Vue {
+export default class DrawResource extends Vue {
   drawnInfluence: string = "None Selected";
   @Inject() api!: GameRequestAPI;
 

client/src/components/game/phases/events/events/views/InfluencesSelect.vue → client/src/components/game/phases/events/case/SaveResource.vue

@@ -98,7 +98,7 @@ import TimeBlockMeter from "@port-of-mars/client/components/game/phases/investme
     InvestmentCard
   }
 })
-export default class InfluencesSelect extends Vue {
+export default class SaveResource extends Vue {
   @Inject() readonly api!: GameRequestAPI;
   icon = {
     center: true,

client/src/components/game/phases/events/events/views/VoteForPlayerHeroPariah.vue → client/src/components/game/phases/events/case/VoteHeroPariah.vue

@@ -64,7 +64,7 @@ import { Role, ROLES } from "@port-of-mars/shared/types";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 
 @Component({})
-export default class VoteForPlayerHeroPariah extends Vue {
+export default class VoteHeroPariah extends Vue {
   @Inject() api!: GameRequestAPI;
   voteHeroOrPariah: "hero" | "pariah" | "" = "";
   role: Role | "" = "";

client/src/components/game/phases/events/case/VotePlayer.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="event-vote-for-player-single">
+    <p class="selected-player-title">Selected Player</p>
+    <div class="player-frame-container">
+      <div
+        v-for="member in members"
+        class="player-frame"
+        v-bind:class="{ 'selected-background': member === selectedPlayer }"
+        :key="member + 1"
+      >
+        <img
+          @click="handleSelectPlayer(member)"
+          :src="require(`@port-of-mars/client/assets/characters/${member}.png`)"
+          alt="Player"
+        />
+      </div>
+    </div>
+    <p
+      :style="selectedPlayer === 'None Selected' ? 'color: var(--light-shade-25)' : ''"
+      class="selected-player-text"
+    >
+      {{ selectedPlayer }}
+    </p>
+    <button
+      type="button"
+      name="Submit Button"
+      :disabled="selectedPlayer === null"
+      @click="submitSelectedPlayer"
+    >
+      Done
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Inject } from "vue-property-decorator";
+import { Role, ROLES } from "@port-of-mars/shared/types";
+import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
+import _ from "lodash";
+
+@Component({})
+export default class VotePlayer extends Vue {
+  selectedPlayer: Role | null = null;
+
+  @Inject()
+  api!: GameRequestAPI;
+
+  get members(): Array<Role> {
+    return ROLES;
+  }
+
+  handleSelectPlayer(member: Role): void {
+    this.selectedPlayer = member;
+    console.log("MEMBER: ", this.selectedPlayer);
+  }
+
+  submitSelectedPlayer(): void {
+    if (!_.isNull(this.selectedPlayer)) {
+      console.log("SUBMIT MEMBER: ", this.selectedPlayer);
+      this.api.voteForPhilanthropist(this.selectedPlayer);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@port-of-mars/client/stylesheets/game/phases/events/events/views/VoteForPlayerSingle.scss";
+</style>