Post Creation

pageComponents/NewPostPage/GameTypeSelect.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Select, { Option } from "../../components/Select";
+import { GameType } from "../../models/GameSituation";
+
+interface Props extends React.Attributes {
+  defaultValue?: string;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function GameTypeSelect({
+  defaultValue,
+  onChange,
+  ...props
+}: Props) {
+  return (
+    <Select defaultValue={defaultValue} onChange={onChange} {...props}>
+      <Option value={GameType.cash}>{GameType.cash}</Option>
+      <Option value={GameType.tournament}>{GameType.tournament}</Option>
+    </Select>
+  );
+}

pageComponents/NewPostPage/HeroPositionSelect.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Select, { Option } from "../../components/Select";
+import { POSITION_CORRESPONDENCE_EACH_PLAYER_LENGTH } from "../../utilities/getPositionByPlayerAndIndex";
+
+interface Props extends React.Attributes {
+  playerLength: number;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function HeroPositionSelect({
+  playerLength,
+  onChange,
+  ...props
+}: Props) {
+  const [positions, setPositions] = React.useState(
+    POSITION_CORRESPONDENCE_EACH_PLAYER_LENGTH.get(2)
+  );
+
+  React.useEffect(() => {
+    setPositions(POSITION_CORRESPONDENCE_EACH_PLAYER_LENGTH.get(playerLength));
+  }, [playerLength]);
+
+  return (
+    <Select defaultValue={positions![0]} onChange={onChange} {...props}>
+      {positions!.map((val) => (
+        <Option key={val} value={val}>{`${val}`}</Option>
+      ))}
+    </Select>
+  );
+}

pageComponents/NewPostPage/NewPostPage.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import styled from "styled-components";
+import FootBar from "../../components/FootBar";
+import HeadBar from "../../components/HeadBar";
+import { MOBILE_MEDIA } from "../../constants/mediaquery";
+import useAuthentication from "../../hooks/useAuthentication";
+import useRepository from "../../hooks/useRepository";
+
+export default function NewPostPage() {
+  const { user, isFirstChecking, signIn, signOut } = useAuthentication();
+  const { logEvent } = useRepository();
+
+  return (
+    <Root>
+      <HeadBar
+        user={user ?? undefined}
+        authenticationChecking={isFirstChecking}
+        onSignInButtonClick={(_, objectId) => signIn(objectId)}
+        onSignOutButtonClick={() => signOut()}
+      />
+
+      <Content>
+        <Headline>Create a New Post</Headline>
+      </Content>
+
+      <FootBar
+        onContactClick={(_, objectId) => logEvent("contact", { objectId })}
+      />
+    </Root>
+  );
+}
+
+const Root = styled.div``;
+
+const Content = styled.section`
+  box-sizing: border-box;
+  max-width: 1280px;
+  min-width: 375px;
+  margin: 0 auto;
+  padding: 0 128px 128px;
+
+  ${MOBILE_MEDIA} {
+    margin: 0;
+    padding: 0 16px 64px;
+  }
+`;
+
+const Headline = styled.h2`
+  margin-bottom: 32px;
+  font-size: 32px;
+
+  ${MOBILE_MEDIA} {
+    font-size: 24px;
+  }
+`;

pageComponents/NewPostPage/PlayerActionSelectors.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import styled from "styled-components";
+import StreetActionSelector from "../../components/StreetActionSelector";
+import { MOBILE_MEDIA } from "../../constants/mediaquery";
+import {
+  GameStreetAction,
+  GameStreetActionType,
+} from "../../models/GameSituation";
+
+interface Props extends React.Attributes {
+  playerActions: {
+    position: string;
+    gameStreetAction: GameStreetAction;
+    tableMaxBetSize: number;
+    previousBetSize: number;
+  }[];
+  onChange?: (
+    index: number,
+    type: GameStreetActionType,
+    betSize: number
+  ) => void;
+}
+
+export default function PlayerActionSelectors({
+  playerActions,
+  onChange = () => undefined,
+}: Props) {
+  return (
+    <Root>
+      {playerActions.map(
+        ({ position, tableMaxBetSize, previousBetSize }, index) => (
+          <PlayerAction key={index}>
+            <SmallTitle>{`${position}:`}</SmallTitle>
+
+            <StreetActionSelector
+              tableMaxBetSize={tableMaxBetSize}
+              previousBetSize={previousBetSize}
+              onChange={(type, betSize) => onChange(index, type, betSize)}
+            />
+          </PlayerAction>
+        )
+      )}
+    </Root>
+  );
+}
+
+const Root = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+`;
+
+const PlayerAction = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & > span {
+    box-sizing: border-box;
+    display: flex;
+    width: 72px;
+    align-items: center;
+    justify-content: flex-end;
+    margin-right: 16px;
+  }
+
+  ${MOBILE_MEDIA} {
+    flex-direction: column;
+    width: inherit;
+
+    & > span {
+      box-sizing: content-box;
+      display: block;
+      margin: 0 0 4px 0;
+      width: inherit;
+    }
+  }
+`;
+
+const SmallTitle = styled.span`
+  font-family: inherit;
+`;

pageComponents/NewPostPage/PlayerLengthSelect.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import Select, { Option } from "../../components/Select";
+
+interface Props extends React.Attributes {
+  defaultValue?: string;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function PlayerLengthSelect({
+  defaultValue,
+  onChange,
+  ...props
+}: Props) {
+  return (
+    <Select defaultValue={defaultValue} onChange={onChange} {...props}>
+      <Option value={"2"}>Heads-up</Option>
+      <Option value={"3"}>3 players</Option>
+      <Option value={"4"}>4 players</Option>
+      <Option value={"5"}>5 players</Option>
+      <Option value={"6"}>6 players</Option>
+      <Option value={"7"}>7 players</Option>
+      <Option value={"8"}>8 players</Option>
+      <Option value={"9"}>9 players</Option>
+      <Option value={"10"}>10 players</Option>
+    </Select>
+  );
+}

pageComponents/NewPostPage/index.ts

@@ -0,0 +1 @@
+export { default } from "./NewPostPage";

pages/posts/new.tsx

@@ -0,0 +1,15 @@
+import Head from "next/head";
+import * as React from "react";
+import NewPostPage from "../../pageComponents/NewPostPage";
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>New Post | Chipstackoverflow</title>
+      </Head>
+
+      <NewPostPage />
+    </>
+  );
+}

utilities/getPositionByPlayerAndIndex.ts

@@ -27,7 +27,7 @@ enum PlayerPosition {
   btn = "BTN",
 }
 
-const POSITION_CORRESPONDENCE_EACH_PLAYER_LENGTH = new Map([
+export const POSITION_CORRESPONDENCE_EACH_PLAYER_LENGTH = new Map([
   [2, [PlayerPosition.sb, PlayerPosition.bb]],
   [3, [PlayerPosition.sb, PlayerPosition.bb, PlayerPosition.utg]],
   [