add chug dialog open sound

src/stores/metrics.ts

@@ -18,6 +18,7 @@ interface PlayerMetrics {
   cumulativeSips: number[];
 
   numberOfBeers: number;
+  numberOfChugs: number;
 
   // Only updated in the beginning of a new round
   isLeading: boolean;
@@ -144,6 +145,19 @@ const MetricsStore = create<MetricsState & MetricsActions>()((set, get) => ({
       Math.floor(totalSips / game.sipsInABeer),
     );
 
+    const numberOfChugs = cardsDrawn.reduce<number[]>(
+      (acc, card, index) => {
+        const playerIndex = index % game.players.length;
+
+        if (card.value === 14) {
+          acc[playerIndex]++;
+        }
+
+        return acc;
+      },
+      Array.from({ length: game.players.length }, () => 0),
+    );
+
     const totalTime = game.players.map((_, index) => {
       let duration = 0;
 
@@ -231,6 +245,7 @@ const MetricsStore = create<MetricsState & MetricsActions>()((set, get) => ({
       totalTime: totalTime[index],
 
       numberOfBeers: numberOfBeers[index],
+      numberOfChugs: numberOfChugs[index],
 
       // Only updated in the beginning of a new round, or first time calculating metrics
       ...((currentPlayerIndex === 0 || firstTimeCalculating) &&

src/views/Game/components/ChugDialog.tsx

@@ -12,7 +12,10 @@ import { FunctionComponent, useEffect, useRef, useState } from "react";
 import ReactConfetti from "react-confetti";
 import { useSounds } from "../../../hooks/sounds";
 import { default as useGame } from "../../../stores/game";
-import { useGameMetrics } from "../../../stores/metrics";
+import {
+  useGameMetrics,
+  usePlayerMetricsByIndex,
+} from "../../../stores/metrics";
 import { milisecondsToMMSSsss } from "../../../utilities/time";
 
 const browser = detect();
@@ -24,8 +27,10 @@ const ChugDialog: FunctionComponent<ChugDialogProps> = (props) => {
 
   const game = useGame();
   const metrics = useGameMetrics();
+  const playerMetrics = usePlayerMetricsByIndex(metrics.activePlayerIndex);
 
   const player = game.players[metrics.activePlayerIndex];
+
   const card = metrics.latestCard;
   const started = metrics.chugging && card?.chug_start_start_delta_ms;
 
@@ -36,6 +41,14 @@ const ChugDialog: FunctionComponent<ChugDialogProps> = (props) => {
   const [intervalRef, setIntervalRef] =
     useState<ReturnType<typeof setInterval>>();
 
+  useEffect(() => {
+    if (!props.open) {
+      return;
+    }
+
+    playOpenSound();
+  }, [props.open]);
+
   useEffect(() => {
     if (!started) {
       clearInterval(intervalRef);
@@ -91,6 +104,31 @@ const ChugDialog: FunctionComponent<ChugDialogProps> = (props) => {
     }, 0);
   };
 
+  const playOpenSound = () => {
+    switch (playerMetrics.numberOfChugs) {
+      case 1:
+        sounds.play("mkd_finishim");
+        break;
+      case 2:
+        sounds.play("doublekill");
+        break;
+      case 3:
+        sounds.play("triplekill");
+        break;
+      case 4:
+        sounds.play("ultrakill");
+        break;
+      case 5:
+        sounds.play("megakill");
+        break;
+      case 6:
+        sounds.play("monsterkill");
+        break;
+      default:
+        break;
+    }
+  };
+
   const playFinishSound = () => {
     if (elapsedTime < 5000) {
       //   this.flashService.flashText("FlAWLESS VICTORY!");