added inactive reminder

beeracademy · Aug 13, 2024 · e5c8bc5 · e5c8bc5
1 parent b4f2e87
commit e5c8bc5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 27 deletions.
diff --git a/src/components/MemeDialog/index.tsx b/src/components/MemeDialog/index.tsx
@@ -5,12 +5,19 @@ import { GetRandomMemeByTag } from "../../utilities/memes";
 interface MemeDialogProps {
   open: boolean;
   tag?: string;
+  onClose?: () => void;
 }
 
 const MemeDialog: FunctionComponent<MemeDialogProps> = (props) => {
   const [url, setUrl] = useState<string>("");
 
   useEffect(() => {
+    if (!props.open) {
+      setUrl("");
+
+      return;
+    }
+
     (async () => {
       let paramTag = props.tag;
       if (!paramTag) {
@@ -20,10 +27,10 @@ const MemeDialog: FunctionComponent<MemeDialogProps> = (props) => {
       const memeURL = await GetRandomMemeByTag(paramTag);
       setUrl(memeURL);
     })();
-  }, [props.tag]);
+  }, [props.tag, props.open]);
 
   return (
-    <Dialog open={props.open}>
+    <Dialog open={props.open} onClose={props.onClose} onClick={props.onClose}>
       <img src={url} width={500} />
     </Dialog>
   );

diff --git a/src/utilities/memes.ts b/src/utilities/memes.ts
@@ -2,7 +2,12 @@ const API_KEY = "9KNValB7h2YKToE3kHZ9HKQepPH9KqFY";
 
 export async function GetRandomMemeByTag(tag: string): Promise<string> {
   const resp = await fetch(
-    "https://api.giphy.com/v1/gifs/random?api_key=" + API_KEY + "&tag=" + tag,
+    "https://api.giphy.com/v1/gifs/random?api_key=" +
+      API_KEY +
+      "&tag=" +
+      tag +
+      "&t=" +
+      Date.now(),
   );
 
   const { data, errors } = await resp.json();

diff --git a/src/views/Game/components/CardInventory.tsx b/src/views/Game/components/CardInventory.tsx
@@ -5,9 +5,13 @@ import { useCardFlash } from "../../../components/CardFlash";
 import useGame from "../../../stores/game";
 import { useGameMetrics } from "../../../stores/metrics";
 
-interface CardInventoryProps {}
+interface CardInventoryProps {
+  onCardClick?: () => void;
+}
 
-const CardInventory: FunctionComponent<CardInventoryProps> = () => {
+const CardInventory: FunctionComponent<CardInventoryProps> = ({
+  onCardClick,
+}) => {
   const game = useGame((state) => ({
     players: state.players,
     draws: state.draws,
@@ -25,24 +29,6 @@ const CardInventory: FunctionComponent<CardInventoryProps> = () => {
     );
   };
 
-  const drawCard = () => {
-    const [card, cardsLeft] = game.DrawCard();
-
-    // If chug card, don't flash it
-    if (card.value === 14) {
-      cardFlasher.hide();
-      return;
-    }
-
-    // If last card, don't flash it
-    if (cardsLeft === 0) {
-      cardFlasher.hide();
-      return;
-    }
-
-    cardFlasher.flash(card);
-  };
-
   return (
     <Stack
       direction="row"
@@ -59,7 +45,7 @@ const CardInventory: FunctionComponent<CardInventoryProps> = () => {
             key={i}
             kind={valueToSymbol(i + 2)}
             value={empty ? 0 : cardsLeftOfValue(i + 2)}
-            onClick={drawCard}
+            onClick={onCardClick}
           />
         );
       })}

diff --git a/src/views/Game/index.tsx b/src/views/Game/index.tsx
@@ -3,7 +3,9 @@ import { FunctionComponent, useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import useWebSocket from "../../api/websocket";
 import { useCardFlash } from "../../components/CardFlash";
+import MemeDialog from "../../components/MemeDialog";
 import Terminal from "../../components/Terminal";
+import { useSounds } from "../../hooks/sounds";
 import useGame from "../../stores/game";
 import { MetricsStore, useGameMetrics } from "../../stores/metrics";
 import useSettings from "../../stores/settings";
@@ -17,7 +19,8 @@ import PlayerList from "./components/PlayerList";
 import GameTable from "./components/Table";
 
 const GameView: FunctionComponent = () => {
-  const [showTerminal, setShowTerminal] = useState<boolean>(false);
+  const [showTerminal, setShowTerminal] = useState(false);
+  const [showSleepyMeme, setShowSleepyMeme] = useState(false);
 
   const cardFlasher = useCardFlash();
 
@@ -34,6 +37,8 @@ const GameView: FunctionComponent = () => {
 
   const gameMetrics = useGameMetrics();
 
+  const sounds = useSounds();
+
   let spacePressed = false;
 
   const ws = useWebSocket();
@@ -46,6 +51,8 @@ const GameView: FunctionComponent = () => {
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
 
+    scheduleReminderSound();
+
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
@@ -155,6 +162,21 @@ const GameView: FunctionComponent = () => {
     }
 
     cardFlasher.flash(card);
+
+    scheduleReminderSound();
+  };
+
+  let reminderTimerRef: number;
+  const reminderIntervalMs = 1000 * 60 * 15; // 15 minutes
+
+  const scheduleReminderSound = () => {
+    clearTimeout(reminderTimerRef);
+
+    reminderTimerRef = setTimeout(() => {
+      setShowSleepyMeme(true);
+      sounds.play("tryk_paa_den_lange_tast");
+      scheduleReminderSound();
+    }, reminderIntervalMs);
   };
 
   return (
@@ -184,7 +206,7 @@ const GameView: FunctionComponent = () => {
         >
           <Header />
 
-          <CardInventory />
+          <CardInventory onCardClick={drawCard} />
 
           <ChugsList />
 
@@ -228,7 +250,13 @@ const GameView: FunctionComponent = () => {
         }}
       />
 
-      {/* <MemeDialog open={true} tag="bowling meme"/> */}
+      <MemeDialog
+        open={showSleepyMeme}
+        onClose={() => {
+          setShowSleepyMeme(false);
+        }}
+        tag="sleepy boring snoring"
+      />
     </>
   );
 };