Feat: Blank overlay

Vija02 · Sep 14, 2024 · 33897a6 · 33897a6
1 parent 38e4be4
commit 33897a6
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 3 deletions.
diff --git a/apps/remote/src/containers/MainBody.tsx b/apps/remote/src/containers/MainBody.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Stack, Text } from "@chakra-ui/react";
 import type { AwarenessContext, PluginContext, Scene } from "@repo/base-plugin";
 import { Plugin } from "@repo/base-plugin";
 import { useKeyPressMutation } from "@repo/graphql";
@@ -11,6 +11,7 @@ import { trpcClient } from "../trpc";
 
 const MainBody = () => {
   const data = useData();
+  const mainState = usePluginData().mainState!;
   const [keyPressMutate] = useKeyPressMutation();
   const projectId = usePluginMetaData().projectId;
 
@@ -47,6 +48,44 @@ const MainBody = () => {
         }
       }}
     >
+      <Flex
+        height="40px"
+        boxShadow="md"
+        alignItems="center"
+        justifyContent="flex-end"
+      >
+        <Stack direction="row" p={2}>
+          <Button
+            size="sm"
+            rounded="none"
+            {...(data.renderer["1"]!.overlay &&
+            data.renderer["1"]!.overlay.type === "black"
+              ? {
+                  border: "2px solid #ff6464",
+                  animation: "blink 1.5s steps(1, end) infinite",
+                }
+              : { border: "2px solid transparent" })}
+            onClick={() => {
+              if (mainState.renderer["1"]!.overlay?.type === "black") {
+                mainState.renderer["1"]!.overlay = null;
+              } else {
+                mainState.renderer["1"]!.overlay = { type: "black" };
+              }
+            }}
+          >
+            Black
+          </Button>
+          <Button
+            size="sm"
+            rounded="none"
+            onClick={() => {
+              mainState.renderer["1"]!.overlay = null;
+            }}
+          >
+            Clear
+          </Button>
+        </Stack>
+      </Flex>
       <Switch>
         {Object.entries(data.data)
           .filter(([, value]) => value.type === "scene")

diff --git a/apps/remote/src/index.css b/apps/remote/src/index.css
@@ -29,3 +29,9 @@ html {
   left: -3px;
   cursor: ew-resize;
 }
+
+@keyframes blink {
+  50% {
+    border-color: #fff;
+  }
+}
diff --git a/apps/renderer/src/Body.tsx b/apps/renderer/src/Body.tsx
@@ -1,6 +1,7 @@
 import { Box, Text } from "@chakra-ui/react";
 import { AwarenessContext, Scene } from "@repo/base-plugin";
-import { motion } from "framer-motion";
+import { MotionBox } from "@repo/ui";
+import { AnimatePresence, motion } from "framer-motion";
 import React, { useMemo } from "react";
 
 import { useData, usePluginData } from "./contexts/PluginDataProvider";
@@ -22,13 +23,39 @@ export const Body = () => {
 
   return (
     <>
+      <Overlay />
       {Object.keys(currentRenderer?.children ?? {}).map((sceneId) => (
         <SceneRenderer key={sceneId} sceneId={sceneId} />
       ))}
     </>
   );
 };
 
+const Overlay = () => {
+  const data = useData();
+  const currentRenderer = useMemo(() => data.renderer["1"], [data.renderer]);
+
+  return (
+    <AnimatePresence>
+      {currentRenderer?.overlay?.type === "black" && (
+        <MotionBox
+          key="black"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          position="absolute"
+          bg="black"
+          zIndex={999}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        />
+      )}
+    </AnimatePresence>
+  );
+};
+
 // TEST: All scenes should be rendered but only the main one shown
 const SceneRenderer = React.memo(({ sceneId }: { sceneId: string }) => {
   const data = useData();

diff --git a/backend/server/src/middleware/installHocuspocus.ts b/backend/server/src/middleware/installHocuspocus.ts
@@ -3,6 +3,7 @@ import type {
   IDisposable,
   ObjectToTypedMap,
   Scene,
+  State,
   YState,
 } from "@repo/base-plugin";
 import { Express } from "express";
@@ -106,10 +107,11 @@ export default async function installHocuspocus(app: Express) {
           renderer: {
             "1": {
               currentScene: null,
+              overlay: null,
               children: {},
             },
           },
-        });
+        } satisfies State);
         const unbind = bind(mainState, yDoc.getMap());
 
         const update = Y.encodeStateAsUpdate(yDoc);

diff --git a/packages/base-plugin/src/types.ts b/packages/base-plugin/src/types.ts
@@ -68,6 +68,7 @@ export type Renderer = Record<string, RenderData>;
 
 export type RenderData<T = Record<string, any>> = {
   currentScene: UUID | null;
+  overlay: { type: "black" | "white" } | null;
   children: Record<UUID, Record<UUID, T>>;
 };
 
@@ -89,6 +90,7 @@ export interface IDisposable {
 export type AwarenessContext = {
   awarenessObj: awarenessProtocol.Awareness;
   currentUserId: string;
+  setAwarenessField: (key: string, val: any) => void;
 };
 
 export type AwarenessUserData = {