feat(app-board): add game view draft

eficode · Jan 13, 2021 · a495702 · a495702
1 parent f5461f1
commit a495702
Show file tree

Hide file tree

Showing 19 changed files with 801 additions and 0 deletions.
diff --git a/packages/game-app/package-lock.json b/packages/game-app/package-lock.json
diff --git a/packages/game-app/package.json b/packages/game-app/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dnd-kit/core": "^1.0.1",
     "@hookform/resolvers": "^1.2.0",
     "@reduxjs/toolkit": "^1.5.0",
     "firebase": "^8.2.1",
@@ -12,6 +13,7 @@
     "react-hook-form": "^6.13.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
+    "react-zoom-pan-pinch": "^1.6.1",
     "redux-saga": "^1.1.3",
     "web-vitals": "^0.2.4",
     "yup": "^0.32.8"

diff --git a/packages/game-app/src/App.tsx b/packages/game-app/src/App.tsx
@@ -9,6 +9,7 @@ const EmailVerificationRequired = React.lazy(() => import('./signup/components/E
 const VerifyEmail = React.lazy(() => import('./signup/components/VerifyEmail'));
 const Dashboard = React.lazy(() => import('./dashboard/components/Dashboard'));
 const Login = React.lazy(() => import('./login/components/Login'));
+const GameView = React.lazy(() => import('./gameView/components/GameView'));
 
 /**
  * Returns route and default redirect according to auth condition:
@@ -55,6 +56,7 @@ function App() {
     <Suspense fallback={null}>
       <Switch>
         <PrivateRoute path={RoutingPath.Dashboard} component={Dashboard} />
+        <PrivateRoute path={RoutingPath.Game} component={GameView} />
         {renderAuthRoutes(user)}
       </Switch>
     </Suspense>

diff --git a/packages/game-app/src/_shared/routing/routingPath.ts b/packages/game-app/src/_shared/routing/routingPath.ts
@@ -4,4 +4,5 @@ export enum RoutingPath {
   Dashboard = '/dashboard',
   EmailVerificationRequired = '/email-verification-required',
   VerifyEmail = '/verify-email',
+  Game = '/game',
 }
diff --git a/packages/game-app/src/dashboard/components/Dashboard/Dashboard.tsx b/packages/game-app/src/dashboard/components/Dashboard/Dashboard.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import { useTranslate } from '@pipeline/i18n';
 import { useLogout } from '@pipeline/auth';
+import { useHistory } from 'react-router-dom';
+import { RoutingPath } from '@pipeline/routing';
 
 type Props = {};
 
 const Dashboard: React.FC<Props> = () => {
   const t = useTranslate();
   const { call: executeLogout } = useLogout();
 
+  const history = useHistory();
+
   return (
     <div className="dashboard">
       <div className="sign-out-button">
@@ -18,6 +22,9 @@ const Dashboard: React.FC<Props> = () => {
       <h1>{t('dashboard.title')}</h1>
       <h2>{t('dashboard.subtitle')}</h2>
       <p>{t('dashboard.message')}</p>
+      <button type="button" className="link test-game" onClick={() => history.push(RoutingPath.Game)}>
+        Game board test
+      </button>
     </div>
   );
 };

diff --git a/packages/game-app/src/gameView/components/Board/Board.tsx b/packages/game-app/src/gameView/components/Board/Board.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { useDroppable } from '@dnd-kit/core';
+
+type Props = {};
+
+/**
+ * Game board where the pipeline will be created placing the cards.
+ * It's a droppable area so you can drag the cards in it coming from the panel
+ * or moving cards inside the board directly
+ */
+const Board: React.FC<Props> = ({ children }) => {
+  const { setNodeRef } = useDroppable({
+    id: 'board',
+  });
+
+  return (
+    <div className="board" ref={setNodeRef}>
+      {children}
+    </div>
+  );
+};
+
+Board.displayName = 'Board';
+
+export default Board;
diff --git a/packages/game-app/src/gameView/components/Board/index.ts b/packages/game-app/src/gameView/components/Board/index.ts
@@ -0,0 +1,3 @@
+import Board from './Board';
+
+export default Board;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Board from './Board';

		export default Board;