enhanced(demo-game): Demo-Game feature extensions (#48)

* Adding dice as ui component

* added logo component

* adding player display as ui component

* some refinements for PlayerDisplay

* changing logo back to absolute positions, something is off

* adding achievement as component

* StorageOverview

* Probability chart, tooltip missing, input could be extended

* timeline entry

* adding timeline, not generic yet

* sort game list and beautify

* new player list visualization, needs to be moved to ui

* demo-game: initial modification of welcome page

* demo-game: initial display player

* Adding dice as ui component

* added logo component

* some refinements for PlayerDisplay

* changing logo back to absolute positions, something is off

* Probability chart, tooltip missing, input could be extended

* remove react types in tsconfig

* demo-game fixing transformer in cockpit

* order on db side when querying games

* remove indices when showing list of games

* removing redundant key tags in children

* wrap game links into buttons

* wrap button into link

* fix old typo

* added todo to welcome page

* demo-game: refetchQueries and cleaning cockpit

* adding player count and activeSegmentIx in data game for showing info

* starting showing transactions

* enhanced(ui): UI package extensions with components and calls in demo-game (#47)

* Adding dice as ui component

* added logo component

* Probability chart, tooltip missing, input could be extended

* fix css and Logo component

* generalize playerDisplay, Logo/Avatar

* adding xp bar

* Storage Overview adapting height size

* adjusted some todos for timeline entry

* timeline

* Trading

* adding price to trading form

* adding navbar

* sidebar structure

* remove duplicate style imports

* pin next peer dep in ui package

* remove redundant type in formik

* customize period and segment names in timeline entry

* remove redundant key reference in object

* add strings and booleans directly in components (here layout)

* direct inference of booleans in timeline entry

* some clean up

* remove hard-coded number of segments in timeline

* refining layout

* storage overview fallback if no images are provided

* rounded edges for avatar

* timeline admin prep

* change avatar to button

* providing react nodes for icons in storage overview

* trading form validation schema with yup

* TimelineEntry entryStatus, past, current and future

* adding segmentCount to periods in db and for fetching

* avoid spread syntax on accumulators

* providing types for achievements

* cleaning up rest of todos and comments for segment count and filtering

---------

Co-authored-by: Roland Schläfli <[email protected]>

* adding some missing keys in ui package and cockpit

* adding colors to the welcome page

* adding locations to demo-game

* page layout for demo-game

* adding more locations

* immutable getGames - let to const

* peerDependencies for the ui package

* refine ui layout with custom sidebar addons

* cleaner reexporting, named export

* tradingform adding max, removing min, which is 0

* ui trading from formiknumberfield

* timeline entry removing redundant code

* direct input string TimelineAdmin

* integrating a new design system

* integrating shadcn ui in the navbar

* fixing react and formik version in peerdependencies of packages

* shadcn line graph

* adding additonal info to the game list, player count, etc

* moving player color, avatar and location to facts

* transactions and decision history components

* cleaning transaction display component

* cards for decision and transactio history, some refactoring

* wrap histories

* sizing transaction history cards

* refactoring game header

* applied review suggestions

* refined welcome page

* adding playerfacts to platform

* demo-game welcome page, default bank name and additional todo

* fix ordering of games when creating a new one

* revert currentGame prisma obj copy

* fix admin next button

* add admin button segment result

---------

Co-authored-by: Roland Schläfli <[email protected]>

apps/demo-game/next.config.js

@@ -9,7 +9,7 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  // transpilePackages: ['@gbl-uzh/ui'],
+  transpilePackages: ['@gbl-uzh/ui'],
 }
 
 module.exports = nextConfig

apps/demo-game/package.json

@@ -5,17 +5,17 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@apollo/client": "3.11.1",
-    "@fortawesome/fontawesome-svg-core": "6.4.2",
-    "@fortawesome/free-regular-svg-icons": "6.4.2",
-    "@fortawesome/free-solid-svg-icons": "6.4.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-regular-svg-icons": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@gbl-uzh/platform": "workspace:*",
     "@gbl-uzh/ui": "workspace:*",
     "@next-auth/prisma-adapter": "1.0.7",
     "@prisma/client": "5.17.0",
-    "@uzh-bf/design-system": "2.13.3",
+    "@uzh-bf/design-system": "3.0.0-alpha.13",
     "date-fns": "2.30.0",
-    "formik": "2.4.3",
+    "formik": "2.4.6",
     "graphql": "16.9.0",
     "graphql-sse": "2.2.3",
     "graphql-yoga": "4.0.4",
@@ -29,14 +29,18 @@
     "nookies": "2.5.2",
     "prisma": "5.17.0",
     "ramda": "0.29.0",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-dice-complete": "2.2.0",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-i18next": "12.3.1",
     "recharts": "2.8.0",
-    "tailwind-merge": "1.14.0",
+    "tailwind-merge": "2.4.0",
     "ts-pattern": "5.0.5",
-    "yup": "1.2.0"
+    "yup": "1.2.0",
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.1.1",
+    "dayjs": "1.11.12",
+    "lucide-react": "0.424.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.0",
@@ -56,14 +60,17 @@
     "eslint-config-next": "14.2.5",
     "jest": "29.6.4",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.39",
+    "postcss": "8.4.41",
     "prettier": "2.8.8",
     "prettier-plugin-organize-imports": "3.2.3",
     "prettier-plugin-tailwindcss": "0.4.1",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "3.4.7",
     "ts-jest": "29.1.1",
     "tsx": "4.11.2",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "postcss-import": "16.1.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-radix": "^3.0.0"
   },
   "scripts": {
     "build": "run-s prisma:copy prisma:generate build:nexus build:graphql build:next",

apps/demo-game/prisma/schema.prisma

@@ -183,9 +183,6 @@ model Player {
 
   number   Int     @default(-1)
   name     String  @default("Anonymous")
-  avatar   String  @default("")
-  location String  @default("")
-  color    String  @default("White")
   isReady  Boolean @default(false)
 
   experience        Int         @default(0)