Disable help

Author: aedans

client/game/Explanations.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect } from "react";
 import { Dispatch, MutableRefObject, SetStateAction, useContext, useEffect, useRef, useState } from "react";
 import { Explanation, explain, isExplained, keywordExplanations, setExplained } from "../explain.js";
 import { useClientSelector } from "../store.js";
-import { CacheContext, HelpContext, HighlightContext, PlayerContext } from "./Game.js";
+import { CacheContext, HighlightContext, PlayerContext } from "./Game.js";
 import Rectangle from "../Rectangle.js";
 import { Container } from "@pixi/react-animated";
 import { Spring } from "react-spring";
@@ -115,41 +115,21 @@ export function ExplanationPopup(props: ExplanationProps) {
 export default function Explanations() {
   const player = useContext(PlayerContext);
   const cache = useContext(CacheContext);
-  const { help } = useContext(HelpContext);
   const game = useClientSelector((state) => state.game);
   const [clickExplanations, setClickExplanations] = useState([] as Explanation[]);
-  const [tempExplanations, setTempExplanations] = useState([] as Explanation[]);
 
   useEffect(() => {
     const newExplanations = explain(cache, game, player).filter((e) => !isExplained(e));
     setClickExplanations((es) => [...es, ...newExplanations.filter((e1) => !es.find((e2) => e1.text == e2.text))]);
   }, [game]);
 
-  useEffect(() => {
-    if (help != null) {
-      setTempExplanations(
-        keywordExplanations.filter((e) =>
-          e.relevantCards(cache, game, player, true).some((c) => c.id == help.id)
-        )
-      );
-    } else {
-      setTimeout(() => {
-        setTempExplanations([]);
-      }, 300);
-    }
-  }, [help]);
-
   const clicks = clickExplanations.map((e, i) => (
     <ExplanationPopup explanation={e} setClickExplanations={setClickExplanations} index={i} key={`click-${e.id}`} />
   ));
 
-  const temps = tempExplanations.map((e, i) => (
-    <ExplanationPopup explanation={e} help={help} index={clickExplanations.length + i} key={`temp-${e.id}`} />
-  ));
-
   return (
     <Container x={targetResolution.width - explanationWidth} zIndex={10000}>
-      {[...clicks, ...temps]}
+      {clicks}
     </Container>
   );
 }

client/game/Game.tsx

@@ -34,13 +34,6 @@ export const ConnectionContext = React.createContext(
   }
 );
 
-export const HelpContext = React.createContext(
-  {} as {
-    help: null | CardState;
-    setHelp: Dispatch<SetStateAction<null | CardState>>;
-  }
-);
-
 export const HighlightContext = React.createContext(
   {} as {
     highlight: Target[];
@@ -71,31 +64,29 @@ export default function Game(props: { message: string }) {
 
   return (
     <DndProvider backend={PIXIBackend(app)}>
-      <HelpContext.Provider value={{ help, setHelp }}>
-        <CacheContext.Provider value={cache.current}>
-          <CardAnimationContext.Provider value={cards}>
-            <HighlightContext.Provider value={{ highlight, setHighlight }}>
-              <PlanContext.Provider value={{ plan, setPlan }}>
-                <Container filters={[timeColorFilterRef.current]} sortableChildren>
-                  <Table />
-                  <OpponentBoard />
-                  <Board />
-                  <EndTurn />
-                  <OpponentGrave />
-                  <Grave />
-                  <Plan />
-                  <OpponentHand />
-                  <HandAndDeck />
-                  <Resources />
-                  <Concede />
-                  <Explanations />
-                  <Message text={props.message} />
-                </Container>
-              </PlanContext.Provider>
-            </HighlightContext.Provider>
-          </CardAnimationContext.Provider>
-        </CacheContext.Provider>
-      </HelpContext.Provider>
+      <CacheContext.Provider value={cache.current}>
+        <CardAnimationContext.Provider value={cards}>
+          <HighlightContext.Provider value={{ highlight, setHighlight }}>
+            <PlanContext.Provider value={{ plan, setPlan }}>
+              <Container filters={[timeColorFilterRef.current]} sortableChildren>
+                <Table />
+                <OpponentBoard />
+                <Board />
+                <EndTurn />
+                <OpponentGrave />
+                <Grave />
+                <Plan />
+                <OpponentHand />
+                <HandAndDeck />
+                <Resources />
+                <Concede />
+                <Explanations />
+                <Message text={props.message} />
+              </Container>
+            </PlanContext.Provider>
+          </HighlightContext.Provider>
+        </CardAnimationContext.Provider>
+      </CacheContext.Provider>
     </DndProvider>
   );
 }

client/game/GameCard.tsx

@@ -11,7 +11,7 @@ import React, {
 import { useDrop } from "react-dnd";
 import { CardColors, CardState } from "../../common/card.js";
 import { cardHeight, cardWidth, combineColors, isCardPropsEqual } from "../Card.js";
-import { CacheContext, CosmeticContext, HelpContext, HighlightContext, PlanContext } from "./Game.js";
+import { CacheContext, CosmeticContext, HighlightContext, PlanContext } from "./Game.js";
 import { getCard } from "../../common/gameSlice.js";
 import { useClientSelector } from "../store.js";
 import { hex } from "../color.js";
@@ -49,7 +49,6 @@ export default React.memo(
     const cache = useContext(CacheContext);
     const { highlight } = useContext(HighlightContext);
     const cosmetics = useContext(CosmeticContext);
-    const { setHelp } = useContext(HelpContext);
     const { setPlan } = useContext(PlanContext);
     const componentRef = useRef() as MutableRefObject<PixiContainer>;
     const [zoom, setZoom] = useState(false);
@@ -77,11 +76,6 @@ export default React.memo(
 
     useEffect(() => {
       drop(componentRef);
-
-      return () => {
-        isMousedOver = false;
-        setHelp(null);
-      };
     }, []);
 
     const borderColors: CardColors[] = [];
@@ -110,18 +104,10 @@ export default React.memo(
 
     const shouldHighlight = (highlight?.findIndex((h) => h.id == props.state.id) ?? -1) != -1;
 
-    let isMousedOver = false;
-
     const pointerover = useCallback(
       (e) => {
         props.pointerover?.(e);
         setZoom(true);
-        isMousedOver = true;
-        setTimeout(() => {
-          if (isMousedOver) {
-            setHelp(props.state);
-          }
-        }, 1000);
       },
       [props.pointerover]
     );
@@ -130,8 +116,6 @@ export default React.memo(
       (e) => {
         props.pointerout?.(e);
         setZoom(false);
-        isMousedOver = false;
-        setHelp(null);
       },
       [props.pointerout]
     );