Merge pull request #50 from JollyGrin/preview-cards/add-release-notes

Preview cards/add release notes

README.md

@@ -19,6 +19,7 @@ Find instructions if you wish to setup your own game server.
 
 
 ## Feature ideas
+- [x] full preview of cards in grid cell
 - [ ] support 4players
 - [ ] support battlebox (shared deck)
 - [ ] draft mode

notes/2024-10-13.md

@@ -0,0 +1,3 @@
+
+#### 12:57
+- i updated the view so you can see full cards on grid

src/components/atoms/KeyboardKey/index.tsx

@@ -0,0 +1,15 @@
+export const KeyboardKey = (props: { children: string }) => {
+  return (
+    <span
+      style={{
+        borderRadius: "0.25rem",
+        background: "rgba(0,0,0,0.2)",
+        padding: "2px 6px",
+        fontFamily: "monospace",
+        borderBottom: "solid 1px black",
+      }}
+    >
+      {props.children}
+    </span>
+  );
+};

src/components/molecules/CommandModal/Command.tsx

@@ -9,6 +9,7 @@ import {
   ActionRollDice,
   ActRotateEnemyCards,
   ActScryX,
+  ActToggleDisplayCards,
   ActUntapAll,
   ActViewCemetary,
 } from "./Commands";
@@ -41,6 +42,7 @@ export const Command = (props: GameStateActions & PlayerDataProps) => {
             return <ActScryX {...props} deckType="atlas" />;
           if (id === "view_cemetary") return <ActViewCemetary />;
           if (id === "rotate_enemy") return <ActRotateEnemyCards />;
+          if (id === "toggle_display") return <ActToggleDisplayCards />;
 
           return <Box>No action setup</Box>;
         }}

src/components/molecules/CommandModal/Commands.tsx

@@ -6,7 +6,7 @@ import {
   LOCALSTORAGE_KEYS,
 } from "@/components/organisms/GameBoard/constants";
 import { Button } from "@/components/ui/button";
-import { PlayerDataProps } from "@/types/card";
+import { GridItem, PlayerDataProps } from "@/types/card";
 import {
   actDeckMoveToBottom,
   actDeckMoveToTop,
@@ -22,6 +22,7 @@ import { GiPirateGrave as IconGrave } from "react-icons/gi";
 import { useLocalStorage } from "@/utils/hooks";
 import { CardImage } from "@/components/atoms/mock-cards/card";
 import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
+import { AltGridDisplay } from "@/components/organisms/GameBoard/Grid/AltGridDisplay";
 
 export const actions = [
   {
@@ -60,6 +61,10 @@ export const actions = [
     value: "rotate_enemy",
     label: "Rotate enemy cards on grid",
   },
+  {
+    value: "toggle_display",
+    label: "Display full/minimized cards view",
+  },
 ] as const;
 export type ActionIds = (typeof actions)[number]["value"];
 
@@ -292,3 +297,75 @@ export const ActRotateEnemyCards = () => {
     </Box>
   );
 };
+
+/**
+ * Toggles the view on GridCells
+ * true = shows display
+ * false = maintains minimized view
+ * */
+export const ActToggleDisplayCards = () => {
+  const { query } = useRouter();
+  const name = query.name as string;
+  const { key, ...options } = LOCALSTORAGE_KEYS.SETTINGS.DISPLAY.toggle;
+  const [isDisplay, setIsDisplay] = useLocalStorage(key, false, options);
+
+  return (
+    <Box>
+      <p>Toggle between full view of cards on the grid or minimized view.</p>
+      <Box
+        className={css({
+          bg: "rgba(0,100,200,0.1)",
+          my: "1rem",
+          padding: "1rem",
+          border: "solid 2px",
+          borderColor: "rgba(0,100,200,0.3)",
+          borderRadius: "0.25rem",
+        })}
+      >
+        <p>
+          View will always switch to minimized view on drag/hover for
+          positioning
+        </p>
+      </Box>
+      <Box>
+        <p>Toggle card view</p>
+        <Button onClick={() => setIsDisplay(!isDisplay)}>
+          {isDisplay ? "Show min card view" : "Show full card"}
+        </Button>
+      </Box>
+
+      <Grid gridTemplateColumns="1fr 1fr" w="100%" minH="200px">
+        <div />
+        {isDisplay ? (
+          <AltGridDisplay
+            onMouseOver={() => {}}
+            cards={mockCards.map((card) => ({ ...card, playerName: name }))}
+            myName={name as string}
+          />
+        ) : (
+          <VStack>
+            {mockCards?.map((card, index) => {
+              const CardType = card.type === "site" ? CardAtlas : CardImage;
+              return (
+                <CardType key={card.img + index} img={card.img} isMine={true} />
+              );
+            })}
+          </VStack>
+        )}
+      </Grid>
+    </Box>
+  );
+};
+
+const mockCards: GridItem = [
+  {
+    id: "1",
+    img: "flamecaller",
+    type: "avatar",
+  },
+  {
+    id: "3",
+    img: "red_desert",
+    type: "site",
+  },
+];

src/components/molecules/CommandModal/index.tsx

@@ -6,14 +6,26 @@ import { Command } from "./Command";
 import { useEffect, useState } from "react";
 import { PlayerDataProps } from "@/types/card";
 import { useRouter } from "next/router";
+import { LOCALSTORAGE_KEYS } from "@/components/organisms/GameBoard/constants";
+import { useLocalStorage } from "@/utils/hooks";
+import { ReleaseNoteBody } from "../ReleaseNotes";
 
 export const CommandModalWrapper = ({
   children,
   ...props
 }: Children & GameStateActions & PlayerDataProps) => {
+  // untap all cards with key u
   useUntapAllListener(props);
+
+  // command modal disclosure
   const { isOpen, onClose } = useDisclosure();
 
+  const { key, ...options } =
+    LOCALSTORAGE_KEYS.DISCLAIMER.GAMEBOARD.lastSeenNote;
+  const [lastSeenNote] = useLocalStorage(key, 0, options);
+  const lastPublishedNote = new Date("2024-10-13").getTime(); // later make this grab the most recent date, dynamic
+  const hasSeenUpdate = lastPublishedNote < lastSeenNote; // if last seen is after last publish
+
   return (
     <div>
       <div>
@@ -24,6 +36,13 @@ export const CommandModalWrapper = ({
           }}
           content={<Command {...props} />}
         />
+
+        <Modal
+          wrapperProps={{
+            open: !hasSeenUpdate,
+          }}
+          content={<ReleaseNoteBody />}
+        />
       </div>
       {children}
     </div>

src/components/molecules/ReleaseNotes/Notes/20241013.tsx

@@ -0,0 +1,120 @@
+import { KeyboardKey } from "@/components/atoms/KeyboardKey";
+import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
+import { CardImage } from "@/components/atoms/mock-cards/card";
+import { LOCALSTORAGE_KEYS } from "@/components/organisms/GameBoard/constants";
+import { AltGridDisplay } from "@/components/organisms/GameBoard/Grid/AltGridDisplay";
+import { Button } from "@/components/ui/button";
+import { useLocalStorage } from "@/utils/hooks";
+import { mock_griditem_red } from "@/utils/mocks/mock_gamecards";
+import { Box, Divider, Grid, HStack, VStack } from "styled-system/jsx";
+
+export const Note20241013 = () => {
+  const { key, ...options } = LOCALSTORAGE_KEYS.SETTINGS.DISPLAY.toggle;
+  const [isDisplay, setIsDisplay] = useLocalStorage(key, false, options);
+
+  return (
+    <>
+      <Grid gridTemplateColumns="repeat(2, 1fr)">
+        <Box minW="300px">
+          <p style={{ fontSize: "1.5rem", opacity: 0.5, marginBottom: "1rem" }}>
+            October 13, 2024
+          </p>
+          <p style={{ fontWeight: 600 }}>
+            View the grid with full card previews!
+          </p>
+          <VStack alignItems="start" fontSize="0.825rem" gap={2}>
+            <p>
+              Have a more realistic view of the table to match your expectations
+              from playing Sorcery in real life.
+            </p>
+            <p>
+              Cards always switch to minimized view when hovering or dragging an
+              item, to allow you to position the ordering of cards.
+            </p>
+
+            <HStack>
+              <p>Try it out! Click the button</p>
+
+              <Button onClick={() => setIsDisplay(!isDisplay)}>
+                {isDisplay ? "Show min card view" : "Show full card"}
+              </Button>
+            </HStack>
+
+            <Divider />
+
+            <p style={{ fontWeight: 600, fontSize: "1rem", marginTop: "1rem" }}>
+              Wish to change this setting in the future?
+            </p>
+            <p>
+              While in game, press <KeyboardKey>?</KeyboardKey> to open up the
+              commands menu.
+            </p>
+            <p style={{ opacity: 0.5 }}>
+              Question mark is achieved on most keyboards by pressing
+              simultaneously: <KeyboardKey>SHIFT</KeyboardKey>{" "}
+              <KeyboardKey>/</KeyboardKey>
+            </p>
+            <p>
+              From there you can find these settings in the menu item:{" "}
+              <span style={{ fontWeight: 700 }}>
+                Display full/minimized cards view
+              </span>
+            </p>
+          </VStack>
+        </Box>
+        <Grid
+          justifySelf="end"
+          gridTemplateRows="repeat(2, 210px)"
+          w="200px"
+          minH="200px"
+        >
+          {isDisplay ? (
+            <>
+              <AltGridDisplay
+                cards={mock_griditem_red.map((card) => ({
+                  ...card,
+                  playerName: "bar",
+                }))}
+                myName="foo"
+              />
+              <AltGridDisplay
+                cards={mock_griditem_red.map((card) => ({
+                  ...card,
+                  playerName: "foo",
+                }))}
+                myName="foo"
+              />
+            </>
+          ) : (
+            <>
+              <VStack>
+                {mock_griditem_red?.map((card, index) => {
+                  const CardType = card.type === "site" ? CardAtlas : CardImage;
+                  return (
+                    <CardType
+                      key={card.img + index}
+                      img={card.img}
+                      isMine={false}
+                    />
+                  );
+                })}
+              </VStack>
+              <VStack>
+                {mock_griditem_red?.map((card, index) => {
+                  const CardType = card.type === "site" ? CardAtlas : CardImage;
+                  return (
+                    <CardType
+                      key={card.img + index}
+                      img={card.img}
+                      isMine={true}
+                    />
+                  );
+                })}
+              </VStack>
+            </>
+          )}
+        </Grid>
+      </Grid>
+    </>
+  );
+};

src/components/molecules/ReleaseNotes/index.tsx

@@ -0,0 +1,52 @@
+import { Box, Divider } from "styled-system/jsx";
+import { Note20241013 } from "./Notes/20241013";
+import { LOCALSTORAGE_KEYS } from "@/components/organisms/GameBoard/constants";
+import { useLocalStorage } from "@/utils/hooks";
+
+export const ReleaseNoteBody = () => {
+  const { key, ...options } =
+    LOCALSTORAGE_KEYS.DISCLAIMER.GAMEBOARD.lastSeenNote;
+  const [, setLastSeenNote] = useLocalStorage(key, 0, options);
+
+  function confirmRead() {
+    const now = Date.now();
+    setLastSeenNote(now);
+  }
+
+  return (
+    <Box
+      maxW="700px"
+      w={{ base: "65vw", md: "80vw" }}
+      maxH="600px"
+      overflowY="auto"
+      position="relative"
+    >
+      <Box
+        position="absolute"
+        right={0}
+        bg="gray.300"
+        padding="0.25rem 0.5rem"
+        borderRadius="4px"
+        cursor="pointer"
+        transition="all 0.25s ease"
+        _hover={{
+          bg: "gray.200",
+        }}
+        onClick={confirmRead}
+      >
+        X
+      </Box>
+      <p
+        style={{
+          fontWeight: 700,
+          fontSize: "2.5rem",
+        }}
+      >
+        Release Notes
+      </p>
+      <p>(new updates!)</p>
+      <Divider my="1rem" />
+      <Note20241013 />
+    </Box>
+  );
+};