feat(app-board): add initial panel ui

packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import { Transform } from '@dnd-kit/utilities';
 import { GameEvent, GameEventType } from '../../types/gameEvents';
 import { GameUIState } from '../../types/gameUIState';
+import ConnectedCard from '../ConnectedCard';
 
 const DEBUG_ENABLED = false;
 
@@ -329,7 +330,7 @@ const CardsGameListeners: React.FC<Props> = ({ onEvent, children, currentGameSta
       {children}
       {createPortal(
         <DragOverlay adjustScale dropAnimation={null} modifiers={modifiers} className="transform-0">
-          {draggingCardId ? <div className="item" /> : null}
+          {draggingCardId ? <ConnectedCard id={draggingCardId} /> : null}
         </DragOverlay>,
         document.body,
       )}

packages/game-app/src/gameView/components/ConnectedCard/ConnectedCard.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectors } from '../../slice';
+import { Card } from '@pipeline/components';
+
+type Props = {
+  id: string;
+};
+
+const ConnectedCard: React.FC<Props> = ({ id }) => {
+  const cardData = useSelector(selectors.getCardById(id))!;
+
+  return <Card {...cardData} />;
+};
+
+ConnectedCard.displayName = 'ConnectedCard';
+
+export default ConnectedCard;

packages/game-app/src/gameView/components/ConnectedCard/index.ts

@@ -0,0 +1,3 @@
+import ConnectedCard from './ConnectedCard';
+
+export default ConnectedCard;

packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import DraggableCard from '../DraggableCard';
+import styled from 'styled-components';
+import { CardWrapper } from '../DraggableCard/DraggableCard';
+
+function createStackedCss() {
+  let cssString = '';
+  for (let i = 0; i < 100; i++) {
+    cssString += `
+    ${CardWrapper}:nth-child(${i + 1}){
+      position: absolute;
+      top: ${110 * i}px;
+      transition: transform .3s;
+    }
+    ${CardWrapper}:hover{
+      transform: translate(0, -100px);
+    }
+    `;
+  }
+  return cssString;
+}
+
+const DeckPanelContent = styled.div`
+  flex: 1 1 auto;
+  overflow-y: scroll;
+  position: relative;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  ${CardWrapper} + ${CardWrapper} {
+    margin-top: 8px;
+  }
+
+  ${createStackedCss()}
+`;
+
+type Props = {
+  cardsIds: string[];
+};
+
+const DeckPanel: React.FC<Props> = ({ cardsIds }) => {
+  return (
+    <DeckPanelContent>
+      {cardsIds.map(id => (
+        <DraggableCard key={id} id={id} />
+      ))}
+    </DeckPanelContent>
+  );
+};
+
+DeckPanel.displayName = 'Panel';
+
+export default DeckPanel;

packages/game-app/src/gameView/components/DeckPanel/index.ts

@@ -0,0 +1,3 @@
+import DeckPanel from './DeckPanel';
+
+export default DeckPanel;

packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx

@@ -3,11 +3,17 @@ import { useDraggable } from '@dnd-kit/core';
 import { useSelector } from 'react-redux';
 import { selectors } from '../../slice';
 import { Card } from '@pipeline/components';
+import styled from 'styled-components';
+import ConnectedCard from '../ConnectedCard';
 
 type Props = {
   id: string;
 };
 
+export const CardWrapper = styled.div`
+  cursor: pointer;
+`;
+
 /**
  * A card enhanced with dragging capability
  */
@@ -17,7 +23,6 @@ const DraggableCard: React.FC<Props> = ({ id }) => {
   });
 
   const position = useSelector(selectors.getCardPosition(id));
-  const cardData = useSelector(selectors.getCardById(id))!;
 
   const style =
     position?.x || position?.y
@@ -29,9 +34,15 @@ const DraggableCard: React.FC<Props> = ({ id }) => {
       : {};
 
   return (
-    <div style={style} ref={setNodeRef} {...listeners} {...attributes} className={`${isDragging ? 'dragging' : ''}`}>
-      <Card {...cardData} />
-    </div>
+    <CardWrapper
+      style={style}
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      className={`${isDragging ? 'dragging' : ''}`}
+    >
+      <ConnectedCard id={id} />
+    </CardWrapper>
   );
 };
 

packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import styled from 'styled-components';
+import Box from '../../../_shared/components/Box';
+
+type Props = {};
+
+const FixedPanel = styled.div<{ closed: boolean }>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 360px;
+  height: 100vh;
+  border-radius: 40px 0px 0px 0px;
+  opacity: 1;
+  backdrop-filter: blur(30px);
+  padding: 40px 40px 0 40px;
+  box-sizing: border-box;
+  background-color: rgb(170, 180, 175, 0.4);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.5s;
+
+  ${props => props.closed && 'transform: translate(300px)'}
+`;
+
+const ToggleWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ToggleButton = styled.button`
+  min-width: 20px;
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: 9px;
+`;
+
+const ToggleIndicator = styled.div`
+  width: 3px;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  background: #b4aea9;
+  border: none;
+  border-radius: 9px;
+  position: relative;
+  left: 8px;
+`;
+
+/**
+ * The right game panel, where the deck is placed at the start of the game
+ * and where you can find all cards that ar not placed into the board.
+ * It is also a droppable are, where you can release cards moved out from the board
+ */
+const DroppablePanelArea: React.FC<Props> = ({ children }) => {
+  const { setNodeRef } = useDroppable({
+    id: 'panel',
+  });
+
+  const [closed, setClosed] = useState(false);
+
+  return (
+    <FixedPanel ref={setNodeRef} closed={closed}>
+      <ToggleWrapper>
+        <ToggleButton onClick={() => setClosed(state => !state)}>
+          <ToggleIndicator />
+        </ToggleButton>
+      </ToggleWrapper>
+      {children}
+    </FixedPanel>
+  );
+};
+
+DroppablePanelArea.displayName = 'DroppablePanelArea';
+
+export default DroppablePanelArea;

packages/game-app/src/gameView/components/DroppablePanelArea/index.ts

@@ -0,0 +1,3 @@
+import DroppablePanelArea from './DroppablePanelArea';
+
+export default DroppablePanelArea;

packages/game-app/src/gameView/components/GameView/GameView.tsx

@@ -2,14 +2,15 @@ import React, { useCallback } from 'react';
 import CardsGameListeners from '../CardsGameListeners';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import Board from '../Board';
-import Panel from '../Panel';
+import DroppablePanelArea from '../DroppablePanelArea';
 import { TansformRenderProps } from '../../types/tansformRenderProps';
 import DraggableCard from '../DraggableCard';
 import { useParams } from 'react-router-dom';
 import useGameState from '../../hooks/useGameState';
 import { useSelector } from 'react-redux';
 import { selectors } from '../../slice';
 import useCardEventHandler from '../../hooks/useCardEventHandler';
+import DeckPanel from '../DeckPanel';
 
 const Game: React.FC<{ pan: { x: number; y: number }; scale: number; gameId: string }> = React.memo(
   ({ pan, scale, gameId }) => {
@@ -30,11 +31,9 @@ const Game: React.FC<{ pan: { x: number; y: number }; scale: number; gameId: str
             </Board>
           </TransformComponent>
         </div>
-        <Panel>
-          {deckCardsIds.map(id => (
-            <DraggableCard key={id} id={id} />
-          ))}
-        </Panel>
+        <DroppablePanelArea>
+          <DeckPanel cardsIds={deckCardsIds} />
+        </DroppablePanelArea>
       </CardsGameListeners>
     );
   },

packages/game-app/src/temporary.css

@@ -232,70 +232,23 @@ input + button.icon-button {
 }
 
 .board {
-  background-color: #ae8888;
+  background-color: #eeeeee;
   width: 200vw;
   height: 200vh;
   padding: 16px;
   position: relative;
 }
 
-.panel {
-  transition: 0.5s;
-}
-
-.panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 350px;
-  height: 100vh;
-  background-color: #3e555b;
-  padding: 16px;
-  box-sizing: border-box;
-}
-
-.panel .item + .item {
-  margin-top: 8px;
-}
-
-.panel.closed {
-  transform: translate(300px);
-}
-
 .react-transform-component {
   width: 100% !important;
   height: 100% !important;
 }
 
-.item {
-  width: 280px;
-  height: 200px;
-  border-radius: 20px;
-  background-color: white;
-  display: inline-block;
-  z-index: 100;
-  padding: 15px;
-  box-sizing: border-box;
-  border: 1px solid black;
-}
-
 .draggable {
   display: inline-block;
   z-index: 100;
 }
 
-.board {
-  background-image: linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
-    linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-  background-size: 100% 12px, 12px 100%;
-}
-
 .transform-0 {
   transform-origin: 0px 0px !important;
 }
-
-.item.dragging {
-  opacity: 0.6;
-  box-sizing: border-box;
-  border: dashed 2px black;
-}