61 lines
3.4 KiB
JavaScript
61 lines
3.4 KiB
JavaScript
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
const width = 2000;
|
|
const height = 1800;
|
|
|
|
// Hilfsfunktion für eine kleine Karte auf der Box-Vorderseite
|
|
function drawMiniCard(x, y, rotation, color, num) {
|
|
return `
|
|
<g transform="translate(${x}, ${y}) rotate(${rotation})">
|
|
<rect x="-40" y="-60" width="80" height="120" rx="8" fill="white" stroke="${color}" stroke-width="2" />
|
|
<text x="0" y="10" font-family="Arial" font-weight="bold" font-size="40" fill="${color}" text-anchor="middle">${num}</text>
|
|
<text x="-32" y="-40" font-family="Arial" font-size="12" fill="${color}" text-anchor="start">${num}</text>
|
|
</g>`;
|
|
}
|
|
|
|
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
|
|
<defs>
|
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#111827" />
|
|
<stop offset="100%" stop-color="#1F2937" />
|
|
</linearGradient>
|
|
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#D4AF37" />
|
|
<stop offset="50%" stop-color="#F3E5AB" />
|
|
<stop offset="100%" stop-color="#AA7C11" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect width="${width}" height="${height}" fill="#f3f4f6" />
|
|
|
|
<g transform="translate(300, 200)">
|
|
<rect x="300" y="320" width="400" height="600" fill="url(#bgGradient)" stroke="#ef4444" stroke-width="2" />
|
|
|
|
<g transform="translate(500, 500)">
|
|
${drawMiniCard(-60, 20, -15, '#43A047', '7')}
|
|
${drawMiniCard(-20, 0, -5, '#212121', '12')}
|
|
${drawMiniCard(20, 10, 10, '#E53935', '11')}
|
|
${drawMiniCard(60, 30, 25, '#FDD835', '4')}
|
|
</g>
|
|
|
|
<text x="500" y="750" font-family="Arial Black" font-weight="900" font-size="70" fill="url(#goldGradient)" text-anchor="middle" letter-spacing="12">TROX</text>
|
|
<text x="500" y="820" font-family="Arial" font-size="18" fill="#F3E5AB" text-anchor="middle" letter-spacing="2">TACTICAL CARD GAME</text>
|
|
|
|
<rect x="300" y="920" width="400" height="600" fill="url(#bgGradient)" stroke="#ef4444" stroke-width="2" />
|
|
<text x="500" y="1050" font-family="Arial" font-weight="bold" font-size="24" fill="url(#goldGradient)" text-anchor="middle">HOW TO PLAY</text>
|
|
<text x="500" y="1100" font-family="Arial" font-size="16" fill="#ffffff" text-anchor="middle">Bid exactly. Win tricks. Rule the table.</text>
|
|
|
|
<rect x="350" y="1400" width="300" height="60" rx="10" fill="none" stroke="url(#goldGradient)" stroke-width="1" />
|
|
<text x="500" y="1435" font-family="Arial" font-size="14" fill="#9ca3af" text-anchor="middle">2-6 Players | Ages 7+ | 80 Cards</text>
|
|
|
|
<rect x="180" y="320" width="120" height="600" fill="url(#bgGradient)" stroke="#ef4444" stroke-width="2" />
|
|
<rect x="700" y="320" width="120" height="600" fill="url(#bgGradient)" stroke="#ef4444" stroke-width="2" />
|
|
<path d="M 300 100 Q 300 0 400 0 L 600 0 Q 700 0 700 100 L 670 200 L 330 200 Z" fill="url(#bgGradient)" />
|
|
</g>
|
|
</svg>`;
|
|
|
|
const outputDir = path.join(__dirname, 'karten_export_v2');
|
|
if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir); }
|
|
fs.writeFileSync(path.join(outputDir, 'trox_tuck_box_v3.svg'), svgContent);
|
|
console.log('Update abgeschlossen: Box-Design mit Karten-Illustration generiert.'); |