Added drawing squares

service/src/main.rs

@@ -112,9 +112,6 @@ async fn main() -> std::io::Result<()> {
   let host = env::var("SERVICE_HOST").unwrap_or("localhost".to_string());
   let port = env::var("SERVICE_PORT").unwrap_or("5000".to_string());
 
-  crate::storage::upload_file("test.txt", b"Test").await.unwrap();
-  crate::storage::delete_file("test.txt").await.unwrap();
-
   let server = match HttpServer::new(move || {
     let cors = Cors::default()
       .allow_any_origin()

service/src/storage/mod.rs

@@ -4,7 +4,7 @@ use s3::{Region, creds::Credentials, Bucket, BucketConfiguration, request::Respo
 use siren::ServiceError;
 use crate::diesel_migrations::MigrationHarness;
 use lazy_static::lazy_static;
-use log::{error, info, warn};
+use log::{error, info};
 use r2d2;
 use std::env;
 
@@ -35,7 +35,7 @@ lazy_static! {
     RedisClient::open(url).expect("Failed to create redis client")
   };
   static ref BUCKET: Bucket = {
-    let url = env::var("MINIO_URL").unwrap_or("localhost".to_string());
+    let url = env::var("MINIO_HOST").unwrap_or("localhost".to_string());
     let port = env::var("MINIO_PORT").unwrap_or("9000".to_string());
     let user = env::var("MINIO_ROOT_USER").expect("MINIO_ROOT_USER is not set");
     let password = env::var("MINIO_ROOT_PASSWORD").expect("MINIO_ROOT_PASSWORD is not set");

ui/src/components/TileGrid/TileControls.tsx

@@ -131,7 +131,7 @@ export default function TileControls({
       </ActionIcon.Group>
       <ActionIcon.Group>
         {colors.map((color, index) => (
-          <Menu trigger='hover' openDelay={700} closeDelay={100}>
+          <Menu key={`color-${index}`} trigger='hover' openDelay={700} closeDelay={100}>
             <Menu.Target>
               <ActionIcon
                 key={`color-${index}`}

ui/src/components/TileGrid/index.tsx

@@ -1,9 +1,16 @@
 'use client';
 
-import { Container, Graphics, Stage } from '@pixi/react';
+import { Graphics, Stage } from '@pixi/react';
 import { Graphics as PixiGraphics } from '@pixi/graphics';
 import { MouseEvent, WheelEvent, useCallback, useEffect, useState } from 'react';
 import TileControls, { EditTool, Tool, defaultColors } from './TileControls';
+import { Box } from '@mantine/core';
+
+interface SquareEdit {
+  x: number;
+  y: number;
+  color: string;
+}
 
 export default function TileGrid() {
   // Offset height of navbar from window height
@@ -11,7 +18,6 @@ export default function TileGrid() {
   // Offset width of layout padding from window width
   const width = window ? window.innerWidth : 0;
 
-  const [scale, setScale] = useState(1);
   const [zoom, setZoom] = useState(1);
   const [gridSize, setGridSize] = useState({ width: width * 2, height: height * 2 });
   const [mouseDown, setMouseDown] = useState(false);
@@ -21,6 +27,7 @@ export default function TileGrid() {
   const [editTool, setEditTool] = useState<EditTool>(EditTool.SQUARE);
   const [colors, setColors] = useState<string[]>(defaultColors);
   const [selectedColor, setSelectedColor] = useState<number>(0);
+  const [edits, setEdits] = useState<SquareEdit[]>([]);
 
   useEffect(() => {
     if (window) {
@@ -31,54 +38,105 @@ export default function TileGrid() {
         },
         { passive: false }
       );
+      // Disable right click context menu
+      window.addEventListener(
+        'contextmenu',
+        (event) => {
+          event.preventDefault();
+        },
+        { passive: false }
+      );
     }
   }, []);
 
-  const draw = useCallback((g: PixiGraphics) => {
+  const drawGrid = useCallback(
+    (g: PixiGraphics) => {
       g.clear();
       // Draw dot in the corner of each tile
-    for (let x = 0; x < gridSize.width; x += 32 * scale) {
-      for (let y = 0; y < gridSize.height; y += 32 * scale) {
+      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 drawEdits = 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]
+  );
 
   function clickEvent(e: MouseEvent) {
-    if (tool === Tool.HAND) {
     setMouseDown(true);
     setLastPosition({ x: e.clientX, y: e.clientY });
+    if (tool == Tool.ZOOM) {
+      handleZoom(e.button === 0 ? -100 : 100);
     }
   }
 
   function moveEvent(e: MouseEvent) {
     if (mouseDown) {
+      if (tool == Tool.HAND) {
         let dx = position.x + e.clientX - lastPosition.x;
         let dy = position.y + e.clientY - lastPosition.y;
         // Prevent coordinates from going out of bounds
         dx = Math.min(dx, 0);
-      dx = Math.max(dx, -gridSize.width * scale + width);
+        dx = Math.max(dx, -gridSize.width * zoom + width);
         dy = Math.min(dy, 0);
-      dy = Math.max(dy, -gridSize.height * scale + height);
+        dy = Math.max(dy, -gridSize.height * zoom + height);
         setPosition({ x: dx, y: dy });
         setLastPosition({ x: e.clientX, y: e.clientY });
+      } else if (tool === Tool.EDIT) {
+        if (editTool === EditTool.SQUARE) {
+          // Calculate tile coordinates
+          const x = Math.floor((e.clientX - position.x) / (32 * zoom));
+          const y = Math.floor((e.clientY - position.y - 64) / (32 * zoom));
+          // Check if tile is already edited, and remove it
+          const index = edits.findIndex((edit) => edit.x === x && edit.y === y);
+          if (index !== -1) {
+            setEdits([...edits.slice(0, index), ...edits.slice(index + 1)]);
+          }
+          // Add new edit if left mouse button is pressed
+          if (e.buttons === 1) {
+            setEdits([...edits, { x, y, color: colors[selectedColor] }]);
+          }
+        } else if (editTool === EditTool.CIRCLE) {
+          // handle circle
+        }
+      } else if (tool === Tool.TOKEN) {
+        // handle token
+      }
     }
   }
 
   function zoomEvent(e: WheelEvent) {
-    const delta = e.deltaY;
-    if (delta > 0) {
-      setZoom(zoom / 1.1);
-    } else {
-      setZoom(zoom * 1.1);
+    handleZoom(e.deltaY);
   }
-    setScale(scale * zoom);
+
+  function handleZoom(delta: number) {
+    let newZoom = zoom;
+    if (delta > 0) {
+      newZoom = zoom / 1.1;
+    } else {
+      newZoom = zoom * 1.1;
+    }
+    newZoom = Math.min(newZoom, 3);
+    newZoom = Math.max(newZoom, 0.6);
+    setZoom(newZoom);
   }
 
   return (
-    <Container>
+    <Box>
       <Stage
         width={width}
         height={height}
@@ -91,8 +149,8 @@ export default function TileGrid() {
         onMouseMove={(e) => moveEvent(e)}
         onWheel={(e) => zoomEvent(e)}
       >
-        <Graphics x={position.x} y={position.y} draw={draw} />
-        <Container></Container>
+        <Graphics x={position.x} y={position.y} draw={drawGrid} />
+        <Graphics x={position.x} y={position.y} draw={drawEdits} />
       </Stage>
       <TileControls
         tool={tool}
@@ -104,6 +162,6 @@ export default function TileGrid() {
         selectedColor={selectedColor}
         setSelectedColor={setSelectedColor}
       />
-    </Container>
+    </Box>
   );
 }