@jjlmoya/utils-games-development 1.46.0 → 1.49.0

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

@@ -0,0 +1,107 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { ItchioGameTesterUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<ItchioGameTesterUI> = {
+  slug: 'itchio-spel-testare',
+  title: 'Itch.io Webbspelsinspektör och Realtidsupplösningsoptimering',
+  description: 'Ladda upp HTML5-exportfiler eller ZIP-arkiv för att testa viewports live, åtgärda rullningslister, inspektera Godot- och Unity WebGL-byggen och generera Itch.io-inbäddningsinställningar.',
+  ui: {
+    dropzoneTitle: 'Släpp ditt spelbygge eller ZIP-arkiv här',
+    dropzoneHint: 'Släpp en .ZIP-fil, exporterad mapp eller HTML5-buildfiler i det här området för omedelbar inspektion.',
+    chooseFiles: 'Välj spelfil eller mapp',
+    engineDetected: 'Identifierad motor',
+    compatibilityScore: 'Itch.io-kompatibilitetspoäng',
+    viewportWidth: 'Viewportbredd (px)',
+    viewportHeight: 'Viewporthöjd (px)',
+    presets: 'Snabba upplösningsförinställningar',
+    fitTest: 'Live layout- och rullningsliststest',
+    copySettings: 'Kopiera Itch.io-inbäddningsinställningar',
+    copied: 'Kopierat till urklipp',
+    embedMode: 'Inbäddningsläge',
+    scrollbars: 'Aktivera rullningslister',
+    noIssuesFound: 'Alla kontroller har passerats. Paketet uppfyller Itch.io-standarderna till 100%.',
+    filesInspected: 'Inspekterade filer',
+    resetViewport: 'Återställ viewport',
+    autoScaleToggle: 'Skala viewport automatiskt till skärmbredd',
+    scaledNotice: 'Viewport överstiger skärmbredden. En konstgjord zoom-ut har applicerats för att hela canvasen ska synas. Inaktivera automatisk skalning för att se den verkliga layouten.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Formateringsriktlinjer för Itch.io HTML5-spelexporter'
+    },
+    {
+      type: 'paragraph',
+      html: 'Att publicera HTML5- och WebGL-spel på Itch.io kräver exakt konfiguration av viewportdimensioner, arkivfilstrukturer och cross-origin säkerhetshuvuden.'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: 'Standardwebbbildförhållande', value: '16:9 Liggande' },
+        { label: 'Klassisk Itch-upplösning', value: '960 x 540 px' },
+        { label: 'Obligatorisk ingångsfil', value: 'index.html i roten' },
+        { label: 'Godot 4-krav', value: 'COOP / COEP-huvuden' }
+      ]
+    },
+    {
+      type: 'tip',
+      html: 'När du bäddar in ett 1280x720 WebGL-spel på Itch.io, ange inbäddningsviewportens dimensioner till exakt 1280x720 med "Embed in page" aktiverat.'
+    }
+  ],
+  faq: [
+    {
+      question: 'Varför visar mitt Godot 4-spel en svart skärm på Itch.io?',
+      answer: 'Godot 4-webbexporter använder WebAssembly-flertrådning som kräver SharedArrayBuffer-stöd. Aktivera "SharedArrayBuffer support" i ramens alternativ för ditt spel på Itch.io.'
+    }
+  ],
+  howTo: [
+    { name: 'Ladda upp spelfiler eller ZIP', text: 'Dra och släpp ditt HTML5-export ZIP-arkiv eller välj din byggkatalog med index.html.' },
+    { name: 'Granska kompatibilitetsrapport', text: 'Kontrollera den automatiska granskningsrapporten för root-index.html-placering, skiftlägesvarningar och motoridentifiering.' },
+    { name: 'Ändra storlek på viewport live', text: 'Använd upplösningskontrollerna och bildförhållandeförinställningarna för att testa iframe-inbäddning live utan rullningslister.' },
+    { name: 'Kopiera Itch.io-inställningar', text: 'Klicka på Kopiera inställningar för att hämta exakta bredd- och höjdvärden för din Itch.io-inlämningssida.' }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Itch.io Webbspelsinspektör',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any'
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Varför visar mitt Godot 4-spel en svart skärm på Itch.io?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Godot 4-webbexporter använder WebAssembly-flertrådning som kräver SharedArrayBuffer-stöd. Aktivera "SharedArrayBuffer support" i ramens alternativ för ditt spel på Itch.io.'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Så granskar och testar du viewporten för ditt Itch.io-spel',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Ladda upp spelfiler eller ZIP',
+          text: 'Dra och släpp ditt HTML5-export ZIP-arkiv eller välj din byggkatalog med index.html.'
+        },
+        {
+          '@type': 'HowToStep',
+          name: 'Ändra storlek på viewport live',
+          text: 'Använd upplösningskontrollerna och bildförhållandeförinställningarna för att testa iframe-inbäddning live utan rullningslister.'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};

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

@@ -0,0 +1,107 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { ItchioGameTesterUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<ItchioGameTesterUI> = {
+  slug: 'itchio-oyun-test-araci',
+  title: 'Itch.io Web Oyun Denetçisi ve Canlı Çözünürlük Optimize Edici',
+  description: 'HTML5 dışa aktarma dosyalarını veya ZIP arşivlerini yükleyerek görünüm alanlarını canlı test edin, kaydırma çubuklarını düzeltin, Godot ve Unity WebGL derlemelerini denetleyin ve Itch.io yerleştirme ayarları oluşturun.',
+  ui: {
+    dropzoneTitle: 'Oyun Derlemeni veya ZIP Arşivini Buraya Bırak',
+    dropzoneHint: 'Herhangi bir .ZIP dosyasını, dışa aktarılmış klasörü veya HTML5 derleme dosyalarını anında incelemek için bu alana bırakın.',
+    chooseFiles: 'Oyun Dosyası veya Klasör Seç',
+    engineDetected: 'Algılanan Motor',
+    compatibilityScore: 'Itch.io Uyumluluk Puanı',
+    viewportWidth: 'Görünüm Alanı Genişliği (px)',
+    viewportHeight: 'Görünüm Alanı Yüksekliği (px)',
+    presets: 'Hızlı Çözünürlük Ön Ayarları',
+    fitTest: 'Canlı Düzen ve Kaydırma Çubuğu Testi',
+    copySettings: 'Itch.io Yerleştirme Ayarlarını Kopyala',
+    copied: 'Panoya Kopyalandı',
+    embedMode: 'Yerleştirme Modu',
+    scrollbars: 'Kaydırma Çubuklarını Etkinleştir',
+    noIssuesFound: 'Tüm kontroller başarıyla geçildi. Paket Itch.io standartlarıyla %100 uyumludur.',
+    filesInspected: 'Denetlenen Dosyalar',
+    resetViewport: 'Görünüm Alanını Sıfırla',
+    autoScaleToggle: 'Görünüm Alanını Ekran Genişliğine Otomatik Ölçekle',
+    scaledNotice: 'Görünüm alanı ekran genişliğini aşıyor. Tuvalin tamamı görünür olsun diye yapay zoom-out uygulandı. Gerçek düzeni görmek için otomatik ölçeklemeyi devre dışı bırakın.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Itch.io HTML5 Oyun Dışa Aktarmaları için Biçimlendirme Yönergeleri'
+    },
+    {
+      type: 'paragraph',
+      html: 'Itch.io\'da HTML5 ve WebGL oyunları yayınlamak, görünüm alanı boyutlarının, arşiv dosya yapılarının ve çapraz kaynak güvenlik başlıklarının hassas yapılandırmasını gerektirir.'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: 'Standart Web En-Boy Oranı', value: '16:9 Yatay' },
+        { label: 'Klasik Itch Çözünürlüğü', value: '960 x 540 px' },
+        { label: 'Gerekli Giriş Dosyası', value: 'Kök dizinde index.html' },
+        { label: 'Godot 4 Gereksinimi', value: 'COOP / COEP Başlıkları' }
+      ]
+    },
+    {
+      type: 'tip',
+      html: 'Itch.io\'ya 1280x720 WebGL oyunu yerleştirirken, "Embed in page" etkin olarak yerleştirme görünüm alanı boyutlarını tam olarak 1280x720 olarak ayarlayın.'
+    }
+  ],
+  faq: [
+    {
+      question: 'Godot 4 oyunum neden Itch.io\'da siyah ekran gösteriyor?',
+      answer: 'Godot 4 web dışa aktarmaları SharedArrayBuffer desteği gerektiren WebAssembly çoklu iş parçacığını kullanır. Itch.io oyun düzenleme sayfanızda çerçeve seçeneklerinde "SharedArrayBuffer support" özelliğini etkinleştirin.'
+    }
+  ],
+  howTo: [
+    { name: 'Oyun Dosyalarını veya ZIP\'i Yükle', text: 'HTML5 dışa aktarma ZIP arşivini sürükle ve bırak ya da index.html içeren derleme klasörünü seç.' },
+    { name: 'Uyumluluk Raporunu İncele', text: 'Kök index.html yerleşimi, büyük/küçük harf uyarıları ve motor algılama için otomatik denetim raporunu kontrol et.' },
+    { name: 'Görünüm Alanını Canlı Yeniden Boyutlandır', text: 'Kaydırma çubukları olmadan iframe yerleştirmeyi canlı test etmek için çözünürlük kontrollerini ve en-boy oranı ön ayarlarını kullan.' },
+    { name: 'Itch.io Ayarlarını Kopyala', text: 'Itch.io oyun gönderme sayfan için tam genişlik ve yükseklik değerlerini almak üzere Ayarları Kopyala\'ya tıkla.' }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Itch.io Web Oyun Denetçisi',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any'
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Godot 4 oyunum neden Itch.io\'da siyah ekran gösteriyor?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Godot 4 web dışa aktarmaları SharedArrayBuffer desteği gerektiren WebAssembly çoklu iş parçacığını kullanır. Itch.io oyun düzenleme sayfanızda çerçeve seçeneklerinde "SharedArrayBuffer support" özelliğini etkinleştirin.'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Itch.io oyununuzun görünüm alanını denetleme ve test etme',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Oyun Dosyalarını veya ZIP\'i Yükle',
+          text: 'HTML5 dışa aktarma ZIP arşivini sürükle ve bırak ya da index.html içeren derleme klasörünü seç.'
+        },
+        {
+          '@type': 'HowToStep',
+          name: 'Görünüm Alanını Canlı Yeniden Boyutlandır',
+          text: 'Kaydırma çubukları olmadan iframe yerleştirmeyi canlı test etmek için çözünürlük kontrollerini ve en-boy oranı ön ayarlarını kullan.'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};

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

@@ -0,0 +1,107 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { ItchioGameTesterUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<ItchioGameTesterUI> = {
+  slug: 'itchio-game-tester',
+  title: 'Itch.io 网页游戏检查器与实时分辨率优化工具',
+  description: '上传HTML5导出文件或ZIP压缩包，实时测试视口、修复滚动条、检查Godot和Unity WebGL构建，并生成Itch.io嵌入设置。',
+  ui: {
+    dropzoneTitle: '将游戏构建或ZIP文件拖放至此处',
+    dropzoneHint: '将任何.ZIP文件、导出文件夹或HTML5构建文件拖放到此区域即可立即检查。',
+    chooseFiles: '选择游戏文件或文件夹',
+    engineDetected: '检测到的引擎',
+    compatibilityScore: 'Itch.io兼容性评分',
+    viewportWidth: '视口宽度 (px)',
+    viewportHeight: '视口高度 (px)',
+    presets: '快速分辨率预设',
+    fitTest: '实时布局与滚动条测试',
+    copySettings: '复制Itch.io嵌入设置',
+    copied: '已复制到剪贴板',
+    embedMode: '嵌入模式',
+    scrollbars: '启用滚动条',
+    noIssuesFound: '所有检查均已通过。该包100%符合Itch.io标准。',
+    filesInspected: '已检查文件',
+    resetViewport: '重置视口',
+    autoScaleToggle: '自动将视口缩放到屏幕宽度',
+    scaledNotice: '视口超出屏幕宽度。已应用人工缩小以使整个画布可见。禁用自动缩放可查看真实的布局效果。',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Itch.io HTML5游戏导出格式指南'
+    },
+    {
+      type: 'paragraph',
+      html: '在Itch.io上发布HTML5和WebGL游戏需要精确配置视口尺寸、归档文件结构和跨源安全标头。'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: '标准网页宽高比', value: '16:9 横向' },
+        { label: '经典Itch分辨率', value: '960 x 540 px' },
+        { label: '必需入口文件', value: '根目录的index.html' },
+        { label: 'Godot 4要求', value: 'COOP / COEP标头' }
+      ]
+    },
+    {
+      type: 'tip',
+      html: '在Itch.io上嵌入1280x720的WebGL游戏时，将嵌入视口尺寸精确设置为1280x720，并启用"Embed in page"。'
+    }
+  ],
+  faq: [
+    {
+      question: '为什么我的Godot 4游戏在Itch.io上显示黑屏？',
+      answer: 'Godot 4网页导出使用需要SharedArrayBuffer支持的WebAssembly多线程。在Itch.io游戏编辑页面的帧选项中启用"SharedArrayBuffer support"。'
+    }
+  ],
+  howTo: [
+    { name: '上传游戏文件或ZIP', text: '拖放HTML5导出ZIP压缩包，或选择包含index.html的构建目录。' },
+    { name: '查看兼容性报告', text: '检查自动审核报告，了解根目录index.html放置、大小写警告和引擎检测情况。' },
+    { name: '实时调整视口大小', text: '使用分辨率滑块和宽高比预设，实时测试无滚动条的iframe嵌入效果。' },
+    { name: '复制Itch.io设置', text: '点击复制设置，获取用于Itch.io游戏提交页面的精确宽度和高度值。' }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Itch.io 网页游戏检查器',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any'
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '为什么我的Godot 4游戏在Itch.io上显示黑屏？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Godot 4网页导出使用需要SharedArrayBuffer支持的WebAssembly多线程。在Itch.io游戏编辑页面的帧选项中启用"SharedArrayBuffer support"。'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: '如何审核并测试您的Itch.io游戏视口',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: '上传游戏文件或ZIP',
+          text: '拖放HTML5导出ZIP压缩包，或选择包含index.html的构建目录。'
+        },
+        {
+          '@type': 'HowToStep',
+          name: '实时调整视口大小',
+          text: '使用分辨率滑块和宽高比预设，实时测试无滚动条的iframe嵌入效果。'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};

package/src/tool/itchioGameTester/index.ts

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

package/src/tool/itchioGameTester/itchio-game-tester.css

@@ -0,0 +1,273 @@
+.igt-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.igt-card {
+  background: var(--bg-surface, #fff);
+  border: 1px solid var(--border-base, #e2e8f0);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.igt-card-compact {
+  padding: 1rem 1.25rem;
+}
+
+.theme-dark .igt-card {
+  background: var(--bg-surface, #1e293b);
+  border-color: var(--border-base, #334155);
+}
+
+.igt-dropzone {
+  border: 2px dashed var(--border-base, #cbd5e1);
+  border-radius: 12px;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: var(--bg-hover, #f8fafc);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.igt-dropzone-compact {
+  padding: 1.25rem 1rem;
+}
+
+.theme-dark .igt-dropzone {
+  background: var(--bg-hover, #0f172a);
+  border-color: var(--border-base, #475569);
+}
+
+.igt-dropzone:hover, .igt-dropzone.igt-dragover {
+  border-color: var(--color-primary, #6366f1);
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.igt-controls-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.25rem;
+  margin-top: 1rem;
+}
+
+.igt-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.igt-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-base, #1e293b);
+}
+
+.theme-dark .igt-label {
+  color: var(--text-base, #f8fafc);
+}
+
+.igt-input, .igt-select {
+  padding: 0.625rem 0.875rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-base, #cbd5e1);
+  background: var(--bg-surface, #fff);
+  color: var(--text-base, #0f172a);
+  font-size: 0.95rem;
+}
+
+.theme-dark .igt-input, .theme-dark .igt-select {
+  background: var(--bg-surface, #0f172a);
+  border-color: var(--border-base, #334155);
+  color: var(--text-base, #f8fafc);
+}
+
+.igt-preset-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.igt-chip {
+  padding: 0.4rem 0.75rem;
+  border-radius: 20px;
+  border: 1px solid var(--border-base, #cbd5e1);
+  background: var(--bg-surface, #f1f5f9);
+  color: var(--text-base, #334155);
+  font-size: 0.825rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.theme-dark .igt-chip {
+  background: var(--bg-surface, #334155);
+  color: var(--text-base, #e2e8f0);
+  border-color: var(--border-base, #475569);
+}
+
+.igt-chip:hover {
+  background: var(--color-primary, #6366f1);
+  color: var(--text-inverse, #fff);
+  border-color: var(--color-primary, #6366f1);
+}
+
+.igt-chip.active {
+  background: var(--color-primary, #4f46e5);
+  color: var(--text-inverse, #fff);
+  border-color: var(--color-primary, #4f46e5);
+}
+
+.igt-emulator-wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.igt-emulator-frame {
+  position: relative;
+  margin: 1.5rem auto;
+  border: 4px solid var(--border-base, #0f172a);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #000;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+  transition: width 0.1s ease, height 0.1s ease;
+  resize: both;
+}
+
+.igt-resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  background: var(--color-primary, #6366f1);
+  cursor: se-resize;
+  border-top-left-radius: 4px;
+  z-index: 10;
+}
+
+.igt-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #000;
+}
+
+.igt-iframe-resizing {
+  pointer-events: none;
+}
+
+
+.igt-audit-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.igt-badge-pass {
+  background: #dcfce7;
+  color: var(--text-success, #166534);
+}
+
+.igt-badge-warn {
+  background: #fef9c3;
+  color: var(--text-warning, #854d0e);
+}
+
+.igt-badge-error {
+  background: #fee2e2;
+  color: var(--text-danger, #991b1b);
+}
+
+.igt-btn-primary {
+  padding: 0.75rem 1.25rem;
+  border-radius: 8px;
+  border: none;
+  background: var(--color-primary, #6366f1);
+  color: var(--text-inverse, #fff);
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.1s, background-color 0.15s;
+}
+
+.igt-btn-sm {
+  padding: 0.45rem 0.85rem;
+  font-size: 0.85rem;
+}
+
+.igt-btn-primary:hover {
+  background: var(--color-primary-hover, #4f46e5);
+  transform: translateY(-1px);
+}
+
+.igt-btn-primary:active {
+  transform: translateY(0);
+}
+
+.igt-scale-notice {
+  display: none;
+  margin-top: 1rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: 6px;
+  background: var(--color-warn-bg, #fef9c3);
+  color: var(--color-warn-text, #854d0e);
+  font-size: 0.85rem;
+  border: 1px solid var(--color-warn-border, #fef08a);
+}
+
+.igt-all-clear {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 1rem 1.25rem;
+  border-radius: 10px;
+  background: var(--color-success-bg, #dcfce7);
+  border: 1px solid var(--color-success-border, #86efac);
+  color: var(--color-success-text, #166534);
+}
+
+.theme-dark .igt-all-clear {
+  background: var(--color-success-bg, #052e16);
+  border-color: var(--color-success-border, #166534);
+  color: var(--color-success-text, #4ade80);
+}
+
+.igt-all-clear-icon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--color-success-text, #166534);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+
+.theme-dark .igt-all-clear-icon {
+  background: var(--color-success-text, #4ade80);
+}
+
+.igt-all-clear-body strong {
+  display: block;
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.igt-all-clear-body span {
+  font-size: 0.825rem;
+  opacity: 0.85;
+}

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

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { validateGameFiles, detectGameEngine, calculateAspectRatio, generateItchioEmbedConfig, type WebGameFileInfo } from './logic';
+
+describe('Itch.io Game Tester Logic Unit Tests', () => {
+  it('should detect Godot 4 Web export files', () => {
+    const mockFiles: WebGameFileInfo[] = [
+      { name: 'index.html', size: 1024, isDirectory: false },
+      { name: 'mygame.wasm', size: 500000, isDirectory: false },
+      { name: 'mygame.pck', size: 1200000, isDirectory: false },
+      { name: 'godot.side.wasm', size: 10000, isDirectory: false }
+    ];
+
+    const engine = detectGameEngine(mockFiles);
+    expect(engine).toBe('Godot 4');
+
+    const result = validateGameFiles(mockFiles);
+    expect(result.hasIndexHtml).toBe(true);
+    expect(result.issues.some((i) => i.code === 'GODOT4_HEADERS')).toBe(true);
+  });
+
+  it('should detect Unity WebGL export files', () => {
+    const mockFiles: WebGameFileInfo[] = [
+      { name: 'index.html', size: 1024, isDirectory: false },
+      { name: 'Build/game.framework.js', size: 50000, isDirectory: false },
+      { name: 'Build/game.data', size: 500000, isDirectory: false }
+    ];
+
+    const engine = detectGameEngine(mockFiles);
+    expect(engine).toBe('Unity WebGL');
+  });
+
+  it('should flag nested index.html error', () => {
+    const mockFiles: WebGameFileInfo[] = [
+      { name: 'export-folder/index.html', size: 1024, isDirectory: false }
+    ];
+
+    const result = validateGameFiles(mockFiles);
+    expect(result.hasIndexHtml).toBe(false);
+    expect(result.indexHtmlPath).toBe('export-folder/index.html');
+    expect(result.issues.some((i) => i.code === 'NESTED_INDEX')).toBe(true);
+  });
+
+  it('should calculate aspect ratios accurately', () => {
+    expect(calculateAspectRatio(1280, 720)).toBe('16:9');
+    expect(calculateAspectRatio(800, 600)).toBe('4:3');
+    expect(calculateAspectRatio(960, 640)).toBe('3:2');
+    expect(calculateAspectRatio(800, 800)).toBe('1:1');
+  });
+
+  it('should generate embed config text correctly', () => {
+    const config = generateItchioEmbedConfig(960, 600, 'landscape');
+    expect(config.viewportWidth).toBe(960);
+    expect(config.viewportHeight).toBe(600);
+    expect(config.codeSnippet).toContain('960px x 600px');
+  });
+});