broadfield-dev/stack-overflow-game

1/**2 * Generate a simple template image showing the play area3 * Run with: node scripts/generate-template.js4 */5 6import fs from 'fs';7import path from 'path';8import { fileURLToPath } from 'url';9 10const __filename = fileURLToPath(import.meta.url);11const __dirname = path.dirname(__filename);12const projectRoot = path.join(__dirname, '..');13 14async function generateTemplate() {15  try {16    const { createCanvas } = await import('canvas');17    const canvas = createCanvas(256, 224);18    const ctx = canvas.getContext('2d');19 20    console.log('Canvas created:', canvas.width, 'x', canvas.height);21 22    // Set global alpha to fully opaque23    ctx.globalAlpha = 1.0;24 25    // Background - light gray (with explicit RGB)26    ctx.fillStyle = 'rgb(204, 204, 204)';27    ctx.fillRect(0, 0, 256, 224);28 29    // Play area - bright magenta/pink (easy to see and select in image editors)30    ctx.fillStyle = 'rgb(255, 0, 255)';31    ctx.fillRect(88, 32, 80, 160);32 33    // Add grid lines in play area34    ctx.strokeStyle = '#CC00CC';35    ctx.lineWidth = 1;36    // Vertical lines every 8 pixels37    for (let x = 88; x <= 168; x += 8) {38      ctx.beginPath();39      ctx.moveTo(x, 32);40      ctx.lineTo(x, 192);41      ctx.stroke();42    }43    // Horizontal lines every 8 pixels44    for (let y = 32; y <= 192; y += 8) {45      ctx.beginPath();46      ctx.moveTo(88, y);47      ctx.lineTo(168, y);48      ctx.stroke();49    }50 51    // Border around play area - black52    ctx.strokeStyle = '#000000';53    ctx.lineWidth = 2;54    ctx.strokeRect(88, 32, 80, 160);55 56    // Add labels57    ctx.fillStyle = '#000000';58    ctx.font = 'bold 12px sans-serif';59 60    // Title61    ctx.fillText('TETRIS BACKDROP TEMPLATE', 40, 15);62    ctx.font = '10px sans-serif';63    ctx.fillText('256 x 224 pixels', 85, 215);64 65    // Play area label66    ctx.fillStyle = '#FFFFFF';67    ctx.font = 'bold 10px sans-serif';68    ctx.fillText('PLAY AREA', 100, 110);69    ctx.fillText('80 x 160', 105, 122);70 71    // Coordinates72    ctx.fillStyle = '#000000';73    ctx.font = '8px sans-serif';74    ctx.fillText('(88,32)', 90, 28);75    ctx.fillText('(168,192)', 130, 200);76 77    // UI area labels78    ctx.fillStyle = '#666666';79    ctx.font = '8px sans-serif';80    ctx.fillText('SCORE/LEVEL', 10, 20);81    ctx.fillText('AREA', 10, 30);82 83    ctx.fillText('NEXT PIECE', 185, 20);84    ctx.fillText('AREA', 185, 30);85 86    // Corner markers87    ctx.fillStyle = '#FF0000';88    const markerSize = 6;89    // Top-left90    ctx.fillRect(88 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);91    // Top-right92    ctx.fillRect(168 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);93    // Bottom-left94    ctx.fillRect(88 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);95    // Bottom-right96    ctx.fillRect(168 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);97 98    // Add dimension arrows99    ctx.strokeStyle = '#000000';100    ctx.lineWidth = 1;101    ctx.fillStyle = '#000000';102 103    // Width arrow (top)104    ctx.beginPath();105    ctx.moveTo(88, 25);106    ctx.lineTo(168, 25);107    ctx.stroke();108    // Arrow heads109    ctx.beginPath();110    ctx.moveTo(88, 25);111    ctx.lineTo(92, 23);112    ctx.lineTo(92, 27);113    ctx.closePath();114    ctx.fill();115    ctx.beginPath();116    ctx.moveTo(168, 25);117    ctx.lineTo(164, 23);118    ctx.lineTo(164, 27);119    ctx.closePath();120    ctx.fill();121    ctx.fillText('80px', 120, 23);122 123    // Height arrow (left)124    ctx.beginPath();125    ctx.moveTo(82, 32);126    ctx.lineTo(82, 192);127    ctx.stroke();128    // Arrow heads129    ctx.beginPath();130    ctx.moveTo(82, 32);131    ctx.lineTo(80, 36);132    ctx.lineTo(84, 36);133    ctx.closePath();134    ctx.fill();135    ctx.beginPath();136    ctx.moveTo(82, 192);137    ctx.lineTo(80, 188);138    ctx.lineTo(84, 188);139    ctx.closePath();140    ctx.fill();141 142    ctx.save();143    ctx.translate(75, 112);144    ctx.rotate(-Math.PI / 2);145    ctx.fillText('160px', -15, 0);146    ctx.restore();147  148    // Save the template149    const templatePath = path.join(projectRoot, 'BACKDROP-TEMPLATE.png');150    const buffer = canvas.toBuffer('image/png');151    console.log('Buffer size:', buffer.length, 'bytes');152    fs.writeFileSync(templatePath, buffer);153 154    console.log('✅ Template created: BACKDROP-TEMPLATE.png');155    console.log('');156    console.log('The MAGENTA/PINK area (#FF00FF) is the play area.');157    console.log('Use this template in your image editor:');158    console.log('  1. Open BACKDROP-TEMPLATE.png');159    console.log('  2. Create your artwork on layers below the template');160    console.log('  3. Delete or hide the template layer');161    console.log('  4. Export as 256x224 PNG');162    console.log('  5. Save to public/assets/backdrops/level-X/backdrop.png');163  } catch (error) {164    console.error('Error generating template:', error);165    throw error;166  }167}168 169generateTemplate().catch(console.error);170 171