slashvibe-mcp 0.3.20 → 0.3.21

package/games/pixelart.js

@@ -0,0 +1,399 @@
+/**
+ * Collaborative Pixel Art game implementation for /vibe
+ * A shared pixel grid where multiple users can create art together
+ * Place colored pixels to create collaborative pixel art masterpieces!
+ */
+
+// Pixel art canvas dimensions
+const CANVAS_SIZE = 16; // 16x16 grid for manageable display
+
+// Available pixel colors using colored squares
+const PIXEL_COLORS = {
+  'empty': '⬜', // Empty/white
+  'black': '⬛', // Black
+  'red': '🟥', // Red
+  'blue': '🟦', // Blue
+  'green': '🟩', // Green
+  'yellow': '🟨', // Yellow
+  'orange': '🟧', // Orange
+  'purple': '🟪', // Purple
+  'brown': '🟫', // Brown
+  'pink': '🩷', // Pink (if available, fallback to red)
+  'gray': '⬜', // Light gray (using white as fallback)
+  'darkgray': '⬛', // Dark gray (using black as fallback)
+};
+
+// Alternative color representation for better compatibility
+const ALT_COLORS = {
+  'empty': '⬜',
+  'black': '⬛',
+  'red': '🔴',
+  'blue': '🔵',
+  'green': '🟢',
+  'yellow': '🟡',
+  'orange': '🟠',
+  'purple': '🟣',
+  'brown': '🟤',
+  'pink': '🌸',
+  'gray': '⚪',
+  'darkgray': '⚫'
+};
+
+// Create initial pixel art game state
+function createInitialPixelArtState() {
+  // Initialize empty canvas
+  const canvas = Array(CANVAS_SIZE).fill(null).map(() => 
+    Array(CANVAS_SIZE).fill('empty')
+  );
+
+  return {
+    canvas: canvas,
+    players: [],
+    pixelMoves: [],
+    maxPlayers: 10,
+    gameOver: false,
+    createdAt: new Date().toISOString(),
+    lastActivity: new Date().toISOString(),
+    theme: null, // Optional art theme/challenge
+    mode: 'collaborative', // 'collaborative', 'battle', 'themed'
+    colorMode: 'squares' // 'squares' or 'circles'
+  };
+}
+
+// Add player to pixel art session
+function addPlayer(gameState, playerHandle) {
+  if (gameState.players.includes(playerHandle)) {
+    return { error: 'Player already in the pixel art session' };
+  }
+
+  if (gameState.players.length >= gameState.maxPlayers) {
+    return { error: `Pixel art session is full (max ${gameState.maxPlayers} players)` };
+  }
+
+  const newPlayers = [...gameState.players, playerHandle];
+  
+  return {
+    success: true,
+    gameState: {
+      ...gameState,
+      players: newPlayers,
+      lastActivity: new Date().toISOString()
+    }
+  };
+}
+
+// Place a pixel at position
+function placePixel(gameState, x, y, color, playerHandle) {
+  const { canvas, players, pixelMoves } = gameState;
+  
+  // Validate player
+  if (!players.includes(playerHandle)) {
+    return { error: 'You need to join the pixel art session first!' };
+  }
+  
+  // Validate position
+  if (x < 0 || x >= CANVAS_SIZE || y < 0 || y >= CANVAS_SIZE) {
+    return { error: `Position out of bounds. Canvas is ${CANVAS_SIZE}x${CANVAS_SIZE}` };
+  }
+  
+  // Validate color
+  if (!PIXEL_COLORS[color]) {
+    const availableColors = Object.keys(PIXEL_COLORS).join(', ');
+    return { error: `Invalid color '${color}'. Available: ${availableColors}` };
+  }
+  
+  // Update canvas
+  const newCanvas = canvas.map(row => [...row]);
+  newCanvas[y][x] = color;
+  
+  // Record the move
+  const move = {
+    x, y, color, 
+    player: playerHandle,
+    timestamp: new Date().toISOString(),
+    moveNumber: pixelMoves.length + 1,
+    previousColor: canvas[y][x]
+  };
+  
+  const newMoves = [...pixelMoves, move];
+  
+  const newGameState = {
+    ...gameState,
+    canvas: newCanvas,
+    pixelMoves: newMoves,
+    lastActivity: new Date().toISOString()
+  };
+  
+  return { success: true, gameState: newGameState };
+}
+
+// Fill a rectangular region with a color
+function fillRegion(gameState, x0, y0, x1, y1, color, playerHandle) {
+  const { players } = gameState;
+  
+  if (!players.includes(playerHandle)) {
+    return { error: 'You need to join the pixel art session first!' };
+  }
+  
+  if (!PIXEL_COLORS[color]) {
+    return { error: `Invalid color '${color}'` };
+  }
+  
+  // Ensure coordinates are in bounds and properly ordered
+  const minX = Math.max(0, Math.min(x0, x1));
+  const maxX = Math.min(CANVAS_SIZE - 1, Math.max(x0, x1));
+  const minY = Math.max(0, Math.min(y0, y1));
+  const maxY = Math.min(CANVAS_SIZE - 1, Math.max(y0, y1));
+  
+  let currentGameState = gameState;
+  
+  // Fill pixel by pixel to maintain move history
+  for (let y = minY; y <= maxY; y++) {
+    for (let x = minX; x <= maxX; x++) {
+      const result = placePixel(currentGameState, x, y, color, playerHandle);
+      if (result.success) {
+        currentGameState = result.gameState;
+      }
+    }
+  }
+  
+  return { success: true, gameState: currentGameState };
+}
+
+// Clear the entire canvas
+function clearCanvas(gameState, playerHandle) {
+  const { players } = gameState;
+  
+  if (!players.includes(playerHandle)) {
+    return { error: 'You need to join the pixel art session first!' };
+  }
+  
+  const canvas = Array(CANVAS_SIZE).fill(null).map(() => 
+    Array(CANVAS_SIZE).fill('empty')
+  );
+  
+  const clearMove = {
+    action: 'clear_all',
+    player: playerHandle,
+    timestamp: new Date().toISOString(),
+    moveNumber: gameState.pixelMoves.length + 1
+  };
+  
+  return {
+    success: true,
+    gameState: {
+      ...gameState,
+      canvas: canvas,
+      pixelMoves: [...gameState.pixelMoves, clearMove],
+      lastActivity: new Date().toISOString()
+    }
+  };
+}
+
+// Toggle color mode between squares and circles
+function toggleColorMode(gameState, playerHandle) {
+  const { players } = gameState;
+  
+  if (!players.includes(playerHandle)) {
+    return { error: 'You need to join the pixel art session first!' };
+  }
+  
+  const newMode = gameState.colorMode === 'squares' ? 'circles' : 'squares';
+  
+  return {
+    success: true,
+    gameState: {
+      ...gameState,
+      colorMode: newMode,
+      lastActivity: new Date().toISOString()
+    }
+  };
+}
+
+// Format pixel art display
+function formatPixelArtDisplay(gameState) {
+  const { canvas, players, pixelMoves, theme, mode, colorMode } = gameState;
+  
+  let display = `🎨 **Collaborative Pixel Art** (${players.length} artist${players.length !== 1 ? 's' : ''})\n`;
+  display += `*${CANVAS_SIZE}x${CANVAS_SIZE} pixel canvas*\n\n`;
+  
+  // Show theme if set
+  if (theme) {
+    display += `🎯 **Theme:** ${theme}\n\n`;
+  }
+  
+  // Choose color palette based on mode
+  const colors = colorMode === 'circles' ? ALT_COLORS : PIXEL_COLORS;
+  
+  // Show canvas with coordinate labels
+  display += '```\n';
+  
+  // Top coordinate labels (0-9, A-F for 10-15)
+  let topLabels = '  ';
+  for (let x = 0; x < CANVAS_SIZE; x++) {
+    if (x < 10) {
+      topLabels += x;
+    } else {
+      topLabels += String.fromCharCode(65 + x - 10); // A, B, C, D, E, F
+    }
+  }
+  display += topLabels + '\n';
+  
+  // Canvas rows with left coordinate labels
+  for (let y = 0; y < CANVAS_SIZE; y++) {
+    let row = (y < 10 ? y : String.fromCharCode(65 + y - 10)) + ' ';
+    for (let x = 0; x < CANVAS_SIZE; x++) {
+      const pixelColor = canvas[y][x];
+      row += colors[pixelColor] || colors['empty'];
+    }
+    display += row + '\n';
+  }
+  
+  display += '```\n\n';
+  
+  // Show players
+  if (players.length > 0) {
+    display += `**Artists:** ${players.map(p => `@${p}`).join(', ')}\n\n`;
+  }
+  
+  // Show recent activity
+  if (pixelMoves.length > 0) {
+    const recentMoves = pixelMoves.slice(-4).filter(m => m.action !== 'clear_all'); // Last 4 non-clear moves
+    if (recentMoves.length > 0) {
+      display += '**Recent pixels:**\n';
+      for (const move of recentMoves) {
+        display += `• @${move.player} placed ${colors[move.color]} at (${move.x},${move.y})\n`;
+      }
+      display += '\n';
+    }
+  }
+  
+  // Show available colors
+  display += `**Available colors** (${colorMode} mode):\n`;
+  const colorEntries = Object.entries(colors);
+  const colorLines = [];
+  for (let i = 0; i < colorEntries.length; i += 4) {
+    const group = colorEntries.slice(i, i + 4);
+    colorLines.push(group.map(([name, pixel]) => `${pixel}${name}`).join(' '));
+  }
+  display += colorLines.join('\n') + '\n\n';
+  
+  // Show commands
+  display += '**Commands:**\n';
+  display += '• `pixel X Y COLOR` - Place pixel at coordinates (e.g., `pixel 5 3 red`)\n';
+  display += '• `fill X0 Y0 X1 Y1 COLOR` - Fill rectangular area\n';
+  display += '• `clear` - Clear entire canvas\n';
+  display += '• `toggle` - Switch between square/circle colors\n\n';
+  
+  return display;
+}
+
+// Set pixel art theme/challenge
+function setTheme(gameState, theme, playerHandle) {
+  const { players } = gameState;
+  
+  if (!players.includes(playerHandle)) {
+    return { error: 'You need to join the pixel art session first!' };
+  }
+  
+  return {
+    success: true,
+    gameState: {
+      ...gameState,
+      theme: theme,
+      lastActivity: new Date().toISOString()
+    }
+  };
+}
+
+// Get pixel art statistics
+function getPixelArtStats(gameState) {
+  const { canvas, pixelMoves, players } = gameState;
+  
+  // Count colors used
+  const colorCount = {};
+  for (const row of canvas) {
+    for (const pixel of row) {
+      if (pixel !== 'empty') {
+        colorCount[pixel] = (colorCount[pixel] || 0) + 1;
+      }
+    }
+  }
+  
+  // Count moves per player
+  const playerMoves = {};
+  for (const move of pixelMoves) {
+    if (move.player && move.action !== 'clear_all') {
+      playerMoves[move.player] = (playerMoves[move.player] || 0) + 1;
+    }
+  }
+  
+  const totalColoredPixels = Object.values(colorCount).reduce((a, b) => a + b, 0);
+  const totalPixels = CANVAS_SIZE * CANVAS_SIZE;
+  const fillPercentage = Math.round((totalColoredPixels / totalPixels) * 100);
+  
+  return {
+    totalMoves: pixelMoves.length,
+    totalColoredPixels,
+    fillPercentage,
+    uniqueColorsUsed: Object.keys(colorCount).length,
+    colorCount,
+    playerMoves,
+    mostUsedColor: Object.entries(colorCount).sort(([,a], [,b]) => b - a)[0]
+  };
+}
+
+// Generate art suggestions based on theme
+function getArtSuggestions(theme) {
+  const suggestions = {
+    'nature': ['Use green for grass/trees', 'Blue for sky/water', 'Yellow for sun', 'Brown for tree trunks'],
+    'pixel character': ['Start with basic shape', 'Use black for outlines', 'Add simple features', 'Keep it small and recognizable'],
+    'landscape': ['Blue sky at top', 'Green ground at bottom', 'Add simple shapes for trees/mountains'],
+    'abstract': ['Use complementary colors', 'Try patterns or geometric shapes', 'Experiment with color gradients'],
+    'flag': ['Research the flag colors', 'Plan the layout first', 'Use fill command for large areas'],
+    'emoji': ['Pick a simple emoji to recreate', 'Use basic shapes', 'Focus on recognizable features'],
+    'retro game': ['Use limited color palette', 'Think 8-bit style', 'Simple geometric shapes work best']
+  };
+  
+  const defaultSuggestions = [
+    'Start with simple shapes',
+    'Use contrasting colors',
+    'Plan before placing pixels',
+    'Collaborate with other artists!'
+  ];
+  
+  return suggestions[theme?.toLowerCase()] || defaultSuggestions;
+}
+
+// Export a simple text version of the canvas
+function exportCanvasAsText(gameState) {
+  const { canvas, colorMode } = gameState;
+  const colors = colorMode === 'circles' ? ALT_COLORS : PIXEL_COLORS;
+  
+  let textCanvas = '';
+  for (const row of canvas) {
+    for (const pixel of row) {
+      textCanvas += colors[pixel] || colors['empty'];
+    }
+    textCanvas += '\n';
+  }
+  
+  return textCanvas;
+}
+
+module.exports = {
+  createInitialPixelArtState,
+  addPlayer,
+  placePixel,
+  fillRegion,
+  clearCanvas,
+  toggleColorMode,
+  formatPixelArtDisplay,
+  setTheme,
+  getPixelArtStats,
+  getArtSuggestions,
+  exportCanvasAsText,
+  PIXEL_COLORS,
+  ALT_COLORS,
+  CANVAS_SIZE
+};