impr(settings): Allow webp format for background images (@fehmer) (monkeytypegame#6896)

Author: fehmer

frontend/__tests__/root/config.spec.ts

@@ -751,7 +751,7 @@ describe("Config", () => {
       Config.setCustomBackground("     http://example.com/test.png   ")
     ).toBe(true);
 
-    expect(Config.setCustomBackground("http://www.example.com/test.webp")).toBe(
+    expect(Config.setCustomBackground("http://www.example.com/test.tiff")).toBe(
       false
     );
     expect(

frontend/src/html/pages/settings.html

@@ -1376,7 +1376,7 @@
           <input
             type="file"
             id="customBackgroundUpload"
-            accept="image/png,image/jpeg,image/jpg,image/gif"
+            accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
             style="display: none"
           />
         </div>

frontend/src/ts/commandline/lists/custom-background.ts

@@ -42,7 +42,7 @@ const customBackgroundCommand: Command = {
             }
 
             // check type
-            if (!file.type.match(/image\/(jpeg|jpg|png|gif)/)) {
+            if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
               Notifications.add("Unsupported image format", 0);
               cleanup();
               return;

frontend/src/ts/elements/settings/custom-background-picker.ts

@@ -52,7 +52,7 @@ uploadContainerEl
     }
 
     // check type
-    if (!file.type.match(/image\/(jpeg|jpg|png|gif)/)) {
+    if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
       Notifications.add("Unsupported image format", 0);
       fileInput.value = "";
       return;

packages/schemas/src/configs.ts

@@ -345,7 +345,7 @@ export const CustomBackgroundSchema = z
   .url("Needs to be an URI.")
   .regex(/^(https|http):\/\/.*/, "Unsupported protocol.")
   .regex(/^[^`'"]*$/, "May not contain quotes.")
-  .regex(/.+(\.png|\.gif|\.jpeg|\.jpg)/gi, "Unsupported image format.")
+  .regex(/.+(\.png|\.gif|\.jpeg|\.jpg|\.webp)/gi, "Unsupported image format.")
   .max(2048, "URL is too long.")
   .or(z.literal(""));
 export type CustomBackground = z.infer<typeof CustomBackgroundSchema>;