Merge pull request #908 from sgfost/tournament-lobby

finalize tournament lobby +  add variable event cards

client/src/api/admin/request.ts

@@ -6,6 +6,7 @@ import {
   ModerationActionData,
   InspectData,
   DynamicSettingsData,
+  LobbyActivityData,
 } from "@port-of-mars/shared/types";
 import { TStore } from "@port-of-mars/client/plugins/tstore";
 import { AjaxRequest } from "@port-of-mars/client/plugins/ajax";
@@ -83,7 +84,7 @@ export class AdminAPI {
     }
   }
 
-  async getLobbyData(): Promise<any> {
+  async getLobbyData(): Promise<LobbyActivityData> {
     try {
       return await this.ajax.get(url("/admin/lobby"), ({ data }) => {
         return data;

client/src/api/game/response.ts

@@ -5,6 +5,7 @@ import {
   AccomplishmentPurchaseData,
   ChatMessageData,
   GameData,
+  GameType,
   MarsEventData,
   MarsLogMessageData,
   Phase,
@@ -292,6 +293,10 @@ export function applyGameServerResponses(room: Room, store: TStore, sfx: SfxMana
         const heroOrPariah: "hero" | "pariah" = change.value;
         store.commit("SET_HERO_OR_PARIAH", heroOrPariah);
       }
+      if (change.field === "type") {
+        const gameType: GameType = change.value;
+        store.commit("SET_GAME_TYPE", gameType);
+      }
     });
   };
 }

client/src/components/global/TournamentOnboardingSteps.vue

@@ -34,6 +34,9 @@
         >
       </div>
     </div>
+    <b-button v-if="isDevMode" variant="link" :href="skipSurveyUrl"
+      >Skip survey (test mode)</b-button
+    >
     <div class="line"></div>
     <div class="d-flex align-items-center">
       <div class="flex-shrink-1 mr-5">
@@ -58,13 +61,15 @@
 import { CONSENT_PAGE, MANUAL_PAGE } from "@port-of-mars/shared/routes";
 import { TournamentRoundInviteStatus } from "@port-of-mars/shared/types";
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { Constants } from "@port-of-mars/shared/settings";
+import { Constants, isDevOrStaging } from "@port-of-mars/shared/settings";
+import { url } from "@port-of-mars/client/util";
 
 @Component({})
 export default class TournamentOnboardingSteps extends Vue {
   @Prop()
   invite!: TournamentRoundInviteStatus;
 
+  isDevMode = false;
   consent = { name: CONSENT_PAGE };
   manual = { name: MANUAL_PAGE };
 
@@ -79,6 +84,14 @@ export default class TournamentOnboardingSteps extends Vue {
   get hasConsented() {
     return this.$store.getters.hasConsented;
   }
+
+  get skipSurveyUrl() {
+    return url(`/tournament/survey/complete?tid=${this.invite.id}`);
+  }
+
+  created() {
+    this.isDevMode = isDevOrStaging();
+  }
 }
 </script>
 

client/src/components/lobby/LobbyChat.vue

@@ -6,12 +6,23 @@
         :key="msg.username + msg.dateCreated"
         class="mt-2 backdrop rounded p-1"
       >
-        <p class="mb-0">
+        <p class="mb-0 text-break">
           <b class="text-light">{{ msg.username }}: </b>
           <span class="text-secondary">{{ msg.message }}</span>
         </p>
       </div>
     </div>
+    <p class="m-3" v-if="showConductWarning">
+      Chat messages may be recorded. Please adhere to the
+      <b
+        ><a
+          target="_blank"
+          href="https://github.com/virtualcommons/port-of-mars/wiki/Port-of-Mars-Chat-Code-of-Conduct"
+        >
+          Port of Mars Code of Conduct
+        </a></b
+      >
+    </p>
     <div id="input" class="flex-shrink-1">
       <b-form @submit.stop.prevent="submitToChat" class="p-2" inline>
         <b-form-input
@@ -41,6 +52,7 @@ export default class LobbyChat extends Vue {
   @Prop() messages!: Array<LobbyChatMessageData>;
 
   pendingMessage: string = "";
+  showConductWarning = true;
 
   get reversedMessages(): Array<LobbyChatMessageData> {
     return this.messages.slice().reverse();
@@ -62,6 +74,7 @@ export default class LobbyChat extends Vue {
   }
 
   async submitToChat() {
+    this.showConductWarning = false;
     if (this.pendingMessageCleaned && this.pendingMessageCleaned !== "") {
       await this.api.sendChatMessage(this.pendingMessageCleaned);
       this.pendingMessage = "";

client/src/components/root/GameOver.vue

@@ -29,7 +29,19 @@
           </b-list-group-item>
         </b-list-group>
         <h4 class="mt-5">Thank you for participating!</h4>
-        <b-button block class="w-100" variant="success" size="lg" :to="freePlayLobby">
+        <b-button
+          v-if="isTournament"
+          block
+          class="w-100"
+          variant="success"
+          size="lg"
+          :href="exitSurveyUrl"
+          :disabled="!exitSurveyUrl"
+        >
+          <h4 class="mb-0" v-if="exitSurveyUrl">Take Exit Survey</h4>
+          <h4 class="mb-0" v-else><b-spinner></b-spinner></h4>
+        </b-button>
+        <b-button v-else block class="w-100" variant="success" size="lg" :to="freePlayLobby">
           <b-icon-chevron-left shift-v="-2" class="float-left"></b-icon-chevron-left>
           <h4 class="mb-0">Return to Lobby</h4>
         </b-button>
@@ -59,11 +71,12 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import { FREE_PLAY_LOBBY_PAGE } from "@port-of-mars/shared/routes";
+import { FREE_PLAY_LOBBY_PAGE, TOURNAMENT_DASHBOARD_PAGE } from "@port-of-mars/shared/routes";
 import { Phase, Role } from "@port-of-mars/shared/types";
 import MarsLog from "@port-of-mars/client/components/game/MarsLog.vue";
 import SocialShare from "@port-of-mars/client/components/global/SocialShare.vue";
 import _ from "lodash";
+import { TournamentAPI } from "@port-of-mars/client/api/tournament/request";
 
 @Component({
   components: {
@@ -73,6 +86,11 @@ import _ from "lodash";
 })
 export default class Victory extends Vue {
   freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
+  tournamentDashboard = { name: TOURNAMENT_DASHBOARD_PAGE };
+
+  tournamentAPI!: TournamentAPI;
+
+  exitSurveyUrl: string | null = null;
 
   get players() {
     return _.orderBy(this.$tstore.state.players, ["victoryPoints"], ["desc"]);
@@ -94,12 +112,26 @@ export default class Victory extends Vue {
     return this.phase === Phase.victory;
   }
 
+  get isTournament() {
+    return this.$tstore.state.gameType === "tournament";
+  }
+
   get victoryPoints() {
     return this.playerRole ? this.$tstore.state.players[this.playerRole].victoryPoints : 0;
   }
 
   roleLabel(role: Role) {
     return role === this.playerRole ? `${role} (Your Role)` : role;
   }
+
+  async created() {
+    this.tournamentAPI = new TournamentAPI(this.$tstore, this.$ajax);
+    if (this.isTournament) {
+      const invite = await this.tournamentAPI.getInviteStatus();
+      if (invite) {
+        this.exitSurveyUrl = invite.exitSurveyUrl;
+      }
+    }
+  }
 }
 </script>

client/src/store/mutations/gameState.ts

@@ -1,4 +1,4 @@
-import { MarsEventData, Phase, Role } from "@port-of-mars/shared/types";
+import { GameType, MarsEventData, Phase, Role } from "@port-of-mars/shared/types";
 import { Vue } from "vue-property-decorator";
 import * as _ from "lodash";
 import { State, User } from "@port-of-mars/shared/game/client/state";
@@ -91,6 +91,10 @@ function SET_HERO_OR_PARIAH(state: State, vote: "hero" | "pariah") {
   state.heroOrPariah = vote;
 }
 
+function SET_GAME_TYPE(state: State, type: GameType) {
+  state.gameType = type;
+}
+
 export default {
   SET_GAME_PHASE,
   SET_ROUND,
@@ -105,5 +109,6 @@ export default {
   SET_USER,
   SET_WINNERS,
   SET_HERO_OR_PARIAH,
+  SET_GAME_TYPE,
   TOGGLE_LOADING,
 };

client/src/stylesheets/bootstrap-customize.scss

@@ -2,8 +2,11 @@ $enable-rounded: true;
 
 // Custom Sizes
 
+// generates utility classes like w-10 (width: 10%), mh-40 (max-height: 40%), etc.
 $sizes: (
+  "10" : 10%,
   "30" : 30%,
+  "40" : 40%,
   "70" : 70%,
 );
 

client/src/views/FreePlayLobby.vue

@@ -68,7 +68,7 @@ export default class FreePlayLobby extends Vue {
   }
 
   async rejoinIfActiveGame() {
-    await this.$ajax.get(url("/game/has-active"), ({ data, status }) => {
+    await this.$ajax.get(url("/game/has-active?type=freeplay"), ({ data, status }) => {
       if (status === 200 && data === true) {
         this.$router.push(this.game);
       }

client/src/views/TournamentDashboard.vue

@@ -48,7 +48,7 @@
             </span>
             <span v-else></span>
           </div>
-          <div v-else class="h-100 d-flex flex-column justify-content-around align-items-center">
+          <div v-else class="h-100 d-flex flex-column justify-content-center align-items-center">
             <b-alert show v-if="loaded" variant="danger" class="mx-5">
               <h4><b-icon-exclamation-circle></b-icon-exclamation-circle></h4>
               <span v-if="invite?.hasParticipated">
@@ -62,6 +62,14 @@
               </span>
             </b-alert>
             <b-spinner v-else></b-spinner>
+            <b-button
+              v-if="invite?.hasParticipated && !invite.hasCompletedExitSurvey"
+              variant="success"
+              size="lg"
+              :href="invite.exitSurveyUrl"
+            >
+              <h4 class="mb-0">Take Exit Survey</h4>
+            </b-button>
           </div>
         </b-col>
       </b-row>

client/src/views/TournamentLobby.vue

@@ -55,6 +55,7 @@ import {
   MANUAL_PAGE,
   TOURNAMENT_DASHBOARD_PAGE,
 } from "@port-of-mars/shared/routes";
+import { url } from "@port-of-mars/client/util";
 import { Constants } from "@port-of-mars/shared/settings";
 import Countdown from "@port-of-mars/client/components/global/Countdown.vue";
 import HelpPanel from "@port-of-mars/client/components/lobby/HelpPanel.vue";
@@ -94,6 +95,7 @@ export default class TournamentLobby extends Vue {
   }
 
   async created() {
+    await this.rejoinIfActiveGame();
     try {
       const room = await this.$client.joinOrCreate(TOURNAMENT_LOBBY_NAME);
       applyLobbyResponses(room, this, "tournament");
@@ -103,6 +105,14 @@ export default class TournamentLobby extends Vue {
     }
   }
 
+  async rejoinIfActiveGame() {
+    await this.$ajax.get(url("/game/has-active?type=tournament"), ({ data, status }) => {
+      if (status === 200 && data === true) {
+        this.$router.push(this.game);
+      }
+    });
+  }
+
   beforeDestroy() {
     this.api.leave();
     this.$tstore.commit("RESET_LOBBY_STATE");

client/src/views/admin/Games.vue

@@ -68,6 +68,17 @@
               sort-by="dateFinalized"
               :sort-desc="true"
             >
+              <template #cell(tournamentRound)="data">
+                <b-badge
+                  variant="secondary"
+                  v-if="data.item.tournamentRound.tournament.name === 'freeplay'"
+                  >Freeplay</b-badge
+                >
+                <b-badge variant="primary" v-else>
+                  {{ data.item.tournamentRound.tournament.name }}
+                  (Round {{ data.item.tournamentRound.roundNumber }})
+                </b-badge>
+              </template>
               <template #cell(dateFinalized)="data">
                 {{ new Date(data.item.dateFinalized).toDateString() }}
               </template>
@@ -108,7 +119,7 @@
         </b-col>
         <!-- players -->
         <b-col v-if="showPlayers" cols="5" class="mh-100 p-2">
-          <h4 class="header-nowrap">Game #{{ this.players[0].gameId }} Scoreboard</h4>
+          <h4 class="header-nowrap">Game #{{ players[0].gameId }} Scoreboard</h4>
           <div class="h-100-header w-100 content-container">
             <b-table
               dark
@@ -174,7 +185,7 @@ export default class Games extends Vue {
   games: any = [];
   gameFields = [
     { key: "id", label: "Game ID" },
-    { key: "tournamentRoundId", label: "Round" },
+    { key: "tournamentRound", label: "Tournament" },
     { key: "dateFinalized", label: "Date" },
     { key: "status", label: "Status" },
     { key: "players", label: "Players" },