Leaderboard

Makefile

@@ -109,16 +109,13 @@ settings: $(SENTRY_DSN_PATH) $(SECRET_KEY_PATH) | keys
 	echo 'export const SENTRY_DSN = "${SENTRY_DSN}";' >> $(SHARED_CONFIG_PATH)
 
 
-build: docker-compose.yml settings
-	docker compose build --pull
-
 initialize: build
 	docker compose run --rm server yarn initdb
 
-docker-compose.yml: base.yml staging.base.yml $(ENVIR).yml config.mk $(DB_DATA_PATH) $(DATA_DUMP_PATH) $(LOG_DATA_PATH) $(REDIS_SETTINGS_PATH) $(ORMCONFIG_PATH) $(NUXT_ORMCONFIG_PATH) $(PGPASS_PATH) $(SERVER_ENV) settings
+docker-compose.yml: base.yml $(ENVIR).yml config.mk $(DB_DATA_PATH) $(DATA_DUMP_PATH) $(LOG_DATA_PATH) $(REDIS_SETTINGS_PATH) $(ORMCONFIG_PATH) $(NUXT_ORMCONFIG_PATH) $(PGPASS_PATH) $(SERVER_ENV) settings
 	case "$(ENVIR)" in \
 	  dev) docker compose -f base.yml -f "$(ENVIR).yml" config > docker-compose.yml;; \
-	  staging|prod) docker compose -f base.yml -f staging.base.yml -f "$(ENVIR).yml" config > docker-compose.yml;; \
+	  staging|prod) docker compose -f base.yml -f staging.yml -f "$(ENVIR).yml" config > docker-compose.yml;; \
 	  *) echo "invalid environment. must be either dev, staging or prod" 1>&2; exit 1;; \
 	esac
 

base.yml

@@ -3,7 +3,7 @@ services:
     build:
       context: .
     restart: always
-    image: port-of-mars/server/dev:latest
+    image: port-of-mars/server:dev
     depends_on:
       - redis
       - db
@@ -15,6 +15,7 @@ services:
       - ./keys:/run/secrets
       - ./scripts:/scripts
       - ./server/.env:/code/server/.env
+      - ./.prettierrc:/code/.prettierrc
         #  XXX: nuxt disabled until typeorm + auth support is properly added
         #  https://github.com/virtualcommons/port-of-mars/issues/795
         #  https://github.com/virtualcommons/port-of-mars/issues/809

client/src/api/leaderboard/request.ts

@@ -0,0 +1,33 @@
+import { url } from "@port-of-mars/client/util";
+import { LeaderboardData, PlayerStatItem } from "@port-of-mars/shared/types";
+import { TStore } from "@port-of-mars/client/plugins/tstore";
+import { AjaxRequest } from "@port-of-mars/client/plugins/ajax";
+
+export class LeaderboardAPI {
+  constructor(public store: TStore, public ajax: AjaxRequest) {}
+
+  async getLeaderboardData(limit?: number): Promise<LeaderboardData> {
+    try {
+      const params = limit ? `?limit=${limit}` : "";
+      return await this.ajax.get(url(`/leaderboard${params}`), ({ data }) => {
+        return data;
+      });
+    } catch (e) {
+      console.log("Unable to retrieve leaderboard data");
+      console.log(e);
+      throw e;
+    }
+  }
+
+  async getPlayerStats(): Promise<Array<PlayerStatItem>> {
+    try {
+      return await this.ajax.get(url("/leaderboard/stats"), ({ data }) => {
+        return data;
+      });
+    } catch (e) {
+      console.log("Unable to retrieve player stats");
+      console.log(e);
+      throw e;
+    }
+  }
+}

client/src/components/global/Navbar.vue

@@ -33,6 +33,9 @@
           title="Game Manual"
           >Manual</b-nav-item
         >
+        <b-nav-item class="mx-2" :to="leaderboard" exact-active-class="active" title="Leaderboard"
+          >Leaderboard</b-nav-item
+        >
         <b-nav-item class="mx-2" :to="lobby" exact-active-class="active" title="Game Lobby"
           >Play</b-nav-item
         >
@@ -53,6 +56,7 @@
               <b-icon-person-fill></b-icon-person-fill>
               {{ username }}
             </template>
+            <b-dropdown-item :to="playerStats">My Stats</b-dropdown-item>
             <b-dropdown-item @click="logout">Sign Out</b-dropdown-item>
           </b-nav-item-dropdown>
         </div>
@@ -75,6 +79,8 @@ import {
   MANUAL_PAGE,
   GAME_PAGE,
   LOBBY_PAGE,
+  PLAYER_STATS_PAGE,
+  LEADERBOARD_PAGE,
 } from "@port-of-mars/shared/routes";
 import { isDevOrStaging, Constants } from "@port-of-mars/shared/settings";
 import _ from "lodash";
@@ -100,6 +106,8 @@ export default class Header extends Vue {
   login = { name: LOGIN_PAGE };
   manual = { name: MANUAL_PAGE };
   game = { name: GAME_PAGE };
+  leaderboard = { name: LEADERBOARD_PAGE };
+  playerStats = { name: PLAYER_STATS_PAGE };
   lobby = { name: LOBBY_PAGE };
 
   async created() {

client/src/components/leaderboard/LeaderboardTable.vue

@@ -0,0 +1,109 @@
+<template>
+  <b-table
+    dark
+    sticky-header
+    no-border-collapse
+    fixed
+    striped
+    :style="`max-height: ${maxHeight}`"
+    class="h-100 m-0 custom-table"
+    :fields="showGameStats ? leaderboardFields.concat(gameStatsFields) : leaderboardFields"
+    :items="showWithBots ? leaderboardData.withBots : leaderboardData.withoutBots"
+    sort-by="rank"
+    :sort-asc="true"
+    sort-icon-left
+  >
+    <!-- headers -->
+    <template #head(username)> Player </template>
+    <template #head(points)>
+      Points
+      <small>
+        <b-icon-question-circle id="points-tooltip" class="ml-2" scale="1" />
+      </small>
+      <b-tooltip target="points-tooltip" placement="top" variant="light">
+        The total number of Victory Points a player has earned in games where the entire group
+        survived.
+      </b-tooltip>
+    </template>
+    <template #head(victoryPercentage)>
+      Victory %
+      <small>
+        <b-icon-question-circle id="victory-percentage-tooltip" class="ml-2" scale="1" />
+      </small>
+      <b-tooltip target="victory-percentage-tooltip" placement="top" variant="light">
+        Percentage of games that ended in victory that this player has participated in (not
+        necessarily as the highest scoring player).
+      </b-tooltip>
+    </template>
+    <template #head(totalGames)> Games Played </template>
+    <!-- cells -->
+    <template #cell(rank)="data">
+      {{ "#" + data.item.rank }}
+    </template>
+    <template #cell(victoryPercentage)="data"> {{ getVictoryPercentage(data.item) }}% </template>
+    <template #cell(totalGames)="data">
+      {{ getTotalGamesPlayed(data.item) }}
+    </template>
+  </b-table>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { LeaderboardAPI } from "@port-of-mars/client/api/leaderboard/request";
+import { LeaderboardData } from "@port-of-mars/shared/types";
+
+@Component({})
+export default class Leaderboard extends Vue {
+  @Prop({ default: false }) showWithBots!: boolean;
+  @Prop({ default: 50 }) limit!: number;
+  @Prop({ default: true }) showGameStats!: boolean;
+  @Prop({ default: "none" }) maxHeight!: string;
+
+  api!: LeaderboardAPI;
+
+  leaderboardData: LeaderboardData = {
+    withBots: [],
+    withoutBots: [],
+  };
+  leaderboardFields = [{ key: "rank", sortable: true }, { key: "username" }, { key: "points" }];
+  gameStatsFields = [{ key: "victoryPercentage" }, { key: "totalGames" }];
+
+  async created() {
+    await this.fetchLeaderboardData();
+  }
+
+  async fetchLeaderboardData() {
+    this.api = new LeaderboardAPI(this.$store, this.$ajax);
+    this.leaderboardData = await this.api.getLeaderboardData(this.limit);
+    // highlight top player(s)
+    const noBots = this.leaderboardData.withoutBots;
+    if (noBots && noBots.length > 0) {
+      const topPlayer = noBots[0];
+      const maxPoints = topPlayer.points;
+      for (const player of noBots) {
+        if (player.points < maxPoints) break;
+        // FIXME: look into better color palette
+        (player as any)._rowVariant = "success";
+      }
+    }
+  }
+
+  extractWinsLosses(item: any) {
+    return {
+      wins: parseInt(item.wins),
+      losses: parseInt(item.losses),
+    };
+  }
+
+  getVictoryPercentage(item: any) {
+    const { wins, losses } = this.extractWinsLosses(item);
+    const percentage = (wins / (wins + losses)) * 100;
+    return percentage === 100 ? 100 : percentage.toFixed(0);
+  }
+
+  getTotalGamesPlayed(item: any) {
+    const { wins, losses } = this.extractWinsLosses(item);
+    return wins + losses;
+  }
+}
+</script>

client/src/components/leaderboard/PlayerStatItem.vue

@@ -1,46 +1,52 @@
 <template>
-  <b-container fluid class="h-100 m-0 p-0">
-    <b-row>
-      <b-col>
-        <h4>
-          <b-badge :variant="status === 'Victory' ? 'success' : 'danger'">{{ status }}</b-badge>
-          <!-- Round {{ playerStatItem.round }} -->
-          <span class="float-right">{{ dateString }}</span>
-        </h4>
-        <b-list-group horizontal>
-          <b-list-group-item
-            v-for="playerScore in playerStatItem.playerScores"
-            :key="playerScore.role"
-            class="d-flex flex-fill justify-content-between align-items-center"
-            variant="light"
-          >
-            <span class="score">
-              {{ playerScore.role }}
-              <template v-if="playerScore.isSelf">(YOUR ROLE)</template>
-            </span>
-            <span class="score mx-2">
-              <b-badge pill :variant="getVariant(playerStatItem.victory, playerScore.winner)"
-                >{{ playerScore.points }} points</b-badge
-              >
-            </span>
-          </b-list-group-item>
-        </b-list-group>
-      </b-col>
-    </b-row>
-  </b-container>
+  <b-row>
+    <b-col>
+      <h4>
+        <b-badge class="">{{ formattedDate }} </b-badge>
+      </h4>
+      <b-list-group horizontal class="content-container mb-3">
+        <b-list-group-item :class="status === 'Victory' ? 'bg-success' : 'bg-politician'">
+          <span class="score">
+            {{ status }}
+          </span>
+        </b-list-group-item>
+        <b-list-group-item
+          v-for="playerScore in playerStatItem.playerScores"
+          :key="playerScore.role"
+          class="d-flex flex-fill justify-content-between align-items-center bg-dark"
+        >
+          <span class="score">
+            {{ playerScore.role }}
+            <b-icon-person-check-fill v-if="playerScore.isSelf" />
+          </span>
+          <span class="score mx-2">
+            <b-badge pill :variant="getVariant(playerStatItem.victory, playerScore.winner)"
+              >{{ playerScore.points }} points</b-badge
+            >
+          </span>
+        </b-list-group-item>
+      </b-list-group>
+    </b-col>
+  </b-row>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
-import * as types from "@port-of-mars/shared/types";
+import { PlayerStatItem } from "@port-of-mars/shared/types";
 
 @Component({})
-export default class PlayerStatItem extends Vue {
-  @Prop() private playerStatItem!: types.PlayerStatItem;
+export default class PlayerStatGame extends Vue {
+  @Prop() playerStatItem!: PlayerStatItem;
 
-  get dateString() {
-    const date = new Date(this.playerStatItem.time);
-    return date.toString();
+  get formattedDate() {
+    return new Date(this.playerStatItem.time).toLocaleDateString("en-US", {
+      weekday: "short",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
   }
 
   getActive(victory: boolean, winner: boolean) {

client/src/router.ts

@@ -7,6 +7,8 @@ import Rooms from "@port-of-mars/client/views/admin/Rooms.vue";
 import Reports from "@port-of-mars/client/views/admin/Reports.vue";
 import Settings from "@port-of-mars/client/views/admin/Settings.vue";
 import Login from "@port-of-mars/client/views/#.vue";
+import Leaderboard from "@port-of-mars/client/views/Leaderboard.vue";
+import PlayerStats from "@port-of-mars/client/views/PlayerStats.vue";
 import Lobby from "@port-of-mars/client/views/Lobby.vue";
 import LobbyRoom from "@port-of-mars/client/components/lobby/LobbyRoom.vue";
 import LobbyRoomList from "@port-of-mars/client/components/lobby/LobbyRoomList.vue";
@@ -23,6 +25,8 @@ import {
   LOGIN_PAGE,
   LOBBY_PAGE,
   GAME_PAGE,
+  LEADERBOARD_PAGE,
+  PLAYER_STATS_PAGE,
   REGISTER_PAGE,
   VERIFY_PAGE,
   MANUAL_PAGE,
@@ -66,6 +70,8 @@ const router = new VueRouter({
       ],
     },
     { ...PAGE_META[GAME_PAGE], component: Game },
+    { ...PAGE_META[LEADERBOARD_PAGE], component: Leaderboard },
+    { ...PAGE_META[PLAYER_STATS_PAGE], component: PlayerStats },
     { ...PAGE_META[REGISTER_PAGE], component: Register },
     { ...PAGE_META[VERIFY_PAGE], component: Verify },
     { ...PAGE_META[MANUAL_PAGE], component: Manual },

client/src/stylesheets/main.scss

@@ -197,6 +197,17 @@ button {
   }
 }
 
+.custom-table {
+  @extend .table-dark;
+  th {
+    @extend h4;
+    font-size: 1.1rem;
+  }
+  td {
+    @extend p;
+  }
+}
+
 // override bootstrap-vue dark text
 .text-dark {
   color: $white !important;