Updates

ui/src/app/campaigns/page.tsx

@@ -1,5 +1,29 @@
-import React from 'react';
+'use client';
+
+import { ActionIcon, Tooltip } from '@mantine/core';
+import { FaPlus } from "react-icons/fa";
+import React, { useEffect } from 'react';
+import { getCampigns } from '@/api/campaigns';
+import { Campaign } from '@/api/campaigns.types';
 
 export default function Page() {
-  return <></>;
+  const [campaigns, setCampaigns] = React.useState<Campaign[]>([]);
+
+  useEffect(() => {
+    getCampigns().then((data) => setCampaigns(data));
+  }, []);
+
+  return (
+    <div>
+      <h1>Campaigns</h1>
+      <Tooltip label="Create a new campaign">
+        <ActionIcon variant="outline" color="blue">
+          <FaPlus />
+        </ActionIcon>
+      </Tooltip>
+        {campaigns && campaigns.map((campaign) => (
+          <div key={campaign.id}>{campaign.name}</div>
+        ))}
+    </div>
+  );
 }

ui/src/app/layout.tsx

@@ -8,6 +8,7 @@ import { Notifications } from '@mantine/notifications';
 import 'styles/globals.css';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import Loading from '@/components/Loading';
 
 export const metadata = {
   title: 'Siren',
@@ -27,8 +28,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <MantineProvider>
             <Notifications />
             <ModalsProvider>
-              <Header />
-              <Box>{children}</Box>
+              <Loading>
+                <Header />
+                <Box>{children}</Box>
+              </Loading>
             </ModalsProvider>
           </MantineProvider>
         </RecoilRootWrapper>

ui/src/components/Header/index.tsx

@@ -26,17 +26,8 @@ export default function Header() {
   const router = useRouter();
 
   useEffect(() => {
-    if (!user) {
-      hasSession().then((response) => {
-        if (response) {
-          refresh().then((response) => {
-            if (response) {
-              setUser(response.user);
-              updateUser(response.user);
-            }
-          });
-        }
-      });
+    if (user) {
+      updateUser(user);
     }
   }, [user]);
 

ui/src/components/Loading.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { hasSession, refresh } from "@/api/auth";
+import { userState } from "@/state/auth";
+import { Skeleton } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+
+export default function Loading({ children }: { children: React.ReactNode }) {
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useRecoilState(userState);
+  
+  useEffect(() => {
+    if (!user) {
+      hasSession().then((response) => {
+        if (response) {
+          refresh().then((response) => {
+            if (response) {
+              setUser(response.user);
+              setLoading(false);
+            } else {
+              setLoading(false);
+            }
+          });
+        } else {
+          setLoading(false);
+        }
+      });
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  if (loading) {
+    return <Skeleton height={'100%'} />;
+  } else {
+    return <>{children}</>;
+  }
+}

ui/src/components/TileGrid/index.tsx

@@ -40,43 +40,44 @@ export default function TileGrid() {
       e.preventDefault()
     }
     document.addEventListener('wheel', handleScroll, { passive: false })
+    // Prevent space from scrolling page
+    function handleSpace(e: any) {
+      if (e.key === ' ') {
+        e.preventDefault()
+      }
+    }
+    document.addEventListener('keydown', handleSpace, { passive: false })
     return function cleanup() {
       document.removeEventListener('contextmenu', handleContextmenu)
       document.removeEventListener('wheel', handleScroll)
     }
-}, [])
+  }, [])
 
   const drawGrid = useCallback(
     (g: PixiGraphics) => {
       g.clear();
+      // Draw edits
+      edits.forEach((edit) => {
+        g.beginFill(parseInt(edit.color.replace('#', ''), 16));
+        g.drawRect(edit.x * 32 * zoom, edit.y * 32 * zoom, 32 * zoom, 32 * zoom);
+        g.endFill();
+      });
       // Draw dot in the corner of each tile
-      for (let x = 0; x < gridSize.width; x += 32 * zoom) {
-        for (let y = 0; y < gridSize.height; y += 32 * zoom) {
+      for (let x = 0; x < gridSize.width; x += (32 * zoom)) {
+        for (let y = 0; y < gridSize.height; y += (32 * zoom)) {
           g.beginFill(0xffffff, 0.5);
           g.drawCircle(x, y, 1);
           g.endFill();
         }
       }
     },
-    [gridSize, zoom]
-  );
-
-  const drawGridEdits = useCallback(
-    (g: PixiGraphics) => {
-      g.clear();
-      edits.forEach((edit) => {
-        g.beginFill(parseInt(edit.color.replace('#', ''), 16));
-        g.drawRect(edit.x * 32 * zoom, edit.y * 32 * zoom, 32 * zoom, 32 * zoom);
-        g.endFill();
-      });
-    },
-    [edits, zoom]
+    [gridSize, edits, zoom]
   );
 
   function drawSquare(button: number, clientX: number, clientY: number) {
+    // TODO: When zoomed in, the position is offset from above, when zoomed out, the position is offset from below
     const x = Math.floor((clientX - position.x) / (32 * zoom));
-    // TODO: Fix y offset, currently appears to be 2 tiles down from mouse
-    const y = Math.floor((clientY - position.y) / (32 * zoom)) - 2;
+    const y = Math.floor((clientY - position.y) / (32 * zoom));
     if (button === 1) {
       // Add new edit if left mouse button is pressed
       setEdits([...edits, { x, y, color: colors[selectedColor] }]);
@@ -162,7 +163,6 @@ export default function TileGrid() {
         onWheel={(e) => zoomEvent(e)}
       >
         <Graphics x={position.x} y={position.y} draw={drawGrid} />
-        <Graphics x={position.x} y={position.y} draw={drawGridEdits} />
       </Stage>
       <TileControls
         tool={tool}