Add components/town/TownMap.tsx

components/town/TownMap.tsx

@@ -0,0 +1,266 @@
+/**
+ * AI Town — Town Map Renderer (React Native + Skia)
+ * ====================================================
+ * 2D isometric-style town with pan/zoom, character sprites,
+ * and tap-to-interact functionality.
+ */
+
+import React, { useMemo } from "react";
+import { View, Dimensions, Text, TouchableOpacity } from "react-native";
+import { Canvas, Rect, Circle, Group, RoundedRect, Text as SkiaText, useFont } from "@shopify/react-native-skia";
+import { GestureDetector, Gesture } from "react-native-gesture-handler";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
+
+const TILE_SIZE = 32;
+const SCREEN = Dimensions.get("window");
+
+// Tile colors
+const TILE_COLORS: Record<string, string> = {
+  grass: "#4ade80",
+  path: "#d4a574",
+  flowers: "#f472b6",
+  tree: "#166534",
+  water: "#60a5fa",
+  sand: "#fde047",
+};
+
+// Building colors
+const BUILDING_COLORS: Record<string, string> = {
+  house: "#f97316",
+  cafe: "#8b5cf6",
+  park: "#22c55e",
+  library: "#3b82f6",
+  shop: "#ec4899",
+  gym: "#ef4444",
+  restaurant: "#f59e0b",
+  office: "#6366f1",
+};
+
+interface TownMapProps {
+  tiles: string[][];
+  buildings: any[];
+  characters: any[];
+  onTileTap?: (x: number, y: number) => void;
+  onCharacterTap?: (character: any) => void;
+  onBuildingTap?: (building: any) => void;
+}
+
+export function TownMap({
+  tiles,
+  buildings,
+  characters,
+  onTileTap,
+  onCharacterTap,
+  onBuildingTap,
+}: TownMapProps) {
+  const offsetX = useSharedValue(0);
+  const offsetY = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const savedOffsetX = useSharedValue(0);
+  const savedOffsetY = useSharedValue(0);
+  const savedScale = useSharedValue(1);
+
+  const gridWidth = tiles[0]?.length || 20;
+  const gridHeight = tiles.length || 20;
+  const canvasWidth = gridWidth * TILE_SIZE;
+  const canvasHeight = gridHeight * TILE_SIZE;
+
+  // Pan gesture
+  const panGesture = Gesture.Pan()
+    .onStart(() => {
+      savedOffsetX.value = offsetX.value;
+      savedOffsetY.value = offsetY.value;
+    })
+    .onUpdate((e) => {
+      offsetX.value = savedOffsetX.value + e.translationX;
+      offsetY.value = savedOffsetY.value + e.translationY;
+    });
+
+  // Pinch gesture (zoom)
+  const pinchGesture = Gesture.Pinch()
+    .onStart(() => {
+      savedScale.value = scale.value;
+    })
+    .onUpdate((e) => {
+      scale.value = Math.max(0.5, Math.min(3, savedScale.value * e.scale));
+    });
+
+  // Tap gesture (place/interact)
+  const tapGesture = Gesture.Tap().onEnd((e) => {
+    const tileX = Math.floor((e.x - offsetX.value) / (TILE_SIZE * scale.value));
+    const tileY = Math.floor((e.y - offsetY.value) / (TILE_SIZE * scale.value));
+
+    // Check if tapped on a character
+    const tappedChar = characters.find(
+      (c) => c.positionX === tileX && c.positionY === tileY
+    );
+    if (tappedChar) {
+      onCharacterTap?.(tappedChar);
+      return;
+    }
+
+    // Check if tapped on a building
+    const tappedBuilding = buildings.find(
+      (b) =>
+        tileX >= b.positionX &&
+        tileX < b.positionX + b.width &&
+        tileY >= b.positionY &&
+        tileY < b.positionY + b.height
+    );
+    if (tappedBuilding) {
+      onBuildingTap?.(tappedBuilding);
+      return;
+    }
+
+    // Empty tile tap
+    onTileTap?.(tileX, tileY);
+  });
+
+  const composed = Gesture.Simultaneous(panGesture, pinchGesture);
+  const allGestures = Gesture.Exclusive(tapGesture, composed);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: offsetX.value },
+      { translateY: offsetY.value },
+      { scale: scale.value },
+    ],
+  }));
+
+  return (
+    <GestureDetector gesture={allGestures}>
+      <Animated.View style={[{ width: SCREEN.width, height: SCREEN.height * 0.6 }, animatedStyle]}>
+        <Canvas style={{ width: canvasWidth, height: canvasHeight }}>
+          {/* Render tiles */}
+          {tiles.map((row, y) =>
+            row.map((tile, x) => (
+              <Rect
+                key={`${x}-${y}`}
+                x={x * TILE_SIZE}
+                y={y * TILE_SIZE}
+                width={TILE_SIZE - 1}
+                height={TILE_SIZE - 1}
+                color={TILE_COLORS[tile] || "#4ade80"}
+              />
+            ))
+          )}
+
+          {/* Render buildings */}
+          {buildings.map((building, i) => (
+            <Group key={`building-${i}`}>
+              <RoundedRect
+                x={building.positionX * TILE_SIZE}
+                y={building.positionY * TILE_SIZE}
+                width={building.width * TILE_SIZE - 2}
+                height={building.height * TILE_SIZE - 2}
+                r={4}
+                color={BUILDING_COLORS[building.type] || "#6b7280"}
+              />
+              {/* Building label */}
+              <Rect
+                x={building.positionX * TILE_SIZE}
+                y={building.positionY * TILE_SIZE}
+                width={building.width * TILE_SIZE - 2}
+                height={12}
+                color="rgba(0,0,0,0.5)"
+              />
+            </Group>
+          ))}
+
+          {/* Render characters as colored circles */}
+          {characters.map((char, i) => (
+            <Group key={`char-${i}`}>
+              {/* Shadow */}
+              <Circle
+                cx={char.positionX * TILE_SIZE + TILE_SIZE / 2}
+                cy={char.positionY * TILE_SIZE + TILE_SIZE / 2 + 2}
+                r={TILE_SIZE / 3}
+                color="rgba(0,0,0,0.3)"
+              />
+              {/* Character */}
+              <Circle
+                cx={char.positionX * TILE_SIZE + TILE_SIZE / 2}
+                cy={char.positionY * TILE_SIZE + TILE_SIZE / 2}
+                r={TILE_SIZE / 3}
+                color={getMoodColor(char.mood)}
+              />
+              {/* Direction indicator */}
+              <Circle
+                cx={char.positionX * TILE_SIZE + TILE_SIZE / 2}
+                cy={char.positionY * TILE_SIZE + TILE_SIZE / 4}
+                r={3}
+                color="#ffffff"
+              />
+            </Group>
+          ))}
+        </Canvas>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+function getMoodColor(mood: string): string {
+  switch (mood) {
+    case "happy": return "#fbbf24";
+    case "excited": return "#f97316";
+    case "curious": return "#8b5cf6";
+    case "anxious": return "#ef4444";
+    case "bored": return "#6b7280";
+    case "content": return "#34d399";
+    default: return "#60a5fa";
+  }
+}
+
+// ═══ Character Info Panel (shows on tap) ═══
+
+interface CharacterPanelProps {
+  character: any;
+  onChat: () => void;
+  onClose: () => void;
+}
+
+export function CharacterPanel({ character, onChat, onClose }: CharacterPanelProps) {
+  return (
+    <View className="absolute bottom-0 left-0 right-0 bg-gray-900/95 rounded-t-3xl p-6 border-t border-gray-700">
+      <View className="flex-row items-center justify-between mb-4">
+        <View className="flex-row items-center gap-3">
+          <View
+            className="w-12 h-12 rounded-full items-center justify-center"
+            style={{ backgroundColor: getMoodColor(character.mood) }}
+          >
+            <Text className="text-xl">{character.avatar}</Text>
+          </View>
+          <View>
+            <Text className="text-white font-bold text-lg">{character.name}</Text>
+            <Text className="text-gray-400 text-sm">{character.occupation}</Text>
+          </View>
+        </View>
+        <TouchableOpacity onPress={onClose}>
+          <Text className="text-gray-400 text-2xl">✕</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View className="flex-row gap-2 mb-3">
+        {character.traits?.slice(0, 3).map((trait: string, i: number) => (
+          <View key={i} className="bg-purple-500/20 px-2 py-1 rounded-full">
+            <Text className="text-purple-300 text-xs">{trait}</Text>
+          </View>
+        ))}
+      </View>
+
+      <Text className="text-gray-300 text-sm mb-2">
+        🎭 Mood: <Text className="text-white font-medium">{character.mood}</Text>
+      </Text>
+      <Text className="text-gray-300 text-sm mb-4">
+        📍 Doing: <Text className="text-white font-medium">{character.currentAction}</Text>
+      </Text>
+
+      <TouchableOpacity
+        onPress={onChat}
+        className="bg-blue-600 py-3 rounded-xl items-center"
+      >
+        <Text className="text-white font-bold">💬 Chat with {character.name}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}