Basic ws server

.github/workflows/coverage-rust.yml

@@ -32,22 +32,22 @@ jobs:
           rustup override set nightly
           if ! which grcov; then cargo install grcov; fi
 
-      - name: Build
+      - name: Build quadratic-core
         env:
           RUSTFLAGS: -Cinstrument-coverage
         run: |
           cd quadratic-core
           cargo build
 
-      - name: Test
+      - name: Test quadratic-core
         env:
           LLVM_PROFILE_FILE: grcov-%p-%m.profraw
           RUSTFLAGS: -Cinstrument-coverage
         run: |
           cd quadratic-core
           cargo test
 
-      - name: Generate coverage
+      - name: Generate coverage quadratic-core
         run: |
           grcov $(find . -name "grcov-*.profraw" -print) \
             --branch \
@@ -60,7 +60,41 @@ jobs:
             --ignore "./quadratic-core/src/bin/*" \
             -o lcov.info
 
-      - name: Upload coverage reports to Codecov
+      - name: Upload coverage reports to Codecov quadratic-core
         uses: codecov/codecov-action@v3
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: Build quadratic-multiplayer
+        env:
+          RUSTFLAGS: -Cinstrument-coverage
+        run: |
+          cd quadratic-multiplayer
+          cargo build
+
+      - name: Test quadratic-multiplayer
+        env:
+          LLVM_PROFILE_FILE: grcov-%p-%m.profraw
+          RUSTFLAGS: -Cinstrument-coverage
+        run: |
+          cd quadratic-multiplayer
+          cargo test
+
+      - name: Generate coverage quadratic-multiplayer
+        run: |
+          grcov $(find . -name "grcov-*.profraw" -print) \
+            --branch \
+            --ignore-not-existing \
+            --binary-path ./quadratic-multiplayer/target/debug/ \
+            -s . \
+            -t lcov \
+            --ignore "/*" \
+            --ignore "./quadratic-multiplayer/src/wasm_bindings/*" \
+            --ignore "./quadratic-multiplayer/src/bin/*" \
+            -o lcov.info
+
+      - name: Upload coverage reports to Codecov quadratic-multiplayer
+        uses: codecov/codecov-action@v3
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+

.gitignore

@@ -36,6 +36,7 @@ venv/*
 # Generated Rust files
 quadratic-core/target/
 quadratic-core/tmp.txt
+quadratic-multiplayer/target/
 
 # Generated JS files
 quadratic-api/node_modules/
@@ -45,3 +46,4 @@ quadratic-api/dist
 
 # Code Coverage
 quadratic-core/coverage
+quadratic-multiplayer/coverage

.vscode/settings.json

@@ -36,7 +36,7 @@
   "[rust]": {
     "editor.defaultFormatter": "rust-lang.rust-analyzer"
   },
-  "rust-analyzer.linkedProjects": ["./quadratic-core/Cargo.toml"],
+  "rust-analyzer.linkedProjects": ["./quadratic-core/Cargo.toml", "./quadratic-multiplayer/Cargo.toml"],
   "rust-analyzer.checkOnSave": true,
   // "rust-analyzer.checkOnSave.command": "clippy",
   "files.associations": {

package.json

@@ -11,17 +11,19 @@
   "workspaces": [
     "quadratic-api",
     "quadratic-shared",
-    "quadratic-client"
+    "quadratic-client",
+    "quadratic-multiplayer"
   ],
   "scripts": {
     "start": "npm run watch:front-end",
     "start:api": "npm start --workspace=quadratic-api",
     "perf": "npm run watch:perf:front-end",
     "watch:javascript": "cd quadratic-client && npm run watch:javascript",
     "watch:perf:front-end": "npm run build:wasm:types && concurrently --hide=2 -n=react,rust,rust-types \"npm:watch:javascript\" \"npm:watch:wasm:perf:javascript\" \"npm run start:api\"",
-    "watch:front-end": "npm run build:wasm:types && concurrently --hide=2 -n=react,rust,rust-types \"npm:watch:javascript\" \"npm:watch:wasm:javascript\" \"npm run start:api\"",
-    "watch:front-end-back-end": "npm run build:wasm:types && concurrently -n=react,rust,api \"npm:watch:javascript\" \"npm:watch:wasm:javascript\" \"npm run start:api\"",
+    "watch:front-end": "npm run build:wasm:types && concurrently --hide=2 -n=react,rust,rust-types \"npm:watch:javascript\" \"npm:watch:wasm:javascript\" \"npm:start:api\" \"npm:watch:multiplayer\"",
+    "watch:front-end-back-end": "npm run build:wasm:types && concurrently -n=react,rust,api \"npm:watch:javascript\" \"npm:watch:wasm:javascript\" \"npm:start:api\" \"npm:watch:multiplayer\"",
     "watch:app": "npm run build:wasm:types && concurrently -n=react,api 'npm:watch:javascript' 'npm run start:api'",
+    "watch:multiplayer": "npm run dev --workspace=quadratic-multiplayer",
     "lint:client": "cd quadratic-client && npm run lint:ts && npm run lint:eslint && lint:prettier && lint:clippy",
     "build:wasm:types": "cd quadratic-core && cargo run --bin export_types",
     "watch:wasm:javascript": "cd quadratic-core && cargo watch -s 'wasm-pack build --dev --target web --out-dir ../quadratic-client/src/quadratic-core --weak-refs'",
@@ -30,7 +32,8 @@
     "coverage:wasm:gen": "cd quadratic-core && cd quadratic-core && CARGO_INCREMENTAL=0 RUSTFLAGS='-Cinstrument-coverage' LLVM_PROFILE_FILE='coverage/cargo-test-%p-%m.profraw' cargo test",
     "coverage:wasm:html": "cd quadratic-core && cd quadratic-core && grcov . --binary-path ./target/debug/deps/ -s . -t html --branch --ignore-not-existing --ignore 'src/wasm_bindings/*' --ignore 'src/bin/*' --ignore '../*' --ignore '/*' -o coverage/html",
     "coverage:wasm:view": "open quadratic-core/coverage/html/index.html",
-    "test:wasm": "cd quadratic-core && cargo test",
+    "test:wasm": "cd run test --workspace=quadratic-core",
+    "test:multiplayer": "npm run test --workspace=quadratic-multiplayer",
     "watch:test:wasm": "cd quadratic-core && cargo watch -x test",
     "benchmark:rust": "cd quadratic-core && cargo bench",
     "lint:clippy": "cd quadratic-core && cargo clippy --all-targets --all-features -- -D warnings"

quadratic-api/src/middleware/team.ts

@@ -4,6 +4,8 @@ import dbClient from '../dbClient';
 import { Request, RequestWithTeam, RequestWithUser } from '../types/Request';
 import { ResponseError } from '../types/Response';
 import { getTeamAccess } from '../utils';
+import { userMiddleware } from './user';
+import { validateAccessToken } from './validateAccessToken';
 
 const teamUuidSchema = z.string().uuid();
 
@@ -19,6 +21,9 @@ export const teamMiddleware = async (
   res: Response<ResponseError>,
   next: NextFunction
 ) => {
+  await validateAccessToken(req, res, () => {});
+  await userMiddleware(req, res, () => {});
+
   // Validate the team UUID
   const teamUuid = req.params.uuid;
   try {

quadratic-client/src/dashboard/FileRoute.tsx

@@ -1,3 +1,5 @@
+import { multiplayer } from '@/multiplayer/multiplayer';
+import { useRootRouteLoaderData } from '@/router';
 import { Button } from '@/shadcn/ui/button';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import * as Sentry from '@sentry/react';
@@ -23,6 +25,7 @@ import QuadraticApp from '../ui/QuadraticApp';
 
 export type FileData = {
   name: string;
+  uuid: string;
   sharing: ApiTypes['/v0/files/:uuid/sharing.GET.response'];
   permission: ApiTypes['/v0/files/:uuid.GET.response']['permission'];
 };
@@ -84,20 +87,24 @@ export const loader = async ({ request, params }: LoaderFunctionArgs): Promise<F
 
   return {
     name: data.file.name,
+    uuid: data.file.uuid,
     permission: data.permission,
     sharing,
   };
 };
 
 export const Component = () => {
+  const { user } = useRootRouteLoaderData();
+
   // Initialize recoil with the file's permission we get from the server
-  const { permission } = useLoaderData() as FileData;
+  const { permission, uuid } = useLoaderData() as FileData;
   const initializeState = ({ set }: MutableSnapshot) => {
     set(editorInteractionStateAtom, (prevState) => ({
       ...prevState,
       permission,
     }));
   };
+  multiplayer.enterFileRoom(uuid, user);
 
   return (
     <RecoilRoot initializeState={initializeState}>

quadratic-client/src/grid/sheet/SheetCursor.ts

@@ -1,3 +1,4 @@
+import { multiplayer } from '@/multiplayer/multiplayer';
 import { IViewportTransformState } from 'pixi-viewport';
 import { Rectangle } from 'pixi.js';
 import { pixiApp } from '../../gridGL/pixiApp/PixiApp';
@@ -77,6 +78,17 @@ export class SheetCursor {
       this.keyboardMovePosition = options.keyboardMovePosition;
     }
     pixiApp.updateCursorPosition({ ensureVisible: options.ensureVisible ?? true });
+    multiplayer.sendSelection(
+      this.cursorPosition,
+      this.multiCursor
+        ? new Rectangle(
+            this.multiCursor.originPosition.x,
+            this.multiCursor.originPosition.y,
+            this.multiCursor.terminalPosition.x - this.multiCursor.originPosition.x,
+            this.multiCursor.terminalPosition.y - this.multiCursor.originPosition.y
+          )
+        : undefined
+    );
   }
 
   changeBoxCells(boxCells: boolean) {

quadratic-client/src/gridGL/QuadraticGrid.tsx

@@ -1,3 +1,4 @@
+import { MultiplayerCursors } from '@/multiplayer/multiplayerCursor/MulitplayerCursors';
 import { useCallback, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { editorInteractionStateAtom } from '../atoms/editorInteractionStateAtom';
@@ -117,6 +118,7 @@ export default function QuadraticGrid() {
     >
       {showInput && <CellInput container={container} />}
       <FloatingContextMenu container={container} showContextMenu={showContextMenu} />
+      <MultiplayerCursors />
     </div>
   );
 }

quadratic-client/src/gridGL/UI/UIMultiplayerCursor.ts

@@ -0,0 +1,73 @@
+import { multiplayer } from '@/multiplayer/multiplayer';
+import { MULTIPLAYER_COLORS_TINT } from '@/multiplayer/multiplayerCursor/multiplayerColors';
+import { Graphics, Rectangle } from 'pixi.js';
+import { sheets } from '../../grid/controller/Sheets';
+import { pixiApp } from '../pixiApp/PixiApp';
+import { Coordinate } from '../types/size';
+
+export const CURSOR_THICKNESS = 1;
+const ALPHA = 0.5;
+const FILL_ALPHA = 0.01 / ALPHA;
+
+export class UIMultiPlayerCursor extends Graphics {
+  dirty = false;
+
+  constructor() {
+    super();
+    this.alpha = ALPHA;
+  }
+
+  // todo: handle multiple people in the same cell
+  private drawCursor(color: number, cursor: Coordinate) {
+    const sheet = sheets.sheet;
+
+    let { x, y, width, height } = sheet.getCellOffsets(cursor.x, cursor.y);
+
+    // draw cursor
+    this.lineStyle({
+      width: CURSOR_THICKNESS,
+      color,
+      alignment: 0,
+    });
+    this.moveTo(x, y);
+    this.lineTo(x + width, y);
+    this.lineTo(x + width, y + height);
+    this.moveTo(x + width, y + height);
+    this.lineTo(x, y + height);
+    this.lineTo(x, y);
+  }
+
+  private drawMultiCursor(color: number, rectangle: Rectangle): void {
+    const sheet = sheets.sheet;
+    this.lineStyle(1, color, 1, 0, true);
+    this.beginFill(color, FILL_ALPHA);
+    const startCell = sheet.getCellOffsets(rectangle.x, rectangle.y);
+    const endCell = sheet.getCellOffsets(rectangle.x + rectangle.width, rectangle.y + rectangle.height);
+    this.drawRect(
+      startCell.x,
+      startCell.y,
+      endCell.x + endCell.width - startCell.x,
+      endCell.y + endCell.height - startCell.y
+    );
+  }
+
+  update() {
+    if (this.dirty) {
+      this.dirty = false;
+      this.clear();
+      // const sheetId = sheets.sheet.id;
+      multiplayer.players.forEach((player) => {
+        const color = MULTIPLAYER_COLORS_TINT[player.color];
+        if (player.selection /* && player.sheetId === sheetId */) {
+          this.drawCursor(color, player.selection.cursor);
+
+          // note: the rectangle is not really a PIXI.Rectangle, but a (x, y, width, height) type (b/c we JSON stringified)
+          if (player.selection.rectangle) {
+            this.drawMultiCursor(color, player.selection.rectangle);
+          }
+        }
+      });
+      pixiApp.setViewportDirty();
+    }
+  }
+}

quadratic-client/src/gridGL/interaction/pointer/Pointer.ts

@@ -1,3 +1,4 @@
+import { multiplayer } from '@/multiplayer/multiplayer';
 import { Viewport } from 'pixi-viewport';
 import { InteractionEvent } from 'pixi.js';
 import { pixiApp } from '../../pixiApp/PixiApp';
@@ -23,14 +24,20 @@ export class Pointer {
     viewport.on('pointermove', this.pointerMove);
     viewport.on('pointerup', this.pointerUp);
     viewport.on('pointerupoutside', this.pointerUp);
+    pixiApp.canvas.addEventListener('pointerleave', this.pointerLeave);
   }
 
+  private pointerLeave = () => {
+    multiplayer.sendMouseMove();
+  };
+
   destroy() {
     const viewport = pixiApp.viewport;
     viewport.off('pointerdown', this.handlePointerDown);
     viewport.off('pointermove', this.pointerMove);
     viewport.off('pointerup', this.pointerUp);
     viewport.off('pointerupoutside', this.pointerUp);
+    pixiApp.canvas.removeEventListener('pointerleave', this.pointerLeave);
     this.pointerDown.destroy();
   }
 
@@ -54,7 +61,7 @@ export class Pointer {
     this.pointerHeading.pointerMove(world) ||
       this.pointerAutoComplete.pointerMove(world) ||
       this.pointerDown.pointerMove(world);
-    this.pointerCursor.pointerMove();
+    this.pointerCursor.pointerMove(world);
   };
 
   private pointerUp = (e: InteractionEvent): void => {

quadratic-client/src/gridGL/interaction/pointer/pointerCursor.ts

@@ -1,8 +1,11 @@
+import { multiplayer } from '@/multiplayer/multiplayer';
+import { Point } from 'pixi.js';
 import { pixiApp } from '../../pixiApp/PixiApp';
 
 export class PointerCursor {
-  pointerMove(): void {
+  pointerMove(world: Point): void {
     const cursor = pixiApp.pointer.pointerHeading.cursor ?? pixiApp.pointer.pointerAutoComplete.cursor;
     pixiApp.canvas.style.cursor = cursor ?? 'unset';
+    multiplayer.sendMouseMove(world.x, world.y);
   }
 }