barely working offline page

JollyGrin · Mar 30, 2024 · cdd90d8 · cdd90d8
1 parent b55b731
commit cdd90d8
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 12 deletions.
diff --git a/components/Game/game.modal-template.tsx b/components/Game/game.modal-template.tsx
@@ -27,20 +27,24 @@ import { useRouter } from "next/router";
 import { DeckImportCardType } from "../DeckPool/deck-import.type";
 import { flow } from "lodash";
 import { toast } from "react-hot-toast";
+import { WebsocketMessage } from "@/lib/gamesocket/message";
 
 type ModalTemplateType = {
   isOpen: boolean;
   modalType: ModalType;
   setModalType: (type: ModalType) => void;
+  gameState: WebsocketMessage | undefined;
+  setPlayerState: () => (props: { pool: PoolType }) => void;
 };
 export const ModalContainer: React.FC<ModalTemplateType> = ({
   isOpen,
   modalType,
   setModalType,
+  gameState,
+  setPlayerState,
 }) => {
   const isCommit = modalType === "commit";
   const player = useRouter().query?.name as string;
-  const { gameState, setPlayerState } = useWebGame();
   const players = gameState?.content?.players as Record<
     string,
     { pool?: PoolType }
@@ -117,6 +121,7 @@ export const ModalContainer: React.FC<ModalTemplateType> = ({
           }),
         );
 
+  console.log({ modalType, isOpen });
   return (
     <>
       <Modal isOpen={isOpen} onClose={() => !isCommit && onClose()}>

diff --git a/pages/game.tsx b/pages/game.tsx
@@ -54,7 +54,7 @@ const GamePage = () => {
       <WebGameProvider>
         <GameLayout>
           <PositionModal {...positionDisclosure} />
-          <ModalContainer
+          <ModalWrapper
             {...disclosure}
             modalType={modalType}
             setModalType={setModalType}
@@ -83,6 +83,21 @@ const HandWrapper = ({
   );
 };
 
+const ModalWrapper = (props: {
+  isOpen: boolean;
+  modalType: ModalType;
+  setModalType: (type: ModalType) => void;
+}) => {
+  const { gameState, setPlayerState } = useWebGame();
+  return (
+    <ModalContainer
+      {...props}
+      gameState={gameState}
+      setPlayerState={setPlayerState}
+    />
+  );
+};
+
 export default GamePage;
 
 const BoardContainer = ({ self }: { self: string }) => {

diff --git a/pages/offline.tsx b/pages/offline.tsx
@@ -1,11 +1,19 @@
-import { HandContainer } from "@/components/Game";
+import { HandContainer, ModalContainer } from "@/components/Game";
 import { useLocalDeckStorage } from "@/lib/hooks";
-import { Box } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Input,
+  Text,
+  VStack,
+  useDisclosure,
+} from "@chakra-ui/react";
 import { useEffect, useMemo, useState } from "react";
 import { ModalType } from "./game";
 import { PoolType, newPool } from "@/components/DeckPool/PoolFns";
 import { GameState, WebsocketMessage } from "@/lib/gamesocket/message";
-import { DeckImportType } from "@/components/DeckPool/deck-import.type";
 import { useRouter } from "next/router";
 
 const initGamestate: GameState = {
@@ -28,13 +36,17 @@ const Offline = () => {
   const newDeck = useMemo(() => (deck ? newPool(deck) : undefined), [deck]);
 
   const [gameState, setGameState] = useState<WebsocketMessage>(init);
+  const players = gameState?.content?.players as Record<
+    string,
+    { pool?: PoolType }
+  >;
+  const playerState = players?.["offline"]?.pool;
 
-  const [modalType, setModalType] = useState<ModalType>();
+  const [modalType, setModalType] = useState<ModalType>(false);
+  const disclosure = useDisclosure();
 
   function setPlayerState() {
-    console.log("1");
     return (props: { pool: PoolType }) => {
-      console.log("2");
       setGameState((prev) => ({
         ...prev,
         content: {
@@ -57,14 +69,64 @@ const Offline = () => {
     setPlayerState()({ pool: newDeck });
   }, [newDeck]);
 
+  useEffect(() => {
+    if (modalType) {
+      disclosure.onOpen();
+    } else {
+      disclosure.onClose();
+    }
+  }, [modalType, disclosure]);
+
   return (
-    <Box h="100vh" bg="brand.primary">
-      <HandContainer
-        setModal={setModalType}
+    <>
+      <ModalContainer
+        {...disclosure}
+        modalType={modalType}
+        setModalType={setModalType}
         setPlayerState={setPlayerState}
         gameState={gameState}
       />
-    </Box>
+      <Box h="100vh" bg="brand.primary">
+        <HandContainer
+          setModal={setModalType}
+          setPlayerState={setPlayerState}
+          gameState={gameState}
+        />
+        <Box p="0.5rem">
+          <HStack gap="0.5rem">
+            <Text>{playerState?.hero?.name}</Text>
+            <Text>hp:{playerState?.hero?.hp}</Text>
+            <Text>move:{playerState?.hero?.move}</Text>
+            <Text>{playerState?.hero?.isRanged ? "Ranged" : "Melee"}</Text>
+          </HStack>
+          <HStack gap="0.5rem">
+            <Text>{playerState?.sidekick?.name}</Text>
+            <Text>hp:{playerState?.sidekick?.hp}</Text>
+            <Text>quantity:{playerState?.sidekick?.quantity}</Text>
+            <Text>{playerState?.sidekick?.isRanged ? "Ranged" : "Melee"}</Text>
+          </HStack>
+          <Text>{playerState?.hero?.specialAbility}</Text>
+          <Text>{playerState?.sidekick?.quote}</Text>
+          <Divider my="1rem" />
+          <HpButton state={playerState?.hero?.hp ?? 0} />
+          <HpButton state={playerState?.sidekick?.hp ?? 0} />
+          <HpButton state={0} />
+          <HpButton state={0} />
+          <HpButton state={0} />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+const HpButton = (props: { state?: number }) => {
+  const [hp, setHp] = useState(props?.state ?? 0);
+  return (
+    <HStack my="0.25rem">
+      <Button onClick={() => setHp((prev) => prev - 1)}>-</Button>
+      <Input maxW="5rem" isDisabled value={hp} />
+      <Button onClick={() => setHp((prev) => prev + 1)}>+</Button>
+    </HStack>
   );
 };