From 8818bcbbea0b80a44bde41cd7a42a6beb4f3e3f2 Mon Sep 17 00:00:00 2001
From: jajakob <j.jacob.cano@gmail.com>
Date: Tue, 23 Jul 2024 11:33:07 +0200
Subject: [PATCH] demo-game: initial display player

---
 apps/demo-game/src/pages/admin/games/[id].tsx | 199 +++++++++---------
 apps/demo-game/src/pages/play/cockpit.tsx     | 162 +++++++++-----
 apps/demo-game/src/pages/play/welcome.tsx     |   2 +-
 packages/platform/src/lib/util.ts             |   6 +-
 4 files changed, 211 insertions(+), 158 deletions(-)

diff --git a/apps/demo-game/src/pages/admin/games/[id].tsx b/apps/demo-game/src/pages/admin/games/[id].tsx
index d48c36f7..f6b2804c 100644
--- a/apps/demo-game/src/pages/admin/games/[id].tsx
+++ b/apps/demo-game/src/pages/admin/games/[id].tsx
@@ -73,19 +73,6 @@ function ManageGame() {
     }
   )
 
-  if (loading || !data?.game) {
-    return <div>loading...</div>
-  }
-
-  if (error) {
-    return <div>{error.message}</div>
-  }
-
-  const game = data.game
-  const activePeriod = game?.activePeriod
-  const segments = activePeriod?.segments
-  const activeSegmentIx = activePeriod?.activeSegmentIx
-
   const nextPeriod = () =>
     activateNextPeriod({
       variables: {
@@ -103,6 +90,11 @@ function ManageGame() {
     })
 
   const getButton = useCallback(() => {
+    const game = data.game
+    const activePeriod = game?.activePeriod
+    const segments = activePeriod?.segments
+    const activeSegmentIx = activePeriod?.activeSegmentIx
+
     const isScheduled = game.status === GameStatus.Scheduled
     const isResultState = game.status === GameStatus.Results
     if (!activePeriod || isScheduled || isResultState) {
@@ -144,7 +136,17 @@ function ManageGame() {
         Period Results
       </Button>
     )
-  }, [game.status])
+  }, [data?.game])
+
+  if (loading || !data?.game) {
+    return <div>loading...</div>
+  }
+
+  if (error) {
+    return <div>{error.message}</div>
+  }
+
+  const game: Game = data.game
 
   // TODO(JJ): Since it is not refreshing nicely after a new status update of
   // period or one of the segments, I am wondering if we should precompute
@@ -156,8 +158,8 @@ function ManageGame() {
     <div className="p-4">
       <div>
         <div className="flex flex-col gap-2 overflow-x-auto md:flex-row">
-          {data.game.periods.map((period, ix) => {
-            const periodStatus = computePeriodStatus(data.game as Game, ix)
+          {game.periods.map((period, ix) => {
+            const periodStatus = computePeriodStatus(game, ix)
 
             const labels = [
               period.facts.spotTradingEnabled && 'S',
@@ -216,7 +218,7 @@ function ManageGame() {
                   <div className="mt-1 flex flex-row gap-1">
                     {period.segments.map((segment, ix) => {
                       const segmentStatus = computeSegmentStatus(
-                        data.game as Game,
+                        game,
                         period as Period,
                         ix
                       )
@@ -263,86 +265,85 @@ function ManageGame() {
                         </div>
                       )
                     })}
-                    {!isPeriodCompleted &&
-                      (data.game as Game).periods.length - 1 === ix && (
-                        <Formik
-                          initialValues={{
-                            periodIx: -1,
-                            storyElements: '',
-                            learningElements: '',
-                          }}
-                          onSubmit={async (variables, { resetForm }) => {
-                            await addPeriodSegment({
-                              variables: {
-                                gameId: Number(router.query.id),
-                                periodIx: variables.periodIx,
-                                facts: {},
-                                storyElements: variables.storyElements
-                                  ? variables.storyElements.split(',')
-                                  : [],
-                                learningElements: variables.learningElements
-                                  ? variables.learningElements.split(',')
-                                  : [],
-                              },
-                            })
-                            resetForm()
-                          }}
-                        >
-                          {(newSegmentForm) => (
-                            <Modal
-                              open={isSegmentModalOpen}
-                              onClose={() => setIsSegmentModalOpen(false)}
-                              trigger={
-                                <Button
-                                  className={{
-                                    root: 'h-full w-12 font-bold text-gray-500',
-                                  }}
-                                  onClick={() => setIsSegmentModalOpen(true)}
-                                  data={{ cy: 'add-segment' }}
-                                >
-                                  <FontAwesomeIcon icon={faPlus} />
-                                </Button>
-                              }
-                              title="Add Segment"
-                              onSecondaryAction={
-                                <Button
-                                  onClick={() => {
-                                    newSegmentForm.resetForm()
-                                    setIsSegmentModalOpen(false)
-                                  }}
-                                >
-                                  Discard
-                                </Button>
-                              }
-                              onPrimaryAction={
-                                <Button
-                                  onClick={async () => {
-                                    await newSegmentForm.setFieldValue(
-                                      'periodIx',
-                                      period.index
-                                    )
-                                    newSegmentForm.handleSubmit()
-                                    setIsSegmentModalOpen(false)
-                                  }}
-                                >
-                                  Submit
-                                </Button>
-                              }
-                            >
-                              <FormikTextField
-                                name="storyElements"
-                                label="Story Elements"
-                                data={{ cy: 'story-elements' }}
-                              />
-                              <FormikTextField
-                                name="learningElements"
-                                label="Learning Elements"
-                                data={{ cy: 'learning-elements' }}
-                              />
-                            </Modal>
-                          )}
-                        </Formik>
-                      )}
+                    {!isPeriodCompleted && game.periods.length - 1 === ix && (
+                      <Formik
+                        initialValues={{
+                          periodIx: -1,
+                          storyElements: '',
+                          learningElements: '',
+                        }}
+                        onSubmit={async (variables, { resetForm }) => {
+                          await addPeriodSegment({
+                            variables: {
+                              gameId: Number(router.query.id),
+                              periodIx: variables.periodIx,
+                              facts: {},
+                              storyElements: variables.storyElements
+                                ? variables.storyElements.split(',')
+                                : [],
+                              learningElements: variables.learningElements
+                                ? variables.learningElements.split(',')
+                                : [],
+                            },
+                          })
+                          resetForm()
+                        }}
+                      >
+                        {(newSegmentForm) => (
+                          <Modal
+                            open={isSegmentModalOpen}
+                            onClose={() => setIsSegmentModalOpen(false)}
+                            trigger={
+                              <Button
+                                className={{
+                                  root: 'h-full w-12 font-bold text-gray-500',
+                                }}
+                                onClick={() => setIsSegmentModalOpen(true)}
+                                data={{ cy: 'add-segment' }}
+                              >
+                                <FontAwesomeIcon icon={faPlus} />
+                              </Button>
+                            }
+                            title="Add Segment"
+                            onSecondaryAction={
+                              <Button
+                                onClick={() => {
+                                  newSegmentForm.resetForm()
+                                  setIsSegmentModalOpen(false)
+                                }}
+                              >
+                                Discard
+                              </Button>
+                            }
+                            onPrimaryAction={
+                              <Button
+                                onClick={async () => {
+                                  await newSegmentForm.setFieldValue(
+                                    'periodIx',
+                                    period.index
+                                  )
+                                  newSegmentForm.handleSubmit()
+                                  setIsSegmentModalOpen(false)
+                                }}
+                              >
+                                Submit
+                              </Button>
+                            }
+                          >
+                            <FormikTextField
+                              name="storyElements"
+                              label="Story Elements"
+                              data={{ cy: 'story-elements' }}
+                            />
+                            <FormikTextField
+                              name="learningElements"
+                              label="Learning Elements"
+                              data={{ cy: 'learning-elements' }}
+                            />
+                          </Modal>
+                        )}
+                      </Formik>
+                    )}
                   </div>
                 </div>
                 <div
@@ -404,7 +405,7 @@ function ManageGame() {
                     onClick={async () => {
                       await newPeriodForm.setFieldValue(
                         'newPeriodIx',
-                        (data.game as Game).periods.length
+                        game.periods.length
                       )
                       newPeriodForm.handleSubmit()
                       setIsPeriodModalOpen(false)
@@ -430,7 +431,7 @@ function ManageGame() {
       <div className="mt-4 max-w-sm">
         <div className="font-bold">Players</div>
         <div className="mt-2 flex flex-col gap-4">
-          {data.game.players.map((player, ix) => (
+          {game.players.map((player, ix) => (
             <div key={player.id} data-cy={`player-${ix}`}>
               <PlayerCompact key={player.id} player={player as Player} />
             </div>
diff --git a/apps/demo-game/src/pages/play/cockpit.tsx b/apps/demo-game/src/pages/play/cockpit.tsx
index 509d25e3..004e58d4 100644
--- a/apps/demo-game/src/pages/play/cockpit.tsx
+++ b/apps/demo-game/src/pages/play/cockpit.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from '@apollo/client'
+import { PlayerDisplay } from '@gbl-uzh/ui'
 import { Switch, Table } from '@uzh-bf/design-system'
 import { useEffect, useState } from 'react'
 import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts'
@@ -177,6 +178,28 @@ function Cockpit() {
     },
   ]
 
+  // TODO(JJ):
+  // - Level is not consistent with component
+  // Component wants a number, level is an object, though.
+  // console.log(self)
+  // - Do onclick logic
+  // - PlayerDisplay is not ideal/nice yet
+  const playerDisplay = (
+    <div className="w-1/4">
+      <PlayerDisplay
+        achievements={self?.achievements}
+        name={self?.name}
+        color={self?.color}
+        level={0}
+        xpToNext={self?.experienceToNext}
+        xp={self?.experience}
+        avatar={self?.avatar}
+        location={self?.location}
+        onClick={() => {}}
+      />
+    </div>
+  )
+
   const header = (
     <div className="rounded border p-4">
       <div className="font-bold">
@@ -189,38 +212,56 @@ function Cockpit() {
 
   switch (currentGame?.status) {
     case 'PREPARATION':
-      return <div>{header} Game is begin prepared.</div>
+      return (
+        <div className="flex w-full justify-between">
+          <div>{header} Game is begin prepared.</div>
+          {/* <div>{playerDisplay}</div> */}
+          {playerDisplay}
+        </div>
+      )
 
     case 'COMPLETED':
       return <div> Game is completed. </div>
 
     case 'CONSOLIDATION':
-      return <div> Game is being consolidated. </div>
-
-    case 'PREPARATION':
-      return <div> Game is being prepared. </div>
+      return (
+        <div className="flex w-full justify-between">
+          <div> Game is being consolidated. </div>
+          {playerDisplay}
+        </div>
+      )
 
     case 'RESULTS':
-      return <div> RESULTS </div>
+      return (
+        <div className="flex w-full justify-between">
+          <div> RESULTS </div>
+          {playerDisplay}
+        </div>
+      )
 
     case 'SCHEDULED':
-      return <div> Game is scheduled. </div>
+      return (
+        <div className="flex w-full justify-between">
+          <div> Game is scheduled. </div>
+          {playerDisplay}
+        </div>
+      )
 
     case 'PAUSED':
       const totalAssetsPerMonth = getTotalAssetsOfPreviousResults(
         previousResults
       ).map((s, i) => ({ total: s, month: 'month_' + String(i) }))
       return (
-        <div>
-          {header}
-          <div className="max-w-2xl">
-            <Table
-              columns={columns_segment_results}
-              data={data_segment_results}
-              caption=""
-            />
-          </div>
-          <div className="max-w-2xl">
+        <div className="flex w-full justify-between">
+          <div>
+            {header}
+            <div className="max-w-2xl">
+              <Table
+                columns={columns_segment_results}
+                data={data_segment_results}
+                caption=""
+              />
+            </div>
             <div className="flex justify-center">Total over time chart</div>
             <LineChart width={600} height={400} data={totalAssetsPerMonth}>
               <Line type="monotone" dataKey="total" stroke="#8884d8" />
@@ -230,55 +271,62 @@ function Cockpit() {
               <Tooltip />
             </LineChart>
           </div>
+
+          {playerDisplay}
         </div>
       )
 
     case 'RUNNING':
       return (
-        <div>
-          {header}
-          <div className="max-w-md">
-            <Table
-              columns={columns_portfolio}
-              data={data_portfolio}
-              caption=""
-            />
-          </div>
+        <div className="flex w-full justify-between">
+          <div>
+            {header}
+            <div className="max-w-md">
+              <Table
+                columns={columns_portfolio}
+                data={data_portfolio}
+                caption=""
+              />
+            </div>
 
-          <div className="rounded border p-4">
-            {decisions.map(function (decision, i) {
-              return (
-                <div className="p-1" key={decision.name}>
-                  <Switch
-                    label={decision.label(
-                      decision.state
-                        ? 1 /
-                            (+bankDecisionState +
-                              +bondsDecisionState +
-                              +stockDecisionState)
-                        : 0,
-                      resultFacts.assets.totalAssets
-                    )}
-                    checked={decision.state}
-                    id="switch"
-                    onCheckedChange={async (checked) => {
-                      decision.effect(checked)
-                      await performAction({
-                        variables: {
-                          type: decision.action,
-                          payload: JSON.stringify({
-                            decision: checked,
-                          }),
-                        },
-                      })
-                    }}
-                  />
-                </div>
-              )
-            })}
+            <div className="rounded border p-4">
+              {decisions.map(function (decision, i) {
+                return (
+                  <div className="p-1" key={decision.name}>
+                    <Switch
+                      label={decision.label(
+                        decision.state
+                          ? 1 /
+                              (+bankDecisionState +
+                                +bondsDecisionState +
+                                +stockDecisionState)
+                          : 0,
+                        resultFacts.assets.totalAssets
+                      )}
+                      checked={decision.state}
+                      id="switch"
+                      onCheckedChange={async (checked) => {
+                        decision.effect(checked)
+                        await performAction({
+                          variables: {
+                            type: decision.action,
+                            payload: JSON.stringify({
+                              decision: checked,
+                            }),
+                          },
+                        })
+                      }}
+                    />
+                  </div>
+                )
+              })}
+            </div>
           </div>
+          {playerDisplay}
         </div>
       )
+    default:
+      return <div> Game has not been created yet. </div>
   }
 }
 
diff --git a/apps/demo-game/src/pages/play/welcome.tsx b/apps/demo-game/src/pages/play/welcome.tsx
index 6fc9f865..52c27abe 100644
--- a/apps/demo-game/src/pages/play/welcome.tsx
+++ b/apps/demo-game/src/pages/play/welcome.tsx
@@ -60,7 +60,7 @@ function Welcome() {
                 />
               </div>
               <div className="prose flex-1">
-                Welcome, {values.name}! Your company has its headquarters in{' '}
+                Welcome, {values.name}! Your bank has its headquarters in{' '}
                 {values.location}.
               </div>
             </div>
diff --git a/packages/platform/src/lib/util.ts b/packages/platform/src/lib/util.ts
index b9819e9f..79150e4b 100644
--- a/packages/platform/src/lib/util.ts
+++ b/packages/platform/src/lib/util.ts
@@ -26,7 +26,11 @@ export function diceRoll(seeds: number[] = []) {
   return integer(1, 6)(rng)
 }
 
-export function computeScenarioOutcome(trend: number, gap: number, diceRoll: number) {
+export function computeScenarioOutcome(
+  trend: number,
+  gap: number,
+  diceRoll: number
+) {
   return trend + (diceRoll - 7) * gap
 }