Added landscape wallpaper

components/system/Desktop/Wallpapers/ShaderToy/CoastalLandscape/index.ts

@@ -0,0 +1,30 @@
+import { loadFiles } from "utils/functions";
+
+declare global {
+  interface Window {
+    effectInit: (canvas: HTMLCanvasElement) => void;
+  }
+}
+
+export const libs = [
+  "/System/ShaderToy/CoastalLandscape/piLibs.js",
+  "/System/ShaderToy/CoastalLandscape/effect.js",
+  "/System/ShaderToy/CoastalLandscape/init.js",
+];
+
+const CoastalLandscape = async (el?: HTMLElement | null): Promise<void> => {
+  if (!el) return;
+
+  await loadFiles(libs);
+
+  const canvas = document.createElement("canvas");
+
+  canvas.height = window.innerHeight;
+  canvas.width = window.innerWidth;
+
+  window.effectInit(canvas);
+
+  el.appendChild(canvas);
+};
+
+export default CoastalLandscape;

components/system/Desktop/Wallpapers/ShaderToy/CoastalLandscape/wallpaper.worker.ts

@@ -0,0 +1,33 @@
+import { libs } from "components/system/Desktop/Wallpapers/ShaderToy/CoastalLandscape";
+import type { OffscreenRenderProps } from "components/system/Desktop/Wallpapers/types";
+import { isWebGLAvailable } from "utils/functions";
+
+/* eslint-disable vars-on-top, no-var  */
+declare global {
+  var effectInit: (canvas: OffscreenCanvas) => void;
+  var updateLandscapeSize: () => void;
+  var demoCanvasRect: DOMRect;
+  var devicePixelRatio: number;
+}
+/* eslint-enable vars-on-top, no-var */
+
+globalThis.addEventListener(
+  "message",
+  ({ data }: { data: DOMRect | OffscreenRenderProps | string }) => {
+    if (!isWebGLAvailable) return;
+
+    if (data === "init") {
+      globalThis.importScripts(...libs);
+    } else if (data instanceof DOMRect) {
+      globalThis.demoCanvasRect = data;
+      globalThis.updateLandscapeSize();
+    } else {
+      const { canvas, devicePixelRatio } = data as OffscreenRenderProps;
+
+      globalThis.devicePixelRatio = devicePixelRatio;
+
+      globalThis.effectInit(canvas);
+    }
+  },
+  { passive: true }
+);

components/system/Desktop/Wallpapers/useWallpaper.ts

@@ -1,4 +1,5 @@
 import hexells from "components/system/Desktop/Wallpapers/hexells";
+import coastalLandscape from "components/system/Desktop/Wallpapers/ShaderToy/CoastalLandscape";
 import vantaWaves from "components/system/Desktop/Wallpapers/vantaWaves";
 import { config } from "components/system/Desktop/Wallpapers/vantaWaves/config";
 import { useFileSystem } from "contexts/fileSystem";
@@ -29,6 +30,14 @@ const cssFit: Record<WallpaperFit, string> = {
 };
 
 const WALLPAPER_WORKERS: Record<string, () => Worker> = {
+  COASTAL_LANDSCAPE: (): Worker =>
+    new Worker(
+      new URL(
+        "components/system/Desktop/Wallpapers/ShaderToy/CoastalLandscape/wallpaper.worker",
+        import.meta.url
+      ),
+      { name: "Wallpaper (Coastal Landscape)" }
+    ),
   HEXELLS: (): Worker =>
     new Worker(
       new URL(
@@ -83,6 +92,8 @@ const useWallpaper = (
         vantaWaves(config)(desktopRef.current);
       } else if (wallpaperImage === "HEXELLS") {
         hexells(desktopRef.current);
+      } else if (wallpaperImage === "COASTAL_LANDSCAPE") {
+        coastalLandscape(desktopRef.current);
       } else {
         setWallpaper("VANTA");
       }

components/system/Files/FileManager/useFolderContextMenu.ts

@@ -106,6 +106,11 @@ const useFolderContextMenu = (
                   label: "APOD",
                   toggle: wallpaperImage.startsWith("APOD"),
                 },
+                {
+                  action: () => setWallpaper("COASTAL_LANDSCAPE"),
+                  label: "Coastal Landscape",
+                  toggle: wallpaperImage === "COASTAL_LANDSCAPE",
+                },
                 {
                   action: () => setWallpaper("HEXELLS"),
                   label: "Hexells",