Map painter v1

lille-morille · lille-morille · commit b75af36259ea · 2025-10-17T19:33:24.000+02:00
diff --git a/rema_1001/CLAUDE.md b/rema_1001/CLAUDE.md
@@ -0,0 +1,112 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Flutter application for Rema 1001 (Norwegian grocery store chain) with a companion backend. The app includes shopping lists, trips tracking, and store maps functionality.
+
+**Tech Stack:**
+- Frontend: Flutter (Dart SDK ^3.9.2)
+- State Management: flutter_bloc ^9.1.1
+- Routing: go_router ^16.2.5
+- Backend: Located in sibling `../backend/` directory (Hono + Prisma + PostgreSQL)
+
+## Common Commands
+
+### Flutter (Frontend)
+
+```bash
+# Run the app
+flutter run
+
+# Run on specific device
+flutter run -d chrome
+flutter run -d macos
+flutter run -d ios
+
+# Build for production
+flutter build apk
+flutter build ios
+flutter build web
+
+# Run tests
+flutter test
+
+# Analyze code
+flutter analyze
+
+# Install/update dependencies
+flutter pub get
+flutter pub upgrade
+```
+
+### Backend (in ../backend/)
+
+The backend is a separate project in a sibling directory. Switch to `../backend/` to work with backend code.
+
+## Architecture
+
+### Navigation Architecture
+
+The app uses **go_router** with a **ShellRoute** pattern that wraps all main screens with a persistent bottom navigation bar (`RoutedNavBar`).
+
+- **Router configuration:** `lib/router/router.dart`
+- **Route names:** `lib/router/route_names.dart` (centralized route name constants)
+- **Custom transitions:** `lib/router/fade_transition_page.dart` (fade-in transitions with 150ms duration)
+- **Navigation bar:** `lib/router/nav_bar.dart` (custom bottom nav with 4 destinations, badge support)
+
+The ShellRoute wraps these main routes:
+- `/home` - Home screen with quick access buttons
+- `/trips` - Shopping trips with map visualization
+- `/lists` - Shopping lists management
+- `/profile` - User profile
+
+### Page Structure
+
+All screens are located in `lib/page/`:
+- `home.dart` - HomeScreen (welcome screen with navigation buttons)
+- `map.dart` - TripsScreen (about page renamed, shows maps)
+- `about.dart` - ListsScreen (shopping lists)
+- `profile.dart` - ProfileScreen (user profile)
+
+Note: There's a naming mismatch where `about.dart` contains `ListsScreen` and `map.dart` contains `TripsScreen` (shown as "about" in old git history).
+
+### Custom Components
+
+**FadeTransitionPage** (`lib/router/fade_transition_page.dart`):
+- Custom page transition wrapper for go_router
+- Uses opacity animation for smooth fade-in/fade-out
+- Default 150ms duration for both directions
+
+**RoutedNavBar** (`lib/router/nav_bar.dart`):
+- Custom bottom navigation with 4 destinations (Norwegian labels: "Hjem", "Handleturer", "Dine lister", "Profil")
+- Dark theme (#2D2D2D background)
+- Badge support (e.g., "12" badge on home screen)
+- Active route detection using GoRouterState
+- 102px height with SafeArea
+
+**Map Components** (`lib/map/`):
+- `map_painter.dart` - Custom painter for store map visualizations
+
+### State Management
+
+The project uses `flutter_bloc` for state management (version ^9.1.1) but BLoC classes are not yet implemented in the visible codebase. When adding new features with state:
+- Create BLoCs in appropriate feature folders
+- Follow BLoC pattern: Events, States, and BLoC classes
+- Use `equatable` (already included) for value equality in events/states
+
+## Code Style
+
+- Uses `flutter_lints` package for linting rules
+- Standard Flutter conventions apply
+- Lint configuration in `analysis_options.yaml`
+- Norwegian language used in UI labels (see nav_bar.dart)
+
+## Project Context
+
+Based on git history, this project includes:
+- Prisma backend with seeding scripts (in sibling backend directory)
+- PostgreSQL database in Docker
+- Scalar API documentation
+- Mock dataset for seeding
diff --git a/rema_1001/lib/map/map.dart b/rema_1001/lib/map/map.dart
@@ -0,0 +1,31 @@
+import 'package:flutter/widgets.dart';
+import 'package:equatable/equatable.dart';
+
+final class Map extends Equatable {
+  final List<Offset> walkPoints;
+  final List<Aisle> aisles;
+
+  const Map({required this.walkPoints, required this.aisles});
+
+  @override
+  List<Object?> get props => [walkPoints, aisles];
+}
+
+enum AisleStatus { obstruction, active, highlighted }
+
+final class Aisle extends Equatable {
+  final Offset topLeft;
+  final double width;
+  final double height;
+  final AisleStatus status;
+
+  const Aisle({
+    required this.topLeft,
+    required this.width,
+    required this.height,
+    this.status = AisleStatus.obstruction,
+  });
+
+  @override
+  List<Object?> get props => [topLeft, width, height];
+}
diff --git a/rema_1001/lib/map/map_painter.dart b/rema_1001/lib/map/map_painter.dart
@@ -1,38 +1,101 @@
 import 'package:flutter/widgets.dart';
+import 'package:rema_1001/map/map.dart' as map_model;
+
+final dimension = 64;
+
+final borderRadius = Radius.circular(16);
+final backgroundPaint = Paint()..color = const Color(0xff434343);
+final borderPaint = Paint()
+  ..color = const Color(0xff2C2C2C)
+  ..style = PaintingStyle.stroke
+  ..strokeWidth = 30
+  ..strokeCap = StrokeCap.round;
+
+final aislePaint = Paint()..color = const Color(0xFF636363);
+final aisleShadowPaint = Paint()..color = const Color(0xff4A4A4A);
+
+final obstructionPaint = Paint()..color = const Color(0xff2C2C2C);
 
 final class MapPainter implements CustomPainter {
-  @override
-  void addListener(VoidCallback listener) {
-    // TODO: implement addListener
-  }
+  final map_model.Map map;
+
+  MapPainter({required this.map});
 
   @override
-  bool? hitTest(Offset position) {
-    // TODO: implement hitTest
-    throw UnimplementedError();
+  void paint(Canvas canvas, Size size) {
+    _paintBackground(canvas, size);
+    _paintIsles(canvas, size, map);
   }
 
   @override
-  void paint(Canvas canvas, Size size) {}
+  void addListener(VoidCallback listener) {}
 
   @override
-  void removeListener(VoidCallback listener) {
-    // TODO: implement removeListener
+  bool? hitTest(Offset position) {
+    return null;
   }
 
   @override
-  // TODO: implement semanticsBuilder
-  SemanticsBuilderCallback? get semanticsBuilder => throw UnimplementedError();
+  void removeListener(VoidCallback listener) {}
+
+  @override
+  SemanticsBuilderCallback? get semanticsBuilder => null;
 
   @override
   bool shouldRebuildSemantics(covariant CustomPainter oldDelegate) {
-    // TODO: implement shouldRebuildSemantics
-    throw UnimplementedError();
+    return false;
   }
 
   @override
   bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    // TODO: implement shouldRepaint
-    throw UnimplementedError();
+    return true;
+  }
+
+  void _paintIsle(Canvas canvas, Size size, map_model.Aisle aisle) {
+    // Scale factors to convert map coordinates to canvas size
+    final scaleX = size.width / dimension;
+    final scaleY = size.height / dimension;
+
+    final rect = Rect.fromLTWH(
+      aisle.topLeft.dx * scaleX,
+      aisle.topLeft.dy * scaleY,
+      aisle.width * scaleX,
+      aisle.height * scaleY,
+    );
+
+    // Soft shadow
+    if (aisle.status != map_model.AisleStatus.highlighted) {
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(rect.shift(Offset(4, 12)), Radius.circular(9)),
+        Paint()
+          ..color = const Color(0x52000000)
+          ..maskFilter = MaskFilter.blur(BlurStyle.normal, 8),
+      );
+    }
+
+    // Hard shadow
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(rect, Radius.circular(9)),
+      aisleShadowPaint,
+    );
+
+    // Aisle
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(rect.shift(Offset(0, -6)), Radius.circular(9)),
+      aislePaint,
+    );
+  }
+
+  void _paintIsles(Canvas canvas, Size size, map_model.Map map) {
+    for (final aisle in map.aisles) {
+      _paintIsle(canvas, size, aisle);
+    }
+  }
+
+  void _paintBackground(Canvas canvas, Size size) {
+    canvas.drawRRect(
+      RRect.fromLTRBR(0, 0, size.width, size.height, borderRadius),
+      backgroundPaint,
+    );
   }
 }
diff --git a/rema_1001/lib/page/map.dart b/rema_1001/lib/page/map.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:rema_1001/map/map.dart';
+import 'package:rema_1001/map/map_painter.dart';
 import 'package:rema_1001/router/route_names.dart';
 
 class ListsScreen extends StatelessWidget {
@@ -29,30 +31,51 @@ class ListsScreen extends StatelessWidget {
               style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
             ),
             const SizedBox(height: 16),
-            Expanded(
-              child: ListView(
-                children: [
-                  _buildListCard(
-                    'Weekly Groceries',
-                    '12 items',
-                    Icons.shopping_cart,
-                    Colors.blue,
-                  ),
-                  const SizedBox(height: 12),
-                  _buildListCard(
-                    'Party Supplies',
-                    '8 items',
-                    Icons.celebration,
-                    Colors.orange,
-                  ),
-                  const SizedBox(height: 12),
-                  _buildListCard(
-                    'Breakfast Items',
-                    '5 items',
-                    Icons.free_breakfast,
-                    Colors.green,
+            AspectRatio(
+              aspectRatio: 1,
+              child: CustomPaint(
+                painter: MapPainter(
+                  map: Map(
+                    walkPoints: const [],
+                    aisles: const [
+                      // Top-left counter/checkout area
+                      Aisle(topLeft: Offset(10, 4), width: 15, height: 6),
+
+                      // Top-right three small blocks
+                      Aisle(topLeft: Offset(31, 4), width: 5, height: 5),
+                      Aisle(topLeft: Offset(38, 4), width: 5, height: 5),
+                      Aisle(topLeft: Offset(45, 4), width: 5, height: 5),
+
+                      // Upper-middle left rectangle
+                      Aisle(topLeft: Offset(10, 17), width: 18, height: 7),
+
+                      // Upper-middle center rectangle
+                      Aisle(topLeft: Offset(31, 17), width: 12, height: 7),
+
+                      // Right tall vertical rectangle
+                      Aisle(topLeft: Offset(46, 17), width: 4, height: 18),
+
+                      // Lower-middle left rectangle
+                      Aisle(topLeft: Offset(10, 27), width: 18, height: 7),
+
+                      // Lower-middle center rectangle
+                      Aisle(topLeft: Offset(31, 27), width: 12, height: 7),
+
+                      // Bottom three circles
+                      Aisle(topLeft: Offset(23, 42), width: 5, height: 5),
+                      Aisle(topLeft: Offset(31, 42), width: 3, height: 3),
+                      Aisle(topLeft: Offset(38, 42), width: 5, height: 5),
+
+                      // Bottom large rectangle
+                      Aisle(topLeft: Offset(17, 50), width: 30, height: 9),
+
+                      // Borders
+                      Aisle(topLeft: Offset(0, 0), width: 8, height: 64),
+                      Aisle(topLeft: Offset(0, 0), width: 64, height: 8),
+                      Aisle(topLeft: Offset(56, 0), width: 8, height: 64),
+                    ],
                   ),
-                ],
+                ),
               ),
             ),
             const SizedBox(height: 16),
@@ -67,18 +90,4 @@ class ListsScreen extends StatelessWidget {
       ),
     );
   }
-
-  Widget _buildListCard(String title, String itemCount, IconData icon, Color color) {
-    return Card(
-      child: ListTile(
-        leading: CircleAvatar(
-          backgroundColor: color.withValues(alpha: 0.2),
-          child: Icon(icon, color: color),
-        ),
-        title: Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
-        subtitle: Text(itemCount),
-        trailing: const Icon(Icons.arrow_forward_ios),
-      ),
-    );
-  }
 }
