[low priority] Add collaboration client to multiplayer, hidden behind collab=1 flag

multiplayer/.prettierrc

@@ -1,5 +1,6 @@
 {
     "arrowParens": "avoid",
     "semi": true,
-    "tabWidth": 4
+    "tabWidth": 4,
+    "printWidth": 120
 }

multiplayer/package.json

@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ctrl/tinycolor": "^4.0.3",
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/node": "^12.20.45",
     "engine.io-client": "^6.2.2",
     "framer-motion": "^6.5.1",
+    "jsonpath-plus": "^8.1.0",
     "nanoid": "^4.0.0",
+    "pixi.js": "^7.4.2",
     "qrcode.react": "^3.1.0",
     "react-scripts": "^5.0.1",
     "smart-buffer": "^4.2.0",

multiplayer/src/components/AppModal.tsx

@@ -1,12 +1,7 @@
 import { useContext, useState } from "react";
 import { Textarea } from "react-common/components/controls/Textarea";
 import { SignInModal } from "react-common/components/profile/SignInModal";
-import {
-    signInAsync,
-    kickPlayer,
-    leaveGameAsync,
-    sendAbuseReportAsync,
-} from "../epics";
+import { signInAsync, kickPlayer, leaveGameAsync, sendAbuseReportAsync } from "../epics";
 import { clearModal } from "../state/actions";
 import { AppStateContext, dispatch } from "../state/AppStateContext";
 import ConfirmModal from "./modals/ConfirmModal";
@@ -24,10 +19,8 @@ export default function Render() {
                     onClose={() => dispatch(clearModal())}
                     onSignIn={async (provider, rememberMe) => {
                         const params: pxt.Map<string> = {};
-                        if (deepLinks?.shareCode)
-                            params["host"] = deepLinks.shareCode;
-                        if (deepLinks?.joinCode)
-                            params["join"] = deepLinks.joinCode;
+                        if (deepLinks?.shareCode) params["host"] = deepLinks.shareCode;
+                        if (deepLinks?.joinCode) params["join"] = deepLinks.joinCode;
                         await signInAsync(provider.id, rememberMe, { params });
                     }}
                     dialogMessages={state.modalOpts.dialogMessages}
@@ -63,9 +56,7 @@ export default function Render() {
                     }}
                     onCancel={() => dispatch(clearModal())}
                 >
-                    <div>
-                        {lf("Kick this player? They will be blocked from rejoining the game.")}
-                    </div>
+                    <div>{lf("Kick this player? They will be blocked from rejoining the game.")}</div>
                 </ConfirmModal>
             );
         case "leave-game":
@@ -79,9 +70,7 @@ export default function Render() {
                         }}
                         onCancel={() => dispatch(clearModal())}
                     >
-                        <div>
-                            {lf("End the game? All players will be disconnected.")}
-                        </div>
+                        <div>{lf("End the game? All players will be disconnected.")}</div>
                     </ConfirmModal>
                 );
             } else {

multiplayer/src/components/ArcadeSimulator.tsx

@@ -4,13 +4,7 @@ import { SimMultiplayer } from "../types";
 import * as gameClient from "../services/gameClient";
 // eslint-disable-next-line import/no-unassigned-import
 import "./ArcadeSimulator.css";
-import {
-    simDriver,
-    preloadSim,
-    simulateAsync,
-    buildSimJsInfo,
-    RunOptions,
-} from "../services/simHost";
+import { simDriver, preloadSim, simulateAsync, buildSimJsInfo, RunOptions } from "../services/simHost";
 import { state as currentState } from "../state";
 
 let builtSimJsInfo: Promise<pxtc.BuiltSimJsInfo | undefined> | undefined;
@@ -75,8 +69,7 @@ export default function Render() {
                     // Once the simulator is ready, if this player is a guest, pass initial screen to simulator
                     const { state: simState } = data;
                     if (simState === "running" && clientRole === "guest") {
-                        const { image, palette } =
-                            gameClient.getCurrentScreen();
+                        const { image, palette } = gameClient.getCurrentScreen();
                         if (image) {
                             simDriver()?.postMessage({
                                 type: "multiplayer",