Initial commit

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package.json

@@ -12,9 +12,12 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.7",
+    "axios": "^0.21.1",
+    "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "~3.8.2"
   },
@@ -38,5 +41,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.11",
+    "@types/react-router-dom": "^5.1.7"
   }
 }

src/app/App.css

@@ -0,0 +1,9 @@
+.app {
+  min-height: 100vh;
+  /* Why did I put linear gradient? Because every bg I found looks like sh*t  */
+  background-image: linear-gradient(217deg, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0) 70.71%),
+    linear-gradient(127deg, rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0) 70.71%),
+    linear-gradient(336deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0) 70.71%),
+    url("assets/bigstock-poker-table-background-26587844-2-1.jpg");
+  background-size: cover;
+}

src/app/App.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { store } from "./store";
+import App from "./App";
+
+test("renders learn react link", () => {
+  const { getByText } = render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+
+  expect(getByText(/learn/i)).toBeInTheDocument();
+});

src/app/App.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function App() {
+  return (
+    <div className="App">
+
+    </div>
+  );
+}
+
+export default App;

src/app/store.ts

@@ -1,16 +1,8 @@
-import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
 
 export const store = configureStore({
-  reducer: {
-    counter: counterReducer,
-  },
+  reducer: {},
 });
 
 export type RootState = ReturnType<typeof store.getState>;
-export type AppThunk<ReturnType = void> = ThunkAction<
-  ReturnType,
-  RootState,
-  unknown,
-  Action<string>
->;
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

src/features/Board/Board.module.css

@@ -0,0 +1,80 @@
+.board {
+  display: grid;
+  align-items: center;
+  min-height: 100vh;
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+  animation: fadeIn 1s forwards;
+}
+
+/* Last child is discard pile. - this is the moment where I started hating css modules */
+.board > :last-child {
+  place-self: center;
+}
+
+.threePlayer > :last-child {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.twoPlayer {
+  grid-template-rows: repeat(3, 1fr);
+  justify-content: center;
+}
+
+.twoPlayer :nth-child(1) {
+  grid-row: 3;
+}
+
+.threePlayer {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.threePlayer :nth-child(1) {
+  grid-row: 2;
+  grid-column: 2;
+}
+
+.threePlayer :nth-child(3) {
+  grid-column: 3;
+}
+
+.fourPlayer {
+  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-rows: 1fr 2fr 1fr;
+}
+
+.fourPlayer :nth-child(1) {
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.fourPlayer :nth-child(2) {
+  grid-row: 2;
+}
+
+.fourPlayer :nth-child(3) {
+  grid-column: 2;
+}
+
+.fourPlayer :nth-child(4) {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.fourPlayer > :last-child {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

src/features/Board/Board.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./Board.module.css";
+
+export function Board({ playerCount, children }: React.PropsWithChildren<{ playerCount: number }>) {
+  const getBoardVariant = (variant: string) => <div className={`${styles.board} ${variant}`}>{children}</div>;
+  switch (playerCount) {
+    case 2:
+      return getBoardVariant(styles.twoPlayer);
+    case 3:
+      return getBoardVariant(styles.threePlayer);
+    case 4:
+      return getBoardVariant(styles.fourPlayer);
+    default:
+      throw new Error("Invalid number of players");
+  }
+}