adding reports page to player's page

Author: jajakob

apps/demo-game/src/components/DecisionsDisplay.tsx

@@ -107,9 +107,9 @@ function DecisionsDisplayCompact({ segmentDecisions }: DecisionDisplayProps) {
             <TableBody>
               {segmentDecisions.map((e) => {
                 return (
-                  <TableRow key={e.segment.id}>
+                  <TableRow key={e.segment?.id}>
                     <TableCell className="flex text-nowrap">
-                      P{e.period.index + 1} S{e.segment.index + 1}
+                      P{e.period?.index + 1} S{e.segment?.index + 1}
                     </TableCell>
                     <TableCell>
                       <OnOffIcon on={e.decisions.bank} />

apps/demo-game/src/pages/play/cockpit.tsx

@@ -124,6 +124,13 @@ function GameLayout({ children }: { children: React.ReactNode }) {
     role: data.self.role,
   }
 
+  const tabs = [
+    {
+      name: 'Reports',
+      href: `/admin/reports/${data?.result?.currentGame?.id}`,
+    },
+  ]
+
   const sidebar = (
     <div id="sidebar" className="flex flex-col justify-between">
       <Card
@@ -218,11 +225,6 @@ function GameLayout({ children }: { children: React.ReactNode }) {
   )
 }
 
-const tabs = [
-  { name: 'Welcome', href: '/play/welcome' },
-  { name: 'Cockpit', href: '/play/cockpit' },
-]
-
 const colors = [
   'hsl(var(--chart-1))',
   'hsl(var(--chart-2))',

apps/demo-game/src/pages/play/welcome.tsx

@@ -3,19 +3,19 @@ import { COLORS } from '@gbl-uzh/platform/src/lib/constants'
 import { Logo } from '@gbl-uzh/ui'
 import {
   Button,
-  NewFormikSelectField,
-  NewFormikTextField,
+  FormikSelectField,
+  FormikTextField,
 } from '@uzh-bf/design-system'
 import { Form, Formik } from 'formik'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import LogoSelector  from '~/components/LogoSelector'
 import {
   SelfDocument,
   UpdatePlayerDataDocument,
 } from 'src/graphql/generated/ops'
 import { LOCATIONS } from 'src/lib/constants'
 import * as Yup from 'yup'
+import LogoSelector from '~/components/LogoSelector'
 
 import {
   Card,
@@ -117,7 +117,7 @@ function Welcome() {
                     <CardTitle>Introduction</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className='pb-4'>
+                    <div className="pb-4">
                       Welcome, {values.name}
                       <br />
                       Lucky you! You recently found out that you picked five
@@ -134,7 +134,6 @@ function Welcome() {
                         want to invest in bonds and what proportion you want to
                         invest in stocks.
                       </div>
-                      
                     </div>
                   </CardContent>
                 </Card>
@@ -158,12 +157,12 @@ function Welcome() {
                     </div>
                     <div className="flex flex-col">
                       <div className="flex-initial space-y-1.5">
-                        <NewFormikTextField
+                        <FormikTextField
                           label="Name of bank"
                           name="name"
                           className={{ label: 'pb-2 font-normal' }}
                         />
-                        <NewFormikSelectField
+                        <FormikSelectField
                           label="Location"
                           name="location"
                           items={LOCATIONS.Trader.map((label) => ({
@@ -177,13 +176,13 @@ function Welcome() {
                           }}
                         />
                         <LogoSelector
-                          label='Avatar'
+                          label="Avatar"
                           className="w-48 pb-2 text-sm text-gray-600"
                           color={values.color}
                           name="imgPathAvatar"
                         />
 
-                        <NewFormikSelectField
+                        <FormikSelectField
                           label="Color"
                           name="color"
                           items={Object.keys(COLORS).map((label) => ({

packages/ui/src/components/NavBar.tsx

@@ -7,6 +7,7 @@ import {
   NavigationMenuList,
   navigationMenuTriggerStyle,
 } from '@uzh-bf/design-system/dist/future'
+import { Button } from '@uzh-bf/design-system'
 
 interface Props {
   tabs: { name: string; href: string }[]
@@ -23,7 +24,7 @@ function NavBar({
   playerLevel,
   playerColor,
   playerImgPathAvatar,
-  playerHref = '/play/cockpit',
+  playerHref = '/play/welcome',
 }: Props) {
   return (
     <>
@@ -48,7 +49,9 @@ function NavBar({
               <div className="text-orange-700">Level {playerLevel}</div>
             </div>
             <div className="w-10">
-              <Logo imgPathAvatar={playerImgPathAvatar} color={playerColor} />
+              <Button className={{ root: 'p-0 hover:' }}>
+                <Logo imgPathAvatar={playerImgPathAvatar} color={playerColor} />
+              </Button>
             </div>
           </div>
         </Link>