From 380041653e8e3b7d11bd3abf95336614a0f54925 Mon Sep 17 00:00:00 2001
From: uncaught <uncaught42@gmail.com>
Date: Fri, 10 Apr 2020 18:10:03 +0200
Subject: [PATCH] Implement sidebar to display stats when clicking on game
 header (closes #10).

---
 client/src/App.css                     | 26 ++++++++++++++++++++++++++
 client/src/Page.tsx                    | 13 +++++++++++--
 client/src/PageHeader.tsx              |  4 ++--
 client/src/pages/game/ExtraSidebar.tsx | 20 ++++++++++++++++++++
 client/src/pages/games/index.tsx       |  4 +++-
 client/src/pages/round/Players.tsx     |  2 +-
 6 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 client/src/pages/game/ExtraSidebar.tsx

diff --git a/client/src/App.css b/client/src/App.css
index 95f8ef2..93279f2 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -33,6 +33,11 @@ input[type=number] {
   flex-shrink: 0;
 }
 
+.appPageHeader-name {
+  text-align: center;
+  width: 75%;
+}
+
 .appPageHeader-link,
 .appPageHeader-link:hover,
 .appPageHeader-link:visited {
@@ -355,6 +360,27 @@ input[type=number] {
   color: rgba(0, 0, 0, .87);
 }
 
+.GameExtraSidebarWrapper {
+  top: 50%;
+  position: relative;
+  transform: translateY(-50%);
+  padding: 1em 0.5em;
+  --std-color: white;
+}
+
+.GameExtraSidebarWrapper .ui.list > .item > .icon + .content {
+  display: block;
+}
+
+.GameExtraSidebarWrapper .ui.header,
+.GameExtraSidebarWrapper .ui.label.isYou {
+  display: none;
+}
+
+.GameExtraSidebarWrapper .item + .item {
+  margin-top: 0.5em;
+}
+
 @media only screen and (max-width: 767.98px) {
   .ui.selection.dropdown .menu {
     max-height: 15rem;
diff --git a/client/src/Page.tsx b/client/src/Page.tsx
index 3c914c8..681eaef 100644
--- a/client/src/Page.tsx
+++ b/client/src/Page.tsx
@@ -55,10 +55,12 @@ function PageContextProvider(
 interface FullRouteProps extends RouteProps {
   displayName?: string;
   menuItems?: PageMenuItems;
+  ExtraSidebar?: React.FunctionComponent<{ visible: boolean; close: () => void }>;
 }
 
 export default function Page(props: FullRouteProps): ReactElement {
   const [visible, setVisible] = useState(false);
+  const [extraSidebarVisible, setExtraSidebarVisible] = useState(false);
   const openMenu = useCallback(() => setVisible(true), []);
   const closeMenu = useCallback(() => setVisible(false), []);
   const parentPageContext = usePageContext();
@@ -68,6 +70,7 @@ export default function Page(props: FullRouteProps): ReactElement {
   delete routeProps.children;
   delete routeProps.displayName;
   delete routeProps.menuItems;
+  delete routeProps.ExtraSidebar;
   return <Route {...routeProps}>
     <PageContextProvider parentPageContext={parentPageContext}
                          parentUrl={parentUrl}
@@ -88,9 +91,15 @@ export default function Page(props: FullRouteProps): ReactElement {
         >
           <PageMenu closeMenu={closeMenu}/>
         </Sidebar>
-        <Sidebar.Pusher dimmed={visible}>
+        {props.ExtraSidebar && <props.ExtraSidebar visible={extraSidebarVisible}
+                                                   close={() => setExtraSidebarVisible(false)}/>}
+        <Sidebar.Pusher dimmed={visible || extraSidebarVisible}>
           <div className="appPage">
-            <PageHeader openMenu={openMenu}/>
+            <PageHeader openMenu={openMenu} onNameClick={() => {
+              if (props.ExtraSidebar) {
+                setExtraSidebarVisible(true);
+              }
+            }}/>
             <div className="appPageContent">
               {props.children}
             </div>
diff --git a/client/src/PageHeader.tsx b/client/src/PageHeader.tsx
index f5a4e1d..2ac443f 100644
--- a/client/src/PageHeader.tsx
+++ b/client/src/PageHeader.tsx
@@ -4,12 +4,12 @@ import {Icon} from 'semantic-ui-react';
 import {usePageContext} from './Page';
 import {Link} from 'react-router-dom';
 
-export default function PageHeader({openMenu}: { openMenu: () => void }): ReactElement {
+export default function PageHeader({onNameClick, openMenu}: { onNameClick?: () => void; openMenu: () => void }): ReactElement {
   const {displayName, parents} = usePageContext();
   return <header className="appPageHeader">
     {parents.length === 0 && <SuitsLogo/>}
     {parents.length > 0 && <Link className="appPageHeader-link" to={parents[0].url}><Icon name={'arrow left'}/></Link>}
-    <div>{displayName}</div>
+    <div className="appPageHeader-name" onClick={onNameClick}>{displayName}</div>
     <Icon name={'bars'} onClick={openMenu}/>
   </header>;
 }
diff --git a/client/src/pages/game/ExtraSidebar.tsx b/client/src/pages/game/ExtraSidebar.tsx
new file mode 100644
index 0000000..b065489
--- /dev/null
+++ b/client/src/pages/game/ExtraSidebar.tsx
@@ -0,0 +1,20 @@
+import React, {ReactElement} from 'react';
+import {Menu, Sidebar} from 'semantic-ui-react';
+import Players from '../round/Players';
+
+export default function ExtraSidebar({visible, close}: { visible: boolean; close: () => void }): ReactElement {
+  return <Sidebar
+    as={Menu}
+    animation='overlay'
+    icon='labeled'
+    inverted
+    onHide={close}
+    vertical
+    visible={visible}
+    direction='left'
+  >
+    <div className={'GameExtraSidebarWrapper'}>
+      <Players/>
+    </div>
+  </Sidebar>;
+}
diff --git a/client/src/pages/games/index.tsx b/client/src/pages/games/index.tsx
index cd35a5b..7695de9 100644
--- a/client/src/pages/games/index.tsx
+++ b/client/src/pages/games/index.tsx
@@ -4,11 +4,13 @@ import Page from '../../Page';
 import Games from './Games';
 import Game from '../game';
 import RemoveGameMenuItem from '../game/RemoveGameMenuItem';
+import ExtraSidebar from '../game/ExtraSidebar';
 
 export default function GamesIndex(): ReactElement {
   const {url} = useRouteMatch();
   return <Switch>
-    <Page path={`${url}/game/:gameId`} displayName={'Spiel'} menuItems={[RemoveGameMenuItem]}>
+    <Page path={`${url}/game/:gameId`} displayName={'Spiel'} menuItems={[RemoveGameMenuItem]}
+          ExtraSidebar={ExtraSidebar}>
       <Game/>
     </Page>
     <Page path={`${url}`}>
diff --git a/client/src/pages/round/Players.tsx b/client/src/pages/round/Players.tsx
index 6c8bec4..b3dd9f4 100644
--- a/client/src/pages/round/Players.tsx
+++ b/client/src/pages/round/Players.tsx
@@ -26,7 +26,7 @@ export default function Players(): ReactElement {
               <Label size={'small'} color={dutySoloPlayed ? 'green' : 'red'}>
                 <span className={dutySoloPlayed ? '' : 'u-line-through'}>Solo</span> <Icon name='male'/>
               </Label>
-              {!!member.isYou && <Label size={'small'} color={'teal'}>
+              {!!member.isYou && <Label size={'small'} color={'teal'} className={'isYou'}>
                 du <Icon name='linkify'/>
               </Label>}
             </List.Description>