feature/wiggle (#132)

* feat(wiggle): wiggle bugs

* feat(wiggle): fixed wiggle within a wiggle, wiggleception

* feat(card): card box fixes

* feat(menu): adding click back to menu

* feat(dev): added developer popup

src/ui/game/component/GameCard/index.tsx

@@ -3,7 +3,6 @@ import { CardDTO } from '../../../../api/src/game/dtos/card.dto';
 import { getBackgroundColor, getCardBorder } from './Logic';
 import renderHtmlAsReact from 'html-react-parser';
 import { Box, Center, rem } from '@mantine/core';
-import { GameWiggleBox } from '../GameWiggleBox';
 import classes from './GameCard.module.css';
 import { useHover } from '@mantine/hooks';
 import { nanoid } from '@reduxjs/toolkit';
@@ -22,7 +21,6 @@ import {
 
 export const GameCard: RFC<Props> = ({
     id, cardType, children, color, onClick, card,
-    hasHoverWiggle = true,
 }) => {
     const { hovered: isHovered, ref: refHover } = useHover();
 
@@ -43,20 +41,8 @@ export const GameCard: RFC<Props> = ({
         onClick(id, { ...CardDTO.Default, ...card });
     };
 
-    const renderCardWiggle = (
-        cardContent : ReactNode | ReactNode[],
-    ) =>
-        !hasHoverWiggle
-            ? cardContent
-            : (
-                <GameWiggleBox
-                    uniqueKey='hover-wiggle'
-                    index={0}>
-                    {cardContent}
-                </GameWiggleBox>
-            );
-
     const renderCardContainer = (
+        id : string,
         cardContent : ReactNode | ReactNode[],
     ) =>
         <Box
@@ -80,36 +66,29 @@ export const GameCard: RFC<Props> = ({
 
     switch(cardType){
         case GameCardType.Children:
-            return renderCardWiggle(
-                renderCardContainer(children));
+            return renderCardContainer(id, children);
 
         case GameCardType.Stack:
-            return renderCardWiggle(
-                renderCardContainer(
-                    <GameStack>
-                        {children}
-                    </GameStack>,
-                ));
+            return renderCardContainer(id,
+                <GameStack>
+                    {children}
+                </GameStack>,
+            );
 
         case GameCardType.Centered:
-            return renderCardWiggle(
-                renderCardContainer(
-                    <Center>
-                        {children}
-                    </Center>,
-                ));
+            return renderCardContainer(id,
+                <Center>
+                    {children}
+                </Center>,
+            );
 
         case GameCardType.Raw:
-            return renderCardWiggle(
-                renderCardContainer(
-                    children,
-                ));
+            return renderCardContainer(id, children);
 
         case GameCardType.Html:
-            return renderCardWiggle(
-                renderCardContainer(
-                    renderHtmlAsReact(children as string),
-                ));
+            return renderCardContainer(id,
+                renderHtmlAsReact(children as string),
+            );
 
             default:
                 throw new Error(`Unknown card type: ${cardType}`);

src/ui/game/component/GameCard/type.tsx

@@ -10,6 +10,7 @@ export type Props = {
     children        : React.ReactNode | React.ReactNode[];
     onClick        ?: OnClickCard;
     color          ?: CardColor;
+    index          ?: number,
     card           ?: Partial<CardDTO>;
     id              : string;
 };

src/ui/game/component/GameDebugCard/DebugTableRow.tsx

@@ -0,0 +1,21 @@
+import { DebugTableRowProps } from './type';
+import { Table } from '@mantine/core';
+import { RFC } from '@app/ui/type';
+
+
+export const DebugTableRow: RFC<DebugTableRowProps> = ({
+    label, value, fontSize = 'sm',
+}) => (
+    <Table.Tr>
+        <Table.Td
+            p={0}
+            pl='sm'>
+            <strong>{label}</strong>
+        </Table.Td>
+        <Table.Td
+            p={0}
+            fz={fontSize}>
+            {value}
+        </Table.Td>
+    </Table.Tr>
+);

src/ui/game/component/GameDebugCard/GameDebug.module.css

@@ -0,0 +1,17 @@
+        .symbol {
+    margin-left: 9px;
+    margin-top: -10px;
+}
+
+.pi {
+    box-shadow: 1px 5px 14px -2px rgba(0, 0, 0, 0.24);
+    background-color: #cfc;
+    border-radius: 16px;
+    position: fixed;
+    border: 3px solid #000;
+    opacity : .75;
+    bottom: 50px;
+    z-index: 99;
+    color: #222;
+    right: 50px;
+}

src/ui/game/component/GameDebugCard/GameDebugTabs.tsx

@@ -0,0 +1,76 @@
+import { Table, Tabs, Text, List, rem } from '@mantine/core';
+import { DebugTableRow } from './DebugTableRow';
+import { GameDebugTabsProps } from './type';
+import { RFC } from '@app/ui/type';
+
+
+export const GameDebugTabs: RFC<GameDebugTabsProps> = ({
+    dealerDealtCard, playerDealtCard, currentPlayer,
+    gameState, authToken, isDealer, isHost,
+}) => {
+    return (
+        <Tabs defaultValue='one'>
+            <Tabs.List>
+                <Tabs.Tab value='one'>
+                    <Text
+                        fz='sm'
+                        fw={600}>{"ONE"}</Text>
+                </Tabs.Tab>
+                <Tabs.Tab value='two'>{"TWO"}</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel value='one'>
+                <Table
+                    cellSpacing={0}
+                    cellPadding={0}
+                    fz='xs'
+                    style={{ maxWidth : rem(220) }}>
+                    <Table.Tbody>
+                        {gameState.error_message && <DebugTableRow
+                            label='Error'
+                            value={gameState.error_message} />}
+                        <DebugTableRow
+                            label='IsDealer'
+                            value={isDealer ? 'Yes' : 'No'} />
+                        <DebugTableRow
+                            label='AuthToken'
+                            value={authToken} />
+                        <DebugTableRow
+                            label='IsHost'
+                            value={isHost ? 'Yes' : 'No'} />
+                        <DebugTableRow
+                            label='Game Code'
+                            value={gameState.game_code} />
+                        <DebugTableRow
+                            label='Stage'
+                            value={gameState.game_stage} />
+                        <DebugTableRow
+                            label='PlayerId'
+                            value={currentPlayer?.id}
+                            fontSize='xs' />
+                        <DebugTableRow
+                            label='Username'
+                            value={currentPlayer?.username}
+                            fontSize='xs' />
+                        <DebugTableRow
+                            label='Score'
+                            value={currentPlayer?.score} />
+                        <DebugTableRow
+                            label="Dealer's Card"
+                            value={dealerDealtCard?.text} />
+                        <DebugTableRow
+                            label="Player's Card"
+                            value={playerDealtCard?.text} />
+                    </Table.Tbody>
+                </Table>
+            </Tabs.Panel>
+            <Tabs.Panel value='two'>
+                <List>
+                    <List.Item>{"ONE"}</List.Item>
+                    <List.Item>{"ONE"}</List.Item>
+                    <List.Item>{"ONE"}</List.Item>
+                    <List.Item>{"ONE"}</List.Item>
+                </List>
+            </Tabs.Panel>
+        </Tabs>
+    );
+};

src/ui/game/component/GameDebugCard/index.tsx

@@ -0,0 +1,25 @@
+import { Box, rem, Text } from '@mantine/core';
+import classes from './GameDebug.module.css';
+import { RFC } from '@app/ui/type';
+import { Props } from './type';
+
+
+export const GameDebugCard: RFC<Props> = ({
+    wiggleBoxId, wiggleSeed,
+ }) => {
+
+    return (
+        <Box
+            className={classes.pi}
+            w={rem(220)}
+            h={rem(440)}>
+            <Text>
+                {`wiggleBoxId(${wiggleBoxId})`}
+            </Text>
+            <br />
+            <Text>
+                {`wiggleSeed(${wiggleSeed})`}
+            </Text>
+        </Box>
+    );
+};

src/ui/game/component/GameDebugCard/type.tsx

@@ -0,0 +1,29 @@
+import { GameStateDTO } from '../../../../api/src/game/dtos/game-state.dto';
+import { PlayerDTO } from '../../../../api/src/game/dtos/player.dto';
+import { CardDTO } from '../../../../api/src/game/dtos/card.dto';
+import { ReactNode } from 'react';
+
+
+export interface Props {
+    wiggleBoxId : string;
+    wiggleSeed  : string;
+}
+
+export interface DebugTableRowProps {
+
+    fontSize ?: string;
+    label     : string;
+    value     : ReactNode;
+}
+
+
+export interface GameDebugTabsProps {
+
+    dealerDealtCard ?: CardDTO | null;
+    playerDealtCard ?: CardDTO | null;
+    currentPlayer    : PlayerDTO | null;
+    authToken        : string | null;
+    gameState        : GameStateDTO;
+    isDealer         : boolean;
+    isHost           : boolean;
+}

src/ui/game/component/GameDeckLayout/GameDeckLayout.stories.tsx

@@ -2,6 +2,7 @@ import { CardColor } from '../../../../api/src/constant/card-color.enum';
 import { CardDTO } from '../../../../api/src/game/dtos/card.dto';
 import type { Meta, StoryObj } from '@storybook/react';
 import { GameWiggleBox } from '../GameWiggleBox';
+import { Text } from '@mantine/core';
 import { GameDeckLayout } from '.';
 
 
@@ -36,13 +37,15 @@ export const DefaultDeckLayout: Story = {
         tiltFactor           : 8,
         cards                : sampleCards.map((card, index) => (
             <GameWiggleBox
-                key={index}
-                index={index}
-                uniqueKey={`card-${index}`}
                 cardOverlapFactor={40}
+                id={`card-${index}`}
                 wiggleFactor={6}
-                tiltFactor={8}>
-                <div>{card.text}</div>
+                tiltFactor={8}
+                index={index}
+                key={index}>
+                <Text>
+                    {card.text}
+                </Text>
             </GameWiggleBox>
         )),
         id : 'deck-layout-1',

src/ui/game/component/GameDeckLayout/index.tsx

@@ -2,12 +2,13 @@ import { GameWiggleBox } from '../GameWiggleBox';
 import { RFC } from '@app/ui/type';
 import { Props } from './type';
 
+const scale = 1.5;
 
 export const GameDeckLayout: RFC<Props> = ({
-    verticleWiggleFactor = 50,
-    cardOverlapFactor    = 40,
-    wiggleFactor         = 6,
-    tiltFactor           = 8,
+    verticleWiggleFactor = 50 * scale,
+    cardOverlapFactor    = 40 * scale,
+    wiggleFactor         = 6  * scale,
+    tiltFactor           = 8  * scale,
     cards,
     id,
 }) => cards.map((card, index) =>
@@ -16,8 +17,8 @@ export const GameDeckLayout: RFC<Props> = ({
         cardOverlapFactor={cardOverlapFactor}
         wiggleFactor={wiggleFactor}
         tiltFactor={tiltFactor}
-        uniqueKey={`${id}-${index}`}
-        key={`card-${index}`}
+        id={`${id}-${index}`}
+        key={`card-${id}-${index}`}
         index={index}>
         {card}
     </GameWiggleBox>)

src/ui/game/component/GameDev/GameDev.stories.tsx

@@ -0,0 +1,31 @@
+import { CardColor } from '../../../../api/src/constant/card-color.enum';
+import type { Meta, StoryObj } from '@storybook/react';
+import { GameDev } from '.';
+
+
+const meta: Meta<typeof GameDev> = {
+    title     : 'Components/GameDev',
+    component : GameDev,
+    tags      : ['autodocs'],
+};
+
+export default meta;
+
+
+type Story = StoryObj<typeof meta>;
+
+// Sample player data for the scoreboard
+const samplePlayers = [
+    { player : { id : '1', username : 'Player 1' }, score : 3, isWinner : false, isDone : true },
+    { player : { id : '2', username : 'Player 2' }, score : 5, isWinner : true, isDone : true },
+    { player : { id : '3', username : 'Player 3' }, score : 1, isWinner : false, isDone : false },
+];
+
+export const DefaultScoreboard: Story = {
+    args : {
+        playerStatusList : samplePlayers, // Provide the sample player data
+        shouldShowScore  : true, // Show the scores
+        shouldShowDone   : true, // Indicate if players are done
+        textColor        : CardColor.White, // Set text color to white
+    },
+};

src/ui/game/component/GameDev/index.tsx

@@ -0,0 +1,33 @@
+
+import { GameStack } from '../GameStack';
+import { GameText } from '../GameText';
+import { GameTextType } from '../GameText/type';
+
+
+export const GameDev = () => {
+
+    return (
+        <GameStack>
+            <GameText size='sm'>
+                <GameText
+                    size='lg'
+                    type={GameTextType.Title}>
+                    {'CrudeCards is Open Source'}
+                </GameText>
+                <a
+                    href='https://github.com/dandonahoe/crude-cards'
+                    style={{
+                        color          : 'white',
+                        textDecoration : 'underline',
+                    }}>
+                    {'Browse the GitHub Repo.'}
+                </a>
+                <GameText size='sm'>
+                    {'Or don\'t, nerd.'}
+                </GameText>
+            </GameText>
+
+        </GameStack>
+    );
+}
+