GUI client source code overview

Updated 2024-10-30

All locations mentioned below are given relative to the source code root, which is src

• index.tsx - the main file; calls App.tsx
• App.tsx - has a number of conditionals that look at the query string given to index.html, and produce different pages depending on them. In particular:
  • ?help=true -- give a help page (pages/Help)
  • ?version=true -- report the client's version number and the server's version number (obtained from the server via an HTTP request)
  • ... page === Page.CONSENT -- consent page (Consent)
  • ... page === Page.LOADING_TRIALS -- transient page (LoadingTrials)
  • ... page === Page.TRIALS -- the main game window (pages/Trials)
  • ... page === Page.DEMOGRAPHICS_INSTRUCTIONS -- DemographicsInstructions
  • ... page === Page.DEMOGRAPHICS -- (post-game survey) Demographics
  • ... page === Page.DEBRIEFING -- (final confirmation) Debriefing
• pages/Trials -- the main game window. The layout is different depending on the incentive scheme used in the currently played game.
  • If the incentive scheme is Incentive.DOUBLING or Incentive.LIKELIHOOD, we need to have the window split into the left and right section, the right containing the playing board, and the left containing the progress indicators (rows of smiling / frowning faces, and various statistics) needed for these incentive schemes. This calls for components/IncentiveScheme/HUDIncentiveScheme, with components/Game used for the actual playing board inside the right section of the window.
  • For any other incentive scheme, we just need the section with the playing board. That's done by calling components/HUD, with the same components/Game used for the actual playing board.
• components/HUD -- sets up a Grommet Grid, with various text info fields in most cells, and the game board (implemented by components/Game) in on of the middle fields.