Game areas

neu-se · Oct 22, 2023 · cf69be6 · cf69be6
1 parent ae52c1f
commit cf69be6
Show file tree

Hide file tree

Showing 78 changed files with 5,413 additions and 1,802 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,15 @@
 {
-    "jest.jestCommandLine": "npx jest",
-    "typescript.tsdk": "./townService/node_modules/typescript/lib"
+  "jest.jestCommandLine": "npx jest",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "prettier.configPath": "./townService/.prettierrc.cjs",
+  "editor.formatOnSave": false,
+  // Runs Prettier, then ESLint
+  "editor.codeActionsOnSave": [
+    "source.formatDocument",
+    "source.fixAll.eslint"
+  ],
+  "eslint.workingDirectories": [
+    "./frontend",
+    "./townService",
+  ]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,28 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Start frontend Development Server",
+            "type": "npm",
+            "script": "dev",
+            "path": "frontend",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        },
+        {
+            "label": "Start townService",
+            "type": "npm",
+            "script": "start",
+            "path": "townService",
+            "options": {
+                "cwd": "${workspaceFolder}/townService"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}
diff --git a/README.md b/README.md
@@ -41,7 +41,10 @@ The backend will automatically restart if you change any of the files in the `to
 
 Create a `.env` file in the `frontend` directory, with the line: `NEXT_PUBLIC_TOWNS_SERVICE_URL=http://localhost:8081` (if you deploy the towns service to another location, put that location here instead)
 
+For ease of debugging, you might also set the environmental variable `NEXT_PUBLIC_TOWN_DEV_MODE=true`. When set to `true`, the frontend will
+automatically connect to the town with the friendly name "DEBUG_TOWN" (creating one if needed), and will *not* try to connect to the Twilio API. This is useful if you want to quickly test changes to the frontend (reloading the page and re-acquiring video devices can be much slower than re-loading without Twilio).
+
 ### Running the frontend
 
-In the `frontend` directory, run `npm start` (again, you'll need to run `npm install` the very first time). After several moments (or minutes, depending on the speed of your machine), a browser will open with the frontend running locally.
-The frontend will automatically re-compile and reload in your browser if you change any files in the `frontend/src` directory.
+In the `frontend` directory, run `npm run dev` (again, you'll need to run `npm install` the very first time). After several moments (or minutes, depending on the speed of your machine), a browser will open with the frontend running locally.
+The frontend will automatically re-compile and reload in your browser if you change any files in the `frontend/src` directory.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -39,6 +39,11 @@ module.exports = {
         selector: 'variable',
         format: ['camelCase'],
       },
+      {
+        selector: 'variable',
+        types: ['function'], 
+        format: ['camelCase', 'PascalCase']
+      },
       {
         selector: 'typeLike',
         format: ['PascalCase'],

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -52,10 +52,15 @@
     "typed-emitter": "^2.1.0",
     "typescript": "^4.9.5"
   },
+  "engines": {
+    "node": "18.x.x",
+    "npm": "9.x.x"
+  },
   "scripts": {
     "prestart": "npm run client",
     "start": "next start",
     "build": "next build",
+    "export": "next export",
     "dev": "next dev",
     "test": "cross-env DEBUG_PRINT_LIMIT=0 jest",
     "test-watch": "jest --watch",

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import './App.css';
+import React from 'react';
 import dynamic from 'next/dynamic';
 
 //eslint-disable-next-line @typescript-eslint/naming-convention

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import dynamic from 'next/dynamic';
+
+//eslint-disable-next-line @typescript-eslint/naming-convention
+const DynamicComponentWithNoSSR = dynamic(() => import('../src/App'), { ssr: false });
+
+function NextApp() {
+  return <DynamicComponentWithNoSSR />;
+}
+
+export default NextApp;
diff --git a/frontend/public/assets/tilemaps/indoors.json b/frontend/public/assets/tilemaps/indoors.json
diff --git a/frontend/public/index.html b/frontend/public/index.html
diff --git a/frontend/public/virtualbackground/twilio-video-processors.js b/frontend/public/virtualbackground/twilio-video-processors.js
@@ -447,11 +447,11 @@ documented below.
              */
             set: function (radius) {
               if (typeof radius !== 'number' || radius < 0) {
-                console.warn(
-                  'Valid mask blur radius not found. Using ' +
-                    constants_1.MASK_BLUR_RADIUS +
-                    ' as default.',
-                );
+                // console.warn(
+                //   'Valid mask blur radius not found. Using ' +
+                //     constants_1.MASK_BLUR_RADIUS +
+                //     ' as default.',
+                // );
                 radius = constants_1.MASK_BLUR_RADIUS;
               }
               this._maskBlurRadius = radius;

diff --git a/frontend/public/virtualbackground/twilio-video-processors.min.js b/frontend/public/virtualbackground/twilio-video-processors.min.js
@@ -426,11 +426,11 @@ documented below.
             },
             set: function (radius) {
               if (typeof radius !== 'number' || radius < 0) {
-                console.warn(
-                  'Valid mask blur radius not found. Using ' +
-                    constants_1.MASK_BLUR_RADIUS +
-                    ' as default.',
-                );
+                // console.warn(
+                //   'Valid mask blur radius not found. Using ' +
+                //     constants_1.MASK_BLUR_RADIUS +
+                //     ' as default.',
+                // );
                 radius = constants_1.MASK_BLUR_RADIUS;
               }
               this._maskBlurRadius = radius;

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,7 +1,7 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import assert from 'assert';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import TownController from './classes/TownController';
 import { ChatProvider } from './components/VideoCall/VideoFrontend/components/ChatProvider';
@@ -17,6 +17,7 @@ import TownMap from './components/Town/TownMap';
 import TownControllerContext from './contexts/TownControllerContext';
 import LoginControllerContext from './contexts/LoginControllerContext';
 import { TownsServiceClient } from './generated/client';
+import { nanoid } from 'nanoid';
 
 function App() {
   const [townController, setTownController] = useState<TownController | null>(null);
@@ -41,7 +42,7 @@ function App() {
     page = <PreJoinScreens />;
   }
   const url = process.env.NEXT_PUBLIC_TOWNS_SERVICE_URL;
-  assert(url);
+  assert(url, 'NEXT_PUBLIC_TOWNS_SERVICE_URL must be defined');
   const townsService = new TownsServiceClient({ BASE: url }).towns;
   return (
     <LoginControllerContext.Provider value={{ setTownController, townsService }}>
@@ -55,13 +56,82 @@ function App() {
   );
 }
 
+const DEBUG_TOWN_NAME = 'DEBUG_TOWN';
+function DebugApp(): JSX.Element {
+  const [townController, setTownController] = useState<TownController | null>(null);
+  useEffect(() => {
+    const url = process.env.NEXT_PUBLIC_TOWNS_SERVICE_URL;
+    assert(url, 'NEXT_PUBLIC_TOWNS_SERVICE_URL must be defined');
+    const townsService = new TownsServiceClient({ BASE: url }).towns;
+    async function getOrCreateDebugTownID() {
+      const towns = await townsService.listTowns();
+      const existingTown = towns.find(town => town.friendlyName === DEBUG_TOWN_NAME);
+      if (existingTown) {
+        return existingTown.townID;
+      } else {
+        try {
+          const newTown = await townsService.createTown({
+            friendlyName: DEBUG_TOWN_NAME,
+            isPubliclyListed: true,
+          });
+          return newTown.townID;
+        } catch (e) {
+          console.error(e);
+          //Try one more time to see if the town had been created by another process
+          const townsRetry = await townsService.listTowns();
+          const existingTownRetry = townsRetry.find(town => town.friendlyName === DEBUG_TOWN_NAME);
+          if (!existingTownRetry) {
+            throw e;
+          } else {
+            return existingTownRetry.townID;
+          }
+        }
+      }
+    }
+    getOrCreateDebugTownID().then(townID => {
+      assert(townID);
+      const newTownController = new TownController({
+        townID,
+        loginController: {
+          setTownController: () => {},
+          townsService,
+        },
+        userName: nanoid(),
+      });
+      newTownController.connect().then(() => {
+        setTownController(newTownController);
+      });
+    });
+  }, []);
+  if (!townController) {
+    return <div>Loading...</div>;
+  } else {
+    return (
+      <TownControllerContext.Provider value={townController}>
+        <ChatProvider>
+          <TownMap />
+        </ChatProvider>
+      </TownControllerContext.Provider>
+    );
+  }
+}
+
+function AppOrDebugApp(): JSX.Element {
+  const debugTown = process.env.NEXT_PUBLIC_TOWN_DEV_MODE;
+  if (debugTown && debugTown.toLowerCase() === 'true') {
+    return <DebugApp />;
+  } else {
+    return <App />;
+  }
+}
+
 export default function AppStateWrapper(): JSX.Element {
   return (
     <BrowserRouter>
       <ChakraProvider>
         <MuiThemeProvider theme={theme}>
           <AppStateProvider>
-            <App />
+            <AppOrDebugApp />
           </AppStateProvider>
         </MuiThemeProvider>
       </ChakraProvider>

diff --git a/frontend/src/TestUtils.ts b/frontend/src/TestUtils.ts
@@ -1,12 +1,18 @@
 import { ReservedOrUserListener } from '@socket.io/component-emitter';
 import { mock, MockProxy } from 'jest-mock-extended';
 import { nanoid } from 'nanoid';
-import ConversationAreaController from './classes/ConversationAreaController';
+import ConversationAreaController from './classes/interactable/ConversationAreaController';
 import PlayerController from './classes/PlayerController';
 import TownController, { TownEvents } from './classes/TownController';
-import ViewingAreaController from './classes/ViewingAreaController';
+import ViewingAreaController from './classes/interactable/ViewingAreaController';
 import { TownsService } from './generated/client';
-import { CoveyTownSocket, ServerToClientEvents, TownJoinResponse } from './types/CoveyTownSocket';
+import {
+  ConversationArea,
+  CoveyTownSocket,
+  ServerToClientEvents,
+  TownJoinResponse,
+  ViewingArea,
+} from './types/CoveyTownSocket';
 
 //These types copied from socket.io server library so that we don't have to depend on the whole thing to have type-safe tests.
 type SocketReservedEventsMap = {
@@ -118,10 +124,12 @@ export function mockTownController({
     Object.defineProperty(mockedController, 'players', { value: players });
   }
   if (conversationAreas) {
+    Object.defineProperty(mockedController, 'interactableAreas', { value: conversationAreas });
     Object.defineProperty(mockedController, 'conversationAreas', { value: conversationAreas });
   }
   if (viewingAreas) {
-    Object.defineProperty(mockedController, 'viewingAreas', { value: viewingAreas });
+    Object.defineProperty(mockedController, 'interactableAreas', { value: viewingAreas });
+    Object.defineProperty(mockedController, 'viewingAreas', { value: conversationAreas });
   }
   return mockedController;
 }
@@ -163,8 +171,9 @@ export async function mockTownControllerConnection(
     responseToSendController.interactables.push({
       id: nanoid(),
       topic: undefined,
-      occupantsByID: [],
-    });
+      occupants: [],
+      type: 'ConversationArea',
+    } as ConversationArea);
     for (let i = 0; i < 10; i++) {
       const playerID = nanoid();
       responseToSendController.currentPlayers.push({
@@ -175,14 +184,17 @@ export async function mockTownControllerConnection(
       responseToSendController.interactables.push({
         id: nanoid(),
         topic: nanoid(),
-        occupantsByID: [playerID],
-      });
+        occupants: [playerID],
+        type: 'ConversationArea',
+      } as ConversationArea);
       responseToSendController.interactables.push({
         id: nanoid(),
         video: nanoid(),
         elapsedTimeSec: 0,
         isPlaying: false,
-      });
+        occupants: [],
+        type: 'ViewingArea',
+      } as ViewingArea);
     }
   }
   mockSocket.on.mockImplementationOnce((eventName, eventListener) => {