Skip to content

Commit a4b7c00

Browse files
notTamionMiodecfehmer
authored
impr: allow multiple funboxes with css (@notTamion, @Miodec, @fehmer) (monkeytypegame#6017)
### Description Allows enabling multiple funboxes that have a stylesheet. Which funboxes should be deemed compatible with each other will need some discussion --------- Co-authored-by: Jack <[email protected]> Co-authored-by: Christian Fehmer <[email protected]>
1 parent a4b6c17 commit a4b7c00

File tree

13 files changed

+164
-39
lines changed

13 files changed

+164
-39
lines changed

‎frontend/src/email-handler.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<!-- <link rel="stylesheet" href="css/fa.css" /> -->
88
<link rel="stylesheet" href="css/balloon.min.css" />
99
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
10-
<link rel="stylesheet" href="" id="funBoxTheme" />
1110
<link id="favicon" rel="shortcut icon" href="images/fav.png" />
1211
<link rel="shortcut icon" href="images/fav.png" />
1312
<link

‎frontend/src/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@
6565
defer
6666
></script>
6767
<link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
68-
<link rel="stylesheet" href="" id="funBoxTheme" />
6968
<link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
7069
<script type="module" src="ts/index.ts"></script>
7170
</body>

‎frontend/src/privacy-policy.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<!-- <link rel="stylesheet" href="css/fa.css" /> -->
88
<link rel="stylesheet" href="css/balloon.min.css" />
99
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
10-
<link rel="stylesheet" href="" id="funBoxTheme" />
1110
<link id="favicon" rel="shortcut icon" href="images/fav.png" />
1211
<link rel="shortcut icon" href="images/fav.png" />
1312
<link rel="stylesheet" href="styles/index.scss" />

‎frontend/src/security-policy.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<!-- <link rel="stylesheet" href="css/fa.css" /> -->
88
<link rel="stylesheet" href="css/balloon.min.css" />
99
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
10-
<link rel="stylesheet" href="" id="funBoxTheme" />
1110
<link id="favicon" rel="shortcut icon" href="images/fav.png" />
1211
<link rel="shortcut icon" href="images/fav.png" />
1312
<link rel="stylesheet" href="styles/index.scss" />

‎frontend/src/terms-of-service.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<!-- <link rel="stylesheet" href="css/fa.css" /> -->
88
<link rel="stylesheet" href="css/balloon.min.css" />
99
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
10-
<link rel="stylesheet" href="" id="funBoxTheme" />
1110
<link id="favicon" rel="shortcut icon" href="images/fav.png" />
1211
<link rel="shortcut icon" href="images/fav.png" />
1312
<link rel="stylesheet" href="styles/index.scss" />

‎frontend/src/ts/test/funbox/funbox.ts‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export async function clear(): Promise<boolean> {
7272
?.join(" ") ?? ""
7373
);
7474

75-
$("#funBoxTheme").removeAttr("href");
75+
$(".funBoxTheme").remove();
7676

7777
$("#wordsWrapper").removeClass("hidden");
7878
MemoryTimer.reset();
@@ -237,23 +237,15 @@ async function setFunboxBodyClasses(): Promise<boolean> {
237237
}
238238

239239
async function applyFunboxCSS(): Promise<boolean> {
240-
const $theme = $("#funBoxTheme");
241-
242-
//currently we only support one active funbox with hasCSS
243-
const activeFunboxWithTheme = getActiveFunboxes().find((fb) =>
244-
fb?.properties?.includes("hasCssFile")
245-
);
246-
247-
const activeTheme =
248-
activeFunboxWithTheme != null
249-
? "funbox/" + activeFunboxWithTheme.name + ".css"
250-
: "";
251-
252-
const currentTheme = ($theme.attr("href") ?? "") || null;
253-
254-
if (activeTheme != currentTheme) {
255-
$theme.attr("href", activeTheme);
240+
$(".funBoxTheme").remove();
241+
for (const funbox of getActiveFunboxes()) {
242+
if (funbox.properties?.includes("hasCssFile")) {
243+
const css = document.createElement("link");
244+
css.classList.add("funBoxTheme");
245+
css.rel = "stylesheet";
246+
css.href = "funbox/" + funbox.name + ".css";
247+
document.head.appendChild(css);
248+
}
256249
}
257-
258250
return true;
259251
}

‎frontend/static/funbox/choo_choo.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@keyframes woah {
1+
@keyframes choochoo {
22
0% {
33
transform: rotateZ(0deg);
44
}
@@ -13,6 +13,6 @@
1313
}
1414

1515
#words {
16-
--correct-letter-animation: woah 2s infinite linear;
17-
--untyped-letter-animation: woah 2s infinite linear;
16+
--correct-letter-animation: choochoo 2s infinite linear;
17+
--untyped-letter-animation: choochoo 2s infinite linear;
1818
}

‎frontend/static/funbox/nausea.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@keyframes woah {
1+
@keyframes nausea {
22
0% {
33
transform: rotateY(-15deg) skewY(10deg) rotateX(-15deg) scaleX(1.2)
44
scaleY(0.9);
@@ -25,7 +25,7 @@
2525
}
2626

2727
#typingTest {
28-
animation: woah 7s infinite cubic-bezier(0.5, 0, 0.5, 1);
28+
animation: nausea 7s infinite cubic-bezier(0.5, 0, 0.5, 1);
2929
}
3030

3131
header {

‎packages/funbox/__test__/validation.spec.ts‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import * as List from "../src/list";
2+
import * as Validation from "../src/validation";
3+
import { FunboxMetadata } from "../src/types";
4+
5+
describe("validation", () => {
6+
describe("checkCompatibility", () => {
7+
const getFunboxMock = vi.spyOn(List, "getFunbox");
8+
9+
beforeEach(() => {
10+
getFunboxMock.mockReset();
11+
});
12+
13+
it("should pass without funboxNames", () => {
14+
//WHEN / THEN
15+
expect(Validation.checkCompatibility([])).toBe(true);
16+
});
17+
18+
it("should fail for undefined funboxNames", () => {
19+
//GIVEN
20+
getFunboxMock.mockReturnValueOnce([
21+
{
22+
name: "plus_one",
23+
} as FunboxMetadata,
24+
undefined as unknown as FunboxMetadata,
25+
]);
26+
27+
//WHEN / THEN
28+
expect(Validation.checkCompatibility(["plus_one", "plus_two"])).toBe(
29+
false
30+
);
31+
});
32+
33+
it("should fail for undefined withFunbox param", () => {
34+
//GIVEN
35+
getFunboxMock
36+
.mockReturnValueOnce([])
37+
.mockReturnValue([undefined as unknown as FunboxMetadata]);
38+
39+
//WHEN / THEN
40+
expect(
41+
Validation.checkCompatibility(["plus_one", "plus_two"], "plus_three")
42+
).toBe(false);
43+
});
44+
45+
it("should check for optional withFunbox param ", () => {
46+
//GIVEN
47+
getFunboxMock
48+
.mockReturnValueOnce([
49+
{
50+
name: "plus_one",
51+
cssModifications: ["body", "main"],
52+
} as FunboxMetadata,
53+
{
54+
name: "plus_two",
55+
} as FunboxMetadata,
56+
])
57+
.mockReturnValueOnce([
58+
{
59+
name: "plus_three",
60+
cssModifications: ["main", "typingTest"],
61+
} as FunboxMetadata,
62+
]);
63+
64+
//WHEN
65+
const result = Validation.checkCompatibility(
66+
["plus_one", "plus_two"],
67+
"plus_three"
68+
);
69+
70+
//THEN
71+
expect(result).toBe(false);
72+
73+
expect(getFunboxMock).toHaveBeenNthCalledWith(1, [
74+
"plus_one",
75+
"plus_two",
76+
]);
77+
expect(getFunboxMock).toHaveBeenNthCalledWith(2, "plus_three");
78+
});
79+
80+
it("should reject two funboxes modifying the same css element", () => {
81+
//GIVEN
82+
getFunboxMock.mockReturnValueOnce([
83+
{
84+
name: "plus_one",
85+
cssModifications: ["body", "main"],
86+
} as FunboxMetadata,
87+
{
88+
name: "plus_two",
89+
cssModifications: ["main", "typingTest"],
90+
} as FunboxMetadata,
91+
]);
92+
93+
//WHEN / THEN
94+
expect(Validation.checkCompatibility(["plus_one", "plus_two"])).toBe(
95+
false
96+
);
97+
});
98+
99+
it("should allow two funboxes modifying different css elements", () => {
100+
//GIVEN
101+
getFunboxMock.mockReturnValueOnce([
102+
{
103+
name: "plus_one",
104+
cssModifications: ["body", "main"],
105+
} as FunboxMetadata,
106+
{
107+
name: "plus_two",
108+
cssModifications: ["words"],
109+
} as FunboxMetadata,
110+
]);
111+
112+
//WHEN / THEN
113+
expect(Validation.checkCompatibility(["plus_one", "plus_two"])).toBe(
114+
true
115+
);
116+
});
117+
});
118+
});

‎packages/funbox/src/list.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,23 @@ const list: Record<FunboxName, FunboxMetadata> = {
2424
properties: ["hasCssFile"],
2525
canGetPb: true,
2626
difficultyLevel: 3,
27+
cssModifications: ["main"],
2728
},
2829
upside_down: {
2930
name: "upside_down",
3031
description: "Everything is upside down!",
3132
properties: ["hasCssFile"],
3233
canGetPb: true,
3334
difficultyLevel: 3,
35+
cssModifications: ["main"],
3436
},
3537
nausea: {
3638
name: "nausea",
3739
description: "I think I'm gonna be sick.",
3840
canGetPb: true,
3941
difficultyLevel: 2,
4042
properties: ["hasCssFile", "ignoreReducedMotion"],
43+
cssModifications: ["typingTest"],
4144
},
4245
round_round_baby: {
4346
name: "round_round_baby",
@@ -46,6 +49,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
4649
canGetPb: true,
4750
difficultyLevel: 3,
4851
properties: ["hasCssFile", "ignoreReducedMotion"],
52+
cssModifications: ["typingTest"],
4953
},
5054
simon_says: {
5155
name: "simon_says",
@@ -69,6 +73,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
6973
frontendFunctions: ["applyConfig", "rememberSettings", "toggleScript"],
7074
name: "tts",
7175
description: "Listen closely.",
76+
cssModifications: ["words"],
7277
},
7378
choo_choo: {
7479
canGetPb: true,
@@ -81,6 +86,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
8186
],
8287
name: "choo_choo",
8388
description: "All the letters are spinning!",
89+
cssModifications: ["words"],
8490
},
8591
arrows: {
8692
description: "Play it on a pad!",
@@ -145,13 +151,15 @@ const list: Record<FunboxName, FunboxMetadata> = {
145151
difficultyLevel: 1,
146152
properties: ["hasCssFile", "noLigatures", "ignoreReducedMotion"],
147153
name: "earthquake",
154+
cssModifications: ["words"],
148155
},
149156
space_balls: {
150157
description: "In a galaxy far far away.",
151158
canGetPb: true,
152159
difficultyLevel: 0,
153160
properties: ["hasCssFile", "ignoreReducedMotion"],
154161
name: "space_balls",
162+
cssModifications: ["body"],
155163
},
156164
gibberish: {
157165
description: "Anvbuefl dizzs eoos alsb?",
@@ -381,6 +389,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
381389
properties: ["hasCssFile", "noLigatures"],
382390
frontendFunctions: ["applyGlobalCSS", "clearGlobal"],
383391
name: "crt",
392+
cssModifications: ["body"],
384393
},
385394
backwards: {
386395
description: "...sdrawkcab epyt ot yrt woN",
@@ -394,6 +403,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
394403
canGetPb: true,
395404
frontendFunctions: ["alterText"],
396405
difficultyLevel: 3,
406+
cssModifications: ["words"],
397407
},
398408
ddoouubblleedd: {
399409
description: "TTyyppee eevveerryytthhiinngg ttwwiiccee..",

0 commit comments

Comments
 (0)