Add toast

app/pages/PageEnigma/PageEnigma.tsx

@@ -5,7 +5,10 @@ import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider";
 import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent";
 import { toast, ToastBar, Toaster } from "react-hot-toast";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTriangleExclamation } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faTriangleExclamation,
+  faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
 
 export const PageEnigma = () => {
   return (
@@ -13,7 +16,7 @@ export const PageEnigma = () => {
       <AppUIProvider>
         <EngineProvider>
           <Toaster
-            position="top-center"
+            position="top-right"
             toastOptions={{
               style: {
                 border: "1px solid #39394D",
@@ -21,6 +24,10 @@ export const PageEnigma = () => {
               },
               duration: 99999,
             }}
+            containerStyle={{
+              top: 84,
+              right: 20,
+            }}
           >
             {(thisToast) => (
               <ToastBar toast={thisToast}>
@@ -29,7 +36,7 @@ export const PageEnigma = () => {
                     <div className="mr-3 flex justify-between rounded-lg">
                       <div>
                         {thisToast.type === "error" && (
-                          <div className="ml-3 flex gap-4">
+                          <div className="ml-3 flex items-center gap-4">
                             <FontAwesomeIcon
                               icon={faTriangleExclamation}
                               className="text-keyframe-selected"
@@ -47,7 +54,7 @@ export const PageEnigma = () => {
                         onClick={() => toast.dismiss(thisToast.id)}
                         className="text-sm font-bold text-white opacity-50"
                       >
-                        X
+                        <FontAwesomeIcon icon={faXmark} />
                       </button>
                     </div>
                   );

app/pages/PageEnigma/store/cameraGroup.ts

@@ -8,13 +8,19 @@ import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import * as uuid from "uuid";
 import { signal } from "@preact/signals-core";
+import { toast } from "react-hot-toast";
 
 export const cameraGroup = signal<CameraGroup>({ id: "CG1", keyframes: [] });
 
 export function updateCamera({ id, offset }: { id: string; offset: number }) {
   const oldCameraGroup = cameraGroup.value;
 
-  if (oldCameraGroup.keyframes.some((row) => row.offset === offset)) {
+  const existingKeyframe = oldCameraGroup.keyframes.some((row) => {
+    return row.offset === offset && row.keyframe_uuid !== id;
+  });
+
+  if (existingKeyframe) {
+    toast.error("There can only be one keyframe at this offset.");
     return;
   }
 
@@ -40,6 +46,7 @@ export function updateCamera({ id, offset }: { id: string; offset: number }) {
 export function addCameraKeyframe(keyframe: QueueKeyframe, offset: number) {
   const oldCameraGroup = cameraGroup.value;
   if (oldCameraGroup.keyframes.some((row) => row.offset === offset)) {
+    toast.error("There can only be one keyframe at this offset.");
     return;
   }
   const newKeyframe = {

app/pages/PageEnigma/store/objectGroup.ts

@@ -32,19 +32,11 @@ export function updateObject({
   }
 
   const existingKeyframe = obj.keyframes.some((row) => {
-    console.log(
-      "upd",
-      row.keyframe_uuid,
-      row.offset,
-      offset,
-      id,
-      row.offset === offset && row.keyframe_uuid !== id,
-    );
     return row.offset === offset && row.keyframe_uuid !== id;
   });
 
   if (existingKeyframe) {
-    toast("There can only be one keyframe at an offset.");
+    toast.error("There can only be one keyframe at this offset.");
     return;
   }