Skip to content

Commit 6c03b92

Browse files
danielhjacobsdanielhjacobs
committed
i18n: Translate avm2 page
1 parent 1ab4da2 commit 6c03b92

File tree

6 files changed

+167
-101
lines changed

6 files changed

+167
-101
lines changed

‎src/app/compatibility/avm2/class_box.tsx

+12-5
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ import classes from "./avm2.module.css";
1414
import React from "react";
1515
import {
1616
ClassStatus,
17-
ProgressIcon,
1817
displayedPercentage,
1918
} from "@/app/compatibility/avm2/report_utils";
19+
import { ProgressIcon } from "@/app/compatibility/avm2/icons";
20+
import { useTranslation } from "@/app/translate";
2021

2122
export function ClassBox(props: ClassStatus) {
23+
const { t } = useTranslation();
2224
const [opened, { toggle }] = useDisclosure(false);
2325
const pctDone = displayedPercentage(
2426
props.summary.impl_points - props.summary.stub_penalty,
@@ -33,21 +35,23 @@ export function ClassBox(props: ClassStatus) {
3335
);
3436
return (
3537
<Card bg="var(--ruffle-blue-9)" className={classes.class}>
36-
<Title order={4}>{props.name || "(Package level)"}</Title>
38+
<Title order={4}>
39+
{props.name || t("compatibility.avm2.package-level")}
40+
</Title>
3741
<ProgressRoot size="xl" radius={10} className={classes.progress}>
3842
<ProgressSection
3943
striped
4044
value={pctDone}
4145
color="var(--mantine-color-green-9)"
42-
title={`${pctDone}% done`}
46+
title={`${pctDone}% ${t("compatibility.done")}`}
4347
></ProgressSection>
4448
{pctStub > 0 && (
4549
<ProgressSection
4650
striped
4751
value={pctStub}
4852
color="ruffle-orange"
4953
className={classes.progressStub}
50-
title={`${pctStub}% partially done`}
54+
title={`${pctStub}% ${t("compatibility.partial")}`}
5155
></ProgressSection>
5256
)}
5357
</ProgressRoot>
@@ -58,7 +62,10 @@ export function ClassBox(props: ClassStatus) {
5862
className={classes.showMemberButton}
5963
onClick={toggle}
6064
>
61-
{opened ? "Hide" : "Show"} Missing Members
65+
{opened
66+
? t("compatibility.avm2.hide")
67+
: t("compatibility.avm2.show")}{" "}
68+
{t("compatibility.avm2.missing-members")}
6269
</Button>
6370
<List hidden={!opened}>
6471
{props.items.map((item, i) => (

‎src/app/compatibility/avm2/icons.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
"use client";
2+
3+
import { rem, ThemeIcon } from "@mantine/core";
4+
import { IconCheck, IconProgress, IconX } from "@tabler/icons-react";
5+
import { useTranslation } from "@/app/translate";
6+
7+
export function IconDone() {
8+
const { t } = useTranslation();
9+
return (
10+
<ThemeIcon
11+
size={20}
12+
radius="xl"
13+
color="var(--mantine-color-green-9)"
14+
title={t("compatibility.avm2.done")}
15+
>
16+
<IconCheck
17+
color="white"
18+
style={{ width: rem(12), height: rem(12) }}
19+
stroke={4}
20+
/>
21+
</ThemeIcon>
22+
);
23+
}
24+
25+
export function IconStub() {
26+
const { t } = useTranslation();
27+
return (
28+
<ThemeIcon size={20} radius="xl" title={t("compatibility.avm2.partial")}>
29+
<IconProgress
30+
color="#3c1518"
31+
style={{ width: rem(12), height: rem(12) }}
32+
stroke={4}
33+
/>
34+
</ThemeIcon>
35+
);
36+
}
37+
38+
export function IconMissing() {
39+
const { t } = useTranslation();
40+
return (
41+
<ThemeIcon
42+
size={20}
43+
radius="xl"
44+
color="#3c1518"
45+
title={t("compatibility.avm2.missing")}
46+
>
47+
<IconX
48+
color="white"
49+
style={{ width: rem(12), height: rem(12) }}
50+
stroke={4}
51+
/>
52+
</ThemeIcon>
53+
);
54+
}
55+
56+
export function ProgressIcon(type: "stub" | "missing" | "done") {
57+
switch (type) {
58+
case "stub":
59+
return <IconStub />;
60+
case "missing":
61+
return <IconMissing />;
62+
case "done":
63+
return <IconDone />;
64+
}
65+
}

‎src/app/compatibility/avm2/page.tsx

+63-34
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import {
24
Container,
35
Group,
@@ -8,22 +10,26 @@ import {
810
Title,
911
} from "@mantine/core";
1012
import Image from "next/image";
11-
import React from "react";
13+
import React, { useEffect, useState } from "react";
1214
import classes from "./avm2.module.css";
1315
import { ClassBox } from "@/app/compatibility/avm2/class_box";
1416
import {
1517
getReportByNamespace,
18+
NamespaceStatus,
19+
} from "@/app/compatibility/avm2/report_utils";
20+
import {
1621
IconDone,
1722
IconMissing,
1823
IconStub,
19-
NamespaceStatus,
20-
} from "@/app/compatibility/avm2/report_utils";
24+
} from "@/app/compatibility/avm2/icons";
2125
import Link from "next/link";
26+
import { useTranslation, Trans } from "@/app/translate";
2227

2328
function NamespaceBox(props: NamespaceStatus) {
29+
const { t } = useTranslation();
2430
return (
2531
<Stack className={classes.namespace}>
26-
<Title order={2}>{props.name || "(Top Level)"}</Title>
32+
<Title order={2}>{props.name || t("compatibility.avm2.top-level")}</Title>
2733
<Group align="baseline">
2834
{Object.entries(props.classes).map(([classname, classinfo]) => (
2935
<ClassBox key={classname} {...classinfo} />
@@ -33,8 +39,22 @@ function NamespaceBox(props: NamespaceStatus) {
3339
);
3440
}
3541

36-
export default async function Page() {
37-
const byNamespace = await getReportByNamespace();
42+
export default function Page() {
43+
const { t } = useTranslation();
44+
const [byNamespace, setByNamespace] = useState<
45+
{ [name: string]: NamespaceStatus } | undefined
46+
>(undefined);
47+
useEffect(() => {
48+
const fetchData = async () => {
49+
try {
50+
const byNamespace = await getReportByNamespace();
51+
setByNamespace(byNamespace);
52+
} catch (error) {
53+
console.error("Error fetching data", error);
54+
}
55+
};
56+
fetchData();
57+
}, []);
3858
return (
3959
<Container size="xl">
4060
<Stack gap="xl">
@@ -48,43 +68,52 @@ export default async function Page() {
4868
className={classes.progressImage}
4969
/>
5070
<Stack className={classes.actionscriptInfo}>
51-
<Title className={classes.title}>ActionScript 3 API Progress</Title>
52-
<Text>
53-
ActionScript 3 contains many different methods and classes - not
54-
all of which is ultimately <i>useful</i> to every application. The
55-
majority of content only uses a small portion of the available
56-
API, so even if we aren&apos;t 100% &quot;complete&quot; across
57-
the entirely of AVM 2, we may have enough for that content to run
58-
completely fine.
59-
</Text>
60-
<Text>
61-
On this page, we list every single ActionScript 3 API that exists
62-
but Ruffle does not yet 100% implement. We classify items into
63-
three different stages:
64-
</Text>
71+
<Title className={classes.title}>
72+
{t("compatibility.avm2.title")}
73+
</Title>
74+
<Text>{t("compatibility.avm2.description")}</Text>
75+
<Text>{t("compatibility.avm2.classification")}</Text>
6576
<List spacing="sm">
6677
<ListItem icon={<IconDone />}>
67-
<b>Implemented</b> items are marked as &quot;Done&quot;, and we
68-
believe they are fully functional. For brevity, we do not list
69-
completed items on this page.
78+
<Trans
79+
i18nKey="compatibility.avm2.implemented-description"
80+
components={[
81+
<b key="implemented">
82+
{t("compatibility.avm2.implemented")}
83+
</b>,
84+
]}
85+
/>
7086
</ListItem>
7187
<ListItem icon={<IconStub />}>
72-
<b>Partial</b> items exist and are enough for most content to
73-
work, but are incomplete. A partial class may be missing items,
74-
or a method may just simply return a value without performing
75-
its intended function.
88+
<Trans
89+
i18nKey="compatibility.avm2.partial-description"
90+
components={[
91+
<b key="partial">{t("compatibility.avm2.partial")}</b>,
92+
]}
93+
/>
7694
</ListItem>
7795
<ListItem icon={<IconMissing />}>
78-
<b>Missing</b> items do not exist at all in Ruffle yet, and
79-
trying to use them will give an error.
96+
<Trans
97+
i18nKey="compatibility.avm2.missing-description"
98+
components={[
99+
<b key="missing">{t("compatibility.avm2.missing")}</b>,
100+
]}
101+
/>
80102
</ListItem>
81103
</List>
82104
<Text>
83-
You can also visualize the progress{" "}
84-
<Link href="/compatibility/avm2/tree.svg" target="_blank">
85-
as a tree graph
86-
</Link>
87-
.
105+
<Trans
106+
i18nKey="compatibility.avm2.tree"
107+
components={[
108+
<Link
109+
key="link"
110+
href="/compatibility/avm2/tree.svg"
111+
target="_blank"
112+
>
113+
{t("compatibility.avm2.tree-link")}
114+
</Link>,
115+
]}
116+
/>
88117
</Text>
89118
</Stack>
90119
</Group>

‎src/app/compatibility/avm2/report_utils.tsx

+3-57
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,4 @@
1-
import { rem, ThemeIcon } from "@mantine/core";
2-
import { IconCheck, IconProgress, IconX } from "@tabler/icons-react";
3-
import { fetchReport } from "@/app/downloads/github";
4-
import React from "react";
5-
6-
export function IconDone() {
7-
return (
8-
<ThemeIcon
9-
size={20}
10-
radius="xl"
11-
color="var(--mantine-color-green-9)"
12-
title="Done"
13-
>
14-
<IconCheck
15-
color="white"
16-
style={{ width: rem(12), height: rem(12) }}
17-
stroke={4}
18-
/>
19-
</ThemeIcon>
20-
);
21-
}
22-
23-
export function IconStub() {
24-
return (
25-
<ThemeIcon size={20} radius="xl" title="Partial">
26-
<IconProgress
27-
color="#3c1518"
28-
style={{ width: rem(12), height: rem(12) }}
29-
stroke={4}
30-
/>
31-
</ThemeIcon>
32-
);
33-
}
34-
35-
export function IconMissing() {
36-
return (
37-
<ThemeIcon size={20} radius="xl" color="#3c1518" title="Missing">
38-
<IconX
39-
color="white"
40-
style={{ width: rem(12), height: rem(12) }}
41-
stroke={4}
42-
/>
43-
</ThemeIcon>
44-
);
45-
}
46-
47-
export function ProgressIcon(type: "stub" | "missing" | "done") {
48-
switch (type) {
49-
case "stub":
50-
return <IconStub />;
51-
case "missing":
52-
return <IconMissing />;
53-
case "done":
54-
return <IconDone />;
55-
}
56-
}
1+
import type { AVM2Report } from "@/app/downloads/config";
572

583
export interface SummaryStatistics {
594
max_points: number;
@@ -82,7 +27,8 @@ export async function getReportByNamespace(): Promise<
8227
{ [name: string]: NamespaceStatus } | undefined
8328
> {
8429
let byNamespace: { [name: string]: NamespaceStatus } = {};
85-
const report = await fetchReport();
30+
const reportReq = await fetch("/compatibility/fetch-report");
31+
const report: AVM2Report = await reportReq.json();
8632
if (!report) {
8733
return;
8834
}

‎src/app/compatibility/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export default function Downloads() {
108108
className={classes.avms}
109109
>
110110
<AvmBlock
111-
name="compatibility.avm1"
111+
name="compatibility.avm1-title"
112112
language={{ done: 95 }}
113113
api={{ done: avm1ApiDone }}
114114
info_link_target="_blank"
@@ -119,7 +119,7 @@ export default function Downloads() {
119119
</AvmBlock>
120120

121121
<AvmBlock
122-
name="compatibility.avm2"
122+
name="compatibility.avm2-title"
123123
language={{ done: 90 }}
124124
api={{ done: avm2ApiDone, stubbed: avm2ApiStubbed }}
125125
info_link="/compatibility/avm2"

‎src/i18n/translations.en.json

+22-3
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,35 @@
8383
"language": "Language",
8484
"api-description": "The {{api}} is the underlying virtual machine itself and the language concepts that it understands, like variables and classes and how they all interact together.",
8585
"api": "API",
86-
"avm1": "AVM 1: ActionScript 1 & 2",
86+
"avm1-title": "AVM 1: ActionScript 1 & 2",
8787
"avm1-description": "AVM 1 is the original ActionScript Virtual Machine. All movies made before Flash Player 9 (June 2006) will be made with AVM 1, and it remained supported & available to authors until the release of Flash Professional CC (2013), after which point content started moving to AVM 2.",
8888
"avm1-support": "We believe that most AVM 1 content will work, but we are aware of some graphical inaccuracies and smaller bugs here and there. Please feel free to report any issues you find that are not present in the original Flash Player!",
89-
"avm2": "AVM 2: ActionScript 3",
89+
"avm2-title": "AVM 2: ActionScript 3",
9090
"avm2-description": "AVM 2 was introduced with Flash Player 9 (June 2006), to replace the earlier AVM 1. After the release of Flash Professional CC (2013), authors are required to use ActionScript 3 - making any movie made after that date very likely to fall under this category.",
9191
"avm2-support": "Ruffle now has decent support for AVM 2, and it's our experience that most games will work well enough to be played. We're still rapidly improving in this area though, so bug reports about any broken content are always welcome!",
9292
"weekly-contributions": "Weekly Contributions",
9393
"done": "done",
9494
"partial": "partially done",
9595
"more": "More Info",
96-
"commits-description": "{{commitNumber}} commits on the week of {{week}}"
96+
"commits-description": "{{commitNumber}} commits on the week of {{week}}",
97+
"avm2": {
98+
"title": "ActionScript 3 API Progress",
99+
"description": "ActionScript 3 contains many different methods and classes - not all of which is ultimately useful to every application. The majority of content only uses a small portion of the available API, so even if we aren't 100% \"complete\" across the entirely of AVM 2, we may have enough for that content to run completely fine.",
100+
"classification": "On this page, we list every single ActionScript 3 API that exists but Ruffle does not yet 100% implement. We classify items into three different stages:",
101+
"implemented": "Implemented",
102+
"implemented-description": "{{implemented}} items are marked as \"Done\", and we believe they are fully functional. For brevity, we do not list completed items on this page.",
103+
"partial": "Partial",
104+
"partial-description": "{{partial}} items exist and are enough for most content to work, but are incomplete. A partial class may be missing items, or a method may just simply return a value without performing its intended function.",
105+
"missing": "Missing",
106+
"missing-description": "{{missing}} items do not exist at all in Ruffle yet, and trying to use them will give an error.",
107+
"tree": "You can also visualize the progress {{link}}.",
108+
"tree-link": "as a tree graph",
109+
"top-level": "(Top Level)",
110+
"package-level": "(Package Level)",
111+
"hide": "Hide",
112+
"show": "Show",
113+
"missing-members": "Missing Members",
114+
"done": "Done"
115+
}
97116
}
98117
}

0 commit comments

Comments
 (0)