@jjlmoya/utils-games-development 1.53.0 → 1.55.0

package/src/tool/steamBbcodeTranslator/markdown-renderer.ts

@@ -0,0 +1,85 @@
+import type { Node, TagNode } from './types';
+
+function escapeMarkdown(value: string): string {
+  return value.replace(/([\\`*_{}[\]()#+!|>])/g, '\\$1');
+}
+
+function escapeMarkdownUrl(value: string): string {
+  return value.replace(/[()\\ ]/g, (character) => `\\${character}`);
+}
+
+function cleanInline(value: string): string {
+  return value.replace(/[ \t]+\n/g, '\n').replace(/\n[ \t]+/g, '\n');
+}
+
+function indent(value: string): string {
+  return value.split('\n').map((line) => line ? `  ${line}` : line).join('\n');
+}
+
+export function inlineMarkdown(nodes: Node[]): string {
+  return cleanInline(nodes.map((node) => {
+    if (node.kind === 'text') return escapeMarkdown(node.value);
+    return renderMarkdownNode(node, true);
+  }).join(''));
+}
+
+export function renderMarkdownList(node: TagNode, ordered: boolean): string {
+  const items = node.children.filter((child): child is TagNode => child.kind === 'tag' && child.name === '*');
+  return items.map((item, index) => {
+    const content = item.children.map((child) => {
+      if (child.kind === 'tag' && (child.name === 'list' || child.name === 'olist')) {
+        return `\n${indent(renderMarkdownList(child, child.name === 'olist'))}`;
+      }
+      if (child.kind === 'text') return escapeMarkdown(child.value);
+      return renderMarkdownNode(child, true);
+    }).join('').trim();
+    return `${ordered ? `${index + 1}.` : '-'} ${content}`;
+  }).join('\n');
+}
+
+function renderCodeNode(node: TagNode, inline: boolean): string {
+  const inner = node.children.map((child) => child.kind === 'text' ? child.value : renderMarkdownNode(child, true)).join('');
+  return inline ? `\`${inner}\`` : `\`\`\`\n${inner}\n\`\`\`\n\n`;
+}
+
+function renderQuoteNode(node: TagNode): string {
+  return node.children.map((child) => inlineMarkdown([child])).join('').split('\n').map((line) => `> ${line}`).join('\n') + '\n\n';
+}
+
+function renderMarkdownBasicInline(name: string, content: string): string | null {
+  if (name === 'b' || name === 'strong') return `**${content}**`;
+  if (name === 'i' || name === 'em') return `*${content}*`;
+  if (name === 'u') return `<u>${content}</u>`;
+  if (name === 's' || name === 'strike') return `~~${content}~~`;
+  return null;
+}
+
+function renderMarkdownInlineNode(name: string, content: string, value?: string): string {
+  const basic = renderMarkdownBasicInline(name, content);
+  if (basic !== null) return basic;
+  if (name === 'url') return value ? `[${content || escapeMarkdown(value)}](${escapeMarkdownUrl(value)})` : content;
+  return content;
+}
+
+function renderMarkdownHeadingOrBlock(name: string, content: string, node: TagNode, inline: boolean): string | null {
+  if (name === 'h1') return `# ${content.trim()}\n\n`;
+  if (name === 'h2') return `## ${content.trim()}\n\n`;
+  if (name === 'h3') return `### ${content.trim()}\n\n`;
+  if (name === 'code') return renderCodeNode(node, inline);
+  if (name === 'quote') return renderQuoteNode(node);
+  if (name === 'spoiler') return `<details><summary>Spoiler</summary>${content}</details>`;
+  return null;
+}
+
+export function renderMarkdownNode(node: TagNode, inline = false): string {
+  const content = inlineMarkdown(node.children);
+  const headingOrBlock = renderMarkdownHeadingOrBlock(node.name, content, node, inline);
+  if (headingOrBlock !== null) return headingOrBlock;
+  if (node.name === 'list') return `${renderMarkdownList(node, false)}\n\n`;
+  if (node.name === 'olist') return `${renderMarkdownList(node, true)}\n\n`;
+  return renderMarkdownInlineNode(node.name, content, node.value);
+}
+
+export function renderMarkdown(nodes: Node[]): string {
+  return nodes.map((node) => node.kind === 'text' ? escapeMarkdown(node.value) : renderMarkdownNode(node)).join('').replace(/\n{3,}/g, '\n\n').trim();
+}

package/src/tool/steamBbcodeTranslator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { steamBbcodeTranslator } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = steamBbcodeTranslator.i18n[locale] ?? steamBbcodeTranslator.i18n.en;
+const content = loader ? await loader() : null;
+---
+
+{content && content.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/steamBbcodeTranslator/steam-bbcode-translator.css

@@ -0,0 +1,392 @@
+.bbcode-root {
+  --bb-ink: #211e2d;
+  --bb-muted: #77728a;
+  --bb-line: #dcd8e7;
+  --bb-panel: #fffdfb;
+  --bb-soft: #f4f0f7;
+  --bb-accent: #724ee8;
+  --bb-accent-deep: #4c2fba;
+  --bb-cyan: #20a8b5;
+  --bb-warm: #ed8a52;
+
+  color: var(--bb-ink);
+  margin: 0 auto;
+  max-width: 1120px;
+  width: 100%;
+}
+
+.theme-dark .bbcode-root {
+  --bb-ink: #f4f1fb;
+  --bb-muted: #aaa4bb;
+  --bb-line: #342e47;
+  --bb-panel: #171422;
+  --bb-soft: #211c30;
+  --bb-accent: #a68cff;
+  --bb-accent-deep: #c0b0ff;
+  --bb-cyan: #63d2dc;
+  --bb-warm: #f3a06d;
+}
+
+.bbcode-root * {
+  box-sizing: border-box;
+}
+
+.bbcode-root button,
+.bbcode-root textarea {
+  font: inherit;
+}
+
+.bbcode-header,
+.bbcode-input-card,
+.bbcode-output-card,
+.bbcode-preview-card {
+  background: var(--bb-panel);
+  border: 1px solid var(--bb-line);
+}
+
+.bbcode-header {
+  align-items: center;
+  border-radius: 18px 18px 0 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.2rem;
+}
+
+.bbcode-title-row {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.bbcode-mark {
+  align-items: center;
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 8px;
+  color: var(--bb-accent);
+  display: inline-flex;
+  font-size: 0.9rem;
+  font-weight: 900;
+  height: 36px;
+  justify-content: center;
+  width: 58px;
+}
+
+.bbcode-kicker {
+  color: var(--bb-accent);
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+}
+
+.bbcode-title-row strong,
+.bbcode-draft-note {
+  color: var(--bb-muted);
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.bbcode-draft-note {
+  text-align: right;
+}
+
+.bbcode-input-card {
+  border-top: 0;
+  padding: 1.2rem;
+}
+
+.bbcode-section-head,
+.bbcode-output-heading,
+.bbcode-output-card-head,
+.bbcode-input-footer {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.bbcode-section-head {
+  margin-bottom: 0.7rem;
+}
+
+.bbcode-section-head h2,
+.bbcode-output-heading h2 {
+  display: inline;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.bbcode-step {
+  color: var(--bb-warm);
+  font-size: 0.75rem;
+  font-weight: 900;
+  margin-right: 0.45rem;
+}
+
+.bbcode-detected {
+  background: var(--bb-soft);
+  border-radius: 999px;
+  color: var(--bb-accent-deep);
+  font-size: 0.75rem;
+  padding: 0.3rem 0.55rem;
+}
+
+.bbcode-input-card textarea {
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 9px;
+  color: var(--bb-ink);
+  display: block;
+  font-size: 0.8rem;
+  line-height: 1.65;
+  min-height: 240px;
+  padding: 1rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.bbcode-input-card textarea:focus {
+  border-color: var(--bb-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-accent) 18%, transparent);
+  outline: 0;
+}
+
+.bbcode-input-footer {
+  align-items: center;
+  margin-top: 0.6rem;
+}
+
+.bbcode-input-footer p {
+  color: var(--bb-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.bbcode-input-meta {
+  align-items: center;
+  color: var(--bb-muted);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.75rem;
+  gap: 0.8rem;
+}
+
+.bbcode-input-meta strong {
+  color: var(--bb-ink);
+}
+
+.bbcode-clear-button,
+.bbcode-icon-button {
+  background: transparent;
+  border: 1px solid var(--bb-line);
+  border-radius: 6px;
+  color: var(--bb-ink);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 800;
+  padding: 0.38rem 0.6rem;
+}
+
+.bbcode-clear-button:hover,
+.bbcode-icon-button:hover {
+  border-color: var(--bb-accent);
+  color: var(--bb-accent-deep);
+}
+
+.bbcode-output-section {
+  background: var(--bb-soft);
+  border-left: 1px solid var(--bb-line);
+  border-right: 1px solid var(--bb-line);
+  padding: 1rem 1.2rem;
+}
+
+.bbcode-output-heading {
+  align-items: center;
+  margin-bottom: 0.7rem;
+}
+
+.bbcode-output-grid {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bbcode-output-card {
+  border-radius: 10px;
+  min-width: 0;
+  padding: 0.8rem;
+}
+
+.bbcode-output-card-head {
+  align-items: center;
+  margin-bottom: 0.55rem;
+}
+
+.bbcode-output-card h3 {
+  font-size: 0.78rem;
+  margin: 0;
+}
+
+.bbcode-output-card pre {
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 7px;
+  color: var(--bb-ink);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  margin: 0;
+  min-height: 180px;
+  max-height: 330px;
+  overflow: auto;
+  padding: 0.8rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.bbcode-preview-card {
+  border-radius: 0 0 18px 18px;
+  border-top: 0;
+  padding: 1rem 1.2rem 1.2rem;
+}
+
+.bbcode-preview-surface {
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 9px;
+  color: var(--bb-ink);
+  font-size: 0.82rem;
+  line-height: 1.6;
+  min-height: 110px;
+  padding: 1rem;
+}
+
+.bbcode-preview-surface h1,
+.bbcode-preview-surface h2,
+.bbcode-preview-surface h3 {
+  line-height: 1.15;
+  margin: 0 0 0.6rem;
+}
+
+.bbcode-preview-surface h1 {
+  font-size: 1.35rem;
+}
+
+.bbcode-preview-surface h2 {
+  font-size: 1.12rem;
+}
+
+.bbcode-preview-surface h3 {
+  font-size: 0.98rem;
+}
+
+.bbcode-preview-surface p {
+  margin: 0.3rem 0;
+}
+
+.bbcode-preview-surface ul,
+.bbcode-preview-surface ol {
+  margin: 0.45rem 0;
+  padding-left: 1.3rem;
+}
+
+.bbcode-preview-surface li {
+  margin: 0.15rem 0;
+}
+
+.bbcode-preview-surface blockquote {
+  border-left: 3px solid var(--bb-accent);
+  color: var(--bb-muted);
+  margin: 0.6rem 0;
+  padding-left: 0.7rem;
+}
+
+.bbcode-preview-surface a {
+  color: var(--bb-accent-deep);
+}
+
+.bbcode-preview-surface code,
+.bbcode-preview-surface pre {
+  background: var(--bb-panel);
+  border: 1px solid var(--bb-line);
+  border-radius: 5px;
+}
+
+.bbcode-preview-surface code {
+  padding: 0.1rem 0.25rem;
+}
+
+.bbcode-preview-surface pre {
+  overflow: auto;
+  padding: 0.6rem;
+}
+
+.bbcode-preview-surface pre code {
+  border: 0;
+  padding: 0;
+}
+
+.bbcode-preview-surface p:first-child:last-child {
+  color: var(--bb-muted);
+  margin: 0;
+}
+
+.bbcode-sr-only {
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  clip-path: inset(50%);
+}
+
+.bbcode-root button:focus-visible,
+.bbcode-root textarea:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--bb-cyan) 45%, transparent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 700px) {
+  .bbcode-header,
+  .bbcode-input-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .bbcode-draft-note {
+    text-align: left;
+  }
+
+  .bbcode-input-meta {
+    width: 100%;
+  }
+
+  .bbcode-output-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 460px) {
+  .bbcode-header,
+  .bbcode-input-card,
+  .bbcode-output-section,
+  .bbcode-preview-card {
+    padding-left: 0.85rem;
+    padding-right: 0.85rem;
+  }
+
+  .bbcode-input-meta {
+    justify-content: space-between;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bbcode-root * {
+    scroll-behavior: auto;
+    transition-duration: 0.01ms;
+  }
+}

package/src/tool/steamBbcodeTranslator/storage.ts

@@ -0,0 +1,30 @@
+import { STORAGE_KEY } from './types';
+
+export function loadSourceFromStorage(): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value?.trim() ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveSourceToStorage(source: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    if (source.trim()) window.localStorage.setItem(STORAGE_KEY, source);
+    else window.localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    return;
+  }
+}
+
+export function clearSourceFromStorage(): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    return;
+  }
+}

package/src/tool/steamBbcodeTranslator/types.ts

@@ -0,0 +1,36 @@
+export type OutputFormat = 'markdown' | 'html';
+export type TranslationDirection = 'bbcode-to-output' | 'output-to-bbcode';
+export type MarkupSyntax = 'bbcode' | 'markdown' | 'html';
+
+export interface TranslationStats {
+  characters: number;
+  tags: number;
+  blocks: number;
+}
+
+export interface TranslationResult {
+  output: string;
+  warnings: string[];
+  stats: TranslationStats;
+}
+
+export interface AutoTranslationResult {
+  detected: MarkupSyntax;
+  outputs: Partial<Record<MarkupSyntax, TranslationResult>>;
+}
+
+export interface TextNode {
+  kind: 'text';
+  value: string;
+}
+
+export interface TagNode {
+  kind: 'tag';
+  name: string;
+  value?: string | undefined;
+  children: Node[];
+}
+
+export type Node = TextNode | TagNode;
+
+export const STORAGE_KEY = 'steam-bbcode-translator-draft-v1';

package/src/tool/steamBbcodeTranslator/ui.ts

@@ -0,0 +1,18 @@
+export interface SteamBbcodeTranslatorUI extends Record<string, string> {
+  editorLabel: string;
+  editorHint: string;
+  detectedLabel: string;
+  detectedEmpty: string;
+  bbcode: string;
+  markdown: string;
+  html: string;
+  copy: string;
+  copied: string;
+  clear: string;
+  characters: string;
+  blocks: string;
+  privacyNote: string;
+  persistenceNote: string;
+  previewLabel: string;
+  previewEmpty: string;
+}

package/src/tool/steamCapsuleGenerator/steam-capsule-generator.css

@@ -62,7 +62,7 @@
 }
 
 .steam-tab-btn.active {
-  color: var(--text-light, #fff);
+  color: var(--text-dark, #0f172a);
   background: var(--accent-steam, #66c0f4);
   box-shadow: 0 2px 8px var(--accent-shadow, rgba(102, 192, 244, 0.3));
 }
@@ -298,7 +298,7 @@
   border: 2px dashed var(--accent-safe, #ff4757);
   background: var(--bg-safe, rgba(255, 71, 87, 0.15));
   color: var(--text-light, #fff);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 700;
   padding: 0.25rem 0.5rem;
   pointer-events: none;
@@ -322,7 +322,7 @@
 
 .discount-tag {
   background: var(--bg-discount, #4c6b22);
-  color: var(--accent-discount, #beee11);
+  color: var(--accent-discount, #fff);
   font-size: 1.1rem;
   font-weight: 800;
   padding: 0.35rem 0.6rem;
@@ -336,7 +336,7 @@
 }
 
 .original-price {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   text-decoration: line-through;
   color: var(--text-muted-alt, #556772);
 }
@@ -546,7 +546,7 @@
 }
 
 .stat-label {
-  font-size: 0.65rem;
+  font-size: 0.75rem;
   color: var(--text-muted, #8b99a8);
   text-transform: uppercase;
 }
@@ -672,7 +672,7 @@
 .steam-asset-badge {
   background: var(--bg-topbar, #0d121a);
   color: var(--accent-active, #67c1f5);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 700;
   padding: 0.15rem 0.4rem;
   border-radius: 3px;

package/src/tools.ts

@@ -6,6 +6,8 @@ import { SPRITE_SHEET_PACKER_TOOL } from './tool/spriteSheetPacker';
 import { AUDIO_LOOP_POINT_FINDER_TOOL } from './tool/audioLoopPointFinder';
 import { SAVE_FILE_EDITOR_TOOL } from './tool/saveFileEditor';
 import { LOCALIZATION_SANITIZER_TOOL } from './tool/localizationSanitizer';
+import { STEAM_BBCODE_TRANSLATOR_TOOL } from './tool/steamBbcodeTranslator';
+import { RETRO_SFX_GENERATOR_TOOL } from './tool/retroSfxGenerator';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   STEAM_CAPSULE_GENERATOR_TOOL,
@@ -14,4 +16,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   AUDIO_LOOP_POINT_FINDER_TOOL,
   SAVE_FILE_EDITOR_TOOL,
   LOCALIZATION_SANITIZER_TOOL,
+  STEAM_BBCODE_TRANSLATOR_TOOL,
+  RETRO_SFX_GENERATOR_TOOL,
 ];