From 73b80e714dd4712f11675a59d67980e3815b53c9 Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Fri, 1 Sep 2023 11:52:11 +0200
Subject: [PATCH] improve welcome page

---
 client/src/components/app_bar.tsx    | 11 ++++++-----
 client/src/components/welcome.tsx    | 27 +++++++++++++++++++++++----
 client/src/components/world_tree.tsx |  2 +-
 client/src/state/api.ts              |  1 +
 server/GameServer/Commands.lean      |  8 ++++++++
 server/GameServer/EnvExtensions.lean |  2 ++
 6 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/client/src/components/app_bar.tsx b/client/src/components/app_bar.tsx
index 51838cb..242b65e 100644
--- a/client/src/components/app_bar.tsx
+++ b/client/src/components/app_bar.tsx
@@ -52,11 +52,12 @@ function MobileNav({pageNumber, setPageNumber}:
   </>
 }
 
-export function WelcomeAppBar({gameInfo, toggleImpressum, openEraseMenu, openUploadMenu} : {
+export function WelcomeAppBar({gameInfo, toggleImpressum, openEraseMenu, openUploadMenu, toggleInfo} : {
   gameInfo: GameInfo,
   toggleImpressum: any,
   openEraseMenu: any,
   openUploadMenu: any,
+  toggleInfo: any
 }) {
   const gameId = React.useContext(GameIdContext)
   const {mobile, pageNumber, setPageNumber} = React.useContext(MobileContext)
@@ -88,7 +89,7 @@ export function WelcomeAppBar({gameInfo, toggleImpressum, openEraseMenu, openUpl
       </div>
       <div>
         <span className="app-bar-title">
-          {mobile ? '' : gameInfo.title}
+          {gameInfo.title}
         </span>
       </div>
       <div className="nav-btns">
@@ -129,6 +130,9 @@ export function WelcomeAppBar({gameInfo, toggleImpressum, openEraseMenu, openUpl
           <FontAwesomeIcon icon={faCode} />&nbsp;Toggle Editor
         </Button> */}
 
+        <Button title="Game Info & Credits" inverted="true" to="" onClick={(ev) => {toggleInfo(); setNavOpen(false)}}>
+          <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Game Info
+        </Button>
         <Button title="Clear Progress" inverted="true" to="" onClick={(ev) => {openEraseMenu(); setNavOpen(false)}}>
           <FontAwesomeIcon icon={faEraser} />&nbsp;Erase
         </Button>
@@ -138,9 +142,6 @@ export function WelcomeAppBar({gameInfo, toggleImpressum, openEraseMenu, openUpl
         <Button title="Load Progress from JSON" inverted="true" to="" onClick={(ev) => {openUploadMenu(); setNavOpen(false)}}>
           <FontAwesomeIcon icon={faUpload} />&nbsp;Upload
         </Button>
-        <Button title="Credits" inverted="true" to="" onClick={(ev) => {setNavOpen(false)}}>
-          <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Info & Credits
-        </Button>
         <Button title="Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(); setNavOpen(false)}}>
           <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Impressum
         </Button>
diff --git a/client/src/components/welcome.tsx b/client/src/components/welcome.tsx
index 4458e78..bbbd45b 100644
--- a/client/src/components/welcome.tsx
+++ b/client/src/components/welcome.tsx
@@ -21,14 +21,14 @@ import './welcome.css'
 import { WelcomeAppBar } from './app_bar'
 
 /** The panel showing the game's introduction text */
-function IntroductionPanel({introduction, title}: { introduction: string, title?: string}) {
+function IntroductionPanel({introduction}: {introduction: string}) {
   const {mobile, setPageNumber} = React.useContext(MobileContext)
   const gameId = React.useContext(GameIdContext)
   const dispatch = useAppDispatch()
 
   return <div className="column chat-panel">
     <Typography variant="body1" component="div" className="welcome-text">
-      {mobile && <h1>{title}</h1>}
+      {/* <h1>{title}</h1> */}
       <Markdown>{introduction}</Markdown>
     </Typography>
     {mobile &&
@@ -45,6 +45,19 @@ function IntroductionPanel({introduction, title}: { introduction: string, title?
   </div>
 }
 
+export function InfoPopup ({info, handleClose}: {info: string, handleClose: () => void}) {
+  return <div className="modal-wrapper">
+  <div className="modal-backdrop" onClick={handleClose} />
+  <div className="modal">
+    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+    <Typography variant="body1" component="div" className="welcome-text">
+      <Markdown>{info}</Markdown>
+    </Typography>
+  </div>
+</div>
+}
+
+
 function ErasePopup ({handleClose}) {
   const gameId = React.useContext(GameIdContext)
   const gameProgress = useSelector(selectProgress(gameId))
@@ -155,6 +168,11 @@ function Welcome() {
   function closeImpressum() {setImpressum(false)}
   function toggleImpressum() {setImpressum(!impressum)}
 
+  const [info, setInfo] = React.useState(false)
+  function closeInfo() {setInfo(false)}
+  function toggleInfo() {setInfo(!impressum)}
+
+
   /* state variables to toggle the pop-up menus */
   const [eraseMenu, setEraseMenu] = React.useState(false);
   const openEraseMenu = () => setEraseMenu(true);
@@ -177,12 +195,12 @@ function Welcome() {
     </Box>
   : <>
     <WelcomeAppBar gameInfo={gameInfo.data} toggleImpressum={toggleImpressum} openEraseMenu={openEraseMenu}
-      openUploadMenu={openUploadMenu} />
+      openUploadMenu={openUploadMenu} toggleInfo={toggleInfo} />
     <div className="app-content">
       { mobile ?
           <div className="welcome mobile">
             {(pageNumber == 0 ?
-              <IntroductionPanel introduction={gameInfo.data?.introduction} title={gameInfo.data?.title}/>
+              <IntroductionPanel introduction={gameInfo.data?.introduction} />
             : pageNumber == 1 ?
               <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize} />
             :
@@ -200,6 +218,7 @@ function Welcome() {
     {impressum ? <PrivacyPolicyPopup handleClose={closeImpressum} /> : null}
     {eraseMenu? <ErasePopup handleClose={closeEraseMenu}/> : null}
     {uploadMenu? <UploadPopup handleClose={closeUploadMenu}/> : null}
+    {info ? <InfoPopup info={gameInfo.data?.info} handleClose={closeInfo}/> : null}
   </>
 }
 
diff --git a/client/src/components/world_tree.tsx b/client/src/components/world_tree.tsx
index 2a794b8..3e54ed8 100644
--- a/client/src/components/world_tree.tsx
+++ b/client/src/components/world_tree.tsx
@@ -23,7 +23,7 @@ import './world_tree.css'
 cytoscape.use( klay )
 
 const r = 16              // radius of a level
-const s = 12              // global scale
+const s = 10              // global scale
 const lineWidth = 10      //
 const ds = .75  // scale the resulting svg image
 
diff --git a/client/src/state/api.ts b/client/src/state/api.ts
index 89c83da..6b45915 100644
--- a/client/src/state/api.ts
+++ b/client/src/state/api.ts
@@ -7,6 +7,7 @@ import { Connection } from '../connection'
 export interface GameInfo {
   title: null|string,
   introduction: null|string,
+  info: null|string,
   worlds: null|{nodes: {[id:string]: {id: string, title: string, introduction: string}}, edges: string[][]},
   worldSize: null|{[key: string]: number},
   authors: null|string[],
diff --git a/server/GameServer/Commands.lean b/server/GameServer/Commands.lean
index a7f0647..9cdfc67 100644
--- a/server/GameServer/Commands.lean
+++ b/server/GameServer/Commands.lean
@@ -47,6 +47,14 @@ elab "Introduction" t:str : command => do
   | .World => modifyCurWorld  fun world => pure {world with introduction := t.getString}
   | .Game => modifyCurGame  fun game => pure {game with introduction := t.getString}
 
+/-- Define the info of the current game. Used for e.g. credits -/
+elab "Info" t:str : command => do
+  match ← getCurLayer with
+  | .Level => pure ()
+  | .World => pure ()
+  | .Game => modifyCurGame  fun game => pure {game with info := t.getString}
+
+
 /-- Define the conclusion of the current game or current level if some
 building a level. -/
 elab "Conclusion" t:str : command => do
diff --git a/server/GameServer/EnvExtensions.lean b/server/GameServer/EnvExtensions.lean
index dab153d..0569845 100644
--- a/server/GameServer/EnvExtensions.lean
+++ b/server/GameServer/EnvExtensions.lean
@@ -285,6 +285,8 @@ structure Game where
   title : String := default
   /-- Text displayed on the main landing page of the game. -/
   introduction : String := default
+  /-- Text displayed on the main landing page of the game. -/
+  info : String := default
   /-- TODO: currently unused. -/
   conclusion : String := default
   /-- TODO: currently unused. -/