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))',

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>