@jjlmoya/utils-games-development 1.46.0

package/src/tool/steamCapsuleGenerator/i18n/sv.ts

@@ -0,0 +1,144 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SteamCapsuleGeneratorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
+  slug: 'steam-kapsel-skapare',
+  title: 'Steam Kapsel och Grafik Generator',
+  description: 'Beskär, förhandsgranska och formatera officiella Steam butiks och bibliotekskapslar med säkerhetszonskontroll.',
+  ui: {
+    uploadTitle: 'Ladda Upp Spelgrafik',
+    uploadHint: 'Ladda upp en högupplöst bild (rekommenderas 3840x1240 px eller större).',
+    chooseFile: 'Välj Fil',
+    minimumSize: 'Rekommenderad minsta storlek: 1920x1080 px',
+    horizontalFocus: 'Horisontellt Fokus (X)',
+    verticalFocus: 'Vertikalt Fokus (Y)',
+    zoomLevel: 'Zoomnivå',
+    resetFocus: 'Återställ Fokus',
+    safeZone: 'Säker Zon',
+    downloadZip: 'Ladda Ner Alla Filer (ZIP)',
+    headerCapsule: 'Headerkapsel (460x215 / HD 920x430)',
+    smallCapsule: 'Liten Kapsel (231x87 / HD 462x174)',
+    mainCapsule: 'Huvudkapsel (616x353 / HD 1232x706)',
+    verticalCapsule: 'Vertikal Bibliotekskapsel (300x450 / HD 600x900)',
+    libraryHero: 'Biblioteksbanner (1920x620 / HD 3840x1240)',
+    communityIcon: 'Community Appikon (32x32 / HD 184x184)',
+    storePreviewTab: 'Steam Butik',
+    libraryPreviewTab: 'Steam Bibliotek',
+    allAssetsTab: 'Alla Storlekar',
+    toggleSafeZones: 'Säkerhetszoner',
+    toggleSteamOverlay: 'Steam Gränssnitt'
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Steam Grafik Kapsel Specifikationer'
+    },
+    {
+      type: 'paragraph',
+      html: 'Steam butikssidor och bibliotek använder standardiserade kapselbilder.'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: 'Butik Header HD Upplösning', value: '920 x 430 px' },
+        { label: 'Biblioteks Kapsel Proportion', value: '2:3 Vertikal' },
+        { label: 'Biblioteks Banner Max', value: '3840 x 1240 px' },
+        { label: 'Community Ikon Storlek', value: '184 x 184 px' }
+      ]
+    },
+    {
+      type: 'table',
+      headers: ['Grafiktyp', 'Standard (px)', 'HD Mål (px)', 'Proportion', 'Format'],
+      rows: [
+        ['Headerkapsel', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
+        ['Liten Kapsel', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
+        ['Huvudkapsel', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
+        ['Vertikal Kapsel', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
+        ['Biblioteksbanner', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
+        ['Bibliotekslogotyp', '1280 x 720', '1280 x 720', '16:9', 'Transparent PNG'],
+        ['Community Ikon', '32 x 32', '184 x 184', '1:1', 'PNG']
+      ]
+    },
+    {
+      type: 'tip',
+      title: 'Optimering av Säkerhetszoner',
+      html: 'Håll alla viktiga logotyper i övre vänstra två tredjedelarna av bilden.'
+    },
+    {
+      type: 'proscons',
+      title: 'Arbetsflödesutvärdering',
+      items: [
+        {
+          pro: 'Direkt generering av alla erforderliga Steamworks storlekar',
+          con: 'Komplexa bilder kan kräva separata lager'
+        }
+      ]
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Kapsel',
+          definition: 'Valves standardterm för marknadsföringsbilder.'
+        }
+      ]
+    }
+  ],
+  faqTitle: 'Vanliga Frågor om Steam Grafik',
+  faq: [
+    {
+      question: 'Vilket filformat ska jag använda?',
+      answer: 'Steam accepterar JPG eller PNG filer för huvudkapslar.'
+    }
+  ],
+  howTo: [
+    {
+      name: 'Ladda Upp Bild',
+      text: 'Välj en högupplöst bild.'
+    }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Steam Kapsel och Grafik Generator',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'SEK'
+      }
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Vilket filformat ska jag använda?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Steam accepterar JPG eller PNG filer.'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Hur man skapar Steam kapslar',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Ladda Upp Bild',
+          text: 'Välj en högupplöst bild.'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};

package/src/tool/steamCapsuleGenerator/i18n/tr.ts

@@ -0,0 +1,144 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SteamCapsuleGeneratorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
+  slug: 'steam-kapsul-generatoru',
+  title: 'Steam Kapsül ve Görsel Önizleme Oluşturucu',
+  description: 'Steam mağaza ve kütüphane kapsül görsellerini kırpın, önizleyin ve güvenli alan doğrulaması ile biçimlendirin.',
+  ui: {
+    uploadTitle: 'Oyun Görseli Yükle',
+    uploadHint: 'Yüksek çözünürlüklü bir ana görsel yükleyin (önerilen 3840x1240 px veya üzeri).',
+    chooseFile: 'Dosya Seç',
+    minimumSize: 'Önerilen minimum boyut: 1920x1080 px',
+    horizontalFocus: 'Yatay Odak (X)',
+    verticalFocus: 'Dikey Odak (Y)',
+    zoomLevel: 'Yakınlaştırma Seviyesi',
+    resetFocus: 'Odağı Sıfırla',
+    safeZone: 'Güvenli Alan',
+    downloadZip: 'Tüm Dosyaları İndir (ZIP)',
+    headerCapsule: 'Üst Bilgi Kapsülü (460x215 / HD 920x430)',
+    smallCapsule: 'Küçük Kapsül (231x87 / HD 462x174)',
+    mainCapsule: 'Ana Kapsül (616x353 / HD 1232x706)',
+    verticalCapsule: 'Dikey Kütüphane Kapsülü (300x450 / HD 600x900)',
+    libraryHero: 'Kütüphane Banner (1920x620 / HD 3840x1240)',
+    communityIcon: 'Topluluk Uygulama Simgesi (32x32 / HD 184x184)',
+    storePreviewTab: 'Steam Mağazası',
+    libraryPreviewTab: 'Steam Kütüphanesi',
+    allAssetsTab: 'Tüm Boyutlar',
+    toggleSafeZones: 'Güvenli Alan Çizgileri',
+    toggleSteamOverlay: 'Steam Arayüzü'
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Steam Grafik Kapsül Özellikleri'
+    },
+    {
+      type: 'paragraph',
+      html: 'Steam mağaza sayfaları ve kütüphane görünümleri standart kapsül görselleri kullanır.'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: 'Mağaza Üst Bilgi HD', value: '920 x 430 px' },
+        { label: 'Kütüphane Kapsül Oranı', value: '2:3 Dikey' },
+        { label: 'Kütüphane Banner Maks', value: '3840 x 1240 px' },
+        { label: 'Topluluk Simge Boyutu', value: '184 x 184 px' }
+      ]
+    },
+    {
+      type: 'table',
+      headers: ['Varlık Türü', 'Standart Boyut (px)', 'HD Hedef Boyut (px)', 'En Boy Oranı', 'Biçim'],
+      rows: [
+        ['Üst Bilgi Kapsülü', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
+        ['Küçük Kapsül', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
+        ['Ana Kapsül', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
+        ['Dikey Kapsül', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
+        ['Kütüphane Banner', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
+        ['Kütüphane Logosu', '1280 x 720', '1280 x 720', '16:9', 'Şeffaf PNG'],
+        ['Topluluk Simgesi', '32 x 32', '184 x 184', '1:1', 'PNG']
+      ]
+    },
+    {
+      type: 'tip',
+      title: 'Güvenli Alan İpuçları',
+      html: 'Önemli logoları görselin sol üst üçte ikilik alanında tutun.'
+    },
+    {
+      type: 'proscons',
+      title: 'İş Akışı Değerlendirmesi',
+      items: [
+        {
+          pro: 'Tüm Steamworks boyutlarını anında oluşturma',
+          con: 'Karmaşık görseller ayrı katmanlar gerektirebilir'
+        }
+      ]
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Kapsül',
+          definition: 'Valve tarafından tanıtım görselleri için kullanılan standart terim.'
+        }
+      ]
+    }
+  ],
+  faqTitle: 'Steam Görselleri Hakkında Sıkça Sorulan Sorular',
+  faq: [
+    {
+      question: 'Hangi dosya biçimini kullanmalıyım?',
+      answer: 'Steam ana kapsüller için JPG veya PNG dosyalarını kabul eder.'
+    }
+  ],
+  howTo: [
+    {
+      name: 'Görsel Yükle',
+      text: 'Yüksek çözünürlüklü bir görsel seçin.'
+    }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Steam Kapsül ve Görsel Önizleme Oluşturucu',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'TRY'
+      }
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Hangi dosya biçimini kullanmalıyım?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Steam ana kapsüller için JPG veya PNG dosyalarını kabul eder.'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Steam kapsülleri nasıl oluşturulur',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Görsel Yükle',
+          text: 'Yüksek çözünürlüklü bir görsel seçin.'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};

package/src/tool/steamCapsuleGenerator/i18n/zh.ts

@@ -0,0 +1,144 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SteamCapsuleGeneratorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
+  slug: 'steam-capsule-generator',
+  title: 'Steam 胶囊图与艺术图像预览生成器',
+  description: '裁剪、预览并格式化 Steam 商店和库官方胶囊图像，支持实时安全区校验。',
+  ui: {
+    uploadTitle: '上传游戏艺术图',
+    uploadHint: '上传高分辨率主视觉图（建议 3840x1240 px 或更高）。',
+    chooseFile: '选择文件',
+    minimumSize: '建议最小尺寸：1920x1080 px',
+    horizontalFocus: '水平焦点 (X)',
+    verticalFocus: '垂直焦点 (Y)',
+    zoomLevel: '缩放倍率',
+    resetFocus: '重置焦点',
+    safeZone: '安全区',
+    downloadZip: '下载所有资源 (ZIP)',
+    headerCapsule: '页头胶囊图 (460x215 / 高清 920x430)',
+    smallCapsule: '小胶囊图 (231x87 / 高清 462x174)',
+    mainCapsule: '主胶囊图 (616x353 / 高清 1232x706)',
+    verticalCapsule: '库竖版胶囊图 (300x450 / 高清 600x900)',
+    libraryHero: '库横幅图 (1920x620 / 高清 3840x1240)',
+    communityIcon: '社区应用图标 (32x32 / 高清 184x184)',
+    storePreviewTab: 'Steam 商店',
+    libraryPreviewTab: 'Steam 库',
+    allAssetsTab: '所有尺寸',
+    toggleSafeZones: '安全区指南',
+    toggleSteamOverlay: 'Steam 界面'
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Steam 图像胶囊规范与要求'
+    },
+    {
+      type: 'paragraph',
+      html: 'Steam 商店页面和玩家库视图依赖标准化的胶囊图像展示游戏。开发者必须遵守严格的像素尺寸和安全区要求，防止价格标签遮挡标题。'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: '商店页头高清分辨率', value: '920 x 430 px' },
+        { label: '库胶囊图宽高比', value: '2:3 竖版' },
+        { label: '库横幅最大分辨率', value: '3840 x 1240 px' },
+        { label: '社区图标尺寸', value: '184 x 184 px' }
+      ]
+    },
+    {
+      type: 'table',
+      headers: ['资源类型', '标准尺寸 (px)', '高清目标尺寸 (px)', '宽高比', '格式'],
+      rows: [
+        ['页头胶囊图', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
+        ['小胶囊图', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
+        ['主胶囊图', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
+        ['竖版库胶囊图', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
+        ['库横幅图', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
+        ['库标志图', '1280 x 720', '1280 x 720', '16:9', '透明 PNG'],
+        ['社区图标', '32 x 32', '184 x 184', '1:1', 'PNG']
+      ]
+    },
+    {
+      type: 'tip',
+      title: '安全区优化建议',
+      html: '将关键标志和人物面部保持在图像左上方三分之二区域内。'
+    },
+    {
+      type: 'proscons',
+      title: '工作流评估',
+      items: [
+        {
+          pro: '一键快速生成所有 Steamworks 所需图像尺寸',
+          con: '复杂的艺术图可能需要单独的分层设计'
+        }
+      ]
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: '胶囊图 (Capsule)',
+          definition: 'Valve 用来指代 Steam 商店和客户端库中推广图容器的术语。'
+        }
+      ]
+    }
+  ],
+  faqTitle: '关于 Steam 图像资源的常见问题',
+  faq: [
+    {
+      question: '我应该使用什么文件格式？',
+      answer: 'Steam 主胶囊图支持 JPG 或 PNG 文件。推荐使用高质量 JPG。'
+    }
+  ],
+  howTo: [
+    {
+      name: '上传艺术图',
+      text: '选择一张高分辨率主视觉图。'
+    }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Steam 胶囊图与艺术图像预览生成器',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'CNY'
+      }
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '我应该使用什么文件格式？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Steam 主胶囊图支持 JPG 或 PNG 文件。'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: '如何生成 Steam 胶囊图',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: '上传艺术图',
+          text: '选择一张高分辨率主视觉图。'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};

package/src/tool/steamCapsuleGenerator/index.ts

@@ -0,0 +1,9 @@
+import type { ToolDefinition } from '../../types';
+import { steamCapsuleGenerator } from './entry';
+export * from './entry';
+export const STEAM_CAPSULE_GENERATOR_TOOL: ToolDefinition = {
+  entry: steamCapsuleGenerator,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/steamCapsuleGenerator/logic.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import {
+  calculateCropBounds,
+  getInitialState,
+  STEAM_ASSETS,
+  validateImageDimensions
+} from './logic';
+
+describe('Steam Capsule Generator Logic', () => {
+  it('contains mandatory Steam asset definitions', () => {
+    expect(STEAM_ASSETS.length).toBeGreaterThanOrEqual(7);
+    const header = STEAM_ASSETS.find((a) => a.id === 'header-capsule');
+    expect(header).toBeDefined();
+    expect(header?.hdWidth).toBe(920);
+    expect(header?.hdHeight).toBe(430);
+  });
+
+  it('calculates crop bounds correctly with centered focal point', () => {
+    const crop = calculateCropBounds({
+      srcWidth: 1920,
+      srcHeight: 1080,
+      targetWidth: 460,
+      targetHeight: 215,
+      focusX: 0.5,
+      focusY: 0.5,
+      zoom: 1
+    });
+    expect(crop.sWidth).toBeGreaterThan(0);
+    expect(crop.sHeight).toBeGreaterThan(0);
+    expect(crop.sx).toBeGreaterThanOrEqual(0);
+    expect(crop.sy).toBeGreaterThanOrEqual(0);
+  });
+
+  it('calculates crop bounds with zoom factor', () => {
+    const unzoomed = calculateCropBounds({
+      srcWidth: 1920,
+      srcHeight: 1080,
+      targetWidth: 460,
+      targetHeight: 215,
+      focusX: 0.5,
+      focusY: 0.5,
+      zoom: 1
+    });
+    const zoomed = calculateCropBounds({
+      srcWidth: 1920,
+      srcHeight: 1080,
+      targetWidth: 460,
+      targetHeight: 215,
+      focusX: 0.5,
+      focusY: 0.5,
+      zoom: 2
+    });
+    expect(zoomed.sWidth).toBeLessThan(unzoomed.sWidth);
+    expect(zoomed.sHeight).toBeLessThan(unzoomed.sHeight);
+  });
+
+  it('validates image resolution sufficiency against HD specs', () => {
+    const headerSpec = STEAM_ASSETS.find((a) => a.id === 'header-capsule')!;
+    const highRes = validateImageDimensions(1920, 1080, headerSpec);
+    expect(highRes.isSufficient).toBe(true);
+
+    const lowRes = validateImageDimensions(300, 200, headerSpec);
+    expect(lowRes.isSufficient).toBe(false);
+  });
+
+  it('provides default tool state', () => {
+    const state = getInitialState();
+    expect(state.focalPoint.x).toBe(0.5);
+    expect(state.focalPoint.y).toBe(0.5);
+    expect(state.showSafeZones).toBe(true);
+  });
+});