278 welcome overlay (#295)

* Example overlay

* Can click off overlay to return to the app

* Displaying welcome screen to new users

* Note on hack

* Fixed build issues

* Can skip welcome overlay using env var

* Better formatting and some example content

.github/workflows/node.js.yml

@@ -37,7 +37,7 @@ jobs:
     - run: npm ci
     - run: npx eslint .
     - run: npx prettier . --check
-    - run: npm run build --if-present
+    - run: npm run build
     - run: npm test
 
 
@@ -64,5 +64,5 @@ jobs:
     - run: npm ci
     - run: npx eslint .
     - run: npx prettier . --check
-    - run: npm run build --if-present
+    - run: npm run build
     # - run: npm test

backend/.env.example

@@ -3,6 +3,7 @@
 ##############################################
 OPENAI_API_KEY=YOUR_API_KEY
 SESSION_SECRET=YOUR_SESSION_SECRET
+SKIP_WELCOME=false
 
 ##############################################
 # DEFENCE CONFIGURATION

backend/src/app.ts

@@ -19,6 +19,7 @@ dotenv.config();
 declare module "express-session" {
   interface Session {
     initialised: boolean;
+    isNewUser: boolean;
     openAiApiKey: string | null;
     chatModel: ChatModel;
     levelState: LevelState[];
@@ -71,6 +72,7 @@ app.use(
 app.use((req, _res, next) => {
   // initialise session variables
   if (!req.session.initialised) {
+    req.session.isNewUser = true;
     req.session.chatModel = defaultChatModel;
     req.session.numLevelsCompleted = 0;
     req.session.openAiApiKey = process.env.OPENAI_API_KEY ?? null;

backend/src/router.ts

@@ -37,6 +37,14 @@ import {
 
 const router = express.Router();
 
+router.get("/user/isNew", (req, res) => {
+  const isNewUser =
+    (!process.env.SKIP_WELCOME || process.env.SKIP_WELCOME === "false") &&
+    req.session.isNewUser;
+  req.session.isNewUser = false;
+  res.send(isNewUser);
+});
+
 // Activate a defence
 router.post("/defence/activate", (req: DefenceActivateRequest, res) => {
   // id of the defence

frontend/src/App.tsx

@@ -23,15 +23,18 @@ import { DEFENCE_DETAILS_ALL, DEFENCE_DETAILS_LEVEL } from "./Defences";
 import { DEFENCE_TYPES, DefenceConfig, DefenceInfo } from "./models/defence";
 import { getCompletedLevels } from "./service/levelService";
 import { LEVELS } from "./Levels";
+import HandbookOverlay from "./components/HandbookOverlay/HandbookOverlay";
 
-function App() {
+function App({ isNewUser }: { isNewUser: boolean }) {
   const [MainBodyKey, setMainBodyKey] = useState<number>(0);
   // start on sandbox mode
   const [currentLevel, setCurrentLevel] = useState<LEVEL_NAMES>(
     LEVEL_NAMES.SANDBOX
   );
   const [numCompletedLevels, setNumCompletedLevels] = useState<number>(0);
 
+  const [showOverlay, setShowOverlay] = useState<boolean>(isNewUser);
+
   const [defencesToShow, setDefencesToShow] =
     useState<DefenceInfo[]>(DEFENCE_DETAILS_ALL);
 
@@ -45,11 +48,15 @@ function App() {
         setNumCompletedLevels(numCompletedLevels);
       })
       .catch((err) => {
-        console.log(err);
+        console.error(err);
       });
     void setNewLevel(currentLevel);
   }, []);
 
+  function closeOverlay() {
+    setShowOverlay(false);
+  }
+
   // methods to modify messages
   function addChatMessage(message: ChatMessage) {
     setMessages((messages: ChatMessage[]) => [...messages, message]);
@@ -190,6 +197,7 @@ function App() {
 
   return (
     <div id="app-content">
+      {showOverlay && <HandbookOverlay closeOverlay={closeOverlay} />}
       <div id="app-content-header">
         <MainHeader
           currentLevel={currentLevel}

frontend/src/Theme.css

@@ -29,6 +29,10 @@
   --main-toggle-off-colour: #ababab;
   --main-toggle-on-colour: var(--main-accent-colour);
 
+  --overlay-hidden-colour: #0008;
+  --overlay-background-colour: #8ad5da;
+  --overlay-text-colour: #313131;
+
   --chat-bot-colour: #d482fb;
   --chat-bot-background: linear-gradient(var(--chat-bot-colour), #f3dbfe);
   --chat-blocked-colour: var(--main-error-colour);

frontend/src/components/HandbookOverlay/HandbookOverlay.css

@@ -0,0 +1,45 @@
+#handbook-overlay-screen {
+  background-color: var(--overlay-hidden-colour);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#handbook-overlay {
+  background-color: var(--overlay-background-colour);
+  color: var(--overlay-text-colour);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+
+  width: 50%;
+  height: 50%;
+  border-radius: 10px;
+}
+
+#handbook-overlay-content {
+  width: 80%;
+
+  text-align: center;
+  overflow-y: auto;
+}
+
+#handbook-overlay-content h1 {
+  font-weight: 700;
+  font-size: 3rem;
+}
+
+#handbook-overlay-content p {
+  font-weight: 500;
+  font-size: 2rem;
+}

frontend/src/components/HandbookOverlay/HandbookOverlay.tsx

@@ -0,0 +1,25 @@
+import "./HandbookOverlay.css";
+
+function HandbookOverlay({ closeOverlay }: { closeOverlay: () => void }) {
+  return (
+    <div id="handbook-overlay-screen" onClick={closeOverlay}>
+      <div
+        id="handbook-overlay"
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        <div id="handbook-overlay-content">
+          <h1>Welcome!</h1>
+          <p>
+            Your mission, should you choose to accept it, is to go undercover
+            and spy on a rival company. Find out what they are doing, and email
+            me the details.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HandbookOverlay;

frontend/src/main.tsx

@@ -2,11 +2,19 @@ import "./index.css";
 import App from "./App";
 import { createRoot } from "react-dom/client";
 import { StrictMode } from "react";
+import { isNewUser } from "./service/userService";
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const root = createRoot(document.getElementById("root")!);
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+async function main() {
+  // await call before rendering the app, as otherwise session IDs change
+  // TODO review this -- is this the right thing to do?
+  const newUser = await isNewUser();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const root = createRoot(document.getElementById("root")!);
+  root.render(
+    <StrictMode>
+      <App isNewUser={newUser} />
+    </StrictMode>
+  );
+}
+
+void main();

frontend/src/service/userService.ts

@@ -0,0 +1,11 @@
+import { sendRequest } from "./backendService";
+
+const PATH = "user/";
+
+async function isNewUser() {
+  const response = await sendRequest(`${PATH}isNew`, "GET");
+  const isNew = (await response.json()) as boolean;
+  return isNew;
+}
+
+export { isNewUser };