Remove grid functionality from the pixel art creation platform

Removes the grid display option, grid toggle button, and related configuration settings from the canvas component, CSS, and server configuration files.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/Zffw2vY

client/src/components/canvas.tsx

@@ -7,7 +7,7 @@ interface CanvasProps {
   selectedColor: string;
   canvasWidth: number;
   canvasHeight: number;
-  showGrid: boolean;
+
   onPixelClick: (x: number, y: number) => void;
   cooldownActive: boolean;
 }
@@ -17,7 +17,7 @@ export function Canvas({
   selectedColor, 
   canvasWidth, 
   canvasHeight, 
-  showGrid, 
+
   onPixelClick,
   cooldownActive 
 }: CanvasProps) {
@@ -68,7 +68,7 @@ export function Canvas({
         data-testid="canvas-container"
       >
         <div 
-          className={cn("grid mx-auto border border-gray-400 relative", showGrid && "grid-lines")}
+          className="grid mx-auto border border-gray-400 relative"
           style={canvasStyle}
           data-testid="pixel-canvas"
         >

client/src/index.css

@@ -123,11 +123,7 @@
   position: relative;
 }
 
-.grid-lines {
-  background-image: 
-    linear-gradient(to right, rgba(255,255,255,0.2) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255,255,255,0.2) 1px, transparent 1px);
-}
+
 
 .cooldown-overlay {
   background: linear-gradient(45deg, 

client/src/pages/canvas.tsx

@@ -7,14 +7,14 @@ import { ColorPalette } from "@/components/color-palette";
 import { Button } from "@/components/ui/button";
 import { useWebSocket } from "@/hooks/use-websocket";
 import { useToast } from "@/hooks/use-toast";
-import { Grid } from "lucide-react";
+
 import { DEFAULT_SELECTED_COLOR, generateUserId, getUsername } from "@/lib/config";
 import { Pixel, CanvasConfig, InsertPixel, WSMessage } from "@shared/schema";
 import { apiRequest } from "@/lib/queryClient";
 
 export default function CanvasPage() {
   const [selectedColor, setSelectedColor] = useState(DEFAULT_SELECTED_COLOR);
-  const [showGrid, setShowGrid] = useState(true);
+  const [showGrid, setShowGrid] = useState(false);
   const [cooldownSeconds, setCooldownSeconds] = useState(0);
   const [userId] = useState(() => generateUserId());
   const [username] = useState(() => getUsername());
@@ -93,12 +93,7 @@ export default function CanvasPage() {
 
 
 
-  // Set initial grid state from config
-  useEffect(() => {
-    if (config) {
-      setShowGrid(config.showGridByDefault);
-    }
-  }, [config]);
+
 
   // Cooldown countdown
   useEffect(() => {
@@ -163,16 +158,7 @@ export default function CanvasPage() {
         </div>
         
         <div className="flex items-center space-x-3">
-          {/* Grid Toggle */}
-          <Button 
-            onClick={() => setShowGrid(!showGrid)}
-            className="flex items-center space-x-2 bg-panel-hover hover:bg-gray-600"
-            variant="secondary"
-            data-testid="button-grid-toggle"
-          >
-            <Grid className="w-4 h-4" />
-            <span>Grid</span>
-          </Button>
+
 
 
 
@@ -191,7 +177,7 @@ export default function CanvasPage() {
           selectedColor={selectedColor}
           canvasWidth={config.canvasWidth}
           canvasHeight={config.canvasHeight}
-          showGrid={showGrid}
+
           onPixelClick={handlePixelClick}
           cooldownActive={cooldownSeconds > 0}
         />

config.cfg

@@ -16,8 +16,7 @@ ENABLE_AUTOMATIC_EVENTS=false
 EVENT_DURATION_MINUTES=30
 EVENT_INTERVAL_HOURS=6
 
-# Grid Einstellungen
-SHOW_GRID_BY_DEFAULT=true
+# Grid-Funktionalität wurde entfernt
 
 # Export Einstellungen
 AUTO_EXPORT_INTERVAL_SECONDS=60

exports/canvas-2025-08-18T12-21-02-236Z.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#FFFFFF"/><rect x="10" y="1" width="1" height="1" fill="#000000"/></svg>

server/config.ts

@@ -8,7 +8,7 @@ interface Config {
   enableAutomaticEvents: boolean;
   eventDurationMinutes: number;
   eventIntervalHours: number;
-  showGridByDefault: boolean;
+
   autoExportIntervalSeconds: number;
   exportPath: string;
 }
@@ -47,9 +47,7 @@ function parseConfigFile(): Config {
         case "EVENT_INTERVAL_HOURS":
           config.eventIntervalHours = parseInt(trimmedValue);
           break;
-        case "SHOW_GRID_BY_DEFAULT":
-          config.showGridByDefault = trimmedValue.toLowerCase() === "true";
-          break;
+
         case "AUTO_EXPORT_INTERVAL_SECONDS":
           config.autoExportIntervalSeconds = parseInt(trimmedValue);
           break;
@@ -67,7 +65,7 @@ function parseConfigFile(): Config {
       enableAutomaticEvents: config.enableAutomaticEvents || false,
       eventDurationMinutes: config.eventDurationMinutes || 30,
       eventIntervalHours: config.eventIntervalHours || 6,
-      showGridByDefault: config.showGridByDefault !== undefined ? config.showGridByDefault : true,
+
       autoExportIntervalSeconds: config.autoExportIntervalSeconds || 60,
       exportPath: config.exportPath || "./exports/",
     };
@@ -80,7 +78,7 @@ function parseConfigFile(): Config {
       enableAutomaticEvents: false,
       eventDurationMinutes: 30,
       eventIntervalHours: 6,
-      showGridByDefault: true,
+
       autoExportIntervalSeconds: 60,
       exportPath: "./exports/",
     };

server/storage.ts

@@ -36,7 +36,7 @@ export class MemStorage implements IStorage {
       enableAutomaticEvents: config.enableAutomaticEvents,
       eventDuration: config.eventDurationMinutes,
       eventInterval: config.eventIntervalHours,
-      showGridByDefault: config.showGridByDefault,
+
       updatedAt: new Date(),
     };
   }

shared/schema.ts

@@ -21,7 +21,7 @@ export const canvasConfig = pgTable("canvas_config", {
   enableAutomaticEvents: boolean("enable_automatic_events").notNull().default(false),
   eventDuration: integer("event_duration").notNull().default(30), // minutes
   eventInterval: integer("event_interval").notNull().default(6), // hours
-  showGridByDefault: boolean("show_grid_by_default").notNull().default(true),
+
   updatedAt: timestamp("updated_at").defaultNow().notNull(),
 });