@jjlmoya/utils-games-development 1.61.0 → 1.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/package.json +1 -1
  2. package/src/category/index.ts +2 -1
  3. package/src/entries.ts +2 -1
  4. package/src/index.ts +1 -0
  5. package/src/tests/locale_completeness.test.ts +2 -2
  6. package/src/tests/tool_validation.test.ts +2 -2
  7. package/src/tool/gameUIAccessibilityTester/bibliography.astro +6 -0
  8. package/src/tool/gameUIAccessibilityTester/bibliography.ts +10 -0
  9. package/src/tool/gameUIAccessibilityTester/component.astro +210 -0
  10. package/src/tool/gameUIAccessibilityTester/controller-actions.ts +92 -0
  11. package/src/tool/gameUIAccessibilityTester/controller.ts +237 -0
  12. package/src/tool/gameUIAccessibilityTester/dom-views.ts +193 -0
  13. package/src/tool/gameUIAccessibilityTester/entry.ts +28 -0
  14. package/src/tool/gameUIAccessibilityTester/evaluator.ts +43 -0
  15. package/src/tool/gameUIAccessibilityTester/game-ui-accessibility-stress-tester.css +982 -0
  16. package/src/tool/gameUIAccessibilityTester/i18n/de.ts +203 -0
  17. package/src/tool/gameUIAccessibilityTester/i18n/en.ts +199 -0
  18. package/src/tool/gameUIAccessibilityTester/i18n/es.ts +203 -0
  19. package/src/tool/gameUIAccessibilityTester/i18n/fr.ts +203 -0
  20. package/src/tool/gameUIAccessibilityTester/i18n/id.ts +203 -0
  21. package/src/tool/gameUIAccessibilityTester/i18n/it.ts +203 -0
  22. package/src/tool/gameUIAccessibilityTester/i18n/ja.ts +203 -0
  23. package/src/tool/gameUIAccessibilityTester/i18n/ko.ts +203 -0
  24. package/src/tool/gameUIAccessibilityTester/i18n/nl.ts +203 -0
  25. package/src/tool/gameUIAccessibilityTester/i18n/pl.ts +203 -0
  26. package/src/tool/gameUIAccessibilityTester/i18n/pt.ts +203 -0
  27. package/src/tool/gameUIAccessibilityTester/i18n/ru.ts +203 -0
  28. package/src/tool/gameUIAccessibilityTester/i18n/sv.ts +203 -0
  29. package/src/tool/gameUIAccessibilityTester/i18n/tr.ts +203 -0
  30. package/src/tool/gameUIAccessibilityTester/i18n/zh.ts +203 -0
  31. package/src/tool/gameUIAccessibilityTester/index.ts +11 -0
  32. package/src/tool/gameUIAccessibilityTester/logic.test.ts +57 -0
  33. package/src/tool/gameUIAccessibilityTester/logic.ts +157 -0
  34. package/src/tool/gameUIAccessibilityTester/report.ts +59 -0
  35. package/src/tool/gameUIAccessibilityTester/seo.astro +15 -0
  36. package/src/tool/gameUIAccessibilityTester/storage.ts +34 -0
  37. package/src/tool/gameUIAccessibilityTester/ui.ts +80 -0
  38. package/src/tools.ts +2 -0
@@ -0,0 +1,203 @@
1
+ import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { GameUiAccessibilityTesterUI } from '../ui';
4
+ import { bibliographyEntries } from '../bibliography';
5
+
6
+ const slug = 'game-ui-barrierefreiheit-stresstest';
7
+ const title = 'Game UI Barrierefreiheit Stresstest';
8
+ const description = 'Prüfen Sie Spiel-Screenshots lokal mit Farbsehschwächen-Simulationen, Kontrastmessungen im HUD, Unschärfe, Skalierung und Kanten-Heatmaps.';
9
+
10
+ const faq = [
11
+ {
12
+ question: 'Zertifiziert dieses Werkzeug die Barrierefreiheit meines Spiels?',
13
+ answer: 'Nein. Es kombiniert dokumentierte Farbsimulationen, mathematische Kontrastmessungen und visuelle Belastungstests. Nutzen Sie die Ergebnisse für Ihre Design-Reviews und Nutzertests, nicht als Prüfsiegel.',
14
+ },
15
+ {
16
+ question: 'Verlässt mein Screenshot den Browser?',
17
+ answer: 'Nein. Das Bild wird vollständig lokal im Browser verarbeitet und analysiert. Es werden lediglich Anzeigeeinstellungen wie die gewählte Linse im lokalen Speicher gesichert.',
18
+ },
19
+ {
20
+ question: 'Was sollte ich mit den zwei Farbsonden messen?',
21
+ answer: 'Wählen Sie zwei Farben mit unterschiedlicher Bedeutung, etwa Verbündeter und Feind, aktiv und inaktiv oder zwei Seltenheitsstufen. Messen Sie repräsentative Pixel desselben Spielkontexts.',
22
+ },
23
+ {
24
+ question: 'Warum kann trotz gutem Kontrast eine manuelle Prüfung nötig sein?',
25
+ answer: 'Kleine Symbole, dünne Schriften, bewegte Hintergründe oder rein farbbasierte Kodierungen bleiben oft schwer erkennbar, selbst wenn der punktuelle Farbkontrast hoch ist.',
26
+ },
27
+ {
28
+ question: 'Was zeigt die Heatmap an?',
29
+ answer: 'Die Heatmap hebt Stellen hervor, an denen der lokale Farbabstand nach der gewählten Simulation stark einbricht. Sie weist auf kritische Stellen hin, analysiert jedoch keine Spiellogik.',
30
+ },
31
+ ];
32
+
33
+ const howTo = [
34
+ { name: 'Screenshot laden', text: 'Wählen Sie einen Screenshot Ihres Spiels oder Menüs aus. Das Bild verbleibt lokal im Arbeitsspeicher Ihres Browsers.' },
35
+ { name: 'Simulationslinse wählen', text: 'Vergleichen Sie das Original mit Simulationen für Rot-Grün-Schwäche, Blau-Gelb-Schwäche, Graustufen oder verringertem Kontrast.' },
36
+ { name: 'Visuellen Stress anwenden', text: 'Fügen Sie Unschärfe hinzu, verringern Sie die Auflösung, zoomen Sie an Details heran oder aktivieren Sie die Kanten-Heatmap.' },
37
+ { name: 'Zwei Signale prüfen', text: 'Wählen Sie Sonde A oder B und klicken Sie auf das Originalbild, um zwei wichtige Elemente direkt miteinander zu vergleichen.' },
38
+ { name: 'Ergebnisse exportieren', text: 'Nutzen Sie die Prüffragen, erfassen Sie Befunde und laden Sie ein Vergleichsbild sowie einen strukturierten JSON-Bericht herunter.' },
39
+ ];
40
+
41
+ const softwareApplication: WithContext<SoftwareApplication> = {
42
+ '@context': 'https://schema.org',
43
+ '@type': 'SoftwareApplication',
44
+ name: title,
45
+ applicationCategory: 'DeveloperApplication',
46
+ operatingSystem: 'Any',
47
+ };
48
+
49
+ const faqPage: WithContext<FAQPage> = {
50
+ '@context': 'https://schema.org',
51
+ '@type': 'FAQPage',
52
+ mainEntity: faq.map((item) => ({
53
+ '@type': 'Question',
54
+ name: item.question,
55
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
56
+ })),
57
+ };
58
+
59
+ const howToSchema: WithContext<HowTo> = {
60
+ '@context': 'https://schema.org',
61
+ '@type': 'HowTo',
62
+ name: title,
63
+ step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
64
+ };
65
+
66
+ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
67
+ slug,
68
+ title,
69
+ description,
70
+ ui: {
71
+ onboarding: 'Laden Sie einen Spiel-Screenshot, wählen Sie eine Simulationslinse und vergleichen Sie zwei Farben, die Spieler klar unterscheiden müssen. Beginnen Sie mit Feind- und Freundmarkierungen, Lebensbalken oder Minimap-Symbolen.',
72
+ privacyNote: 'Lokale Analyse. Screenshots werden nicht hochgeladen.',
73
+ dropTitle: 'Screenshot auf die Prüffläche ziehen',
74
+ dropHint: 'Ziehen Sie ein Bild hierher oder wählen Sie es von Ihrem Gerät. Nutzen Sie echte Spielszenen mit komplexen Hintergründen.',
75
+ chooseImage: 'Screenshot wählen',
76
+ replaceImage: 'Screenshot ersetzen',
77
+ supportedFiles: 'PNG, JPEG oder WebP bis 16 MB. Große Bilder werden für die Analyse auf 1600 px skaliert.',
78
+ lensLabel: 'Simulationslinse',
79
+ lensOriginal: 'Original',
80
+ lensProtanopia: 'Protanopie',
81
+ lensDeuteranopia: 'Deuteranopie',
82
+ lensTritanopia: 'Tritanopie',
83
+ lensAchromatopsia: 'Graustufen',
84
+ lensReducedContrast: 'Reduzierter Kontrast',
85
+ lensDesaturation: 'Entsättigung',
86
+ compareLabel: 'Vergleichsansicht',
87
+ compareSideBySide: 'Nebeneinander',
88
+ compareSplit: 'Geteilte Linse',
89
+ comparePress: 'Halten zum Aufdecken',
90
+ holdOriginal: 'Gedrückt halten für Original',
91
+ splitPosition: 'Linsenposition',
92
+ stressLabel: 'Belastungstests',
93
+ blurLabel: 'Unschärfe in Pixeln',
94
+ downscaleLabel: 'Vorschau kleiner Bildschirm',
95
+ downscaleFull: 'Voll',
96
+ downscaleHalf: 'Hälfte',
97
+ downscaleQuarter: 'Viertel',
98
+ downscaleEighth: 'Achtel',
99
+ zoomLabel: 'Detail-Zoom',
100
+ heatmapLabel: 'Kanten-Heatmap',
101
+ heatmapHint: 'Hebt Bereiche hervor, deren Farbabstand unter der gewählten Linse stark einbricht.',
102
+ originalView: 'Originales Signal',
103
+ simulatedView: 'Simuliertes Signal',
104
+ emptyCanvas: 'Wählen Sie einen Screenshot aus. Ihr Bild verbleibt vollständig auf Ihrem Gerät.',
105
+ sampleTitle: 'Farbsonden für Signale',
106
+ sampleInstructions: 'Wählen Sie Sonde A oder B und klicken Sie auf das Originalbild, um zwei wichtige Elemente direkt miteinander zu vergleichen.',
107
+ sampleA: 'Sonde A',
108
+ sampleB: 'Sonde B',
109
+ sampleAName: 'Bedeutung von Sonde A',
110
+ sampleBName: 'Bedeutung von Sonde B',
111
+ manualColor: 'Farbe direkt eingeben',
112
+ sampleAInitial: 'Verbündeter',
113
+ sampleBInitial: 'Gegner',
114
+ noSample: 'Warte auf Screenshot',
115
+ originalContrast: 'Originalkontrast',
116
+ simulatedContrast: 'Simulierter Kontrast',
117
+ separationRetained: 'Erhaltene Unterscheidbarkeit',
118
+ statusStrong: 'Signal bleibt klar unterscheidbar',
119
+ statusWatch: 'Im Spielkontext prüfen',
120
+ statusReview: 'Signaldesign überarbeiten',
121
+ statusPending: 'Noch keine Analyse',
122
+ measurementLabel: 'Messung',
123
+ heuristicLabel: 'Heuristik',
124
+ manualReviewLabel: 'Manuelle Prüfung',
125
+ measurementHint: 'Der Kontrast berechnet sich nach der WCAG-Formel für relative Luminanz. Er gilt punktuell für die zwei gewählten sRGB-Farben.',
126
+ heuristicHint: 'Die erhaltene Unterscheidbarkeit vergleicht den Farbabstand vor und nach der Simulation. Sie ist ein Orientierungswert.',
127
+ promptTitle: 'Prüffragen für das Interface-Design',
128
+ promptColorOnly: 'Können Spieler Freund, Feind, Warnung und Erfolg auch ohne reine Farbtonunterschiede erkennen?',
129
+ promptChangingBackground: 'Bleibt Text vor hellen, dunklen und bewegten Spielhintergründen gut lesbar?',
130
+ promptMinimap: 'Unterscheiden sich Symbole auf der Minimap zusätzlich durch Form, Beschriftung oder Muster?',
131
+ promptStates: 'Sind ausgewählte, deaktivierte oder verbrauchte Zustände eindeutig erkennbar?',
132
+ promptShape: 'Unterstützen Symbole, Animationen, Positionen oder Töne die farblichen Signale?',
133
+ findingLabel: 'Befund erfassen',
134
+ findingPlaceholder: 'Beispiel: Umrisslinie des Gegners verschwimmt bei Rotlicht-Effekten',
135
+ addFinding: 'Befund hinzufügen',
136
+ findingsEmpty: 'Noch keine schriftlichen Befunde erfasst.',
137
+ exportSheet: 'Vergleichsbild herunterladen',
138
+ exportReport: 'JSON-Bericht herunterladen',
139
+ resetTool: 'Prüfung zurücksetzen',
140
+ uploadError: 'Das Bild konnte nicht gelesen werden. Bitte PNG, JPEG oder WebP wählen.',
141
+ fileTooLarge: 'Das Bild ist größer als 16 MB. Bitte wählen Sie ein kleineres Bild.',
142
+ imageReady: 'Screenshot geladen. Wählen Sie zwei Farbsonden zur Prüfung aus.',
143
+ reportDownloaded: 'Strukturierter Bericht heruntergeladen.',
144
+ sheetDownloaded: 'Vergleichsbild herunterladen.',
145
+ localOnlyDisclosure: 'Alle Berechnungen, Simulationen und Bildverarbeitungen erfolgen lokal im Browser.',
146
+ limitationDisclosure: 'Dieses Werkzeug unterstützt das Design-Review. Simulationen sind Modelle und ersetzen keine Tests mit betroffenen Spielern.',
147
+ reportTitle: 'Prüfbericht Game UI Barrierefreiheit',
148
+ reportFindingReview: 'Das geprüfte Signalpaar verliert unter der gewählten Simulation deutlich an Kontrast oder Unterscheidbarkeit.',
149
+ },
150
+ seo: [
151
+ {
152
+ type: 'title',
153
+ level: 2,
154
+ text: 'Game UI auf Barrierefreiheit prüfen ohne Bild-Upload',
155
+ },
156
+ {
157
+ type: 'paragraph',
158
+ html: 'Spiele-Interfaces müssen unter dynamischen Bedingungen funktionieren: Kamerafahrten, Partikeleffekte und wechselnde Hintergründe erschweren die Lesbarkeit. Dieser Tester analysiert Ihre Screenshots lokal im Browser mit bewährten Simulationsmatrizen.',
159
+ },
160
+ {
161
+ type: 'title',
162
+ level: 2,
163
+ text: 'Messungen, Heuristiken und menschliche Prüfung',
164
+ },
165
+ {
166
+ type: 'table',
167
+ headers: ['Nachweistyp', 'Was dieses Werkzeug liefert', 'Was es nicht leisten kann'],
168
+ rows: [
169
+ ['Messung', 'Relativer Kontrast zweier sRGB-Farben nach WCAG', 'Automatisches Bestätigen der Konformität des gesamten Spiels'],
170
+ ['Simulation', 'Transformationen für Protanopie, Deuteranopie und Tritanopie', 'Das exakte visuelle Empfinden einzelner Personen abbilden'],
171
+ ['Heuristik', 'Unschärfe, Verkleinerung und Kanten-Heatmaps', 'Automatische Bewertung der Spielmechanik'],
172
+ ['Manuelle Prüfung', 'Strukturierte Leitfragen und Export-Funktion', 'Ersetzen von Tests mit Menschen mit Behinderungen'],
173
+ ],
174
+ },
175
+ {
176
+ type: 'title',
177
+ level: 2,
178
+ text: 'Wählen Sie Farbsonden mit spielrelevanter Bedeutung',
179
+ },
180
+ {
181
+ type: 'paragraph',
182
+ html: 'Testen Sie gezielt Paare, die spielrelevante Entscheidungen beeinflussen: Freund und Feind, Gefahr und Sicherheit oder wählbar und gesperrt. Ergänzen Sie Farbsignale bei Bedarf durch Symbole, Formen oder akustische Hinweise.',
183
+ },
184
+ {
185
+ type: 'tip',
186
+ title: 'Prüfen Sie komplexe Spielszenen',
187
+ html: 'Verwenden Sie Screenshots aus hektischen Spielsituationen statt isolierter Menü-Drafts, um realistische Ergebnisse zu erhalten.',
188
+ },
189
+ {
190
+ type: 'title',
191
+ level: 2,
192
+ text: 'Den exportierten Bericht im Team nutzen',
193
+ },
194
+ {
195
+ type: 'paragraph',
196
+ html: 'Der herunterladbare JSON-Bericht sowie das Vergleichsbild lassen sich direkt in Issue-Tracker einbinden, um konkrete Verbesserungen an der Benutzeroberfläche zu dokumentieren.',
197
+ },
198
+ ],
199
+ faq,
200
+ howTo,
201
+ schemas: [softwareApplication, faqPage, howToSchema],
202
+ bibliography: bibliographyEntries,
203
+ };
@@ -0,0 +1,199 @@
1
+ import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { GameUiAccessibilityTesterUI } from '../ui';
4
+ import { bibliographyEntries } from '../bibliography';
5
+
6
+ const faq = [
7
+ {
8
+ question: 'Does this tool certify that my game UI is accessible?',
9
+ answer: 'No. It combines documented color vision simulations, deterministic color measurements, visual stress heuristics, and review prompts. Use the findings to guide design review and testing with players, not as an accessibility certificate.',
10
+ },
11
+ {
12
+ question: 'Does my screenshot leave the browser?',
13
+ answer: 'No. The image is decoded, sampled, transformed, and exported inside your browser. The tool stores only display settings such as the selected lens, zoom, blur, and comparison mode in local storage.',
14
+ },
15
+ {
16
+ question: 'What should I sample with the two color probes?',
17
+ answer: 'Choose two colors that must communicate different meanings, such as ally and enemy markers, available and disabled states, health and damage, or two rarity tiers. Sample representative pixels from the same gameplay context.',
18
+ },
19
+ {
20
+ question: 'Why can a good contrast ratio still need manual review?',
21
+ answer: 'A pair can measure well while a small icon, thin type, moving background, visual clutter, or color only convention remains difficult to identify. The ratio describes the sampled colors, not the complete interaction.',
22
+ },
23
+ {
24
+ question: 'What does the heatmap show?',
25
+ answer: 'The heatmap is a local edge heuristic. It highlights pixels where nearby RGB separation drops sharply after the selected simulation. It can direct attention to fragile signals, but it does not identify interface semantics or prove a failure.',
26
+ },
27
+ ];
28
+
29
+ const howTo = [
30
+ { name: 'Load a local screenshot', text: 'Choose a PNG, JPEG, or WebP capture of gameplay or a menu. The image remains in browser memory.' },
31
+ { name: 'Choose a stress lens', text: 'Compare the original with a color vision simulation, grayscale, reduced contrast, or desaturation.' },
32
+ { name: 'Stress hierarchy and scale', text: 'Add blur, reduce the render scale, zoom into pixels, or enable the edge collapse heatmap.' },
33
+ { name: 'Sample two critical signals', text: 'Select probe A or B and click the original image, or enter colors directly with the color controls.' },
34
+ { name: 'Record and export findings', text: 'Use the review prompts, add observations, then download a comparison sheet and structured JSON report.' },
35
+ ];
36
+
37
+ const softwareApplication: WithContext<SoftwareApplication> = {
38
+ '@context': 'https://schema.org',
39
+ '@type': 'SoftwareApplication',
40
+ name: 'Game UI Accessibility Stress Tester',
41
+ applicationCategory: 'DeveloperApplication',
42
+ operatingSystem: 'Any',
43
+ };
44
+
45
+ const faqPage: WithContext<FAQPage> = {
46
+ '@context': 'https://schema.org',
47
+ '@type': 'FAQPage',
48
+ mainEntity: faq.map((item) => ({
49
+ '@type': 'Question',
50
+ name: item.question,
51
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
52
+ })),
53
+ };
54
+
55
+ const howToSchema: WithContext<HowTo> = {
56
+ '@context': 'https://schema.org',
57
+ '@type': 'HowTo',
58
+ name: 'How to stress test a game interface screenshot',
59
+ step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
60
+ };
61
+
62
+ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
63
+ slug: 'game-ui-accessibility-stress-tester',
64
+ title: 'Game UI Accessibility Stress Tester',
65
+ description: 'Inspect a game screenshot locally with color vision simulations, HUD contrast probes, blur, downscale, edge collapse heatmaps, and exportable review findings.',
66
+ ui: {
67
+ onboarding: 'Load one current game screenshot, choose a stress lens, then compare two signals that players must tell apart. Start with ally versus enemy, health states, rarity, interactables, or minimap markers.',
68
+ privacyNote: 'Local optical bench. Screenshots are not uploaded.',
69
+ dropTitle: 'Place a gameplay or interface capture on the light table',
70
+ dropHint: 'Drop one image here or choose it from your device. Use a representative moment with real backgrounds and visual clutter.',
71
+ chooseImage: 'Choose screenshot',
72
+ replaceImage: 'Replace screenshot',
73
+ supportedFiles: 'PNG, JPEG, or WebP up to 16 MB. Large images are reduced to a 1600 px analysis edge.',
74
+ lensLabel: 'Simulation lens',
75
+ lensOriginal: 'Original',
76
+ lensProtanopia: 'Protanopia',
77
+ lensDeuteranopia: 'Deuteranopia',
78
+ lensTritanopia: 'Tritanopia',
79
+ lensAchromatopsia: 'Grayscale',
80
+ lensReducedContrast: 'Reduced contrast',
81
+ lensDesaturation: 'Desaturation',
82
+ compareLabel: 'Comparison view',
83
+ compareSideBySide: 'Side by side',
84
+ compareSplit: 'Split lens',
85
+ comparePress: 'Press reveal',
86
+ holdOriginal: 'Hold to reveal original',
87
+ splitPosition: 'Lens position',
88
+ stressLabel: 'Signal stress controls',
89
+ blurLabel: 'Blur in pixels',
90
+ downscaleLabel: 'Small display preview',
91
+ downscaleFull: 'Full',
92
+ downscaleHalf: 'Half',
93
+ downscaleQuarter: 'Quarter',
94
+ downscaleEighth: 'Eighth',
95
+ zoomLabel: 'Pixel inspection zoom',
96
+ heatmapLabel: 'Edge collapse heatmap',
97
+ heatmapHint: 'Highlight local separations that shrink sharply under the active lens.',
98
+ originalView: 'Original signal field',
99
+ simulatedView: 'Stressed signal field',
100
+ emptyCanvas: 'Choose a screenshot to activate the comparison field. Your image will stay on this device.',
101
+ sampleTitle: 'Critical signal probes',
102
+ sampleInstructions: 'Select A or B, then click the original image. Compare colors that encode different player actions or states.',
103
+ sampleA: 'Probe A',
104
+ sampleB: 'Probe B',
105
+ sampleAName: 'Meaning of probe A',
106
+ sampleBName: 'Meaning of probe B',
107
+ manualColor: 'Set probe color directly',
108
+ sampleAInitial: 'Ally marker',
109
+ sampleBInitial: 'Enemy marker',
110
+ noSample: 'Waiting for screenshot',
111
+ originalContrast: 'Original contrast',
112
+ simulatedContrast: 'Stressed contrast',
113
+ separationRetained: 'Separation retained',
114
+ statusStrong: 'Signal remains distinct',
115
+ statusWatch: 'Inspect in context',
116
+ statusReview: 'Review signal design',
117
+ statusPending: 'No analysis yet',
118
+ measurementLabel: 'Measurement',
119
+ heuristicLabel: 'Heuristic',
120
+ manualReviewLabel: 'Manual review status',
121
+ measurementHint: 'Contrast uses the WCAG relative luminance formula for the two sampled sRGB colors. It only describes this pair and is most meaningful when the colors are expected to touch.',
122
+ heuristicHint: 'Separation retained compares linear RGB distance before and after the lens. It is a directional warning, not a perceptual threshold or pass condition.',
123
+ promptTitle: 'Mission review prompts',
124
+ promptColorOnly: 'Can players identify ally, enemy, warning, success, and failure without hue alone?',
125
+ promptChangingBackground: 'Does text remain readable over the brightest, darkest, and busiest gameplay backgrounds?',
126
+ promptMinimap: 'Do minimap markers differ by shape, label, position, or pattern as well as color?',
127
+ promptStates: 'Are selected, disabled, unavailable, cooldown, health, and damage states still unambiguous?',
128
+ promptShape: 'Can an icon, label, pattern, animation, position, or sound reinforce every critical color signal?',
129
+ findingLabel: 'Team finding',
130
+ findingPlaceholder: 'Example: Enemy outline disappears over the damage vignette',
131
+ addFinding: 'Add finding',
132
+ findingsEmpty: 'No written findings yet. Use the prompts as a first review pass.',
133
+ exportSheet: 'Download comparison sheet',
134
+ exportReport: 'Download structured report',
135
+ resetTool: 'Clear session',
136
+ uploadError: 'This image could not be read. Choose a valid PNG, JPEG, or WebP file.',
137
+ fileTooLarge: 'The image is larger than 16 MB. Export a smaller review capture and try again.',
138
+ imageReady: 'Screenshot loaded locally. Sample two critical signals to begin the review.',
139
+ reportDownloaded: 'Structured findings report downloaded.',
140
+ sheetDownloaded: 'Comparison sheet downloaded.',
141
+ localOnlyDisclosure: 'Image decoding, simulation, sampling, heatmap generation, and exports run in this browser. Only display settings are stored locally.',
142
+ limitationDisclosure: 'This tool supports design review. Simulations are models, blur and heatmaps are heuristics, and no result certifies accessibility or replaces testing with players.',
143
+ reportTitle: 'Game UI accessibility review sheet',
144
+ reportFindingReview: 'The sampled signal pair loses substantial contrast or color separation under the selected stress lens. Review it with the full gameplay context.',
145
+ },
146
+ seo: [
147
+ {
148
+ type: 'title',
149
+ level: 2,
150
+ text: 'How to review colorblind game UI without uploading a screenshot',
151
+ },
152
+ {
153
+ type: 'paragraph',
154
+ html: 'A game interface often communicates under pressure: health changes while the camera moves, enemy markers cross bright scenery, rarity colors compete with particle effects, and minimap icons shrink to a few pixels. This local tester keeps the screenshot in your browser and lets you inspect those real combinations through documented color vision simulations and practical stress conditions.',
155
+ },
156
+ {
157
+ type: 'title',
158
+ level: 2,
159
+ text: 'Measurements, heuristics, and human judgment answer different questions',
160
+ },
161
+ {
162
+ type: 'table',
163
+ headers: ['Evidence type', 'What this tester provides', 'What it cannot conclude'],
164
+ rows: [
165
+ ['Measurement', 'Relative luminance and contrast ratio for two sampled sRGB colors', 'Whether every text edge or background in the game meets a requirement'],
166
+ ['Simulation', 'Protanopia, deuteranopia, and tritanopia transformations based on published matrices', 'The exact visual experience of every individual player'],
167
+ ['Heuristic', 'Blur, downscale, desaturation, reduced contrast, and local edge collapse cues', 'A universal pass score or automatic diagnosis of UI semantics'],
168
+ ['Manual review', 'Prompts and exportable findings tied to the selected screenshot and settings', 'Certification or a replacement for testing with disabled players'],
169
+ ],
170
+ },
171
+ {
172
+ type: 'title',
173
+ level: 2,
174
+ text: 'Choose color probes that represent a player decision',
175
+ },
176
+ {
177
+ type: 'paragraph',
178
+ html: 'Do not sample two colors merely because they look attractive. Probe a pair whose difference changes what the player does: ally and enemy, safe and dangerous, selected and unavailable, healing and damage, or objective and decoration. If the stressed pair collapses, add a shape, icon, label, pattern, position, timing cue, or sound instead of searching only for another hue.',
179
+ },
180
+ {
181
+ type: 'tip',
182
+ title: 'Review the difficult frame',
183
+ html: 'Use a capture from a busy encounter, not a clean mockup. Recheck the same signal over light scenery, dark scenery, motion, effects, damage overlays, and the smallest display size you support.',
184
+ },
185
+ {
186
+ type: 'title',
187
+ level: 2,
188
+ text: 'Read the exported report as a design conversation',
189
+ },
190
+ {
191
+ type: 'paragraph',
192
+ html: 'The JSON report records the lens, stress settings, sampled colors, measured contrast, separation heuristic, and team observations. Attach the PNG comparison sheet to an issue, then describe the gameplay consequence and the redundant cue you plan to add. A useful finding is specific enough for a designer and engineer to reproduce in the same scene.',
193
+ },
194
+ ],
195
+ faq,
196
+ howTo,
197
+ schemas: [softwareApplication, faqPage, howToSchema],
198
+ bibliography: bibliographyEntries,
199
+ };
@@ -0,0 +1,203 @@
1
+ import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { GameUiAccessibilityTesterUI } from '../ui';
4
+ import { bibliographyEntries } from '../bibliography';
5
+
6
+ const slug = 'evaluador-estres-accesibilidad-ui-juegos';
7
+ const title = 'Evaluador de Estrés de Accesibilidad para UI de Juegos';
8
+ const description = 'Inspecciona capturas de pantalla de tu juego localmente con simulaciones de daltonismo, sondas de contraste en HUD, desenfoque, reducción de escala y mapa de calor de bordes.';
9
+
10
+ const faq = [
11
+ {
12
+ question: '¿Esta herramienta certifica que la interfaz de mi juego es accesible?',
13
+ answer: 'No. Combina simulaciones documentadas de visión en color, mediciones deterministas de color, heurísticas de estrés visual y preguntas de revisión. Utiliza los hallazgos para guiar la revisión de diseño y las pruebas con jugadores, no como un certificado formal.',
14
+ },
15
+ {
16
+ question: '¿Mi captura de pantalla sale del navegador?',
17
+ answer: 'No. La imagen se decodifica, muestrea, transforma y exporta completamente dentro de tu navegador. La herramienta solo guarda ajustes de visualización como la lente seleccionada, el zoom y el desenfoque en el almacenamiento local.',
18
+ },
19
+ {
20
+ question: '¿Qué debo medir con las dos sondas de color?',
21
+ answer: 'Elige dos colores que deban comunicar significados distintos, como marcadores de aliado y enemigo, estados activo y desactivado, salud y daño, o dos niveles de rareza. Muestrea píxeles representativos en el mismo contexto de juego.',
22
+ },
23
+ {
24
+ question: '¿Por qué una buena relación de contraste puede requerir revisión manual?',
25
+ answer: 'Un par puede medir bien mientras que un icono pequeño, texto fino, un fondo en movimiento, el desorden visual o una convención basada solo en color siguen siendo difíciles de identificar. La relación describe los colores muestreados, no la interacción completa.',
26
+ },
27
+ {
28
+ question: '¿Qué muestra el mapa de calor?',
29
+ answer: 'El mapa de calor es una heurística de bordes locales. Destaca los píxeles donde la separación RGB cercana cae drásticamente tras aplicar la simulación seleccionada. Permite orientar la atención hacia señales frágiles, pero no identifica la semántica de la interfaz.',
30
+ },
31
+ ];
32
+
33
+ const howTo = [
34
+ { name: 'Cargar una captura local', text: 'Selecciona una captura PNG, JPEG o WebP del juego o menú. La imagen se mantiene en la memoria local de tu navegador.' },
35
+ { name: 'Elegir una lente de estrés', text: 'Compara la captura original con una simulación de visión en color, escala de grises, contraste reducido o desaturación.' },
36
+ { name: 'Estresar la jerarquía y la escala', text: 'Añade desenfoque, reduce la escala de renderizado, aplica zoom a los píxeles o activa el mapa de calor de bordes.' },
37
+ { name: 'Muestrear dos señales críticas', text: 'Selecciona la sonda A o B y haz clic en la imagen original, o define los colores directamente mediante los controles de color.' },
38
+ { name: 'Registrar y exportar hallazgos', text: 'Consulta la guía de revisión, añade tus observaciones y descarga una lámina comparativa junto con el informe estructurado en JSON.' },
39
+ ];
40
+
41
+ const softwareApplication: WithContext<SoftwareApplication> = {
42
+ '@context': 'https://schema.org',
43
+ '@type': 'SoftwareApplication',
44
+ name: title,
45
+ applicationCategory: 'DeveloperApplication',
46
+ operatingSystem: 'Any',
47
+ };
48
+
49
+ const faqPage: WithContext<FAQPage> = {
50
+ '@context': 'https://schema.org',
51
+ '@type': 'FAQPage',
52
+ mainEntity: faq.map((item) => ({
53
+ '@type': 'Question',
54
+ name: item.question,
55
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
56
+ })),
57
+ };
58
+
59
+ const howToSchema: WithContext<HowTo> = {
60
+ '@context': 'https://schema.org',
61
+ '@type': 'HowTo',
62
+ name: title,
63
+ step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
64
+ };
65
+
66
+ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
67
+ slug,
68
+ title,
69
+ description,
70
+ ui: {
71
+ onboarding: 'Carga una captura de pantalla del juego, elige una lente de estrés y compara dos señales que el jugador deba diferenciar. Empieza comparando aliado contra enemigo, estados de salud, rareza, elementos interactivos o marcadores del minimapa.',
72
+ privacyNote: 'Mesa óptica local. Las capturas de pantalla no se suben a ningún servidor.',
73
+ dropTitle: 'Arrastra una captura del juego o interfaz a la mesa óptica',
74
+ dropHint: 'Arrastra una imagen aquí o elígela desde tu dispositivo. Utiliza un momento representativo con fondos reales y desorden visual.',
75
+ chooseImage: 'Elegir captura',
76
+ replaceImage: 'Reemplazar captura',
77
+ supportedFiles: 'PNG, JPEG o WebP de hasta 16 MB. Las imágenes grandes se reducen a un borde de análisis de 1600 px.',
78
+ lensLabel: 'Lente de simulación',
79
+ lensOriginal: 'Original',
80
+ lensProtanopia: 'Protanopía',
81
+ lensDeuteranopia: 'Deuteranopía',
82
+ lensTritanopia: 'Tritanopía',
83
+ lensAchromatopsia: 'Escala de grises',
84
+ lensReducedContrast: 'Contraste reducido',
85
+ lensDesaturation: 'Desaturación',
86
+ compareLabel: 'Modo de comparación',
87
+ compareSideBySide: 'Lado a lado',
88
+ compareSplit: 'Lente dividida',
89
+ comparePress: 'Mantener para revelar',
90
+ holdOriginal: 'Mantener para ver original',
91
+ splitPosition: 'Posición de lente',
92
+ stressLabel: 'Controles de estrés de señal',
93
+ blurLabel: 'Desenfoque en píxeles',
94
+ downscaleLabel: 'Vista en pantalla pequeña',
95
+ downscaleFull: 'Completa',
96
+ downscaleHalf: 'Mitad',
97
+ downscaleQuarter: 'Un cuarto',
98
+ downscaleEighth: 'Un octavo',
99
+ zoomLabel: 'Zoom de inspección de píxeles',
100
+ heatmapLabel: 'Mapa de calor de bordes',
101
+ heatmapHint: 'Destaca separaciones locales que se reducen drásticamente con la lente activa.',
102
+ originalView: 'Campo de señal original',
103
+ simulatedView: 'Campo de señal bajo estrés',
104
+ emptyCanvas: 'Selecciona una captura para activar el campo de comparación. Tu imagen permanecerá en este dispositivo.',
105
+ sampleTitle: 'Sondas de señal crítica',
106
+ sampleInstructions: 'Selecciona A o B y haz clic en la imagen original. Compara colores que codifiquen acciones o estados distintos para el jugador.',
107
+ sampleA: 'Sonda A',
108
+ sampleB: 'Sonda B',
109
+ sampleAName: 'Significado de sonda A',
110
+ sampleBName: 'Significado de sonda B',
111
+ manualColor: 'Definir color directamente',
112
+ sampleAInitial: 'Marcador aliado',
113
+ sampleBInitial: 'Marcador enemigo',
114
+ noSample: 'Esperando captura de pantalla',
115
+ originalContrast: 'Contraste original',
116
+ simulatedContrast: 'Contraste bajo estrés',
117
+ separationRetained: 'Separación conservada',
118
+ statusStrong: 'La señal se mantiene distinta',
119
+ statusWatch: 'Inspeccionar en contexto',
120
+ statusReview: 'Revisar diseño de señal',
121
+ statusPending: 'Sin análisis todavía',
122
+ measurementLabel: 'Medición',
123
+ heuristicLabel: 'Heurística',
124
+ manualReviewLabel: 'Estado de revisión manual',
125
+ measurementHint: 'El contraste utiliza la fórmula de luminancia relativa WCAG para los dos colores sRGB muestreados. Solo describe este par y es más significativo cuando los colores están en contacto.',
126
+ heuristicHint: 'La separación conservada compara la distancia RGB lineal antes y después de la lente. Es una advertencia orientativa, no un umbral perceptivo ni una condición de aprobado.',
127
+ promptTitle: 'Guía de revisión de interfaz',
128
+ promptColorOnly: '¿Pueden los jugadores identificar aliado, enemigo, advertencia, éxito y fallo sin depender exclusivamente del tono?',
129
+ promptChangingBackground: '¿El texto se mantiene legible sobre los fondos más brillantes, oscuros y saturados del juego?',
130
+ promptMinimap: '¿Los marcadores del minimapa se diferencian por forma, etiqueta, posición o patrón además del color?',
131
+ promptStates: '¿Los estados seleccionado, desactivado, no disponible, tiempo de recarga, salud y daño siguen siendo inequívocos?',
132
+ promptShape: '¿Un icono, etiqueta, patrón, animación, posición o sonido refuerza cada señal de color crítica?',
133
+ findingLabel: 'Hallazgo del equipo',
134
+ findingPlaceholder: 'Ejemplo: El contorno enemigo desaparece sobre la viñeta de daño',
135
+ addFinding: 'Añadir hallazgo',
136
+ findingsEmpty: 'No hay hallazgos registrados. Utiliza la guía como primera pasada de revisión.',
137
+ exportSheet: 'Descargar lámina comparativa',
138
+ exportReport: 'Descargar informe estructurado',
139
+ resetTool: 'Limpiar sesión',
140
+ uploadError: 'No se pudo leer esta imagen. Selecciona un archivo PNG, JPEG o WebP válido.',
141
+ fileTooLarge: 'La imagen supera los 16 MB. Exporta una captura más pequeña y vuelve a intentarlo.',
142
+ imageReady: 'Captura cargada localmente. Muestrea dos señales críticas para iniciar la revisión.',
143
+ reportDownloaded: 'Informe estructurado de hallazgos descargado.',
144
+ sheetDownloaded: 'Lámina comparativa descargada.',
145
+ localOnlyDisclosure: 'La decodificación, simulación, muestreo, mapa de calor y exportaciones se ejecutan en este navegador. Solo los ajustes de visualización se guardan localmente.',
146
+ limitationDisclosure: 'Esta herramienta ayuda en la revisión de diseño. Las simulaciones son modelos, el desenfoque y los mapas de calor son heurísticas, y ningún resultado certifica accesibilidad ni sustituye las pruebas con jugadores.',
147
+ reportTitle: 'Lámina de revisión de accesibilidad UI de juego',
148
+ reportFindingReview: 'El par de señales muestreado pierde un contraste o separación de color sustancial bajo la lente seleccionada. Revísalo en el contexto completo de juego.',
149
+ },
150
+ seo: [
151
+ {
152
+ type: 'title',
153
+ level: 2,
154
+ text: 'Cómo evaluar la accesibilidad en interfaces de juegos sin subir capturas',
155
+ },
156
+ {
157
+ type: 'paragraph',
158
+ html: 'La interfaz de un videojuego comunica en condiciones de alta presión visual: la salud cambia mientras la cámara rota, los marcadores enemigos se cruzan sobre escenarios brillantes, los colores de rareza compiten con efectos de partículas y los iconos del minimapa se reducen a pocos píxeles. Este evaluador local mantiene la captura en tu navegador y te permite inspeccionar esas combinaciones reales mediante simulaciones de visión en color y condiciones de estrés práctico.',
159
+ },
160
+ {
161
+ type: 'title',
162
+ level: 2,
163
+ text: 'Mediciones, heurísticas y juicio humano responden a preguntas distintas',
164
+ },
165
+ {
166
+ type: 'table',
167
+ headers: ['Tipo de evidencia', 'Lo que ofrece este evaluador', 'Lo que no permite concluir'],
168
+ rows: [
169
+ ['Medición', 'Luminancia relativa y relación de contraste para dos colores sRGB muestreados', 'Si cada borde de texto o fondo del juego cumple una normativa'],
170
+ ['Simulación', 'Transformaciones de protanopía, deuteranopía y tritanopía según matrices publicadas', 'La experiencia visual exacta de cada jugador individual'],
171
+ ['Heurística', 'Desenfoque, reducción de escala, desaturación, contraste reducido y colapso de bordes', 'Una puntuación universal de aprobado o un diagnóstico automático'],
172
+ ['Revisión manual', 'Preguntas de guía y hallazgos exportables vinculados a la captura y ajustes', 'Certificación formal o sustitución de pruebas con jugadores'],
173
+ ],
174
+ },
175
+ {
176
+ type: 'title',
177
+ level: 2,
178
+ text: 'Selecciona sondas de color que representen una decisión del jugador',
179
+ },
180
+ {
181
+ type: 'paragraph',
182
+ html: 'No muestrees dos colores simplemente porque parezcan atractivos. Elige un par cuya diferencia modifique la acción del jugador: aliado y enemigo, seguro y peligroso, seleccionado y no disponible, curación y daño, u objetivo y elemento decorativo. Si el par pierde diferenciación bajo estrés, añade una forma, icono, etiqueta, patrón, posición o señal sonora en lugar de buscar únicamente otro tono.',
183
+ },
184
+ {
185
+ type: 'tip',
186
+ title: 'Evalúa el fotograma más complejo',
187
+ html: 'Utiliza una captura tomada durante un combate u momento cargado de acción, no un diseño estático limpio. Revisa la misma señal sobre escenarios claros, oscuros, con movimiento, efectos visuales, superposiciones de daño y la escala de pantalla más pequeña que soportes.',
188
+ },
189
+ {
190
+ type: 'title',
191
+ level: 2,
192
+ text: 'Interpreta el informe exportado como una conversación de diseño',
193
+ },
194
+ {
195
+ type: 'paragraph',
196
+ html: 'El informe en JSON registra la lente, los ajustes de estrés, los colores muestreados, el contraste medido, la heurística de separación y las observaciones del equipo. Adjunta la lámina comparativa en PNG a una tarea o incidencia y describe la consecuencia en el juego junto con la señal redundante que planeas implementar.',
197
+ },
198
+ ],
199
+ faq,
200
+ howTo,
201
+ schemas: [softwareApplication, faqPage, howToSchema],
202
+ bibliography: bibliographyEntries,
203
+ };